/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: "Inter", system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "Inter", system-ui, sans-serif; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    color-scheme: dark;
  }

  html,
  body {
    background-color: #080D1A;
    color: #E8EEF7;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    background-image:
      radial-gradient(900px 520px at 8% -8%, rgba(31, 43, 74, 0.55), transparent 60%),
      radial-gradient(700px 420px at 102% 18%, rgba(212, 160, 42, 0.05), transparent 60%);
    background-attachment: fixed;
  }

  ::-moz-selection {
    background: rgba(212, 160, 42, 0.35);
    color: #fff;
  }

  ::selection {
    background: rgba(212, 160, 42, 0.35);
    color: #fff;
  }

  /* Scrollbar */
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
/* Typography */
.display {
    font-family: "Urbanist", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
  }
.wordmark {
    font-family: "Urbanist", "Inter", system-ui, sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.04em;
    line-height: 0.95;
  }
.gold-text {
  background-image: linear-gradient(135deg, #F5D98B 0%, #D4A02A 45%, #A47611 72%, #F5D98B 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
/* Surfaces */
.\!card {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(18 26 46 / 0.7);
  --tw-shadow: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 4px 20px -8px rgba(0,0,0,0.6);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color), 0 4px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.card {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(18 26 46 / 0.7);
  --tw-shadow: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 4px 20px -8px rgba(0,0,0,0.6);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color), 0 4px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.panel {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(12 18 34 / 0.7);
}
.hairline {
  position: relative;
}
.hairline::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 1px;
    background-image: linear-gradient(90deg, transparent, rgba(212,160,42,0.55), transparent);
    opacity: 0.7;
  }
/* Buttons */
.btn-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background-image: linear-gradient(135deg, #F5D98B 0%, #D4A02A 45%, #A47611 72%, #F5D98B 100%);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 18px -10px rgba(212,160,42,0.6),inset 0 1px 0 0 rgba(255,255,255,0.3);
  --tw-shadow-colored: 0 6px 18px -10px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.btn-gold:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(231 184 76 / 0.7);
}
.btn-gold:active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.btn-gold {
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.32);
  }
.btn-gold::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -1rem;
    width: 2.5rem;
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: rgb(255 255 255 / 0.35);
    opacity: 0;
    --tw-blur: blur(12px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
.btn-gold:hover::before {
  opacity: 1;
    transform: translateX(360%) skewX(-12deg);
}
.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(24 34 59 / 0.5);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-ghost:hover {
  --tw-border-opacity: 1;
  border-color: rgb(39 52 88 / var(--tw-border-opacity, 1));
  background-color: rgb(31 43 74 / 0.6);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(212 160 42 / 0.4);
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-outline:hover {
  --tw-border-opacity: 1;
  border-color: rgb(231 184 76 / var(--tw-border-opacity, 1));
  background-color: rgb(212 160 42 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(251 233 174 / var(--tw-text-opacity, 1));
}
.btn-icon {
  position: relative;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-icon:hover {
  background-color: rgb(24 34 59 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(18 26 46 / 0.7);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
}
/* Shimmer */
.shimmer {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite;
  }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
/* Shared content container — header, main and footer all respect this */
.container-app {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {

  .container-app {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {

  .container-app {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
/* ── Homepage / Originals game card ──
   *
   * Used by both the PNG-artwork variant and the programmatic SVG
   * fallback. The container clips its children (`overflow: hidden`)
   * so the hover zoom / inner scale never bleeds past the card
   * rectangle — that was the "cardın belirli bir kısmı gözükmüyor"
   * bug in the old version, where an absolutely-positioned icon
   * grew past the aspect frame.
   *
   * Hover effects are STRICTLY on the wrapper (lift + shadow + ring)
   * and on the inner art/icon (scale). No backdrop-blur anywhere —
   * blurring the artwork on hover was the "bulanıklaşıyor" visual
   * issue. The accent ring colour comes from a per-card `--gc-glow`
   * CSS variable (RGB triple like "212 160 42") set inline so every
   * accent shares one style block.
   */
.game-card {
  position: relative;
  display: block;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
    transform: translateZ(0);
    transition:
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Unified gold hover ring — ignore the per-game `--gc-glow` CSS
   * variable here so every card in the grid lights up in the site's
   * brand gold. Keeping the glow var available for ANY future
   * per-accent treatment, but the border/ring/shadow are now
   * consistent across dice, mines, limbo, keno, plinko, hilo, crash,
   * rulet, and blackjack. */
.game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 160, 42, 0.6);
    box-shadow:
      0 18px 34px -16px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(212, 160, 42, 0.38),
      0 0 26px -6px rgba(212, 160, 42, 0.28);
  }
.game-card-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden; /* keeps the inner scale contained */
    border-radius: inherit;
  }
.game-card-img {
    -o-object-fit: cover;
       object-fit: cover;
    transform: translateZ(0);
    transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
  }
.game-card:hover .game-card-img {
    transform: scale(1.06);
  }
/* Permanent shade — barely-there gradient that keeps the PNG from
   * floating flat against the felt. Top is clear so the artwork's
   * title area reads clean; the bottom gets a whisper of darkening
   * for depth. Alphas kept tiny (< 0.2) so the poster colour never
   * gets crushed. */
.game-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 60%,
      rgba(0, 0, 0, 0.18) 100%
    );
    pointer-events: none;
  }
/* Hover darken — ONLY deep enough to give the play button
   * contrast. Previous value (up to 0.55 alpha) was washing the
   * poster out on hover; this softer pass keeps the artwork
   * readable while still drawing the eye to the button. */
.game-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
      80% 70% at 50% 50%,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.32) 100%
    );
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
.game-card:hover .game-card-overlay {
    opacity: 1;
  }
/* Play button — premium dual-ring look, no flat gold disc.
   *
   *   • Outer ring: thin semi-transparent white halo that fades in
   *     on hover. Gives the button presence against the artwork
   *     without needing a heavy backdrop.
   *   • Inner disc: deep-gold gradient with an inner highlight rim
   *     and a subtle drop shadow. Reads as a pressed brass token
   *     rather than a flat icon.
   *   • Icon: crisp filled triangle, 22px — big enough to read from
   *     across a grid, centred via flex instead of the old
   *     translate-x hack.
   *
   * Spring curve on hover: scale 0.6 → 1.06 peak → 1.0 settle so
   * the button arrives with a tiny bounce instead of sliding in
   * limp. */
.game-card-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background:
      radial-gradient(
        120% 120% at 30% 20%,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0) 55%
      ),
      linear-gradient(180deg, #f5d98b 0%, #d4a02a 48%, #8a5d0b 100%);
    /* White triangle on the gold disc — crisper against the accent
     * than the old dark ink, and the subtle drop shadow on the icon
     * keeps it legible even on the brightest highlight band. */
    color: #ffffff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 4px rgba(80, 40, 0, 0.3),
      0 10px 24px -6px rgba(0, 0, 0, 0.55),
      0 0 32px rgba(212, 160, 42, 0.3);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    transition:
      transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 40ms,
      opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
/* Halo ring — a second, larger circle rendered via ::before so
   * it can animate independently. Starts tight + invisible, expands
   * into a gently breathing emerald rim on hover. */
.game-card-play::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    opacity: 0;
    transform: scale(0.85);
    transition:
      transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms,
      opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
.game-card:hover .game-card-play {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -2px 4px rgba(80, 40, 0, 0.3),
      0 14px 30px -6px rgba(0, 0, 0, 0.6),
      0 0 42px rgba(212, 160, 42, 0.42);
  }
.game-card:hover .game-card-play::before {
    opacity: 1;
    transform: scale(1);
  }
.game-card-play-icon {
    width: 22px;
    height: 22px;
    /* Slight right-nudge so the triangle's visual centre sits on
     * the disc's geometric centre (optical balance). */
    transform: translateX(1px);
    /* Soft drop shadow on the triangle itself so the white fill
     * stays legible across the full brightness range of the gold
     * gradient — pure white on pure yellow has low contrast, the
     * shadow gives the glyph an edge. */
    filter: drop-shadow(0 1px 1.5px rgba(80, 40, 0, 0.45));
  }
/* Favourite star toggle.
   *
   * Lives above the shade + hover-overlay layers (z-index 5) so the
   * player can click it regardless of hover state. `data-active` is
   * set by the React component when the game is starred — the CSS
   * swaps the stroke star for a filled gold fill.
   *
   * Click event is stopped in the handler itself so we never
   * trigger the outer <Link>; here we just make sure `pointer-events`
   * is explicit (the sibling overlay is `none`, we want `auto`).
   */
.game-card-fav {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    pointer-events: auto;
    transition:
      background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
.game-card-fav:hover {
    color: #f5d98b;
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(245, 217, 139, 0.45);
    transform: scale(1.08);
  }
.game-card-fav[data-active="true"] {
    color: #f5d98b;
    border-color: rgba(245, 217, 139, 0.6);
    background: rgba(0, 0, 0, 0.55);
  }
.game-card-fav[data-active="true"] svg {
    fill: #f5d98b;
    filter: drop-shadow(0 0 6px rgba(245, 217, 139, 0.55));
  }
/* Favorites empty-state — intentionally sparse: a single muted
   * line, centred horizontally in the section's slot, no header /
   * no box / no icon. Keeps the page quiet when there's nothing to
   * show but still takes enough vertical room to preserve the
   * homepage's rhythm between JackpotTicker and LiveWins. */
.favorites-empty-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
/* ── Compact portrait game tile (Stake / Shuffle style) ── */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.tile:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(212 160 42 / 0.4);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 160, 42, 0.18);
}
.tile:hover .tile-art > * {
    transform: scale(1.05);
  }
/* Game-card (older large card, kept for play pages / legacy) */
.card-game {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.8);
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.card-game::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 0.5rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    background: radial-gradient(
      460px circle at var(--mx, 50%) var(--my, 50%),
      rgba(212, 160, 42, 0.14),
      transparent 45%
    );
  }
.card-game:hover::before {
  opacity: 1;
}
/* Nav item left-bar indicator */
/* Pill / Tabs */
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.tab[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(8 13 26 / var(--tw-text-opacity, 1));
}
/* Ambient orbs */
.orb-gold {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(231 184 76 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(231 184 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(164 118 17 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(164 118 17 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.orb-royal {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(139 92 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(124 58 237 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(124 58 237 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.orb-emerald {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(5 150 105 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 150 105 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.orb-crimson {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(220 38 38 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(220 38 38 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.orb-mint {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(62 226 156 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(62 226 156 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(16 181 114 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(16 181 114 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
/* Row header "see all" link with underline sweep */
.row-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.row-more:hover {
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
}
.row-more::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    bottom: -0.125rem;
    height: 1px;
    width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(231 184 76 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
.row-more:hover::after {
  width: 100%;
}
/* ─────── Sidebar premium bits ─────── */
/* Fading gradient at top/bottom of nav so items scroll in/out softly */
/* Tooltip that appears for collapsed sidebar items */
.group:hover > .sb-tip {
  --tw-translate-x: 0px;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}
/* Active rail indicator — crisp, static */
/* Soft ambient glow behind active row, extending from the rail */
/* Sliding pill for Casino / Spor tabs */
/* ─────── ChatPanel premium bits ─────── */
.chat-aside {
    background-image:
      radial-gradient(340px 220px at 100% 0%, rgba(212, 160, 42, 0.07), transparent 60%),
      radial-gradient(380px 260px at 0% 100%, rgba(34, 213, 137, 0.05), transparent 60%),
      linear-gradient(180deg, rgba(12, 18, 34, 0.92) 0%, rgba(12, 18, 34, 0.96) 100%);
  }
/* Compact rain panel (winna-inspired): tight horizontal grouping that
     doesn't push chat messages off-screen. Subtle bottom shadow as a
     visual divider between the panel and the chat list below. */
.rain-panel {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  background-color: rgb(12 18 34 / 0.9);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.035),
      0 10px 24px -12px rgba(0, 0, 0, 0.75);
}
/* Crisp emerald hairline at the very top — defines the "rain" identity */
.rain-panel::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(52, 211, 153, 0) 15%,
      rgba(52, 211, 153, 0.55) 50%,
      rgba(52, 211, 153, 0) 85%,
      transparent 100%
    );
  }
.rain-panel:hover {
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
}
.rain-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Compact stats — countdown + participant count */
.rain-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.55);
  background-color: rgb(8 13 26 / 0.6);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.rain-stat svg {
  height: 0.75rem;
  width: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.rain-stat[data-soon="true"] {
  border-color: rgb(239 68 68 / 0.45);
  background-color: rgb(239 68 68 / 0.06);
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.rain-stat[data-soon="true"] svg {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
/* Pot box — compact pill sitting under the Join button */
.rain-pot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.6);
  background-color: rgb(8 13 26 / 0.65);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rain-pot-currency {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(110 231 183 / 0.85);
}
/* Chat message row — flat, square corners, permanent surface tint, no accent bar. */
.chat-msg {
  position: relative;
  background-color: rgb(18 26 46 / 0.5);
  padding: 0.625rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0.02rem;
}
.chat-msg:hover {
  background-color: rgb(18 26 46 / 0.7);
}
/* VIP tag subtle shimmer */
/* Chat input focus aura */
.chat-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(18 26 46 / 0.8);
  padding: 0.375rem;
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-input-wrap:focus-within {
  border-color: rgb(212 160 42 / 0.5);
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
    box-shadow:
      0 0 0 3px rgba(212, 160, 42, 0.12),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
      0 0 22px -6px rgba(212, 160, 42, 0.32);
}
/* Send button — gold sheen on hover */
.btn-send {
  position: relative;
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #EFC870 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 200 112 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(231 184 76 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #E7B84C var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #A47611 var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 14px -2px rgba(245,184,46,0.55),inset 0 1px 0 0 rgba(255,255,255,0.45);
  --tw-shadow-colored: 0 0 14px -2px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-send:hover {
  --tw-shadow: 0 0 20px -2px rgba(245,184,46,0.75),inset 0 1px 0 0 rgba(255,255,255,0.55);
  --tw-shadow-colored: 0 0 20px -2px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.btn-send:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.btn-send {
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.32));
  }
.btn-send::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -1rem;
    width: 1.5rem;
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: rgb(255 255 255 / 0.5);
    opacity: 0;
    --tw-blur: blur(3px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
.btn-send:hover::before {
  opacity: 1;
    transform: translateX(340%) skewX(-12deg);
}
/* Emoji button refinement */
.btn-emoji {
  position: relative;
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgb(24 34 59 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-emoji:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(31 43 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
}
.btn-emoji:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* Compact CTA — sits in the top-right of the rain panel */
.rain-join-btn {
  position: relative;
  display: inline-flex;
  min-width: 84px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(52 211 153 / 0.55);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.rain-join-btn:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rain-join-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rain-join-btn {
    background: linear-gradient(180deg, #34D399 0%, #10B981 55%, #059669 100%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
      0 0 14px -3px rgba(52, 211, 153, 0.55);
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.32);
  }
.rain-join-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
      0 0 22px -3px rgba(52, 211, 153, 0.8);
  }
.rain-join-btn[data-joined="true"] {
    background: rgba(18, 26, 46, 0.85);
    border-color: rgb(16 185 129 / 0.35);
    --tw-text-opacity: 1;
    color: rgb(110 231 183 / var(--tw-text-opacity, 1));
    box-shadow: none;
    text-shadow: none;
  }
.rain-join-btn[data-joined="true"]:hover { filter: none; }
/* Count badge next to group titles */
/* Soft vertical scroll fade */
.scroll-fade-y {
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 18px,
      #000 calc(100% - 22px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 18px,
      #000 calc(100% - 22px),
      transparent 100%
    );
  }
/* ──────────────────── LIVE FEED (integrated, flush to page) ──────────── */
/* No card background or outer border — the feed sits directly on the page
   * and each row carries its own soft pill so the list reads as individual
   * bet cards, not a bordered table. */
.live-feed {
  position: relative;
}
/* Individual tab buttons — standalone rounded rectangles, no icons,
   * no letter-spacing. Active state uses the site's gold accent. */
.live-feed-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.live-feed-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.6);
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgb(255 255 255 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.live-feed-tab:hover:not([data-active="true"]) {
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.03);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.live-feed-tab[data-active="true"] {
  border-color: rgb(212 160 42 / 0.5);
  background-color: rgb(212 160 42 / 0.08);
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
}
/* Grid rows */
.live-feed-grid {
  display: grid;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.5fr) minmax(55px, 0.55fr)
      minmax(70px, 0.8fr) minmax(80px, 0.85fr) minmax(90px, 1fr);
    -moz-column-gap: 16px;
         column-gap: 16px;
}
/* Column headers — white, small caps, sit above the row stack with no bg */
.live-feed-head-row {
  margin-bottom: 0.375rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
/* Each row = its own dark pill — feels integrated, not tabulated */
.live-feed-row {
  position: relative;
  border-radius: 0.5rem;
  background-color: rgb(18 26 46 / 0.5);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation: live-feed-row-in 220ms ease-out both;
}
.live-feed-row:hover {
  background-color: rgb(18 26 46 / 0.75);
}
.live-feed-row + .live-feed-row {
  margin-top: 0.25rem;
}
.live-feed-row .game-cell {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.625rem;
}
.live-feed-row .game-ico {
  display: flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.5);
  background-color: rgb(12 18 34 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.03);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@keyframes live-feed-row-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
/* ──────────────────── SHARED PLAY CONTROLS ──────────────────── */
/* Micro-label / field header used above every input. */
.play-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
/* Generic matte input field container — reused for bet, stepper, etc. */
.play-field {
  display: flex;
  height: 2.5rem;
  align-items: center;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.play-field:focus-within {
  border-color: rgb(16 185 129 / 0.35);
}
.play-field {
    overflow: hidden;
  }
/* Vertical divider used inside fields */
.play-field-sep {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 1px;
  align-self: stretch;
  background-color: rgb(29 39 64 / 0.5);
}
/* Bet-amount $ prefix */
.play-bet-prefix {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
    text-shadow: 0 0 10px rgba(239, 200, 112, 0.2);
}
/* Bet-amount numeric input */
.play-bet-input {
  height: 100%;
  min-width: 0px;
  flex: 1 1 0%;
  background-color: transparent;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.play-bet-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.play-bet-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
/* Bet-amount quick action (½, 2×, MAX) */
.play-bet-action {
  height: 1.75rem;
  align-self: center;
  border-radius: 5px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.play-bet-action:hover:not(:disabled) {
  border-color: rgb(29 39 64 / 0.5);
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.play-bet-action:active:not(:disabled) {
  --tw-bg-opacity: 1;
  background-color: rgb(12 18 34 / var(--tw-bg-opacity, 1));
}
.play-bet-action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
/* ± stepper (mines count, future per-game quantity selectors) */
.play-stepper {
  display: flex;
  height: 2.5rem;
  align-items: center;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.play-stepper:focus-within {
  border-color: rgb(16 185 129 / 0.35);
}
.play-stepper-btn {
  display: flex;
  height: 100%;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.play-stepper-btn:hover:not(:disabled) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.play-stepper-btn:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.play-stepper-val {
  min-width: 0px;
  flex: 1 1 0%;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
/* Hero payout card (shown on every game's sidebar) */
.play-payout {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
    background: linear-gradient(180deg, #10172a 0%, #0a1020 100%);
    box-shadow:
      inset 0 0 0 1px rgba(29, 39, 64, 0.9),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.028);
}
.play-payout[data-active="true"] {
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.22),
      inset 0 1px 0 0 rgba(110, 231, 183, 0.04);
  }
/* Primary CTA — flat premium emerald with white text */
.play-cta {
  position: relative;
  display: flex;
  height: 3rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
    background: linear-gradient(180deg, #22d589 0%, #10b572 100%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 0 rgba(0, 0, 0, 0.12),
      0 6px 18px -8px rgba(16, 181, 114, 0.5);
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.32);
    transition:
      background 0.18s ease,
      box-shadow 0.2s ease,
      transform 0.12s ease;
}
.play-cta::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -1.5rem;
    width: 2.5rem;
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    background-color: rgb(255 255 255 / 0.4);
    opacity: 0;
    --tw-blur: blur(4px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  }
.play-cta:hover:not(:disabled) {
    background: linear-gradient(180deg, #2ee09a 0%, #14c07d 100%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
      inset 0 -1px 0 0 rgba(0, 0, 0, 0.12),
      0 10px 26px -8px rgba(16, 181, 114, 0.65);
  }
.play-cta:hover:not(:disabled)::before {
  opacity: 1;
    transform: translateX(520%) skewX(-12deg);
}
.play-cta:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      0 2px 8px -3px rgba(16, 181, 114, 0.4);
  }
.play-cta:disabled {
    background: linear-gradient(180deg, #1a2236 0%, #131a2b 100%);
    color: rgba(148, 163, 184, 0.38);
    box-shadow:
      inset 0 0 0 1px rgba(29, 39, 64, 0.85),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
    cursor: not-allowed;
  }
/* Result card — shares PayoutCard's matte language (kurumsal / corporate) */
.play-result {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
    background: linear-gradient(180deg, #10172a 0%, #0a1020 100%);
    animation: fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.play-result[data-variant="won"] {
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.3),
      inset 0 1px 0 0 rgba(110, 231, 183, 0.05);
  }
.play-result[data-variant="lost"] {
    box-shadow:
      inset 0 0 0 1px rgba(239, 68, 68, 0.3),
      inset 0 1px 0 0 rgba(252, 165, 165, 0.04);
  }
/* Stage decorative backdrop — sits behind every game's board */
.play-stage-bg {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
.play-stage-bg svg {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
}
/* History slot — top-left ribbon shared by every game's
   * recent-results pills. Spans almost the full stage width
   * with a right-edge fade mask so a long pill row reads as
   * "scrolling off the side" instead of "abruptly cut off".
   * The mask is a transparent gradient applied via the CSS
   * `mask-image` property so it composites cleanly over any
   * stage backdrop without needing a sibling overlay div. */
.play-stage-history {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
    max-width: 98%;
    /* Right-edge alpha falloff over the last 64px so pills
     * that cross the boundary fade out cleanly. */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(100% - 64px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(100% - 64px),
      transparent 100%
    );
}
/* ──────────────────── MINES (game-specific) ──────────────────── */
/* Tile — flat matte plate. Subtle 1px border, single-pixel inset highlight,
     soft shadow. No mechanical bottom edge, no arcade depth. */
.mine-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
    background: linear-gradient(180deg, #18213a 0%, #121a2e 100%);
    box-shadow:
      inset 0 0 0 1px rgba(29, 39, 64, 0.85),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.025),
      0 1px 2px 0 rgba(0, 0, 0, 0.25);
    transition:
      transform 0.14s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.18s ease,
      box-shadow 0.18s ease,
      opacity 0.18s ease;
}
/* Idle + playable */
.mine-tile[data-state="idle"] {
    cursor: pointer;
  }
.mine-tile[data-state="idle"]:hover {
    background: linear-gradient(180deg, #1d2844 0%, #151d33 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212, 160, 42, 0.3),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
      0 4px 14px -5px rgba(212, 160, 42, 0.22);
    transform: translateY(-1px);
  }
.mine-tile[data-state="idle"]:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 0 0 1px rgba(29, 39, 64, 0.85),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
  }
/* Disabled (not playing yet) */
.mine-tile[data-state="idle-disabled"] {
    opacity: 1;
    cursor: default;
  }
/* Revealed safe tile — clean matte with thin gold rim (site accent) */
.mine-tile[data-state="gem"] {
    background:
      radial-gradient(
        ellipse 80% 80% at 50% 55%,
        rgba(212, 160, 42, 0.14) 0%,
        transparent 75%
      ),
      linear-gradient(180deg, #121a2e 0%, #0c1222 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212, 160, 42, 0.34),
      inset 0 1px 0 0 rgba(245, 217, 139, 0.06);
    cursor: default;
  }
/* Revealed bomb */
.mine-tile[data-state="bomb"] {
    background:
      radial-gradient(
        ellipse 80% 80% at 50% 55%,
        rgba(239, 68, 68, 0.14) 0%,
        transparent 75%
      ),
      linear-gradient(180deg, #16141f 0%, #0c1222 100%);
    box-shadow:
      inset 0 0 0 1px rgba(239, 68, 68, 0.38),
      inset 0 1px 0 0 rgba(252, 165, 165, 0.06),
      0 0 16px -6px rgba(239, 68, 68, 0.28);
    cursor: default;
  }
/* Dim (unrevealed post-game cells) */
.mine-tile[data-state="dim"] {
    opacity: 1;
    cursor: default;
  }
/* Reveal pops — restrained, no rotation or shake */
.mine-reveal-gem {
    animation: mine-gem-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
.mine-reveal-bomb {
    animation: mine-bomb-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
/* ──────────────────── DICE (game-specific) ──────────────────── */
/* Stage wrapper — fills almost the full right panel; vertical split */
.dice-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {

  .dice-stage {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.dice-stage {
    min-height: 320px;
  }
/* History pill strip — rendered by PlayShell (top-left) */
.dice-history {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}
.dice-history-pill {
  display: inline-flex;
  height: 1.75rem;
  min-width: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.dice-history-pill[data-won="true"] {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    border-color: rgba(5, 150, 105, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
  }
.dice-history-pill[data-won="false"] {
    background: linear-gradient(180deg, #3A4358 0%, #2A3344 100%);
    border-color: rgba(80, 92, 115, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
/* Slider play area — centered, full-width bar with floating die */
.dice-play {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}
.dice-bar-wrap {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}
/* Ticks above the bar (Stake-style) */
.dice-bar-ticks {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  color: rgb(154 163 188 / 0.85);
}
/* Pill-shaped slider bar — thin, premium */
.dice-bar {
  position: relative;
  height: 18px;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: visible;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  background-image: linear-gradient(180deg,#0a121f 0%,#0e1628 100%);
  --tw-shadow: inset 0 2px 5px rgba(0,0,0,0.6),0 1px 0 rgba(255,255,255,0.03);
  --tw-shadow-colored: inset 0 2px 5px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    touch-action: none;
}
.dice-bar-track {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: 9999px;
}
.dice-bar-win,
  .dice-bar-lose {
  position: absolute;
  top: 0px;
  bottom: 0px;
}
.dice-bar-win {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.5),
      inset 0 1px 2px rgba(110, 231, 183, 0.35),
      inset 0 -2px 4px rgba(4, 88, 62, 0.45);
  }
.dice-bar-lose {
    background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%);
    box-shadow:
      inset 0 0 0 1px rgba(239, 68, 68, 0.5),
      inset 0 1px 2px rgba(252, 165, 165, 0.28),
      inset 0 -2px 4px rgba(127, 20, 20, 0.45);
  }
/* Target knob — compact grip handle, premium white */
.dice-knob {
  position: absolute;
  top: 50%;
  z-index: 20;
  height: 34px;
  width: 22px;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: grab;
  border-radius: 6px;
  border-width: 1px;
  border-color: rgb(138 149 167 / 0.85);
  background-image: linear-gradient(180deg,#FFFFFF 0%,#EDF0F5 55%,#C5CCD6 100%);
  --tw-shadow: 0 5px 12px -2px rgba(0,0,0,0.75),inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 5px 12px -2px var(--tw-shadow-color), inset 0 1px 0 var(--tw-shadow-color), inset 0 -1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.dice-knob:hover,
  .dice-knob[data-drag="true"] {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.15),
      0 8px 20px -3px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  }
.dice-knob[data-drag="true"] { cursor: grabbing; }
.dice-knob::before,
  .dice-knob::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1rem;
    width: 1px;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.7);
  }
.dice-knob::before { left: 50%; transform: translate(calc(-50% - 3px), -50%); }
.dice-knob::after  { left: 50%; transform: translate(calc(-50% + 3px), -50%); }
/* ── Animated result chip — outer stays mounted (slide transition);
       inner remounts with `key` each roll (drop-in + settle animation).
       An anchor hairline drops from the chip to the bar so the result
       visibly "locks" onto the rolled position. ── */
.dice-die {
  pointer-events: none;
  position: absolute;
  z-index: 30;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%);
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: left;
    animation: dice-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dice-die::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    top: 100%;
    width: 1px;
    height: 12px;
    background: linear-gradient(180deg, rgba(212, 160, 42, 0.55) 0%, rgba(212, 160, 42, 0) 100%);
    transition: background 0.25s ease;
  }
.dice-die[data-won="true"]::before {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.7) 0%, rgba(16, 185, 129, 0) 100%);
  }
.dice-die[data-won="false"]::before {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.7) 0%, rgba(239, 68, 68, 0) 100%);
  }
/* The chip token itself — premium dark box with gold rim */
.dice-chip {
  position: relative;
  display: flex;
  height: 40px;
  min-width: 92px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
    background: linear-gradient(180deg, #1b2338 0%, #0b1220 100%);
    border: 1px solid rgba(212, 160, 42, 0.45);
    box-shadow:
      0 10px 22px -5px rgba(0, 0, 0, 0.75),
      0 2px 6px -1px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dice-chip::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
  }
.dice-chip::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: #0b1220;
    border-right: 1px solid rgba(212, 160, 42, 0.45);
    border-bottom: 1px solid rgba(212, 160, 42, 0.45);
    transition: border-color 0.25s ease, background 0.25s ease;
  }
.dice-chip-value {
  position: relative;
  z-index: 10;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    color: #F5D98B;
    text-shadow: 0 0 14px rgba(212, 160, 42, 0.55);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
/* Won state — emerald wash + glow */
.dice-die[data-won="true"] .dice-chip {
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow:
      0 12px 28px -6px rgba(16, 185, 129, 0.55),
      0 10px 22px -5px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  }
.dice-die[data-won="true"] .dice-chip::after {
    border-color: rgba(16, 185, 129, 0.7);
  }
.dice-die[data-won="true"] .dice-chip-value {
    color: #6EE7B7;
    text-shadow: 0 0 18px rgba(16, 185, 129, 0.75);
  }
/* Lost state — crimson wash */
.dice-die[data-won="false"] .dice-chip {
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow:
      0 12px 28px -6px rgba(239, 68, 68, 0.4),
      0 10px 22px -5px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  }
.dice-die[data-won="false"] .dice-chip::after {
    border-color: rgba(239, 68, 68, 0.65);
  }
.dice-die[data-won="false"] .dice-chip-value {
    color: #FCA5A5;
    text-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
  }
/* Bottom input panel — wraps the 3 Stake-style fields */
.dice-inputs {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {

  .dice-inputs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.dice-inputs .play-label {
  margin-bottom: 0px;
  font-size: 0.62rem;
  color: rgb(154 163 188 / 0.9);
}
/* Direction toggle — Over/Under flip button */
.dice-dir {
  display: flex;
  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.dice-dir-label {
  flex: 1 1 0%;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.dice-dir-swap {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.dice-dir-swap:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
/* Button press pulse — independent from dice shake */
.play-cta[data-firing="true"] {
    animation: cta-pulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* ──────────────────── LIMBO (game-specific) ──────────────────── */
/* Stage wrapper — centered, fills the right panel */
.limbo-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
    /* Defensive min-height so the flex cross-axis centring of
       `.limbo-core` resolves to the visual middle on phones. */
    min-height: 380px;
}
/* History pill strip — rendered by PlayShell (top-left) */
.limbo-history {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}
.limbo-history-pill {
  display: inline-flex;
  height: 1.75rem;
  min-width: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.limbo-history-pill[data-won="true"] {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    border-color: rgba(5, 150, 105, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
  }
.limbo-history-pill[data-won="false"] {
    background: linear-gradient(180deg, #3A4358 0%, #2A3344 100%);
    border-color: rgba(80, 92, 115, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
/* Altitude reference scale — vertical ticks on the right edge */
.limbo-scale {
  pointer-events: none;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  z-index: 10;
  display: flex;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  letter-spacing: 0.025em;
}
@media (min-width: 640px) {

  .limbo-scale {
    right: 2rem;
  }
}
.limbo-scale-tick {
  border-radius: 0.25rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  color: rgb(98 108 135 / 0.35);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.04em;
}
.limbo-scale-tick[data-reached="true"] {
    color: #C4B5FD;
    text-shadow: 0 0 10px rgba(196, 181, 253, 0.45);
  }
.limbo-scale-tick[data-reached="true"][data-past-target="true"] {
    color: #F5D98B;
    text-shadow: 0 0 12px rgba(245, 217, 139, 0.55);
  }
/* Target indicator line — horizontal gold hairline in the stage backdrop */
/* Central core container — flex column for number + meta */
.limbo-core {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Halo — pulsing radial glow behind the number */
.limbo-core-halo {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
    width: 360px;
    height: 360px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent 70%);
    filter: blur(36px);
    transition: background 0.45s ease, transform 0.35s ease;
    animation: limbo-halo-idle 7s ease-in-out infinite;
}
/* Number block — the big animated multiplier */
.limbo-core-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
    min-height: 1em;
}
.limbo-core-value {
    font-family: "Urbanist", "Inter", system-ui, sans-serif;
    position: relative;
    z-index: 10;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-weight: 900;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    line-height: 1;
    font-size: clamp(3.4rem, 8.8vw, 6.8rem);
    letter-spacing: -0.035em;
    color: #E8EEF7;
    text-shadow:
      0 0 28px rgba(196, 181, 253, 0.2),
      0 2px 8px rgba(0, 0, 0, 0.55);
    transition:
      color 0.45s ease,
      text-shadow 0.45s ease,
      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, color;
  }
/* Separator line between number and meta */
.limbo-core-divider {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  height: 1px;
  width: 4rem;
  opacity: 0.6;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(139, 92, 246, 0.5) 50%,
      transparent 100%
    );
}
/* Meta row below the number (target + chance) */
.limbo-core-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.limbo-core-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.limbo-core-target {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
    text-shadow: 0 0 12px rgba(239, 200, 112, 0.35);
}
.limbo-core-chance {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.limbo-core-dot {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  color: rgb(98 108 135 / 0.5);
}
/* Sparkle burst — shown briefly on win */
.limbo-sparks {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
    opacity: 0;
}
.limbo-spark {
  position: absolute;
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 9999px;
    left: 50%;
    top: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(196, 181, 253, 0.7) 50%, transparent 100%);
    box-shadow: 0 0 10px rgba(239, 200, 112, 0.8), 0 0 22px rgba(196, 181, 253, 0.5);
    opacity: 0;
}
/* ── STATE: ROLLING ── */
.limbo-stage[data-state="rolling"] .limbo-core-halo {
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.55), transparent 70%);
    animation: limbo-halo-rolling 0.9s ease-out forwards;
  }
.limbo-stage[data-state="rolling"] .limbo-core-value {
    color: #C4B5FD;
    text-shadow:
      0 0 44px rgba(139, 92, 246, 0.7),
      0 0 14px rgba(196, 181, 253, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.55);
    animation: limbo-number-tick 0.28s ease-in-out infinite;
  }
/* ── STATE: WON — emerald celebration ── */
.limbo-stage[data-state="won"] .limbo-core-halo {
    background: radial-gradient(closest-side, rgba(16, 185, 129, 0.6), transparent 70%);
    animation: limbo-halo-won 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
.limbo-stage[data-state="won"] .limbo-core-value {
    color: #6EE7B7;
    text-shadow:
      0 0 48px rgba(16, 185, 129, 0.8),
      0 0 18px rgba(16, 185, 129, 0.6),
      0 2px 8px rgba(0, 0, 0, 0.55);
    animation: limbo-number-win 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
.limbo-stage[data-state="won"] .limbo-sparks {
    animation: limbo-sparks-show 1.2s ease-out;
  }
.limbo-stage[data-state="won"] .limbo-spark {
    animation: limbo-spark-fly 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
/* ── STATE: LOST — crimson fade ── */
.limbo-stage[data-state="lost"] .limbo-core-halo {
    background: radial-gradient(closest-side, rgba(239, 68, 68, 0.34), transparent 70%);
    animation: limbo-halo-lost 0.8s ease-out forwards;
  }
.limbo-stage[data-state="lost"] .limbo-core-value {
    color: #FCA5A5;
    text-shadow:
      0 0 32px rgba(239, 68, 68, 0.55),
      0 0 10px rgba(239, 68, 68, 0.4),
      0 2px 8px rgba(0, 0, 0, 0.55);
    animation: limbo-number-lost 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* ──────────────────── KENO (game-specific) ──────────────────── */
/* Stage wrapper — full-width, grid centered, payout strip below */
.keno-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 3rem;
  padding-bottom: 0.25rem;
}
@media (min-width: 640px) {

  .keno-stage {
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.keno-stage {
    min-height: 460px;
  }
/* Payout strip — the horizontal row of hit-count → multiplier cells */
.keno-payout {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  background-color: rgb(18 26 46 / 0.6);
  padding: 0.5rem;
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {

  .keno-payout {
    gap: 0.375rem;
    padding: 0.625rem;
  }
}
.keno-payout {
    grid-template-columns: repeat(var(--keno-cols, 11), minmax(0, 1fr));
  }
.keno-payout-cell {
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  display: flex;
  min-width: 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  border-radius: 7px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.4);
  background-color: rgb(8 13 26 / 0.6);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.keno-payout-cell .keno-payout-mult {
  white-space: nowrap;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .keno-payout-cell .keno-payout-mult {
    font-size: 0.72rem;
  }
}
@media (min-width: 768px) {

  .keno-payout-cell .keno-payout-mult {
    font-size: 0.78rem;
  }
}
.keno-payout-cell .keno-payout-mult {
    letter-spacing: -0.02em;
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }
.keno-payout-cell .keno-payout-hit {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.46rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(98 108 135 / 0.9);
}
@media (min-width: 640px) {

  .keno-payout-cell .keno-payout-hit {
    font-size: 0.54rem;
  }
}
.keno-payout-cell .keno-payout-hit {
    letter-spacing: 0.08em;
  }
/* Payable cell (mult > 0) looks richer */
.keno-payout-cell[data-payable="true"] .keno-payout-mult {
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
    text-shadow: 0 0 8px rgba(239, 200, 112, 0.28);
}
/* Current running-match cell — during draw, highlight cell for matches so far */
.keno-payout-cell[data-current="true"] {
    background: linear-gradient(180deg, rgba(212, 160, 42, 0.18) 0%, rgba(16, 22, 40, 0.6) 100%);
    border-color: rgba(239, 200, 112, 0.55);
    box-shadow:
      inset 0 0 0 1px rgba(239, 200, 112, 0.3),
      0 0 14px -3px rgba(239, 200, 112, 0.3);
  }
.keno-payout-cell[data-current="true"] .keno-payout-mult {
    color: #F5D98B;
    text-shadow: 0 0 10px rgba(245, 217, 139, 0.55);
  }
/* Settled winning cell — emerald trim */
.keno-payout-cell[data-won="true"] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 22, 40, 0.6) 100%);
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.35),
      0 0 18px -2px rgba(16, 185, 129, 0.35);
    animation: keno-cell-win 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
.keno-payout-cell[data-won="true"] .keno-payout-mult {
    color: #6EE7B7;
    text-shadow: 0 0 12px rgba(110, 231, 183, 0.65);
  }
/* Grid wrapper — centered 8×5 grid with responsive gap */
.keno-grid-wrap {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}
.keno-grid {
  display: grid;
  width: 100%;
  max-width: 820px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.25rem;
}
@media (min-width: 640px) {

  .keno-grid {
    gap: 0.5rem;
  }
}
@media (min-width: 768px) {

  .keno-grid {
    gap: 0.625rem;
  }
}
/* Tile — premium matte plate with generous click target. */
.keno-tile {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
    background: linear-gradient(180deg, #18213a 0%, #121a2e 100%);
    box-shadow:
      inset 0 0 0 1px rgba(29, 39, 64, 0.85),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.025),
      0 1px 2px 0 rgba(0, 0, 0, 0.25);
    /* Fast-settle curve (ease-out-quint): rapid acceleration into the new
     * state, gentle landing. Durations kept tight so reveals feel instant
     * while the glow remains silky. */
    transition:
      transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.keno-tile-number {
  position: relative;
  z-index: 10;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .keno-tile-number {
    font-size: 0.95rem;
  }
}
@media (min-width: 768px) {

  .keno-tile-number {
    font-size: 1.1rem;
  }
}
.keno-tile-number {
    letter-spacing: -0.02em;
    transition: color 0.22s ease, text-shadow 0.22s ease, transform 0.2s ease;
  }
/* IDLE — playable but not picked */
.keno-tile[data-state="idle"] {
    cursor: pointer;
  }
.keno-tile[data-state="idle"]:hover {
    background: linear-gradient(180deg, #1d2844 0%, #151d33 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212, 160, 42, 0.25),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
      0 4px 14px -5px rgba(212, 160, 42, 0.22);
    transform: translateY(-1px);
  }
.keno-tile[data-state="idle"]:hover .keno-tile-number {
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.keno-tile[data-state="idle"]:active {
    transform: translateY(1px);
  }
/* IDLE-DISABLED — visible but not interactive (post-round) */
.keno-tile[data-state="idle-disabled"] {
    opacity: 0.85;
    cursor: default;
  }
/* PICKED — user selected */
.keno-tile[data-state="picked"] {
    background:
      radial-gradient(ellipse 80% 80% at 50% 35%, rgba(239, 200, 112, 0.22), transparent 75%),
      linear-gradient(180deg, #3A2A06 0%, #1F1502 100%);
    box-shadow:
      inset 0 0 0 1px rgba(239, 200, 112, 0.45),
      inset 0 1px 0 0 rgba(255, 246, 217, 0.1),
      0 4px 12px -3px rgba(212, 160, 42, 0.3);
    cursor: pointer;
  }
.keno-tile[data-state="picked"]:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px rgba(239, 200, 112, 0.6),
      inset 0 1px 0 0 rgba(255, 246, 217, 0.14),
      0 6px 18px -3px rgba(212, 160, 42, 0.42);
  }
.keno-tile[data-state="picked"] .keno-tile-number {
    color: #F5D98B;
    text-shadow: 0 0 10px rgba(239, 200, 112, 0.5);
  }
.keno-tile[data-state="picked"] {
    animation: keno-pick-pop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* HIT — picked AND drawn: emerald celebration */
.keno-tile[data-state="hit"] {
    background:
      radial-gradient(ellipse 80% 80% at 50% 40%, rgba(110, 231, 183, 0.3), transparent 75%),
      linear-gradient(180deg, #06301F 0%, #041B12 100%);
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.7),
      inset 0 1px 0 0 rgba(110, 231, 183, 0.18),
      0 0 22px -4px rgba(16, 185, 129, 0.55),
      0 4px 12px -3px rgba(0, 0, 0, 0.5);
    cursor: default;
    animation: keno-hit-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
.keno-tile[data-state="hit"] .keno-tile-number {
    color: #6EE7B7;
    text-shadow: 0 0 14px rgba(110, 231, 183, 0.75);
    font-weight: 900;
  }
.keno-tile[data-state="hit"]::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 0.5rem;
    background: radial-gradient(circle at center, rgba(110, 231, 183, 0.2), transparent 65%);
    animation: keno-hit-ring 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
/* DRAWN — drawn but not picked: silver ball look */
.keno-tile[data-state="drawn"] {
    background:
      radial-gradient(ellipse 80% 80% at 50% 35%, rgba(196, 205, 220, 0.22), transparent 75%),
      linear-gradient(180deg, #23304A 0%, #131A2E 100%);
    box-shadow:
      inset 0 0 0 1px rgba(155, 165, 188, 0.5),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: default;
    animation: keno-draw-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
.keno-tile[data-state="drawn"] .keno-tile-number {
    color: #DCE3F0;
    text-shadow: 0 0 6px rgba(220, 227, 240, 0.32);
  }
/* MISS — picked but NOT drawn (only post-settle) */
.keno-tile[data-state="miss"] {
    background:
      radial-gradient(ellipse 80% 80% at 50% 35%, rgba(239, 200, 112, 0.08), transparent 75%),
      linear-gradient(180deg, #1A1203 0%, #0D0A02 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212, 160, 42, 0.22),
      inset 0 1px 0 0 rgba(255, 246, 217, 0.03);
    cursor: default;
    opacity: 0.72;
  }
.keno-tile[data-state="miss"] .keno-tile-number {
    color: #A47611;
    text-shadow: none;
  }
/* ── RISK SELECTOR — pill tabs inside the sidebar ── */
.keno-risk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding: 3px;
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.keno-risk-btn {
  position: relative;
  z-index: 10;
  border-radius: 6px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.keno-risk-btn:hover:not(:disabled) {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.keno-risk-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.keno-risk-btn[data-active="true"] {
    background: linear-gradient(180deg, #3A2A06 0%, #2B1F04 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212, 160, 42, 0.45),
      inset 0 1px 0 0 rgba(255, 246, 217, 0.08);
    color: #F5D98B;
    text-shadow: 0 0 8px rgba(239, 200, 112, 0.35);
  }
/* ── KENO UTILITY BUTTONS (Auto / Clear) — sidebar quick actions ── */
.keno-util-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.keno-util-btn {
  display: flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 7px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.keno-util-btn:hover:not(:disabled) {
  border-color: rgb(212 160 42 / 0.4);
  background-color: rgb(18 26 46 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.keno-util-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
/* Pick counter chip — tiny indicator above/beside the grid */
/* ──────────────────── PLINKO (game-specific) ──────────────────── */
/* Stage — a single full-width container. Pegs, balls AND the bucket
     strip all live inside .plinko-field, so the ball physically settles
     into its bucket instead of dropping into a separate strip below. */
.plinko-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
  align-items: stretch;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0.25rem;
    /* Explicit min so the peg pyramid + bucket strip have real
       vertical real estate even when the parent flex chain hands
       down 0. The flex-1 above lets us grow on xl: where PlayShell
       gives 640px of room. */
    min-height: 520px;
}
@media (min-width: 1280px) { .plinko-stage { min-height: 580px; } }
/* Board wrapper — margin-top clears the history pill row at the top of
     the stage (pills live in the outer PlayShell and hover over the
     play-field's top edge otherwise). */
.plinko-board {
  position: relative;
  margin-top: 1rem;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: stretch;
  justify-content: stretch;
}
@media (min-width: 640px) {

  .plinko-board {
    margin-top: 3rem;
  }
}
.plinko-board {
    /* Floor for the board so the field + its peg pyramid never
       collapse to zero height when the flex chain misbehaves. */
    min-height: 480px;
  }
@media (min-width: 1280px) { .plinko-board { min-height: 520px; } }
/* Flex column: pegs fill the upper area, bucket strip sits directly
     below. Keeping overflow hidden on the field (but visible on the pegs
     area) lets the ball descend past the peg zone into the bucket while
     still being clipped cleanly at the field edge. */
.plinko-field {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) {
    .plinko-field { width: 90%; }
  }
/* Coordinate space for pegs and balls. Flex-1 so it stretches to fill
     the field minus the bucket strip; overflow is visible so the ball can
     drop into the bucket row during its final arc (occluded by the
     higher z-index bucket strip below). */
.plinko-pegs-area {
  position: relative;
  flex: 1 1 0%;
  overflow: visible;
}
/* Peg — tiny radial dot, matte cream, faint glow. Each peg is placed with
     left/top % so the layout scales with the board.
     Mobile uses a smaller radius so 16-row pyramids don't read as a noisy
     mass — at 360px viewport the 8px size leaves real negative space
     between pegs, making the pyramid clearly readable. */
.plinko-peg {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 35% 30%, #FFFFFF 0%, #E8EEF7 40%, #A7B1C4 100%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 6px rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
@media (min-width: 640px) {
    .plinko-peg { width: 9px; height: 9px; }
  }
@media (min-width: 1024px) {
    .plinko-peg { width: 10px; height: 10px; }
  }
.plinko-peg[data-bump="true"] {
    animation: plinko-peg-bump 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* Ball — gold-sheen sphere, glossy highlight, light trail.
     Mobile uses a smaller ball to match the smaller pegs (otherwise
     the ball overlaps the next column of pegs visually). */
.plinko-ball {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  border-radius: 9999px;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 35% 30%, #FFF6D9 0%, #EFC870 45%, #8F6314 100%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(239, 200, 112, 0.55),
      inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    will-change: transform;
}
.plinko-ball::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 35%);
  }
@media (min-width: 640px) {
    .plinko-ball { width: 13px; height: 13px; }
  }
@media (min-width: 1024px) {
    .plinko-ball { width: 14px; height: 14px; }
  }
/* Drop chute silhouette — tiny funnel at top so the entry feels intentional */
.plinko-chute {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 0px;
    transform: translateX(-50%);
    width: 24px;
    height: 16px;
    background:
      linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, transparent 100%);
    border-left: 1px solid rgba(239, 68, 68, 0.35);
    border-right: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 0 0 6px 6px;
}
@media (min-width: 640px) {
    .plinko-chute { width: 34px; height: 22px; }
  }
/* Bucket strip — a flex child directly under .plinko-pegs-area, so
     there is no gap between the last peg row and the buckets. `relative`
     + `z-30` establishes a stacking layer above the ball so the ball
     visually disappears *into* the cup on its final descent.
     Mobile gets a thicker strip (more vertical real estate, taller cells)
     so the multipliers actually read as the dominant payout zone they
     are, rather than a barely-visible footer. */
.plinko-buckets {
  position: relative;
  z-index: 30;
  display: grid;
  gap: 3px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 8px;
  padding-top: 4px;
}
@media (min-width: 640px) {

  .plinko-buckets {
    gap: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-top: 2px;
  }
}
.plinko-buckets {
    grid-template-columns: repeat(var(--plinko-bins, 9), minmax(0, 1fr));
  }
.plinko-bucket {
  position: relative;
  display: flex;
  min-width: 0px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 640px) {

  .plinko-bucket {
    border-radius: 7px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.68rem;
  }
}
@media (min-width: 768px) {

  .plinko-bucket {
    font-size: 0.78rem;
  }
}
.plinko-bucket {
    letter-spacing: -0.04em;
    min-height: 30px;
    background: linear-gradient(180deg, var(--bucket-from, #3A2507) 0%, var(--bucket-to, #1A1102) 100%);
    color: var(--bucket-text, #F5D98B);
    box-shadow:
      inset 0 0 0 1px var(--bucket-ring, rgba(212, 160, 42, 0.35)),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
      0 2px 6px -3px rgba(0, 0, 0, 0.5);
  }
.plinko-bucket[data-hit="true"] {
    animation: plinko-bucket-hit 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  }
.plinko-bucket[data-hit="true"]::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    border-radius: 7px;
    box-shadow:
      0 0 0 2px var(--bucket-text, #F5D98B),
      0 0 22px var(--bucket-text, #F5D98B);
    animation: plinko-bucket-ring 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* Rows selector — row count tabs (8..16) */
.plinko-rows {
  position: relative;
  display: grid;
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding: 3px;
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    grid-template-columns: repeat(9, minmax(0, 1fr));
}
.plinko-rows-btn {
  position: relative;
  z-index: 10;
  border-radius: 5px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.plinko-rows-btn:hover:not(:disabled) {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.plinko-rows-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.plinko-rows-btn[data-active="true"] {
    background: linear-gradient(180deg, #3B0A10 0%, #1A0A12 100%);
    box-shadow:
      inset 0 0 0 1px rgba(239, 68, 68, 0.45),
      inset 0 1px 0 0 rgba(255, 200, 200, 0.06);
    color: #FCA5A5;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  }
/* Risk selector — reuses keno-style pill but crimson-tinted */
.plinko-risk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding: 3px;
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.plinko-risk-btn {
  position: relative;
  z-index: 10;
  border-radius: 6px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.plinko-risk-btn:hover:not(:disabled) {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.plinko-risk-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.plinko-risk-btn[data-active="true"] {
    background: linear-gradient(180deg, #3B0A10 0%, #1A0A12 100%);
    box-shadow:
      inset 0 0 0 1px rgba(239, 68, 68, 0.45),
      inset 0 1px 0 0 rgba(255, 200, 200, 0.06);
    color: #FCA5A5;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  }
/* Auto-bet toggle row */
.plinko-mode {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
  padding: 3px;
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.plinko-mode-btn {
  position: relative;
  z-index: 10;
  border-radius: 6px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.plinko-mode-btn:hover:not(:disabled) {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.plinko-mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.plinko-mode-btn[data-active="true"] {
    background: linear-gradient(180deg, #062E22 0%, #08121E 100%);
    box-shadow:
      inset 0 0 0 1px rgba(16, 185, 129, 0.45),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    color: #6EE7B7;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
  }
/* ──────────────────── CRASH (multiplayer) ──────────────────── */
/* Shell — the whole multiplayer container. Replaces PlayShell's
     left-side/right-stage split with a top-stage + two-column layout. */
.mp-shell {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(12 18 34 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.mp-stage-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(12 18 34 / var(--tw-bg-opacity, 1));
    /* Tight on phones — just enough to render the chart + recent pills
       without a tall dead zone below. Desktop keeps the cinematic
       proportions. */
    min-height: 300px;
}
@media (min-width: 640px) { .mp-stage-wrap { min-height: 380px; } }
@media (min-width: 1024px) { .mp-stage-wrap { min-height: 460px; } }
.mp-stage-wrap-inner {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
    min-height: inherit;
}
/* Two-column bottom rack — bet panel (left) + live players + stats (right) */
.mp-rack {
  display: grid;
  gap: 0px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    .mp-rack { grid-template-columns: 340px minmax(0, 1fr); }
  }
.mp-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}
@media (min-width: 640px) {

  .mp-panel {
    gap: 1rem;
    padding: 1rem;
  }
}
/* On mobile the rack stacks; the left/right borders would clip awkwardly
     against the card edge so we drop them under lg:. The lg: breakpoint
     matches mp-rack's grid switch above. */
.mp-panel-left {
  border-bottom-width: 1px;
}
@media (min-width: 1024px) {

  .mp-panel-left {
    border-bottom-width: 0px;
    border-right-width: 1px;
  }

  .mp-panel-right {
    border-left-width: 1px;
  }
}
/* History strip — small green/red pills of past round results */
.mp-history {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow-x: auto;
  border-bottom-width: 1px;
  border-color: rgb(29 39 64 / 0.6);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
    scrollbar-width: none;
}
.mp-history::-webkit-scrollbar { display: none; }
/* Low result (< 2x) — red */
/* Green tiers (≥ 2x) — progressively brighter */
/* ════════════════════════════════════════════════════════════════════
   *                              CRASH
   *
   * Single-player Stake-style live-multiplier crash, rendered into the
   * standard PlayShell. The stage is one big SVG chart with axes + a
   * smoothly-expanding viewport; the live multiplier sits as a hero
   * number in the middle, tier-tinted as it climbs. The side panel
   * uses the standard BetControl + PayoutCard + GameCta primitives so
   * the page reads as one of the family — only the chart and the
   * inline auto-cashout toggle are crash-specific.
   * ═══════════════════════════════════════════════════════════════════ */
.crash-stage {
  position: relative;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
    /* Match the multiplayer stage wrapper's mobile floor so the chart
       fills it cleanly with no dead zone underneath. */
    min-height: 100%;
}
/* ───── Chart plot ───── */
.crash-graph {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
}
.crash-curve-fill {
    transition: opacity 0.25s ease;
  }
.crash-curve-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
    transition: stroke 0.25s ease;
  }
.crash-stage[data-phase="lost"] .crash-curve-line {
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
  }
.crash-stage[data-phase="won"] .crash-curve-line {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.45));
  }
/* ───── Tip dot — small filled marker at the leading edge ───── */
.crash-tip-dot {
  pointer-events: none;
  position: absolute;
  z-index: 20;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    will-change: top, left;
    /* No CSS transition. The rAF loop now updates the position
     * at the browser's native refresh rate (60–144 Hz) using
     * a server-anchored time formula, so the motion is already
     * pixel-smooth. A transition here would only add lag. */
}
.crash-tip-dot-core {
  position: absolute;
  border-radius: 9999px;
    width: 12px;
    height: 12px;
    left: -6px;
    top: -6px;
    background: radial-gradient(circle at 35% 35%, #FEF3C7 0%, #FBBF24 55%, #B45309 100%);
    box-shadow:
      0 0 0 2px rgba(10, 15, 28, 0.9),
      0 0 18px rgba(251, 191, 36, 0.7);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.crash-tip-dot-pulse {
  position: absolute;
  border-radius: 9999px;
    width: 28px;
    height: 28px;
    left: -14px;
    top: -14px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
    animation: crash-tip-pulse 1.6s ease-out infinite;
}
.crash-tip-dot[data-phase="lost"] .crash-tip-dot-core {
    background: radial-gradient(circle at 35% 35%, #FECACA 0%, #EF4444 55%, #7F1D1D 100%);
    box-shadow:
      0 0 0 2px rgba(10, 15, 28, 0.9),
      0 0 18px rgba(239, 68, 68, 0.7);
  }
.crash-tip-dot[data-phase="lost"] .crash-tip-dot-pulse {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
    animation: none;
  }
.crash-tip-dot[data-phase="won"] .crash-tip-dot-core {
    background: radial-gradient(circle at 35% 35%, #D1FAE5 0%, #10B981 55%, #064E3B 100%);
    box-shadow:
      0 0 0 2px rgba(10, 15, 28, 0.9),
      0 0 18px rgba(16, 185, 129, 0.7);
  }
.crash-tip-dot[data-phase="won"] .crash-tip-dot-pulse {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
    animation: none;
  }
/* ───── Hero multiplier — big floating number, tier-tinted ─────
   * Sits in the upper-third of the stage so the curve crawling up
   * never collides with the number. Tier-tinted: low=neutral,
   * mid=emerald, high=amber, mega=gold. Won/lost states swap to
   * emerald/crimson with a small caption + delta below. */
.crash-hero {
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    /* Vertical centering — countdown + live multiplier sit dead
     * centre of the stage instead of crowding the top third. */
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    gap: 0.4rem;
}
.crash-hero-label {
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(162, 173, 196, 0.45);
    transition: color 300ms ease;
}
.crash-hero-label-crimson { color: rgba(248, 113, 113, 0.95); }
.crash-hero-value {
  font-weight: 900;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1;
    font-size: clamp(3.4rem, 7.5vw, 5.75rem);
    letter-spacing: -0.035em;
    color: #F1F5F9;
    text-shadow:
      0 0 48px rgba(15, 23, 42, 0.9),
      0 2px 0 rgba(0, 0, 0, 0.25);
    transition:
      color 300ms cubic-bezier(0.16, 1, 0.3, 1),
      text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.crash-hero-sub {
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: rgba(226, 232, 240, 0.75);
    margin-top: 0.1rem;
}
/* Tier ramp on the live number: low=neutral, mid=emerald,
   * high=amber, mega=gold. Only applies while running so the
   * static idle number stays calm. */
.crash-hero[data-phase="idle"] .crash-hero-value {
    color: #475569;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    text-shadow: none;
  }
.crash-hero[data-phase="running"][data-tier="low"]  .crash-hero-value {
    color: #E2E8F0;
    text-shadow:
      0 0 48px rgba(148, 163, 184, 0.2),
      0 2px 0 rgba(0, 0, 0, 0.3);
  }
.crash-hero[data-phase="running"][data-tier="mid"]  .crash-hero-value {
    color: #6EE7B7;
    text-shadow:
      0 0 52px rgba(16, 185, 129, 0.38),
      0 2px 0 rgba(0, 0, 0, 0.3);
  }
.crash-hero[data-phase="running"][data-tier="high"] .crash-hero-value {
    color: #FBBF24;
    text-shadow:
      0 0 58px rgba(251, 191, 36, 0.45),
      0 2px 0 rgba(0, 0, 0, 0.3);
  }
.crash-hero[data-phase="running"][data-tier="mega"] .crash-hero-value {
    color: #FDE68A;
    text-shadow:
      0 0 68px rgba(252, 211, 77, 0.6),
      0 0 18px rgba(251, 191, 36, 0.45),
      0 2px 0 rgba(0, 0, 0, 0.3);
  }
/* Won — emerald hero, gentle pop */
.crash-hero[data-phase="won"] .crash-hero-value {
    color: #34D399;
    text-shadow:
      0 0 56px rgba(16, 185, 129, 0.5),
      0 2px 0 rgba(0, 0, 0, 0.3);
    animation: crash-hero-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
/* Lost — crimson hero with a brief shake */
.crash-hero[data-phase="lost"] .crash-hero-value {
    color: #F87171;
    text-shadow:
      0 0 56px rgba(239, 68, 68, 0.55),
      0 2px 0 rgba(0, 0, 0, 0.3);
    animation: crash-number-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
/* ───── Bottom-left bet ribbon — quiet "at risk" indicator ───── */
/* ───── Chart axis tick labels (Y left gutter, X bottom gutter) ───── */
.crash-axis {
  pointer-events: none;
  position: absolute;
  inset: 0px;
    z-index: 2;
}
/* Axis labels: positioned via inline `transform: translate3d`
   * set every frame by the rAF loop. No CSS transition — at 60+
   * Hz native composition, the eye reads continuous slide. A
   * transition here would FIGHT the per-frame updates and
   * collapse to a jumpy stair-step. */
.crash-y-tick {
  position: absolute;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    left: 10px;
    top: 0;
    font-size: 0.64rem;
    color: rgba(148, 163, 184, 0.45);
    letter-spacing: 0.02em;
    will-change: transform;
    transition: color 250ms ease, opacity 320ms ease;
    animation: crash-tick-fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.crash-y-tick[data-reached="true"] {
    color: #FBBF24;
  }
.crash-x-tick {
  position: absolute;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    bottom: 8px;
    left: 0;
    font-size: 0.58rem;
    color: rgba(148, 163, 184, 0.42);
    letter-spacing: 0.04em;
    will-change: transform;
    transition: color 250ms ease, opacity 320ms ease;
    animation: crash-tick-fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.crash-x-tick[data-reached="true"] {
    color: rgba(251, 191, 36, 0.7);
  }
@keyframes crash-tick-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
@keyframes crash-hero-pop {
    0%   { transform: scale(0.85); opacity: 0.6; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
  }
/* ───── Recent-multipliers ribbon (PlayShell history slot) ─────
   * Same gradient-pill family as Limbo / Dice so the history
   * strip across all originals reads as one consistent surface.
   * Tier-tinted: low (< 2×) reads as a "lost-style" slate pill;
   * everything ≥ 2× progresses through emerald → amber → gold. */
.crash-history-pill {
  display: inline-flex;
  height: 1.75rem;
  min-width: 62px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.crash-history-pill[data-tier="low"] {
    background: linear-gradient(180deg, #3A4358 0%, #2A3344 100%);
    border-color: rgba(80, 92, 115, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
.crash-history-pill[data-tier="mid"] {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%);
    border-color: rgba(5, 150, 105, 0.85);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
  }
.crash-history-pill[data-tier="high"] {
    background: linear-gradient(180deg, #FBBF24 0%, #B45309 100%);
    border-color: rgba(180, 83, 9, 0.85);
    color: #1A0A02;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
  }
.crash-history-pill[data-tier="mega"] {
    background: linear-gradient(180deg, #FDE68A 0%, #D97706 100%);
    border-color: rgba(217, 119, 6, 0.95);
    color: #1A0A02;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 12px rgba(252, 211, 77, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }
/* ───── Side panel: auto-cashout row ─────
   * Inline target input + on/off toggle, rendered as one composed
   * row inside a Field. Disabled state mutes the input but keeps
   * the layout stable. */
.crash-auto-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.crash-auto-input {
  flex: 1 1 0%;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.crash-auto-input.is-disabled {
    opacity: 0.45;
  }
.crash-auto-toggle {
  position: relative;
  display: inline-flex;
  height: 1.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: #0E1726;
    border: 1px solid rgba(60, 70, 90, 0.6);
}
.crash-auto-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
.crash-auto-toggle[data-on="true"] {
    background: linear-gradient(90deg, #B45309 0%, #D4A02A 100%);
    border-color: rgba(245, 217, 139, 0.7);
    box-shadow: 0 0 14px rgba(212, 160, 42, 0.45);
  }
.crash-auto-toggle-knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.crash-auto-toggle[data-on="true"] .crash-auto-toggle-knob {
    transform: translateX(16px);
  }
/* ───── Hero countdown size — slightly smaller than the live mult */
.crash-hero-value-countdown {
    /* White, with a soft sky halo so the countdown reads as
     * "this is ready / waiting" without competing with the
     * tier-tinted live multiplier. */
    color: #FFFFFF !important;
    font-size: clamp(2.4rem, 5vw, 3.75rem) !important;
    text-shadow: 0 0 44px rgba(59, 130, 246, 0.28) !important;
  }
/* ───── Trust strip — bottom corner of the stage ─────
   * Provably-fair signal. Hash visible during the round, full
   * server-seed reveal swaps in on settle. Lives in the
   * BOTTOM-RIGHT so it never collides with the rising curve
   * (which leaves the bottom-left for the player roster
   * sightline). Phase-tinted: emerald glow on settle for
   * "you can verify this now". */
/* ───── Bet panel: status card + result chip ───── */
/* ───── Players panel — live roster ───── */
.crash-players-count {
  border-radius: 9999px;
  font-weight: 700;
  text-transform: none;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  letter-spacing: 0em;
    padding: 2px 8px;
    background: rgba(148, 163, 184, 0.1);
    color: rgba(203, 213, 225, 0.85);
    font-size: 0.6rem;
    letter-spacing: 0;
}
/* ───── Aggregate footer ───── */
/* ───── Hero meta line ─────
   * Live phase: a small pulsing dot + "FLYING" caption sits
   * under the big number so the screen reads "the round is
   * actively running" without overpowering the multiplier. */
.crash-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.56rem;
    letter-spacing: 0.22em;
    color: rgba(251, 191, 36, 0.7);
    margin-top: 0.2rem;
}
.crash-hero-meta-dot {
  display: inline-block;
  border-radius: 9999px;
    width: 6px;
    height: 6px;
    background: #FBBF24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
    animation: crash-hero-pulse 1.4s ease-in-out infinite;
}
.crash-hero-sub-crimson {
    color: rgba(248, 113, 113, 0.85) !important;
  }
@keyframes crash-hero-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
  }
/* ───── Players panel: status ribbon ─────
   * Three little chips above the player roster: LIVE, CASHED,
   * BUST. Each carries a colored dot + count so the lobby
   * state reads at a glance without scanning the row list. */
/* ───── Bet ticket — locked-in stake summary ─────
   * Renders below the CTA whenever the viewer has a bet on the
   * current round. Three-row composition: stake, auto target
   * (if set), and a status badge. Tinted by status so the
   * card itself communicates won/lost. */
.crash-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.7);
  background-color: rgb(8 13 26 / 0.55);
    padding: 10px 12px;
}
.crash-ticket[data-status="cashed"] {
    border-color: rgba(16, 185, 129, 0.45);
    background:
      linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 22, 40, 0.55) 100%);
  }
.crash-ticket[data-status="crashed"] {
    border-color: rgba(239, 68, 68, 0.4);
    background:
      linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(16, 22, 40, 0.55) 100%);
  }
.crash-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.crash-ticket-label {
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
    font-size: 0.56rem;
    letter-spacing: 0.18em;
}
.crash-ticket-value {
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 0.82rem;
    color: #E8EEF7;
}
.crash-ticket-badge {
  border-radius: 0.375rem;
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.56rem;
    padding: 3px 8px;
    letter-spacing: 0.18em;
}
.crash-ticket-badge[data-status="queued"] {
    background: rgba(56, 189, 248, 0.16);
    color: #93C5FD;
    border: 1px solid rgba(56, 189, 248, 0.3);
  }
.crash-ticket-badge[data-status="live"] {
    background: rgba(251, 191, 36, 0.16);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
  }
.crash-ticket-badge[data-status="cashed"] {
    background: rgba(16, 185, 129, 0.18);
    color: #6EE7B7;
    border: 1px solid rgba(16, 185, 129, 0.4);
  }
.crash-ticket-badge[data-status="crashed"] {
    background: rgba(239, 68, 68, 0.16);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.35);
  }
/* ───── History ribbon — the strip above the rack ───── */
.crash-ribbon-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}
.crash-ribbon-label {
  flex-shrink: 0;
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    color: rgba(162, 173, 196, 0.55);
}
.crash-ribbon-divider {
  flex-shrink: 0;
    width: 1px;
    height: 14px;
    background: rgba(60, 70, 90, 0.55);
}
.crash-ribbon-pills {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow-x: auto;
    scrollbar-width: none;
}
.crash-ribbon-pills::-webkit-scrollbar { display: none; }
/* ───── Side-panel players — compact roster ─────
   * Lives under the CTA inside the standard PlayShell side
   * panel. Sized to ~280px width, scrolls vertically when the
   * lobby fills, and squeezes into a single line per player
   * with a tiny status dot for at-a-glance phase. The
   * count chips on the head row collapse the LIVE/CASHED/BUST
   * tally without taking another row. */
.crash-side-players {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.6);
  background-color: rgb(8 13 26 / 0.35);
    padding: 10px 10px 6px;
}
.crash-side-players-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(60, 70, 90, 0.4);
}
.crash-side-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
    max-height: 220px;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 70, 90, 0.55) transparent;
}
.crash-side-list::-webkit-scrollbar { width: 4px; }
.crash-side-list::-webkit-scrollbar-thumb {
    background: rgba(60, 70, 90, 0.55);
    border-radius: 2px;
  }
.crash-side-empty {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
    font-size: 0.7rem;
    padding: 16px 0;
}
.crash-side-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.375rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    padding: 5px 6px;
    font-size: 0.7rem;
}
.crash-side-row:hover { background: rgba(22, 30, 48, 0.5); }
.crash-side-row[data-you="true"] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.09) 0%, transparent 100%);
    box-shadow: inset 2px 0 0 rgba(251, 191, 36, 0.7);
  }
.crash-side-row[data-status="cashed"] {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
  }
.crash-side-row[data-status="crashed"] { opacity: 0.55; }
.crash-side-row[data-status="queued"] { opacity: 0.85; }
.crash-side-row-name {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
    color: rgba(203, 213, 225, 0.78);
}
.crash-side-row[data-you="true"] .crash-side-row-name { color: #FBBF24; }
.crash-side-row[data-status="cashed"] .crash-side-row-name { color: #6EE7B7; }
.crash-side-row-value {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 0.375rem;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.crash-side-row-mult {
  font-weight: 700;
    color: #6EE7B7;
    font-size: 0.72rem;
}
.crash-side-row-mult-live {
    color: #FBBF24;
  }
.crash-side-row-payout {
    color: rgba(110, 231, 183, 0.85);
    font-size: 0.62rem;
    font-weight: 600;
  }
.crash-side-row[data-status="live"] .crash-side-row-payout {
    color: rgba(251, 191, 36, 0.78);
  }
.crash-side-row-stake {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.7rem;
    font-weight: 600;
  }
/* ════════════════════════════════════════════════════════════════════
   *                           ROULETTE (rulet)
   *
   *  Multiplayer CSGO-style roulette rendered into the standard
   *  PlayShell. Stage layout (top → bottom):
   *
   *     ┌─────────────────────────────────────────────────────┐
   *     │                  HERO (compact)                     │
   *     │         status label / countdown / result           │
   *     ├─────────────────────────────────────────────────────┤
   *     │                                                     │
   *     │     TICKER TAPE (wheel) — pre-rolled so the full   │
   *     │     ribbon is visible even at rotation = 0          │
   *     │                                                     │
   *     ├─────────────────────────────────────────────────────┤
   *     │                                                     │
   *     │     RED COLUMN  │  BLACK COLUMN  │  GREEN COLUMN   │
   *     │                                                     │
   *     │   (CSGO-rulet "who-bet-on-what" panel directly      │
   *     │    under the wheel, three columns side by side)     │
   *     │                                                     │
   *     └─────────────────────────────────────────────────────┘
   *
   *  Side panel = standard BetControl + 3-color picker +
   *  PayoutCard + GameCta + a compact one-line summary of the
   *  viewer's own bets (one row per color). No per-color
   *  ticket cards, no flat players list — replaced by the
   *  column layout above.
   * ═══════════════════════════════════════════════════════════════════ */
.rul-stage {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
    height: 100%;
    min-height: 100%;
    gap: 16px;
    padding: 12px 0 0;
}
/* ───── Hero — fixed-height strip at top of the stage ─────
   *  Two reserved rows so the layout doesn't jitter as the
   *  text changes across betting / spinning / settled. The
   *  label row is always `font-size 0.66rem; height 18px`,
   *  the value row is always `height 36px` (sized to fit the
   *  countdown). Padding-top reserves space for PlayShell's
   *  recent-results ribbon (which is `position: absolute;
   *  top: 16px`). */
.rul-hero {
  pointer-events: none;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-direction: column;
  align-items: center;
    height: 92px;
    padding-top: 38px;
}
.rul-hero-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.rul-hero-row-label {
    height: 16px;
  }
.rul-hero-row-value {
    height: 38px;
    margin-top: 2px;
  }
.rul-hero-label {
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    line-height: 1;
    color: rgba(162, 173, 196, 0.6);
}
.rul-hero-label[data-color="red"]   { color: #F87171; }
.rul-hero-label[data-color="black"] { color: #E2E8F0; }
.rul-hero-label[data-color="green"] { color: #34D399; }
.rul-hero-value {
  font-weight: 900;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  line-height: 1;
    font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    color: #F1F5F9;
    text-shadow: 0 0 36px rgba(15, 23, 42, 0.9), 0 2px 0 rgba(0, 0, 0, 0.25);
}
.rul-hero-value-countdown {
    color: #FFFFFF !important;
    text-shadow: 0 0 36px rgba(59, 130, 246, 0.28) !important;
  }
.rul-hero-value[data-color="red"]   { color: #F87171; text-shadow: 0 0 28px rgba(248, 113, 113, 0.45); }
.rul-hero-value[data-color="black"] { color: #E2E8F0; text-shadow: 0 0 28px rgba(226, 232, 240, 0.32); }
.rul-hero-value[data-color="green"] { color: #34D399; text-shadow: 0 0 28px rgba(52, 211, 153, 0.5); }
.rul-hero-sub {
  font-weight: 700;
  text-transform: uppercase;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    line-height: 1;
    color: rgba(162, 173, 196, 0.6);
}
/* ───── Tape window — the horizontal slot ribbon ─────
   *  Sits across the full width of the stage, masked on both
   *  sides so tiles fade out as they approach the edges. The
   *  tape's translateX is set inline; pre-roll in the page
   *  ensures the visible left half is always populated. */
.rul-tape-window {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
    /* Bigger window so the wheel feels substantial, not a tiny
     * strip. Tile + 18px breathing room top/bottom. */
    height: 140px;
    background:
      radial-gradient(ellipse 50% 100% at 50% 50%, rgba(251, 191, 36, 0.05), transparent 70%),
      linear-gradient(180deg, rgba(8, 13, 26, 0.7) 0%, rgba(14, 20, 34, 0.5) 50%, rgba(8, 13, 26, 0.7) 100%);
    border-top: 1px solid rgba(60, 70, 90, 0.5);
    border-bottom: 1px solid rgba(60, 70, 90, 0.5);
}
.rul-tape {
  position: absolute;
  left: 50%;
  top: 0px;
  display: flex;
  align-items: center;
    height: 100%;
    will-change: transform;
}
/* Tile geometry MUST match TILE_W / TILE_GAP constants in
   * app/play/rulet/page.tsx — the page's positioning math
   * (translateX = -(rotation+pre-roll) × TILE_UNIT - TILE_W/2)
   * depends on these values being exact. Any 1-pixel mismatch
   * compounds across the round into the "lands on the wrong
   * tile" bug. */
.rul-tile {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
    width: 110px;
    height: 110px;
    margin-right: 8px;
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 4px 14px rgba(0, 0, 0, 0.4);
}
.rul-tile[data-color="red"] {
    background: linear-gradient(180deg, #C92C36 0%, #8E1E24 100%);
  }
.rul-tile[data-color="black"] {
    background: linear-gradient(180deg, #2A3344 0%, #161D2C 100%);
  }
.rul-tile[data-color="green"] {
    background: linear-gradient(180deg, #10B981 0%, #047857 100%);
  }
.rul-tile-label {
  font-family: "Urbanist", "Inter", system-ui, sans-serif;
  font-weight: 900;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 1.7rem;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    letter-spacing: -0.02em;
}
/* ───── Tape edge fades ───── */
.rul-tape-fade {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 20;
    width: 80px;
}
.rul-tape-fade-left {
    left: 0;
    background: linear-gradient(90deg, rgba(8, 13, 26, 1) 0%, rgba(8, 13, 26, 0) 100%);
  }
.rul-tape-fade-right {
    right: 0;
    background: linear-gradient(-90deg, rgba(8, 13, 26, 1) 0%, rgba(8, 13, 26, 0) 100%);
  }
/* ───── Center pointer ───── */
.rul-pointer {
  pointer-events: none;
  position: absolute;
  z-index: 30;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
}
.rul-pointer-line {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0) 0%, #FBBF24 50%, rgba(251, 191, 36, 0) 100%);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
}
.rul-pointer-arrow {
  position: absolute;
    left: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.rul-pointer-arrow-top {
    top: -2px;
    border-top: 8px solid #FBBF24;
  }
.rul-pointer-arrow-bottom {
    bottom: -2px;
    border-bottom: 8px solid #FBBF24;
  }
/* ───── Color-grouped player columns ─────
   *  Each column = a clickable BET BUTTON (full color, click to
   *  place a bet on that color at the side panel's amount) +
   *  a SEPARATE players BOX underneath listing every bet on
   *  that color. Two stacked cards per column with a small gap
   *  between, NOT one card with a colored top. */
.rul-columns {
  display: grid;
  min-height: 0px;
  width: 100%;
  flex: 1 1 0%;
  gap: 0.75rem;
    /* On phones the three colour buttons can't fit side by side without
       eating their labels; stack vertically below sm: so each colour
       has a generous tap target. Resume the 3-column layout on sm+. */
    grid-template-columns: minmax(0, 1fr);
    padding: 0 4px 12px;
}
@media (min-width: 640px) {
    .rul-columns { grid-template-columns: 1fr 1fr 1fr; }
  }
.rul-column-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
/* Winner column gets no extra treatment — the loser dimming
   * is the only signal needed (winning column stays at full
   * opacity, others fade). */
.rul-column-stack[data-loser="true"] {
    opacity: 0.4;
    filter: saturate(0.6);
  }
/* The clickable bet button — full color background, large
   * tappable area. Click → places a bet on this color. */
.rul-color-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.375rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    height: 56px;
    padding: 0 14px;
    border: 1px solid transparent;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
}
.rul-color-btn:disabled {
    cursor: not-allowed;
  }
.rul-color-btn[data-color="red"] {
    background: linear-gradient(180deg, #C92C36 0%, #8E1E24 100%);
    border-color: rgba(201, 44, 54, 0.7);
  }
.rul-color-btn[data-color="black"] {
    background: linear-gradient(180deg, #2A3344 0%, #161D2C 100%);
    border-color: rgba(60, 70, 90, 0.7);
  }
.rul-color-btn[data-color="green"] {
    background: linear-gradient(180deg, #10B981 0%, #047857 100%);
    border-color: rgba(16, 185, 129, 0.7);
  }
.rul-color-btn:hover:not(:disabled) {
    border-color: rgba(255, 220, 100, 0.8);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 1px rgba(251, 191, 36, 0.55),
      0 8px 22px -8px rgba(251, 191, 36, 0.35);
    transform: translateY(-1px);
  }
.rul-color-btn[data-already="true"] {
    opacity: 0.55;
  }
.rul-color-btn[data-pending="true"] {
    opacity: 0.7;
    cursor: wait;
  }
.rul-color-btn-label {
  flex-shrink: 0;
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.rul-color-btn-mult {
  flex-shrink: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    color: #FFFFFF;
}
.rul-color-btn-totals {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    font-size: 0.78rem;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
/* Players box — separate card UNDER the button. */
.rul-column-box {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  background-color: rgb(8 13 26 / 0.4);
    border-color: rgba(60, 70, 90, 0.55);
    min-height: 180px;
}
.rul-column-list {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 70, 90, 0.55) transparent;
}
.rul-column-list::-webkit-scrollbar { width: 4px; }
.rul-column-list::-webkit-scrollbar-thumb {
    background: rgba(60, 70, 90, 0.55);
    border-radius: 2px;
  }
.rul-column-empty {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.4);
    letter-spacing: 0.08em;
}
.rul-column-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.375rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    padding: 4px 6px;
    font-size: 0.7rem;
}
.rul-column-row:hover {
    background: rgba(22, 30, 48, 0.5);
  }
/* Viewer's own row — soft amber tint only, no gold rail and
   * no zap-icon slot. The username text alone in amber is the
   * "this is you" signal. */
.rul-column-row[data-you="true"] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, transparent 100%);
  }
.rul-column-row-name {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
    color: rgba(203, 213, 225, 0.78);
}
.rul-column-row[data-you="true"] .rul-column-row-name {
    color: #FBBF24;
  }
.rul-column-row-amt {
  flex-shrink: 0;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: #E2E8F0;
    font-size: 0.7rem;
}
/* Won row — payout flips to emerald so the column reads as a
   * who-won ledger at a glance on settle. */
.rul-column-row[data-won="true"] .rul-column-row-amt {
    color: #34D399;
  }
/* ───── Recent-results ribbon (PlayShell history slot) ───── */
.rul-ribbon-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}
.rul-ribbon-label {
  flex-shrink: 0;
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    color: rgba(162, 173, 196, 0.55);
}
.rul-ribbon-divider {
  flex-shrink: 0;
    width: 1px;
    height: 14px;
    background: rgba(60, 70, 90, 0.55);
}
.rul-ribbon-pills {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow-x: auto;
    scrollbar-width: none;
}
.rul-ribbon-pills::-webkit-scrollbar { display: none; }
.rul-history-pill {
  display: inline-flex;
  height: 1.75rem;
  min-width: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    padding: 0 8px;
    color: #FFFFFF;
}
.rul-history-pill[data-color="red"] {
    background: linear-gradient(180deg, #C92C36 0%, #8E1E24 100%);
    border-color: rgba(199, 44, 54, 0.85);
  }
.rul-history-pill[data-color="black"] {
    background: linear-gradient(180deg, #2A3344 0%, #161D2C 100%);
    border-color: rgba(60, 70, 90, 0.85);
    color: #E2E8F0;
  }
.rul-history-pill[data-color="green"] {
    background: linear-gradient(180deg, #10B981 0%, #047857 100%);
    border-color: rgba(16, 185, 129, 0.85);
  }
/* ───── Side-panel: how-to-play hint card ─────
   *  Quiet info card replacing the old standalone PLACE BET CTA.
   *  The actual bet triggers live on the stage as the column
   *  buttons; this card tells the player to use those buttons. */
/* ───── Side-panel: my-bets summary (one row per color) ─────
   *  Replaces the old bulky ticket cards. Single strip with:
   *  color label · stake · result/multiplier. Tinted by status. */
.rul-mybets {
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(29 39 64 / 0.55);
  background-color: rgb(8 13 26 / 0.4);
    padding: 6px 8px;
}
.rul-mybets-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.125rem;
    padding: 5px 6px;
    font-size: 0.72rem;
}
.rul-mybets-row[data-status="won"] {
    background: rgba(16, 185, 129, 0.1);
  }
.rul-mybets-row[data-status="lost"] {
    opacity: 0.55;
  }
.rul-mybets-color {
  font-weight: 700;
  text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    min-width: 50px;
}
.rul-mybets-color[data-color="red"]   { color: #F87171; }
.rul-mybets-color[data-color="black"] { color: #CBD5E1; }
.rul-mybets-color[data-color="green"] { color: #34D399; }
.rul-mybets-amount {
  margin-left: auto;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: #E2E8F0;
}
.rul-mybets-result {
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    min-width: 56px;
    text-align: right;
    color: #FBBF24;
    font-size: 0.7rem;
}
.rul-mybets-row[data-status="won"] .rul-mybets-result {
    color: #34D399;
  }
.rul-mybets-row[data-status="lost"] .rul-mybets-result {
    color: #F87171;
  }
/* ──────────────────── SKELETON LOADING ──────────────────── */
/* Base matte shimmer block. Pairs with components/ui/Skeleton.
     Uses a diagonal highlight that sweeps across a dim ink base —
     matches the imperial palette so route transitions don't jar.   */
.sk-block {
    position: relative;
    overflow: hidden;
    background-color: rgba(28, 36, 54, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.02);
    isolation: isolate;
  }
.sk-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.045) 50%,
      transparent 65%,
      transparent 100%
    );
    transform: translateX(-100%);
    animation: sk-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.-inset-6 {
  inset: -1.5rem;
}
.inset-0 {
  inset: 0px;
}
.inset-\[18\%\] {
  inset: 18%;
}
.-inset-y-12 {
  top: -3rem;
  bottom: -3rem;
}
.-inset-y-4 {
  top: -1rem;
  bottom: -1rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-5 {
  left: 1.25rem;
  right: 1.25rem;
}
.inset-x-6 {
  left: 1.5rem;
  right: 1.5rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5 {
  bottom: -0.125rem;
}
.-bottom-14 {
  bottom: -3.5rem;
}
.-bottom-16 {
  bottom: -4rem;
}
.-bottom-20 {
  bottom: -5rem;
}
.-bottom-24 {
  bottom: -6rem;
}
.-bottom-28 {
  bottom: -7rem;
}
.-bottom-3 {
  bottom: -0.75rem;
}
.-bottom-32 {
  bottom: -8rem;
}
.-bottom-4 {
  bottom: -1rem;
}
.-bottom-40 {
  bottom: -10rem;
}
.-left-1\/3 {
  left: -33.333333%;
}
.-left-10 {
  left: -2.5rem;
}
.-left-12 {
  left: -3rem;
}
.-left-16 {
  left: -4rem;
}
.-left-20 {
  left: -5rem;
}
.-left-24 {
  left: -6rem;
}
.-left-28 {
  left: -7rem;
}
.-left-4 {
  left: -1rem;
}
.-left-40 {
  left: -10rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-10 {
  right: -2.5rem;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-20 {
  right: -5rem;
}
.-right-24 {
  right: -6rem;
}
.-right-28 {
  right: -7rem;
}
.-right-3 {
  right: -0.75rem;
}
.-right-32 {
  right: -8rem;
}
.-right-40 {
  right: -10rem;
}
.-right-6 {
  right: -1.5rem;
}
.-right-8 {
  right: -2rem;
}
.-top-10 {
  top: -2.5rem;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-20 {
  top: -5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-32 {
  top: -8rem;
}
.-top-40 {
  top: -10rem;
}
.-top-6 {
  top: -1.5rem;
}
.-top-8 {
  top: -2rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1\/4 {
  bottom: 25%;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[16px\] {
  left: 16px;
}
.left-\[18px\] {
  left: 18px;
}
.left-\[2px\] {
  left: 2px;
}
.left-\[30\%\] {
  left: 30%;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/3 {
  top: 33.333333%;
}
.top-1\/4 {
  top: 25%;
}
.top-2 {
  top: 0.5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-\[18\%\] {
  top: 18%;
}
.top-\[20\%\] {
  top: 20%;
}
.top-\[55\%\] {
  top: 55%;
}
.top-\[72px\] {
  top: 72px;
}
.top-\[calc\(100\%\+12px\)\] {
  top: calc(100% + 12px);
}
.top-\[calc\(100\%\+4px\)\] {
  top: calc(100% + 4px);
}
.top-\[calc\(100\%\+6px\)\] {
  top: calc(100% + 6px);
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[110\] {
  z-index: 110;
}
.z-\[140\] {
  z-index: 140;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[3\] {
  z-index: 3;
}
.z-\[55\] {
  z-index: 55;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[80\] {
  z-index: 80;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-px {
  margin-top: 1px;
  margin-bottom: 1px;
}
.-mt-px {
  margin-top: -1px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[5\/7\] {
  aspect-ratio: 5/7;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.\!h-7 {
  height: 1.75rem !important;
}
.\!h-8 {
  height: 2rem !important;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[12px\] {
  height: 12px;
}
.h-\[136px\] {
  height: 136px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[152px\] {
  height: 152px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[168px\] {
  height: 168px;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[184px\] {
  height: 184px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[196px\] {
  height: 196px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[240px\] {
  height: 240px;
}
.h-\[244px\] {
  height: 244px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[32px\] {
  height: 32px;
}
.h-\[340px\] {
  height: 340px;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[500px\] {
  height: 500px;
}
.h-\[520px\] {
  height: 520px;
}
.h-\[560px\] {
  height: 560px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[96px\] {
  height: 96px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-\[120px\] {
  max-height: 120px;
}
.max-h-\[200px\] {
  max-height: 200px;
}
.max-h-\[240px\] {
  max-height: 240px;
}
.max-h-\[280px\] {
  max-height: 280px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[600px\] {
  max-height: 600px;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-\[62px\] {
  min-height: 62px;
}
.min-h-\[640px\] {
  min-height: 640px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-7 {
  width: 1.75rem !important;
}
.\!w-8 {
  width: 2rem !important;
}
.w-0 {
  width: 0px;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[12px\] {
  width: 12px;
}
.w-\[143px\] {
  width: 143px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[172px\] {
  width: 172px;
}
.w-\[175px\] {
  width: 175px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[196px\] {
  width: 196px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[28px\] {
  width: 28px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[42px\] {
  width: 42px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[520px\] {
  width: 520px;
}
.w-\[560px\] {
  width: 560px;
}
.w-\[68px\] {
  width: 68px;
}
.w-\[71\%\] {
  width: 71%;
}
.w-\[80px\] {
  width: 80px;
}
.w-\[82\%\] {
  width: 82%;
}
.w-\[88px\] {
  width: 88px;
}
.w-\[90px\] {
  width: 90px;
}
.w-\[min\(360px\2c 92vw\)\] {
  width: min(360px,92vw);
}
.w-\[min\(94vw\2c 380px\)\] {
  width: min(94vw,380px);
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[60px\] {
  min-width: 60px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[540px\] {
  max-width: 540px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.max-w-\[600px\] {
  max-width: 600px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[960px\] {
  max-width: 960px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[2\] {
  flex: 2;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.origin-left {
  transform-origin: left;
}
.origin-top {
  transform-origin: top;
}
.origin-top-left {
  transform-origin: top left;
}
.origin-top-right {
  transform-origin: top right;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-12 {
  --tw-rotate: -12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-12 {
  --tw-rotate: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.skew-x-\[-18deg\] {
  --tw-skew-x: -18deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.skew-x-\[-22deg\] {
  --tw-skew-x: -22deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.94\] {
  --tw-scale-x: 0.94;
  --tw-scale-y: 0.94;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.96\] {
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.97\] {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.98\] {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-\[ib-float_4s_ease-in-out_infinite\] {
  animation: ib-float 4s ease-in-out infinite;
}
.animate-\[ib-float_5s_ease-in-out_infinite\] {
  animation: ib-float 5s ease-in-out infinite;
}
.animate-\[ib-float_6s_ease-in-out_infinite\] {
  animation: ib-float 6s ease-in-out infinite;
}
.animate-\[ib-float_7s_ease-in-out_infinite\] {
  animation: ib-float 7s ease-in-out infinite;
}
@keyframes fade-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out both;
}
@keyframes fade-up {

  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes float-slow {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}
.animate-float-slow {
  animation: float-slow 7s ease-in-out infinite;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes progress-slide {

  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(260%);
  }
}
.animate-progress-slide {
  animation: progress-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.\!cursor-not-allowed {
  cursor: not-allowed !important;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.auto-cols-\[150px\] {
  grid-auto-columns: 150px;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[150px_1\.4fr_80px_90px_120px_120px_1\.4fr_110px\] {
  grid-template-columns: 150px 1.4fr 80px 90px 120px 120px 1.4fr 110px;
}
.grid-cols-\[150px_1\.4fr_90px_120px_1\.6fr_140px_110px\] {
  grid-template-columns: 150px 1.4fr 90px 120px 1.6fr 140px 110px;
}
.grid-cols-\[1fr_2fr_140px_120px_120px\] {
  grid-template-columns: 1fr 2fr 140px 120px 120px;
}
.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}
.grid-cols-\[2fr_2fr_90px_80px_140px_110px_100px\] {
  grid-template-columns: 2fr 2fr 90px 80px 140px 110px 100px;
}
.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-9 {
  gap: 2.25rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-\[2px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2px * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-divide-opacity, 1));
}
.divide-line\/40 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(29 39 64 / 0.4);
}
.divide-line\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(29 39 64 / 0.6);
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.scroll-smooth {
  scroll-behavior: smooth;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[0\.5rem\] {
  border-radius: 0.5rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-500\/25 {
  border-color: rgb(245 158 11 / 0.25);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-black\/25 {
  border-color: rgb(0 0 0 / 0.25);
}
.border-crimson-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-crimson-500\/25 {
  border-color: rgb(239 68 68 / 0.25);
}
.border-crimson-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-crimson-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-crimson-500\/60 {
  border-color: rgb(239 68 68 / 0.6);
}
.border-crimson-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-400\/55 {
  border-color: rgb(52 211 153 / 0.55);
}
.border-emerald-500\/25 {
  border-color: rgb(16 185 129 / 0.25);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-500\/50 {
  border-color: rgb(16 185 129 / 0.5);
}
.border-gold-400 {
  --tw-border-opacity: 1;
  border-color: rgb(231 184 76 / var(--tw-border-opacity, 1));
}
.border-gold-400\/55 {
  border-color: rgb(231 184 76 / 0.55);
}
.border-gold-400\/60 {
  border-color: rgb(231 184 76 / 0.6);
}
.border-gold-500\/20 {
  border-color: rgb(212 160 42 / 0.2);
}
.border-gold-500\/25 {
  border-color: rgb(212 160 42 / 0.25);
}
.border-gold-500\/30 {
  border-color: rgb(212 160 42 / 0.3);
}
.border-gold-500\/35 {
  border-color: rgb(212 160 42 / 0.35);
}
.border-gold-500\/40 {
  border-color: rgb(212 160 42 / 0.4);
}
.border-gold-500\/45 {
  border-color: rgb(212 160 42 / 0.45);
}
.border-gold-500\/50 {
  border-color: rgb(212 160 42 / 0.5);
}
.border-gold-500\/60 {
  border-color: rgb(212 160 42 / 0.6);
}
.border-gold-600 {
  --tw-border-opacity: 1;
  border-color: rgb(164 118 17 / var(--tw-border-opacity, 1));
}
.border-gold-700 {
  --tw-border-opacity: 1;
  border-color: rgb(114 81 8 / var(--tw-border-opacity, 1));
}
.border-ink-800 {
  --tw-border-opacity: 1;
  border-color: rgb(18 26 46 / var(--tw-border-opacity, 1));
}
.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
}
.border-line\/20 {
  border-color: rgb(29 39 64 / 0.2);
}
.border-line\/30 {
  border-color: rgb(29 39 64 / 0.3);
}
.border-line\/40 {
  border-color: rgb(29 39 64 / 0.4);
}
.border-line\/50 {
  border-color: rgb(29 39 64 / 0.5);
}
.border-line\/60 {
  border-color: rgb(29 39 64 / 0.6);
}
.border-line\/70 {
  border-color: rgb(29 39 64 / 0.7);
}
.border-line\/80 {
  border-color: rgb(29 39 64 / 0.8);
}
.border-mint-400\/55 {
  border-color: rgb(62 226 156 / 0.55);
}
.border-mint-600 {
  --tw-border-opacity: 1;
  border-color: rgb(16 181 114 / var(--tw-border-opacity, 1));
}
.border-royal-400\/40 {
  border-color: rgb(167 139 250 / 0.4);
}
.border-royal-500\/25 {
  border-color: rgb(139 92 246 / 0.25);
}
.border-royal-500\/30 {
  border-color: rgb(139 92 246 / 0.3);
}
.border-royal-500\/40 {
  border-color: rgb(139 92 246 / 0.4);
}
.border-sky-400\/70 {
  border-color: rgb(56 189 248 / 0.7);
}
.border-sky-500\/30 {
  border-color: rgb(14 165 233 / 0.3);
}
.border-sky-500\/40 {
  border-color: rgb(14 165 233 / 0.4);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/\[0\.05\] {
  border-color: rgb(255 255 255 / 0.05);
}
.border-t-gold-400 {
  --tw-border-opacity: 1;
  border-top-color: rgb(231 184 76 / var(--tw-border-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(8 13 26 / var(--tw-bg-opacity, 1));
}
.bg-crimson-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-crimson-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-crimson-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-crimson-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-crimson-500\/30 {
  background-color: rgb(239 68 68 / 0.3);
}
.bg-crimson-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-crimson-500\/\[0\.06\] {
  background-color: rgb(239 68 68 / 0.06);
}
.bg-crimson-500\/\[0\.08\] {
  background-color: rgb(239 68 68 / 0.08);
}
.bg-crimson-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-crimson-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(58 22 32 / var(--tw-bg-opacity, 1));
}
.bg-current {
  background-color: currentColor;
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/25 {
  background-color: rgb(16 185 129 / 0.25);
}
.bg-emerald-500\/30 {
  background-color: rgb(16 185 129 / 0.3);
}
.bg-emerald-500\/5 {
  background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-500\/60 {
  background-color: rgb(16 185 129 / 0.6);
}
.bg-emerald-500\/70 {
  background-color: rgb(16 185 129 / 0.7);
}
.bg-emerald-500\/\[0\.04\] {
  background-color: rgb(16 185 129 / 0.04);
}
.bg-emerald-500\/\[0\.06\] {
  background-color: rgb(16 185 129 / 0.06);
}
.bg-gold-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 184 76 / var(--tw-bg-opacity, 1));
}
.bg-gold-400\/30 {
  background-color: rgb(231 184 76 / 0.3);
}
.bg-gold-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 160 42 / var(--tw-bg-opacity, 1));
}
.bg-gold-500\/10 {
  background-color: rgb(212 160 42 / 0.1);
}
.bg-gold-500\/15 {
  background-color: rgb(212 160 42 / 0.15);
}
.bg-gold-500\/20 {
  background-color: rgb(212 160 42 / 0.2);
}
.bg-gold-500\/5 {
  background-color: rgb(212 160 42 / 0.05);
}
.bg-gold-500\/90 {
  background-color: rgb(212 160 42 / 0.9);
}
.bg-gold-500\/\[0\.05\] {
  background-color: rgb(212 160 42 / 0.05);
}
.bg-gold-500\/\[0\.08\] {
  background-color: rgb(212 160 42 / 0.08);
}
.bg-gold-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(72 51 5 / var(--tw-bg-opacity, 1));
}
.bg-ink-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 34 59 / var(--tw-bg-opacity, 1));
}
.bg-ink-700\/30 {
  background-color: rgb(24 34 59 / 0.3);
}
.bg-ink-700\/60 {
  background-color: rgb(24 34 59 / 0.6);
}
.bg-ink-700\/70 {
  background-color: rgb(24 34 59 / 0.7);
}
.bg-ink-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
}
.bg-ink-800\/30 {
  background-color: rgb(18 26 46 / 0.3);
}
.bg-ink-800\/40 {
  background-color: rgb(18 26 46 / 0.4);
}
.bg-ink-800\/50 {
  background-color: rgb(18 26 46 / 0.5);
}
.bg-ink-800\/60 {
  background-color: rgb(18 26 46 / 0.6);
}
.bg-ink-800\/70 {
  background-color: rgb(18 26 46 / 0.7);
}
.bg-ink-800\/80 {
  background-color: rgb(18 26 46 / 0.8);
}
.bg-ink-800\/95 {
  background-color: rgb(18 26 46 / 0.95);
}
.bg-ink-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(12 18 34 / var(--tw-bg-opacity, 1));
}
.bg-ink-900\/30 {
  background-color: rgb(12 18 34 / 0.3);
}
.bg-ink-900\/40 {
  background-color: rgb(12 18 34 / 0.4);
}
.bg-ink-900\/50 {
  background-color: rgb(12 18 34 / 0.5);
}
.bg-ink-900\/55 {
  background-color: rgb(12 18 34 / 0.55);
}
.bg-ink-900\/60 {
  background-color: rgb(12 18 34 / 0.6);
}
.bg-ink-900\/70 {
  background-color: rgb(12 18 34 / 0.7);
}
.bg-ink-900\/80 {
  background-color: rgb(12 18 34 / 0.8);
}
.bg-ink-900\/95 {
  background-color: rgb(12 18 34 / 0.95);
}
.bg-ink-950\/30 {
  background-color: rgb(8 13 26 / 0.3);
}
.bg-ink-950\/40 {
  background-color: rgb(8 13 26 / 0.4);
}
.bg-ink-950\/45 {
  background-color: rgb(8 13 26 / 0.45);
}
.bg-ink-950\/50 {
  background-color: rgb(8 13 26 / 0.5);
}
.bg-ink-950\/55 {
  background-color: rgb(8 13 26 / 0.55);
}
.bg-ink-950\/60 {
  background-color: rgb(8 13 26 / 0.6);
}
.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(29 39 64 / var(--tw-bg-opacity, 1));
}
.bg-line\/80 {
  background-color: rgb(29 39 64 / 0.8);
}
.bg-mint-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(62 226 156 / var(--tw-bg-opacity, 1));
}
.bg-mint-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 213 137 / var(--tw-bg-opacity, 1));
}
.bg-mint-500\/10 {
  background-color: rgb(34 213 137 / 0.1);
}
.bg-mint-500\/20 {
  background-color: rgb(34 213 137 / 0.2);
}
.bg-mint-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 138 86 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-royal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-royal-500\/10 {
  background-color: rgb(139 92 246 / 0.1);
}
.bg-royal-500\/15 {
  background-color: rgb(139 92 246 / 0.15);
}
.bg-royal-500\/20 {
  background-color: rgb(139 92 246 / 0.2);
}
.bg-royal-500\/30 {
  background-color: rgb(139 92 246 / 0.3);
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}
.bg-text-dim\/40 {
  background-color: rgb(98 108 135 / 0.4);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-500\/15 {
  background-color: rgb(139 92 246 / 0.15);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.05\] {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}
.bg-zinc-900\/40 {
  background-color: rgb(24 24 27 / 0.4);
}
.bg-\[linear-gradient\(120deg\2c \#1A1305_0\%\2c \#0C1222_45\%\2c \#1F1502_100\%\)\] {
  background-image: linear-gradient(120deg,#1A1305 0%,#0C1222 45%,#1F1502 100%);
}
.bg-\[linear-gradient\(120deg\2c \#1A1305_0\%\2c \#0C1222_55\%\2c \#1F1502_100\%\)\] {
  background-image: linear-gradient(120deg,#1A1305 0%,#0C1222 55%,#1F1502 100%);
}
.bg-\[linear-gradient\(120deg\2c \#1C0E45_0\%\2c \#0C1222_55\%\2c \#190938_100\%\)\] {
  background-image: linear-gradient(120deg,#1C0E45 0%,#0C1222 55%,#190938 100%);
}
.bg-\[linear-gradient\(120deg\2c \#2A0A0E_0\%\2c \#0C1222_55\%\2c \#1A0A20_100\%\)\] {
  background-image: linear-gradient(120deg,#2A0A0E 0%,#0C1222 55%,#1A0A20 100%);
}
.bg-\[linear-gradient\(160deg\2c \#062947_0\%\2c \#08121E_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#062947 0%,#08121E 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(160deg\2c \#062E22_0\%\2c \#08121E_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#062E22 0%,#08121E 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(160deg\2c \#1D0E45_0\%\2c \#120A28_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#1D0E45 0%,#120A28 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(160deg\2c \#2EA1E6_0\%\2c \#0E5FA8_100\%\)\] {
  background-image: linear-gradient(160deg,#2EA1E6 0%,#0E5FA8 100%);
}
.bg-\[linear-gradient\(160deg\2c \#3A2307_0\%\2c \#1A1102_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#3A2307 0%,#1A1102 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(160deg\2c \#3A2A06_0\%\2c \#1F1502_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#3A2A06 0%,#1F1502 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(160deg\2c \#3B0A10_0\%\2c \#1A0A12_55\%\2c \#0C1222_100\%\)\] {
  background-image: linear-gradient(160deg,#3B0A10 0%,#1A0A12 55%,#0C1222 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(8\2c 11\2c 24\2c 0\)_38\%\2c rgba\(8\2c 11\2c 24\2c 0\.55\)_72\%\2c rgba\(8\2c 11\2c 24\2c 0\.88\)_100\%\)\] {
  background-image: linear-gradient(180deg,rgba(8,11,24,0) 38%,rgba(8,11,24,0.55) 72%,rgba(8,11,24,0.88) 100%);
}
.bg-\[radial-gradient\(120\%_80\%_at_20\%_-10\%\2c \#2a2548_0\%\2c \#0B1020_55\%\2c \#080b18_100\%\)\] {
  background-image: radial-gradient(120% 80% at 20% -10%,#2a2548 0%,#0B1020 55%,#080b18 100%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(139\2c 92\2c 246\2c 0\.34\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(139,92,246,0.34),transparent 60%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(14\2c 165\2c 233\2c 0\.32\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(14,165,233,0.32),transparent 60%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(16\2c 185\2c 129\2c 0\.32\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(16,185,129,0.32),transparent 60%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(231\2c 184\2c 76\2c 0\.35\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(231,184,76,0.35),transparent 60%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(239\2c 68\2c 68\2c 0\.32\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(239,68,68,0.32),transparent 60%);
}
.bg-\[radial-gradient\(80\%_60\%_at_50\%_30\%\2c rgba\(251\2c 191\2c 36\2c 0\.3\)\2c transparent_60\%\)\] {
  background-image: radial-gradient(80% 60% at 50% 30%,rgba(251,191,36,0.3),transparent 60%);
}
.bg-\[radial-gradient\(ellipse_at_center\2c rgba\(8\2c 11\2c 24\2c 0\.2\)_0\%\2c rgba\(8\2c 11\2c 24\2c 0\.55\)_100\%\)\] {
  background-image: radial-gradient(ellipse at center,rgba(8,11,24,0.2) 0%,rgba(8,11,24,0.55) 100%);
}
.bg-gold-hairline {
  background-image: linear-gradient(90deg, transparent, rgba(212,160,42,0.55), transparent);
}
.bg-gold-sheen {
  background-image: linear-gradient(135deg, #F5D98B 0%, #D4A02A 45%, #A47611 72%, #F5D98B 100%);
}
.bg-gold-soft {
  background-image: linear-gradient(135deg, rgba(212,160,42,0.18) 0%, rgba(212,160,42,0.04) 100%);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-amber-500\/20 {
  --tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500\/25 {
  --tw-gradient-from: rgb(245 158 11 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-crimson-500\/20 {
  --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-crimson-500\/25 {
  --tw-gradient-from: rgb(239 68 68 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-crimson-500\/30 {
  --tw-gradient-from: rgb(239 68 68 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-crimson-500\/35 {
  --tw-gradient-from: rgb(239 68 68 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/20 {
  --tw-gradient-from: rgb(16 185 129 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/25 {
  --tw-gradient-from: rgb(16 185 129 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/30 {
  --tw-gradient-from: rgb(16 185 129 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-400 {
  --tw-gradient-from: #E7B84C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(231 184 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-400\/20 {
  --tw-gradient-from: rgb(231 184 76 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(231 184 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-400\/30 {
  --tw-gradient-from: rgb(231 184 76 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(231 184 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-400\/35 {
  --tw-gradient-from: rgb(231 184 76 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(231 184 76 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-500\/25 {
  --tw-gradient-from: rgb(212 160 42 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 160 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gold-500\/40 {
  --tw-gradient-from: rgb(212 160 42 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 160 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink-900 {
  --tw-gradient-from: #0C1222 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 18 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink-950\/95 {
  --tw-gradient-from: rgb(8 13 26 / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 13 26 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-royal-500\/20 {
  --tw-gradient-from: rgb(139 92 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-royal-500\/25 {
  --tw-gradient-from: rgb(139 92 246 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-royal-500\/30 {
  --tw-gradient-from: rgb(139 92 246 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-royal-500\/35 {
  --tw-gradient-from: rgb(139 92 246 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500\/20 {
  --tw-gradient-from: rgb(14 165 233 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500\/25 {
  --tw-gradient-from: rgb(14 165 233 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-amber-400\/60 {
  --tw-gradient-to: rgb(251 191 36 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(251 191 36 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-amber-600\/5 {
  --tw-gradient-to: rgb(217 119 6 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(217 119 6 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-crimson-400\/60 {
  --tw-gradient-to: rgb(248 113 113 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 113 113 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-crimson-600\/5 {
  --tw-gradient-to: rgb(220 38 38 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(220 38 38 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-400\/60 {
  --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(52 211 153 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-600\/5 {
  --tw-gradient-to: rgb(5 150 105 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 150 105 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gold-400\/60 {
  --tw-gradient-to: rgb(231 184 76 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(231 184 76 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gold-500\/60 {
  --tw-gradient-to: rgb(212 160 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(212 160 42 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gold-600\/5 {
  --tw-gradient-to: rgb(164 118 17 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(164 118 17 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink-900\/70 {
  --tw-gradient-to: rgb(12 18 34 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(12 18 34 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink-950\/80 {
  --tw-gradient-to: rgb(8 13 26 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(8 13 26 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line {
  --tw-gradient-to: rgb(29 39 64 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1D2740 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-royal-400\/60 {
  --tw-gradient-to: rgb(167 139 250 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(167 139 250 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-royal-600\/5 {
  --tw-gradient-to: rgb(124 58 237 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(124 58 237 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-400\/60 {
  --tw-gradient-to: rgb(56 189 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(56 189 248 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-sky-600\/5 {
  --tw-gradient-to: rgb(2 132 199 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(2 132 199 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-gold-700 {
  --tw-gradient-to: #725108 var(--tw-gradient-to-position);
}
.to-line\/30 {
  --tw-gradient-to: rgb(29 39 64 / 0.3) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.stroke-crimson-400\/70 {
  stroke: rgb(248 113 113 / 0.7);
}
.stroke-emerald-400\/70 {
  stroke: rgb(52 211 153 / 0.7);
}
.stroke-\[length\:var\(--ibs\)\] {
  stroke-width: var(--ibs);
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.\!px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.\!py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}
.\!pl-2 {
  padding-left: 0.5rem !important;
}
.\!pr-3 {
  padding-right: 0.75rem !important;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-\[52px\] {
  padding-left: 52px;
}
.pl-\[68px\] {
  padding-left: 68px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-16 {
  padding-right: 4rem;
}
.pr-20 {
  padding-right: 5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-display {
  font-family: "Urbanist", "Inter", system-ui, sans-serif;
}
.font-mono {
  font-family: "Inter", system-ui, sans-serif;
}
.font-sans {
  font-family: "Inter", system-ui, sans-serif;
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.55rem\] {
  font-size: 0.55rem;
}
.text-\[0\.56rem\] {
  font-size: 0.56rem;
}
.text-\[0\.58rem\] {
  font-size: 0.58rem;
}
.text-\[0\.5rem\] {
  font-size: 0.5rem;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.64rem\] {
  font-size: 0.64rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.66rem\] {
  font-size: 0.66rem;
}
.text-\[0\.68rem\] {
  font-size: 0.68rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.72rem\] {
  font-size: 0.72rem;
}
.text-\[0\.74rem\] {
  font-size: 0.74rem;
}
.text-\[0\.75rem\] {
  font-size: 0.75rem;
}
.text-\[0\.76rem\] {
  font-size: 0.76rem;
}
.text-\[0\.78rem\] {
  font-size: 0.78rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.82rem\] {
  font-size: 0.82rem;
}
.text-\[0\.84rem\] {
  font-size: 0.84rem;
}
.text-\[0\.85rem\] {
  font-size: 0.85rem;
}
.text-\[0\.86rem\] {
  font-size: 0.86rem;
}
.text-\[0\.88rem\] {
  font-size: 0.88rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[0\.92rem\] {
  font-size: 0.92rem;
}
.text-\[0\.95rem\] {
  font-size: 0.95rem;
}
.text-\[0\.96rem\] {
  font-size: 0.96rem;
}
.text-\[0\.98rem\] {
  font-size: 0.98rem;
}
.text-\[0\.9rem\] {
  font-size: 0.9rem;
}
.text-\[1\.02rem\] {
  font-size: 1.02rem;
}
.text-\[1\.05rem\] {
  font-size: 1.05rem;
}
.text-\[1\.15rem\] {
  font-size: 1.15rem;
}
.text-\[1\.1rem\] {
  font-size: 1.1rem;
}
.text-\[1\.25rem\] {
  font-size: 1.25rem;
}
.text-\[1\.45rem\] {
  font-size: 1.45rem;
}
.text-\[1\.4rem\] {
  font-size: 1.4rem;
}
.text-\[1\.55rem\] {
  font-size: 1.55rem;
}
.text-\[1\.75rem\] {
  font-size: 1.75rem;
}
.text-\[1\.85rem\] {
  font-size: 1.85rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[1rem\] {
  font-size: 1rem;
}
.text-\[2\.1rem\] {
  font-size: 2.1rem;
}
.text-\[2rem\] {
  font-size: 2rem;
}
.text-\[3\.4rem\] {
  font-size: 3.4rem;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-\[1\.55\] {
  line-height: 1.55;
}
.leading-\[1\] {
  line-height: 1;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-\[0\.5em\] {
  letter-spacing: 0.5em;
}
.tracking-imperial {
  letter-spacing: 0.05em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-text-dim {
  --tw-text-opacity: 1 !important;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1)) !important;
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-300\/90 {
  color: rgb(252 211 77 / 0.9);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-canvas {
  --tw-text-opacity: 1;
  color: rgb(8 13 26 / var(--tw-text-opacity, 1));
}
.text-crimson-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-crimson-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-crimson-400\/80 {
  color: rgb(248 113 113 / 0.8);
}
.text-crimson-500\/10 {
  color: rgb(239 68 68 / 0.1);
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-200\/85 {
  color: rgb(167 243 208 / 0.85);
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-gold-100 {
  --tw-text-opacity: 1;
  color: rgb(251 233 174 / var(--tw-text-opacity, 1));
}
.text-gold-200 {
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.text-gold-200\/85 {
  color: rgb(245 217 139 / 0.85);
}
.text-gold-300 {
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
}
.text-gold-300\/60 {
  color: rgb(239 200 112 / 0.6);
}
.text-gold-300\/80 {
  color: rgb(239 200 112 / 0.8);
}
.text-gold-300\/90 {
  color: rgb(239 200 112 / 0.9);
}
.text-gold-400 {
  --tw-text-opacity: 1;
  color: rgb(231 184 76 / var(--tw-text-opacity, 1));
}
.text-gold-400\/60 {
  color: rgb(231 184 76 / 0.6);
}
.text-gold-400\/70 {
  color: rgb(231 184 76 / 0.7);
}
.text-gold-400\/80 {
  color: rgb(231 184 76 / 0.8);
}
.text-gold-500\/10 {
  color: rgb(212 160 42 / 0.1);
}
.text-gold-500\/40 {
  color: rgb(212 160 42 / 0.4);
}
.text-gold-500\/5 {
  color: rgb(212 160 42 / 0.05);
}
.text-gold-500\/70 {
  color: rgb(212 160 42 / 0.7);
}
.text-gold-500\/\[0\.09\] {
  color: rgb(212 160 42 / 0.09);
}
.text-ink-950 {
  --tw-text-opacity: 1;
  color: rgb(8 13 26 / var(--tw-text-opacity, 1));
}
.text-mint-300 {
  --tw-text-opacity: 1;
  color: rgb(122 240 189 / var(--tw-text-opacity, 1));
}
.text-mint-400 {
  --tw-text-opacity: 1;
  color: rgb(62 226 156 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-royal-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-royal-400 {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.text-royal-500\/10 {
  color: rgb(139 92 246 / 0.1);
}
.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-text {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.text-text-dim {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.text-text-dim\/50 {
  color: rgb(98 108 135 / 0.5);
}
.text-text-dim\/55 {
  color: rgb(98 108 135 / 0.55);
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.decoration-1 {
  text-decoration-thickness: 1px;
}
.decoration-from-font {
  text-decoration-thickness: from-font;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-gold-500 {
  accent-color: #D4A02A;
}
.\!opacity-40 {
  opacity: 0.4 !important;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-45 {
  opacity: 0.45;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-\[0\.05\] {
  opacity: 0.05;
}
.opacity-\[0\.06\] {
  opacity: 0.06;
}
.opacity-\[0\.07\] {
  opacity: 0.07;
}
.opacity-\[0\.85\] {
  opacity: 0.85;
}
.mix-blend-screen {
  mix-blend-mode: screen;
}
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
.mix-blend-plus-lighter {
  mix-blend-mode: plus-lighter;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-1px_0_0_0_rgba\(255\2c 255\2c 255\2c 0\.02\)_inset\2c -4px_0_24px_-8px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: -1px 0 0 0 rgba(255,255,255,0.02) inset,-4px 0 24px -8px rgba(0,0,0,0.5);
  --tw-shadow-colored: inset -1px 0 0 0 var(--tw-shadow-color), -4px 0 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_-2px_rgba\(34\2c 213\2c 137\2c 0\.5\)\] {
  --tw-shadow: 0 0 10px -2px rgba(34,213,137,0.5);
  --tw-shadow-colored: 0 0 10px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(139\2c 92\2c 246\2c 0\.2\)\] {
  --tw-shadow: 0 0 10px rgba(139,92,246,0.2);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(220\2c 38\2c 38\2c 0\.2\)\] {
  --tw-shadow: 0 0 10px rgba(220,38,38,0.2);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(212\2c 160\2c 42\2c 0\.3\)\] {
  --tw-shadow: 0 0 12px rgba(212,160,42,0.3);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(46\2c 161\2c 230\2c 0\.3\)\] {
  --tw-shadow: 0 0 12px rgba(46,161,230,0.3);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_14px_rgba\(212\2c 160\2c 42\2c 0\.4\)\] {
  --tw-shadow: 0 0 14px rgba(212,160,42,0.4);
  --tw-shadow-colored: 0 0 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_28px_rgba\(220\2c 38\2c 38\2c 0\.4\)\] {
  --tw-shadow: 0 0 28px rgba(220,38,38,0.4);
  --tw-shadow-colored: 0 0 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_28px_rgba\(52\2c 211\2c 153\2c 0\.38\)\] {
  --tw-shadow: 0 0 28px rgba(52,211,153,0.38);
  --tw-shadow-colored: 0 0 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_\#10b981\] {
  --tw-shadow: 0 0 6px #10b981;
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(212\2c 160\2c 42\2c 0\.7\)\] {
  --tw-shadow: 0 0 6px rgba(212,160,42,0.7);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(34\2c 213\2c 137\2c 0\.65\)\] {
  --tw-shadow: 0 0 6px rgba(34,213,137,0.65);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(52\2c 211\2c 153\2c 0\.8\)\] {
  --tw-shadow: 0 0 6px rgba(52,211,153,0.8);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(212\2c 160\2c 42\2c 0\.6\)\] {
  --tw-shadow: 0 0 8px rgba(212,160,42,0.6);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(212\2c 160\2c 42\2c 0\.8\)\] {
  --tw-shadow: 0 0 8px rgba(212,160,42,0.8);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_28px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
  --tw-shadow: 0 10px 28px rgba(0,0,0,0.45);
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_28px_-8px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 12px 28px -8px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 12px 28px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_32px_-12px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 12px 32px -12px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 12px 32px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_14px_28px_-16px_rgba\(0\2c 0\2c 0\2c 0\.85\)\] {
  --tw-shadow: 0 14px 28px -16px rgba(0,0,0,0.85);
  --tw-shadow-colored: 0 14px 28px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_36px_-14px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
  --tw-shadow: 0 18px 36px -14px rgba(0,0,0,0.75);
  --tw-shadow-colored: 0 18px 36px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_48px_-12px_rgba\(0\2c 0\2c 0\2c 0\.7\)\2c 0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.05\)\] {
  --tw-shadow: 0 24px 48px -12px rgba(0,0,0,0.7),0 0 0 1px rgba(212,160,42,0.05);
  --tw-shadow-colored: 0 24px 48px -12px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_28px_60px_-20px_rgba\(0\2c 0\2c 0\2c 0\.85\)\2c 0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.06\)\] {
  --tw-shadow: 0 28px 60px -20px rgba(0,0,0,0.85),0 0 0 1px rgba(212,160,42,0.06);
  --tw-shadow-colored: 0 28px 60px -20px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_80px_-20px_rgba\(0\2c 0\2c 0\2c 0\.85\)\] {
  --tw-shadow: 0 30px 80px -20px rgba(0,0,0,0.85);
  --tw-shadow-colored: 0 30px 80px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_32px_80px_-20px_rgba\(0\2c 0\2c 0\2c 0\.9\)\2c 0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.08\)\] {
  --tw-shadow: 0 32px 80px -20px rgba(0,0,0,0.9),0 0 0 1px rgba(212,160,42,0.08);
  --tw-shadow-colored: 0 32px 80px -20px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_40px_90px_-20px_rgba\(0\2c 0\2c 0\2c 0\.9\)\2c 0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.05\)\] {
  --tw-shadow: 0 40px 90px -20px rgba(0,0,0,0.9),0 0 0 1px rgba(212,160,42,0.05);
  --tw-shadow-colored: 0 40px 90px -20px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_40px_90px_-20px_rgba\(0\2c 0\2c 0\2c 0\.9\)\2c 0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.06\)\] {
  --tw-shadow: 0 40px 90px -20px rgba(0,0,0,0.9),0 0 0 1px rgba(212,160,42,0.06);
  --tw-shadow-colored: 0 40px 90px -20px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_-4px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 4px 16px -4px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 4px 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_18px_-10px_rgba\(139\2c 92\2c 246\2c 0\.65\)\2c inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.28\)\] {
  --tw-shadow: 0 6px 18px -10px rgba(139,92,246,0.65),inset 0 1px 0 0 rgba(255,255,255,0.28);
  --tw-shadow-colored: 0 6px 18px -10px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_18px_-10px_rgba\(239\2c 68\2c 68\2c 0\.65\)\2c inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.28\)\] {
  --tw-shadow: 0 6px 18px -10px rgba(239,68,68,0.65),inset 0 1px 0 0 rgba(255,255,255,0.28);
  --tw-shadow-colored: 0 6px 18px -10px var(--tw-shadow-color), inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_20px_-12px_rgba\(212\2c 160\2c 42\2c 0\.8\)\] {
  --tw-shadow: 0 8px 20px -12px rgba(212,160,42,0.8);
  --tw-shadow-colored: 0 8px 20px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_-18px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 8px 24px -18px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 8px 24px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.2\)\] {
  --tw-shadow: inset 0 0 0 1px rgba(212,160,42,0.2);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_rgba\(212\2c 160\2c 42\2c 0\.35\)\] {
  --tw-shadow: inset 0 0 0 1px rgba(212,160,42,0.35);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.02\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.02);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.03\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.03);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.05\)\2c 0_1px_0_0_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05),0 1px 0 0 rgba(0,0,0,0.35);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color), 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.05\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.4\)\] {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 4px 20px -8px rgba(0,0,0,0.6);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color), 0 4px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inset {
  --tw-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/60 {
  --tw-shadow-color: rgb(0 0 0 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-crimson-400\/40 {
  --tw-ring-color: rgb(248 113 113 / 0.4);
}
.ring-crimson-500\/80 {
  --tw-ring-color: rgb(239 68 68 / 0.8);
}
.ring-emerald-400\/40 {
  --tw-ring-color: rgb(52 211 153 / 0.4);
}
.ring-emerald-400\/80 {
  --tw-ring-color: rgb(52 211 153 / 0.8);
}
.ring-gold-400\/80 {
  --tw-ring-color: rgb(231 184 76 / 0.8);
}
.ring-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(29 39 64 / var(--tw-ring-opacity, 1));
}
.ring-line\/60 {
  --tw-ring-color: rgb(29 39 64 / 0.6);
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[80px\] {
  --tw-blur: blur(80px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[90px\] {
  --tw-blur: blur(90px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-md {
  --tw-blur: blur(12px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-xl {
  --tw-blur: blur(24px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_18px_rgba\(52\2c 211\2c 153\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 0 18px rgba(52,211,153,0.6));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(139\2c 92\2c 246\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(139,92,246,0.5));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(244\2c 63\2c 94\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(244,63,94,0.5));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(245\2c 184\2c 46\2c 0\.45\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(245,184,46,0.45));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(245\2c 184\2c 46\2c 0\.55\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(245,184,46,0.55));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_0_6px_rgba\(34\2c 213\2c 137\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 0 6px rgba(34,213,137,0.5));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-\[0_12px_24px_rgba\(0\2c 0\2c 0\2c 0\.65\)\] {
  --tw-drop-shadow: drop-shadow(0 12px 24px rgba(0,0,0,0.65));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[3px\] {
  --tw-backdrop-blur: blur(3px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[box-shadow\2c filter\] {
  transition-property: box-shadow,filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c transform\] {
  transition-property: color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[filter\2c box-shadow\] {
  transition-property: filter,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\] {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c border-color\2c box-shadow\] {
  transition-property: transform,border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c opacity\] {
  transition-property: transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.duration-\[1100ms\] {
  transition-duration: 1100ms;
}
.duration-\[1200ms\] {
  transition-duration: 1200ms;
}
.duration-\[1400ms\] {
  transition-duration: 1400ms;
}
.duration-\[260ms\] {
  transition-duration: 260ms;
}
.duration-\[420ms\] {
  transition-duration: 420ms;
}
.duration-\[560ms\] {
  transition-duration: 560ms;
}
.duration-\[600ms\] {
  transition-duration: 600ms;
}
.duration-\[640ms\] {
  transition-duration: 640ms;
}
.duration-\[800ms\] {
  transition-duration: 800ms;
}
.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
}
.ease-\[cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.22,1,0.36,1);
}
.ease-imperial {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-\[opacity\2c transform\] {
  will-change: opacity,transform;
}
.will-change-transform {
  will-change: transform;
}
.\[--ibs\:1\.6\] {
  --ibs: 1.6;
}
.\[text-shadow\:0_1px_1\.5px_rgba\(0\2c 0\2c 0\2c 0\.32\)\] {
  text-shadow: 0 1px 1.5px rgba(0,0,0,0.32);
}

/* ──────────────────── BASE ──────────────────── */

/* ──────────────────── COMPONENT CLASSES ──────────────────── */

/* ──────────────────── STAGE BACKGROUND KEYFRAMES ──────────────────── */
@keyframes stage-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes stage-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -4px); }
}
@keyframes stage-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-5px, 5px); }
}
@keyframes stage-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}
@keyframes stage-twinkle-soft {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.45; }
}
@keyframes stage-diamond-sheen {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.65; }
}
@keyframes stage-hairline {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes site-bg-loop {
  0%   { transform: translate(0px, 0px); }
  12%  { transform: translate(9px, -5px); }
  25%  { transform: translate(14px, 0px); }
  37%  { transform: translate(9px, 5px); }
  50%  { transform: translate(0px, 0px); }
  62%  { transform: translate(-9px, -5px); }
  75%  { transform: translate(-14px, 0px); }
  87%  { transform: translate(-9px, 5px); }
  100% { transform: translate(0px, 0px); }
}

/* ──────────────────── MINES KEYFRAMES ──────────────────── */
@keyframes mine-gem-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mine-bomb-in {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  55% {
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ──────────────────── DICE KEYFRAMES ──────────────────── */
@keyframes dice-pop {
  0%   { transform: scale(0.95); opacity: 0.4; }
  60%  { transform: scale(1.025); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* First-mount fade-in for the result chip — chip appears gracefully
   after the first roll; subsequent rolls just slide (no fade). */
@keyframes dice-fade-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cta-pulse {
  0%   { transform: translateY(0)   scale(1); }
  40%  { transform: translateY(2px) scale(0.985); }
  100% { transform: translateY(0)   scale(1); }
}

/* ──────────────────── LIMBO KEYFRAMES ──────────────────── */
@keyframes limbo-halo-idle {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes limbo-halo-rolling {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes limbo-halo-won {
  0%   { opacity: 0.7;  transform: translate(-50%, -50%) scale(0.92); }
  35%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.35); }
  100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes limbo-halo-lost {
  0%   { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
}
@keyframes limbo-number-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
@keyframes limbo-number-win {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes limbo-number-lost {
  0%   { transform: scale(1); filter: blur(0); }
  30%  { transform: scale(0.98); filter: blur(0.3px); }
  100% { transform: scale(1); filter: blur(0); }
}
@keyframes limbo-sparks-show {
  0%, 100% { opacity: 1; }
}
@keyframes limbo-spark-fly {
  0%   {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) scale(0.6);
  }
  25%  {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--ex, 0px), var(--ey, 0px)) scale(0.3);
  }
}

/* ──────────────────── KENO KEYFRAMES ──────────────────── */
@keyframes keno-pick-pop {
  0%   { transform: scale(0.96); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}
/* One-shot hit pop — glow arrives on frame 0 via saturation + brightness
 * boost so the emerald presence is felt instantly, then eases back. No
 * rotation, no dip below 1, no rebound. */
@keyframes keno-hit-pop {
  0%   {
    transform: scale(1);
    filter: brightness(1.2) saturate(1.2);
  }
  40%  {
    transform: scale(1.1);
    filter: brightness(1.15) saturate(1.15);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}
/* Radial celebration ring — starts at full opacity at a moderate scale so
 * the halo is already washing the tile at t=0, not blooming up from nothing. */
@keyframes keno-hit-ring {
  0%   {
    opacity: 1;
    transform: scale(0.9);
  }
  45%  {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}
@keyframes keno-draw-pop {
  0%   {
    transform: scale(0.94);
    opacity: 0;
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}
@keyframes keno-cell-win {
  0%   {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  45%  {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.3);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* ──────────────────── PLINKO KEYFRAMES ──────────────────── */
@keyframes plinko-peg-bump {
  0%   {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 8px rgba(255, 255, 255, 0.1);
  }
  40%  {
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 18px rgba(239, 200, 112, 0.75);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 8px rgba(255, 255, 255, 0.1);
  }
}
@keyframes plinko-bucket-hit {
  0%   {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  28%  {
    transform: translateY(-4px) scale(1.08);
    filter: brightness(1.45);
  }
  60%  {
    transform: translateY(1px) scale(0.98);
    filter: brightness(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}
@keyframes plinko-bucket-ring {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ──────────────────── CRASH KEYFRAMES ──────────────────── */
@keyframes crash-cta-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 2px 6px rgba(180, 83, 9, 0.45),
      0 0 22px -3px rgba(245, 158, 11, 0.55);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 3px 10px rgba(180, 83, 9, 0.55),
      0 0 32px -1px rgba(245, 158, 11, 0.85);
  }
}
@keyframes crash-number-shake {
  0%   { transform: translate(0, 0) rotate(0); }
  15%  { transform: translate(-4px, 1px) rotate(-0.6deg); }
  30%  { transform: translate(5px, -1px) rotate(0.6deg); }
  45%  { transform: translate(-3px, 2px) rotate(-0.4deg); }
  60%  { transform: translate(3px, -2px) rotate(0.4deg); }
  75%  { transform: translate(-2px, 1px) rotate(-0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes crash-tip-pulse {
  0%   { opacity: 0.8; transform: scale(0.8); }
  70%  { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes crash-player-cashout {
  0%   { transform: translateX(-4px); background: rgba(16, 185, 129, 0); }
  40%  { transform: translateX(0); background: rgba(16, 185, 129, 0.3); }
  100% { transform: translateX(0); background: rgba(16, 185, 129, 0.12); }
}

/* ──────────────────── SKELETON SHIMMER ──────────────────── */
@keyframes sk-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ──────────────────── PAGE ANIMATION ──────────────────── */
.stagger > * {
  opacity: 0;
  animation: fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger > *:nth-child(1) { animation-delay: 0.00s; }
.stagger > *:nth-child(2) { animation-delay: 0.04s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.12s; }
.stagger > *:nth-child(5) { animation-delay: 0.16s; }
.stagger > *:nth-child(6) { animation-delay: 0.20s; }
.stagger > *:nth-child(7) { animation-delay: 0.24s; }
.stagger > *:nth-child(8) { animation-delay: 0.28s; }

/* Raw keyframes used by inline SVG animations (art.tsx) */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tag-shine {
  0%, 55% { transform: translateX(-120%); }
  75% { transform: translateX(160%); }
  100% { transform: translateX(160%); }
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -4px) scale(1.05); }
}
@keyframes ib-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ib-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ib-pulse-bar {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: brightness(1.2); }
}
@keyframes ib-sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}
@keyframes ib-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Toasts ---------------------------------------------------------------- */
.toast-enter {
  animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast-leave {
  animation: toast-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-8px); }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ───────────────────────── HiLo ─────────────────────────
 * Full redesign. The stage is a velvet table: a persistent deck on the
 * left, the live card in the center (with a true 3-D flip reveal on
 * every draw), and a fan of drawn cards trailing to the right. Below,
 * two wide direction buttons read the next multiplier and probability.
 * Progress is tracked as a gold rung strip across the top.
 *
 * All animations are CSS-only and honour prefers-reduced-motion at the
 * bottom of this file. Easing is the house curve cubic(0.22, 1, 0.36, 1)
 * for soft overshoots and cubic(0.16, 1, 0.3, 1) for entrances.
 * ───────────────────────────────────────────────────────── */

/* Stage canvas — isolates the HiLo atmosphere so glow bleeds stay local. */
.hilo-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  flex: 1 1 auto;
  min-height: 380px;
}

/* Soft velvet halo behind the table — a slow-drifting radial glow
 * that keeps the centre card feeling "lit from above" without competing
 * with the game's accent colour. */
.hilo-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 640px;
  height: 640px;
  max-width: 95%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(233, 176, 76, 0.11),
    rgba(201, 154, 59, 0.04) 46%,
    transparent 72%
  );
  filter: blur(6px);
  animation: hilo-halo 7.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes hilo-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -52%) scale(1.04); opacity: 0.85; }
}

/* ── Progress ladder ─────────────────────────────────────────────── */
/* 16 rungs stretched across the top of the stage. Unfilled rungs are
 * faint ink, filled ones gold; the active rung breathes. */

.hilo-ladder {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 16, 25, 0.78) 0%, rgba(8, 11, 18, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px -16px rgba(0, 0, 0, 0.65);
}
.hilo-rung {
  position: relative;
  flex: 1 1 0;
  height: 6px;
  min-width: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
  transition: background-color 260ms ease;
}
.hilo-rung::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(212, 160, 42, 0.8) 0%,
    rgba(245, 217, 139, 0.95) 50%,
    rgba(212, 160, 42, 0.8) 100%
  );
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hilo-rung[data-filled="true"]::before {
  opacity: 1;
  transform: scaleX(1);
}
.hilo-rung[data-filled="true"] {
  box-shadow: 0 0 10px -2px rgba(245, 217, 139, 0.35);
}
.hilo-rung[data-current="true"] {
  background: rgba(245, 217, 139, 0.18);
}
.hilo-rung[data-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  animation: hilo-rung-breathe 1.8s ease-in-out infinite;
}
@keyframes hilo-rung-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 217, 139, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(245, 217, 139, 0); }
}

/* ── Deck stack (left of the live card) ─────────────────────────── */
/* A few offset card-backs to sell the "there's a stack here" feel.
 * They float very gently when the round is idle. */

.hilo-deck {
  position: relative;
  pointer-events: none;
  animation: hilo-deck-float 4.6s ease-in-out infinite;
}
.hilo-deck-card {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 28px -14px rgba(0, 0, 0, 0.75);
}
.hilo-deck-shadow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 72%;
  height: 10px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(2px);
}
@keyframes hilo-deck-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Deck dispatch — the whole stack dips when a new card lifts off. */
.hilo-deck[data-dispatching="true"] {
  animation: hilo-deck-dispatch 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hilo-deck-dispatch {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(3px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Live card: flip scene ──────────────────────────────────────── */
/* Two sides (face / back) are stacked; the outer rotates Y 180° to
 * reveal the face. A fresh flip is triggered every draw by swapping
 * the data-state attribute, which restarts the keyframe. */

.hilo-card-scene {
  position: relative;
}
.hilo-card-shadow {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 74%;
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(3px);
  animation: hilo-shadow-breathe 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hilo-shadow-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50%      { transform: translateX(-50%) scale(0.92); opacity: 0.65; }
}

/* Deal-in — the new card slides down and lands on top of whatever
 * was previously showing. No card-back reveal, no flip: the old card
 * simply gets covered by the new one as it drops into the stage.
 * 340ms ease-out with a 1.01 overshoot for a soft landing. */
@keyframes hilo-card-deal {
  0%   { opacity: 0; transform: translateY(-54px) scale(0.94); }
  55%  { opacity: 1; }
  82%  { transform: translateY(3px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hilo-card-deal {
  animation: hilo-card-deal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Legacy no-op hooks kept to avoid dead-class noise in components.
 * The old flip scaffolding has been removed. */
.hilo-flip-apex-glow { display: none; }

/* Card idle — very subtle breathing for the empty-state placeholder.
 * Do NOT apply to an actively-dealing card; the deal keyframes already
 * own the transform and the breathe would fight with them. */
@keyframes hilo-idle-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
.hilo-card-idle {
  animation: hilo-idle-breathe 4.6s ease-in-out infinite;
}

/* ── Card outcome tints ─────────────────────────────────────────── */
/* Win and bust share the exact same ring choreography — only the
 * colour differs. No flash, no shake: just a smooth fade-in to the
 * base ring, then an infinite breathe that swells between the base
 * and a brighter peak.
 *
 *   1. Fade-in (400 ms, delayed 380 ms so it starts after the deal-in
 *      lands). 0 % ring → base ring. No spiky halo, no "parlama".
 *   2. Breathe (2.4 s, infinite). Oscillates between base and peak.
 *
 * Applied to a DEDICATED overlay element (`.hilo-outcome-ring`) that
 * sits on top of the card but is separate from the deal-in target. If
 * we shared an element, the ring selector's animation shorthand would
 * out-specify `.hilo-card-deal` and suppress the slide-in on every
 * bust — which is exactly the bug this split fixes. The keyframes
 * only touch the coloured halo (no drop shadow), so they don't
 * conflict with the card's own dark drop shadow. */

@keyframes hilo-card-win-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75), 0 0 26px rgba(52, 211, 153, 0.28); }
}
@keyframes hilo-card-bust-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.78), 0 0 26px rgba(220, 38, 38, 0.32); }
}

@keyframes hilo-card-win-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75), 0 0 26px rgba(52, 211, 153, 0.28); }
  50%      { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.95), 0 0 50px rgba(52, 211, 153, 0.6); }
}
@keyframes hilo-card-bust-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.78), 0 0 26px rgba(220, 38, 38, 0.32); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.95), 0 0 50px rgba(220, 38, 38, 0.65); }
}

.hilo-outcome-ring[data-outcome="win"] {
  animation:
    hilo-card-win-reveal 400ms ease-out 380ms both,
    hilo-card-win-breathe 2.4s ease-in-out 780ms infinite;
}
.hilo-outcome-ring[data-outcome="bust"] {
  animation:
    hilo-card-bust-reveal 400ms ease-out 380ms both,
    hilo-card-bust-breathe 2.4s ease-in-out 780ms infinite;
}

/* ── History fan — drawn cards trail to the right of the live card. */
.hilo-fan {
  position: relative;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hilo-fan-card {
  position: relative;
  flex-shrink: 0;
  transform-origin: 50% 100%;
  animation: hilo-fan-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hilo-fan-in {
  0%   { opacity: 0; transform: translateX(-22px) scale(0.82) rotate(0deg); }
  100% { opacity: var(--fan-opacity, 1); transform: translateX(0) scale(1) rotate(var(--fan-rotate, 0deg)); }
}

/* ── Direction buttons — twin giant action surfaces ─────────────── */

.hilo-dir {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(22, 30, 48, 0.92) 0%, rgba(14, 20, 34, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px -14px rgba(0, 0, 0, 0.7);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
  cursor: pointer;
}
.hilo-dir:disabled {
  cursor: not-allowed;
  filter: saturate(0.55) brightness(0.88);
  opacity: 0.55;
}

/* Accent haze — the coloured wash on hover / active. */
.hilo-dir::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hilo-dir-haze, transparent);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.hilo-dir[data-side="hi"] { --hilo-dir-haze: radial-gradient(120% 90% at 50% 110%, rgba(52, 211, 153, 0.35), transparent 70%); }
.hilo-dir[data-side="lo"] { --hilo-dir-haze: radial-gradient(120% 90% at 50% 110%, rgba(220, 38, 38, 0.35), transparent 70%); }
.hilo-dir:hover:not(:disabled)::before,
.hilo-dir[data-active="true"]::before {
  opacity: 1;
}

/* Top edge highlight per accent. */
.hilo-dir::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  border-radius: 2px;
  background: var(--hilo-dir-edge, transparent);
  opacity: 0.8;
}
.hilo-dir[data-side="hi"] { --hilo-dir-edge: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.9), transparent); }
.hilo-dir[data-side="lo"] { --hilo-dir-edge: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.9), transparent); }

.hilo-dir:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 32px -16px rgba(0, 0, 0, 0.9);
}
.hilo-dir[data-side="hi"]:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.45);
}
.hilo-dir[data-side="lo"]:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.45);
}
.hilo-dir:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* Silky sweep on hover. */
.hilo-dir .hilo-dir-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 65%
  );
  transform: translateX(-140%);
  pointer-events: none;
}
.hilo-dir:hover:not(:disabled) .hilo-dir-sheen {
  animation: hilo-dir-sheen 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hilo-dir-sheen {
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}

/* Press firing state — one-shot pulse after click. */
.hilo-dir[data-firing="true"] {
  animation: hilo-dir-fire 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hilo-dir-fire {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(1px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}

/* Loading halo inside a firing direction button. */
.hilo-dir-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(1.5px);
}
.hilo-dir-spinner::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(245, 217, 139, 0.3);
  border-top-color: rgba(245, 217, 139, 0.95);
  animation: hilo-spin 0.7s linear infinite;
}
@keyframes hilo-spin {
  to { transform: rotate(360deg); }
}

/* ── Live multiplier readout ────────────────────────────────────── */

.hilo-mult-live {
  animation: hilo-mult-breathe 2.6s ease-in-out infinite;
}
@keyframes hilo-mult-breathe {
  0%, 100% { transform: scale(1);   text-shadow: 0 0 0 rgba(52, 211, 153, 0); }
  50%      { transform: scale(1.03); text-shadow: 0 0 18px rgba(52, 211, 153, 0.28); }
}
@keyframes hilo-mult-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); text-shadow: 0 0 22px rgba(245, 217, 139, 0.7); }
  100% { transform: scale(1); }
}
.hilo-mult-bump {
  animation: hilo-mult-bump 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Settlement overlay ─────────────────────────────────────────── */

.hilo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  pointer-events: none;
  animation: hilo-overlay-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hilo-overlay[data-variant="win"] {
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.32), rgba(16, 185, 129, 0.06) 60%, transparent 90%);
}
.hilo-overlay[data-variant="bust"] {
  background: radial-gradient(closest-side, rgba(220, 38, 38, 0.32), rgba(220, 38, 38, 0.06) 60%, transparent 90%);
}
@keyframes hilo-overlay-in {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.hilo-badge-pop {
  animation: hilo-badge-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hilo-badge-pop {
  0%   { opacity: 0; transform: scale(0.6) translateY(14px); }
  55%  { opacity: 1; transform: scale(1.1) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Confetti burst (win) ───────────────────────────────────────── */
/* A constellation of small gold dots radiating from the card on a win.
 * Each dot uses its own delay and angle via CSS variables so the burst
 * reads organically. */

.hilo-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.hilo-confetti-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dot-color, rgba(245, 217, 139, 0.95));
  box-shadow: 0 0 10px var(--dot-color, rgba(245, 217, 139, 0.7));
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: hilo-confetti-fly 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--dot-delay, 0ms) forwards;
}
@keyframes hilo-confetti-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--dot-dx, 0px), var(--dot-dy, -80px))
      scale(0.7);
  }
}

/* Centre card bust shake — damped oscillator. Each peak is roughly
 * half the amplitude of the previous, mimicking a real mass-spring
 * losing energy to friction. Seven crossings over 680ms read as a
 * physical impact rather than a UI jiggle. Applied to a wrapper that
 * owns no other transform, so the inner deal-in scale/translate is
 * never clobbered. */
@keyframes hilo-shake {
  0%   { transform: translate3d(0, 0, 0) rotate(0); }
  6%   { transform: translate3d(-14px, 3px, 0) rotate(-1.5deg); }
  14%  { transform: translate3d(12px, -2px, 0) rotate(1.2deg); }
  24%  { transform: translate3d(-8.5px, 1.5px, 0) rotate(-0.85deg); }
  36%  { transform: translate3d(5.8px, -0.6px, 0) rotate(0.55deg); }
  50%  { transform: translate3d(-3.4px, 0.3px, 0) rotate(-0.3deg); }
  66%  { transform: translate3d(1.9px, 0, 0) rotate(0.15deg); }
  84%  { transform: translate3d(-0.8px, 0, 0) rotate(-0.06deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0); }
}
.hilo-shake {
  /* Delay the shake so it kicks in right after the deal-in lands. */
  animation: hilo-shake 680ms cubic-bezier(0.3, 0, 0.55, 1) 380ms;
  transform-origin: 50% 60%;
}

/* ── History rail (underneath the stage) ────────────────────────── */

.hilo-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.62) 0%, rgba(8, 11, 18, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 28px -18px rgba(0, 0, 0, 0.6);
  overflow-x: auto;
  scrollbar-width: none;
}
.hilo-rail::-webkit-scrollbar { display: none; }
.hilo-rail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

.hilo-rail-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  animation: hilo-rail-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hilo-rail-in {
  0%   { opacity: 0; transform: translateY(6px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hilo-rail-card {
  width: 46px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.7);
}
.hilo-rail-card[data-won="true"]  { box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.7),  0 4px 14px -6px rgba(0, 0, 0, 0.7); }
.hilo-rail-card[data-won="false"] { box-shadow: 0 0 0 1.5px rgba(220, 38, 38, 0.7), 0 4px 14px -6px rgba(0, 0, 0, 0.7); }

/* Direction arrow between cards — small chip with the accent tone. */
.hilo-rail-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}
.hilo-rail-arrow[data-dir="hi"] { background: rgba(52, 211, 153, 0.2);  color: #6ee7b7; }
.hilo-rail-arrow[data-dir="lo"] { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }

/* Multiplier / bust chip under each draw. */
.hilo-rail-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.hilo-rail-chip[data-tone="win"] {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.42);
  color: #6ee7b7;
}
.hilo-rail-chip[data-tone="bust"] {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.42);
  color: #fca5a5;
}

/* Reduce motion — subdues the whole HiLo stage. */
@media (prefers-reduced-motion: reduce) {
  .hilo-stage::before,
  .hilo-deck,
  .hilo-card-shadow,
  .hilo-card-idle,
  .hilo-rung[data-current="true"]::after,
  .hilo-mult-live {
    animation: none !important;
  }
  .hilo-flip[data-reveal="true"] {
    animation: none !important;
    transform: rotateY(180deg);
  }
}

/* ───────────────────────── Blackjack ─────────────────────────
 * Stage animations for the Blackjack table — staggered deal-in for
 * each card, 3-D flip when the dealer reveals their hole, soft glow
 * on the active hand, calm breathing ring on win / push / blackjack
 * (crimson on bust). Same easing language as HiLo so the whole card
 * range feels unified.
 * ─────────────────────────────────────────────────────────────── */

.bj-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  flex: 1 1 auto;
  min-height: 460px;
}
/* Soft warm halo around the centre of the table — same atmospheric
 * lift as HiLo, but emerald-tinted to suit the felt. */
.bj-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 720px;
  height: 480px;
  max-width: 96%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(52, 211, 153, 0.08),
    rgba(52, 211, 153, 0.025) 50%,
    transparent 75%
  );
  filter: blur(8px);
  animation: bj-halo 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bj-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -52%) scale(1.04); opacity: 0.85; }
}

/* Hand row — two hands stacked vertically, each is a row of cards.
 * Cards overlap horizontally so you read the row as a fanned hand
 * even when the player draws several extra cards. */
.bj-hand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 196px;
}
.bj-hand-stack {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single card slot — generous 130×184 desktop dimensions so each
 * card reads at a glance from across the table. CSS variable
 * --bj-i (set inline) drives the per-card animation delay so cards
 * land in sequence.
 *
 * Card styling priorities (matches Stake's tactile feel):
 *   • Crisp rounded edges (overflow:hidden so the SVG is masked)
 *   • Subtle hairline border for definition against light cards
 *   • Soft top highlight via inset shadow → looks like a glossy edge
 *   • Layered drop shadow → card sits on the felt, not floats
 */
.bj-card {
  position: relative;
  width: 130px;
  height: 184px;
  margin-left: -50px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: 50% 100%;
  animation: bj-card-deal 540ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--bj-i, 0) * 130ms);
  filter:
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.58))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}
.bj-card[data-i="0"] { margin-left: 0; }

/* Tighter cards on small screens so a 4-card hand still fits. */
@media (max-width: 640px) {
  .bj-card { width: 96px; height: 134px; margin-left: -38px; border-radius: 10px; }
  .bj-hand { min-height: 144px; }
}

/* Cinematic deal: card flies in from the dealer-shoe corner (top-
 * right of the felt), tilts during flight, scales up briefly past
 * its rest size, then settles. Soft drop shadow scales with the
 * scale curve so the card "lands" rather than "appears". */
@keyframes bj-card-deal {
  0%   {
    opacity: 0;
    transform: translate3d(220px, -180px, 0) rotate(-22deg) scale(0.78);
  }
  30%  { opacity: 1; }
  78%  {
    transform: translate3d(0, 6px, 0) rotate(0.6deg) scale(1.025);
  }
  92%  {
    transform: translate3d(0, -1px, 0) rotate(0.1deg) scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

/* When a card slot stays mounted across states (dealer's hole
 * flipping in place), suppress the deal animation. */
.bj-card[data-static="true"] {
  animation: none;
}

/* ── Dealer hole flip (in place) ────────────────────────────────
 * The hole slot is a single STABLE bj-card that lives across the
 * reveal: the back face is showing while the round is open, and on
 * stand/bust/blackjack the inner flip element rotates 180° so the
 * face takes its place. No remount, no swap-and-pop — a real card
 * pivot at 1300 px perspective with both sides backface-clipped.
 * The slot still gets the .bj-card deal-in on initial mount so it
 * arrives the same way as the up-card.
 *
 * Two subtleties make this read as ONE card flipping (instead of
 * "two cards swapping"):
 *
 *   1. The wrapper .bj-card-hole has NO background and NO inset
 *      bevel. The default .bj-card values would draw a solid white
 *      rectangle behind the rotating faces — at the 90° midpoint
 *      both faces are edge-on (zero pixels visible thanks to
 *      backface-visibility:hidden) and that white rect would FLASH
 *      through, which is why the original animation looked like
 *      "two different cards". With the wrapper transparent there's
 *      nothing behind the surface to flash.
 *
 *   2. The bevel highlight (inset top/border) lives on EACH face
 *      so it rotates WITH the card surface. Putting it on the
 *      wrapper would make the highlight stay flat-on while the
 *      card rotates — it'd look like a separate piece of glass.
 *
 *   3. A midpoint scale of 0.92 in the keyframe makes the card
 *      shrink slightly as it goes edge-on, then pop back to full
 *      size. That tiny "compress" sells the moment of perpendicular
 *      view as a physical card pivoting on its centre, not two
 *      tiles handing off. */
.bj-card-hole {
  perspective: 1300px;
  background: transparent;
  box-shadow: none;
}
.bj-hole-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}
/* Round arrived already revealed (page reload, navigated back) —
 * skip the flip and jump straight to face-up. Replaying a flip the
 * user never actually saw would be a fake. */
.bj-hole-flip[data-flip-mode="static"] {
  transform: rotateY(180deg);
}
/* Round transitioned from hidden → revealed live (player stood,
 * dealer plays out): run the cinematic pivot. */
.bj-hole-flip[data-flip-mode="animate"] {
  animation: bj-hole-flip 760ms cubic-bezier(0.45, 0, 0.18, 1) forwards;
}
@keyframes bj-hole-flip {
  0%   { transform: rotateY(0deg)   scale(1); }
  50%  { transform: rotateY(90deg)  scale(0.92); }
  100% { transform: rotateY(180deg) scale(1); }
}
.bj-hole-side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  /* Same glossy edge as a normal .bj-card, but living on each
   * rotating face — so it stays attached to the visible surface
   * during the flip instead of remaining a static rect on the
   * wrapper. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.bj-hole-back { transform: rotateY(0deg); }
.bj-hole-face { transform: rotateY(180deg); }
.bj-hole-side > svg { width: 100%; height: 100%; display: block; }

/* Hand totals chip — solid matte pill next to each hand label.
 *
 * Design philosophy: the chip is the entire feedback channel after
 * settle. Solid backgrounds (no see-through to the felt) give the
 * value a grounded, "official scoreboard" feel rather than a
 * floating glassy widget. Tones are deeply tinted matte rather than
 * translucent so the colour shift on settle reads at a glance.
 *
 *   active → neutral graphite (both sides while the hand is in play)
 *   win    → solid forest emerald
 *   loss   → solid burgundy crimson
 *   push   → solid amber gold
 *
 * Smooth 380 ms colour transition handles the swap when the round
 * settles — no banner, no flash, just the chip changing colour.
 */
.bj-total {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  /* Defaults match the active state below. */
  background: #1a2236;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px -6px rgba(0, 0, 0, 0.55);
  transition:
    background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active — neutral graphite; both sides start here while the hand
 * is being played out. No accent colour until the round settles. */
.bj-total[data-tone="active"] {
  background: #1a2236;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px -6px rgba(0, 0, 0, 0.55);
}

/* Win — DEEP solid forest emerald. No halo glow — the chip reads as
 * a painted scoreboard tile, not a glowing translucent badge. */
.bj-total[data-tone="win"] {
  background: #15663d;
  border-color: rgba(220, 252, 231, 0.18);
  color: #ecfdf5;
  box-shadow:
    inset 0 1px 0 rgba(220, 252, 231, 0.18),
    0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* Loss — deep solid burgundy. Matte, no halo. */
.bj-total[data-tone="loss"] {
  background: #8b1d1d;
  border-color: rgba(254, 226, 226, 0.18);
  color: #fff1f1;
  box-shadow:
    inset 0 1px 0 rgba(254, 226, 226, 0.2),
    0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* Push — deep solid amber. Matte, no halo. */
.bj-total[data-tone="push"] {
  background: #7a531a;
  border-color: rgba(253, 230, 138, 0.2);
  color: #fff7e3;
  box-shadow:
    inset 0 1px 0 rgba(253, 230, 138, 0.18),
    0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

/* Subtle "soft" hint inside the total chip ("17 SOFT"). */
.bj-total-soft {
  font-weight: 800;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-left: 1px;
}

/* Dealer / player label — refined typographic chip-companion. The
 * accent dot picks up a subtle glow and the text sits at higher
 * opacity so the label reads with the same weight as the chip
 * without competing with it. */
.bj-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.bj-label-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bj-label-text::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
}

/* Outcome ring — pure overlay element, mirrors HiLo's pattern. Lives
 * over the player hand area so the win / push / bust state radiates
 * around the cards without remounting them. */
.bj-outcome-ring {
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  pointer-events: none;
}
@keyframes bj-ring-win-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75), 0 0 26px rgba(52, 211, 153, 0.28); }
}
@keyframes bj-ring-bust-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.78), 0 0 26px rgba(220, 38, 38, 0.32); }
}
@keyframes bj-ring-push-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(245, 217, 139, 0); }
  100% { box-shadow: 0 0 0 2px rgba(245, 217, 139, 0.7), 0 0 26px rgba(245, 217, 139, 0.28); }
}
@keyframes bj-ring-win-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.75), 0 0 26px rgba(52, 211, 153, 0.28); }
  50%      { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.95), 0 0 50px rgba(52, 211, 153, 0.6); }
}
@keyframes bj-ring-bust-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.78), 0 0 26px rgba(220, 38, 38, 0.32); }
  50%      { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.95), 0 0 50px rgba(220, 38, 38, 0.65); }
}
@keyframes bj-ring-push-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245, 217, 139, 0.7),  0 0 26px rgba(245, 217, 139, 0.28); }
  50%      { box-shadow: 0 0 0 3px rgba(245, 217, 139, 0.95), 0 0 50px rgba(245, 217, 139, 0.55); }
}
.bj-outcome-ring[data-outcome="win"],
.bj-outcome-ring[data-outcome="blackjack"] {
  animation:
    bj-ring-win-reveal 420ms ease-out both,
    bj-ring-win-breathe 2.4s ease-in-out 420ms infinite;
}
.bj-outcome-ring[data-outcome="bust"] {
  animation:
    bj-ring-bust-reveal 420ms ease-out both,
    bj-ring-bust-breathe 2.4s ease-in-out 420ms infinite;
}
.bj-outcome-ring[data-outcome="push"] {
  animation:
    bj-ring-push-reveal 420ms ease-out both,
    bj-ring-push-breathe 2.4s ease-in-out 420ms infinite;
}

/* Action button — Hit / Stand / Double. Premium tactile design:
 *   • 56 px tall with 14 px radius — comfortable click target.
 *   • Per-kind accent expressed in three layers (top edge highlight,
 *     hover haze, icon chip) so the colour reads even at a glance.
 *   • Icon + label sit on a single row, generously spaced.
 *   • Strong hover lift with accent border colour change.
 *   • One-shot firing pulse on click for haptic-style feedback. */
.bj-action {
  position: relative;
  overflow: hidden;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(22, 30, 48, 0.94) 0%, rgba(14, 20, 34, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px -16px rgba(0, 0, 0, 0.75);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    filter 240ms ease;
  cursor: pointer;
  color: white;
}
.bj-action:disabled {
  cursor: not-allowed;
  filter: saturate(0.45) brightness(0.85);
  opacity: 0.5;
}

/* Hover haze — accent radial wash from the bottom. */
.bj-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bj-action-haze, transparent);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.bj-action:hover:not(:disabled)::before { opacity: 1; }

/* Top-edge highlight — slim accent gradient on the top border. */
.bj-action::after {
  content: "";
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 2px;
  border-radius: 2px;
  background: var(--bj-action-edge, transparent);
  opacity: 0.85;
  pointer-events: none;
}

.bj-action[data-kind="hit"] {
  --bj-action-haze: radial-gradient(120% 100% at 50% 110%, rgba(52, 211, 153, 0.32), transparent 72%);
  --bj-action-edge: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.9), transparent);
}
.bj-action[data-kind="stand"] {
  --bj-action-haze: radial-gradient(120% 100% at 50% 110%, rgba(245, 217, 139, 0.3), transparent 72%);
  --bj-action-edge: linear-gradient(90deg, transparent, rgba(245, 217, 139, 0.9), transparent);
}
.bj-action[data-kind="double"] {
  --bj-action-haze: radial-gradient(120% 100% at 50% 110%, rgba(168, 85, 247, 0.34), transparent 72%);
  --bj-action-edge: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.9), transparent);
}

.bj-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 36px -16px rgba(0, 0, 0, 0.95);
}
.bj-action[data-kind="hit"]:hover:not(:disabled)    { border-color: rgba(52, 211, 153, 0.55); }
.bj-action[data-kind="stand"]:hover:not(:disabled)  { border-color: rgba(245, 217, 139, 0.55); }
.bj-action[data-kind="double"]:hover:not(:disabled) { border-color: rgba(168, 85, 247, 0.55); }

.bj-action:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* Content row inside the button: icon chip + label. */
.bj-action-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 14px;
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.84rem;
  white-space: nowrap;
}

.bj-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
}
.bj-action[data-kind="hit"]    .bj-action-icon { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.bj-action[data-kind="stand"]  .bj-action-icon { background: rgba(245, 217, 139, 0.18); color: #fde68a; }
.bj-action[data-kind="double"] .bj-action-icon { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; }

@keyframes bj-action-fire {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(1px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}
.bj-action[data-firing="true"] {
  animation: bj-action-fire 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bj-action-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(1.5px);
  z-index: 2;
}
.bj-action-spinner::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(245, 217, 139, 0.3);
  border-top-color: rgba(245, 217, 139, 0.95);
  animation: bj-spin 0.7s linear infinite;
}
@keyframes bj-spin {
  to { transform: rotate(360deg); }
}

/* ── Sidebar action button — Shuffle-style matte 2×2 ─────────────
 * Lives in the side panel (not on the felt) so the table stays
 * uncluttered. Layout is label-LEFT / icon-RIGHT inside a flat
 * dark panel — the kind accent is carried entirely by the icon
 * tile (always coloured) so the row reads at a glance even without
 * hovering.
 *
 *   • Solid flat dark background, no gradient.
 *   • No glow, no top edge highlight, no haze.
 *   • Per-kind icon tile is always tinted — that's the colour cue.
 *   • Hover only nudges the border + the label tint to the accent.
 *   • Same firing-pulse + spinner pattern as before for click feel.
 */
.bj-side-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 56px;
  padding: 0 14px 0 16px;
  border-radius: 10px;
  background: rgba(18, 24, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Disabled state — kept visually present (matte panel, subtle label)
 * rather than washed out, so the pre-bet sidebar reads as "ready"
 * instead of "broken". Cursor still flips to not-allowed for a11y. */
.bj-side-action:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(18, 24, 38, 0.78);
  border-color: rgba(255, 255, 255, 0.04);
}
.bj-side-action:disabled .bj-side-action-icon {
  opacity: 0.55;
}
.bj-side-action:hover:not(:disabled) {
  background: rgba(26, 34, 52, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
}
.bj-side-action:active:not(:disabled) {
  transform: translateY(1px);
}
.bj-side-action[data-firing="true"] {
  animation: bj-action-fire 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-kind hover accent — only border + label colour change. */
.bj-side-action[data-kind="hit"]:hover:not(:disabled)    { border-color: rgba(52, 211, 153, 0.45); color: #a7f3d0; }
.bj-side-action[data-kind="stand"]:hover:not(:disabled)  { border-color: rgba(248, 113, 113, 0.45); color: #fca5a5; }
.bj-side-action[data-kind="split"]:hover:not(:disabled)  { border-color: rgba(96, 165, 250, 0.45); color: #93c5fd; }
.bj-side-action[data-kind="double"]:hover:not(:disabled) { border-color: rgba(252, 211, 77, 0.45); color: #fde68a; }

/* Icon tile — small chip on the right with a permanent accent
 * background. The colour is the actions' identity at a glance. */
.bj-side-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}
.bj-side-action[data-kind="hit"]    .bj-side-action-icon { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.bj-side-action[data-kind="stand"]  .bj-side-action-icon { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.bj-side-action[data-kind="split"]  .bj-side-action-icon { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.bj-side-action[data-kind="double"] .bj-side-action-icon { background: rgba(252, 211, 77, 0.16); color: #fde68a; }

/* Spinner overlay covers the entire tile while a mutation runs. */
.bj-side-action-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(1.5px);
  border-radius: inherit;
  z-index: 2;
}
.bj-side-action-spinner::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(245, 217, 139, 0.3);
  border-top-color: rgba(245, 217, 139, 0.95);
  animation: bj-spin 0.7s linear infinite;
}

/* Settlement banner — sits between the dealer and player hands once
 * the round is over. Big, dramatic, but doesn't cover the cards (so
 * the player can still see what beat them or what they beat). Three
 * layers: outcome label (huge), payout amount (bold mono), multiplier
 * chip (small subdued). Each tone has its own colour + glow palette. */
.bj-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
  padding: 6px 0;
  animation: bj-banner-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bj-banner-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  55%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.bj-banner-text {
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 2.2rem;
  line-height: 1;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.65);
}
@media (max-width: 640px) {
  .bj-banner-text { font-size: 1.6rem; }
}

.bj-banner-text[data-tone="win"] {
  color: #a7f3d0;
  text-shadow:
    0 0 28px rgba(52, 211, 153, 0.55),
    0 0 8px rgba(52, 211, 153, 0.35),
    0 6px 22px rgba(0, 0, 0, 0.65);
}
.bj-banner-text[data-tone="blackjack"] {
  /* Blackjack gets a richer mixed gold-emerald glow — it's the
   * 3:2 prize, deserves a bit more theatre. */
  color: #fde68a;
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.55));
  letter-spacing: 0.22em;
}
.bj-banner-text[data-tone="bust"],
.bj-banner-text[data-tone="loss"] {
  color: #fca5a5;
  text-shadow:
    0 0 24px rgba(220, 38, 38, 0.5),
    0 6px 22px rgba(0, 0, 0, 0.65);
  font-size: 1.6rem;
  letter-spacing: 0.24em;
}
.bj-banner-text[data-tone="push"] {
  color: #fde68a;
  text-shadow:
    0 0 24px rgba(245, 217, 139, 0.5),
    0 6px 22px rgba(0, 0, 0, 0.65);
}

/* Payout amount under the outcome label — the dollar number is what
 * the player actually cares about. Big mono so it reads as a
 * casino-style payout, not body text. */
.bj-banner-payout {
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.bj-banner-payout[data-tone="loss"],
.bj-banner-payout[data-tone="bust"] {
  display: none;
}

/* Multiplier chip beneath payout — small subdued accent. */
.bj-banner-mult {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.bj-banner-mult[data-tone="win"],
.bj-banner-mult[data-tone="blackjack"] {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
}
.bj-banner-mult[data-tone="push"] {
  background: rgba(245, 217, 139, 0.14);
  border-color: rgba(245, 217, 139, 0.4);
  color: #fde68a;
}

/* ── Confetti burst (win / blackjack) ─────────────────────────── */
/* Same pattern as HiLo — radial dots fly outward from the centre of
 * the table, each with its own delay/colour via CSS variables so the
 * burst reads organic. */

.bj-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}
.bj-confetti-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bj-dot-color, rgba(245, 217, 139, 0.95));
  box-shadow: 0 0 12px var(--bj-dot-color, rgba(245, 217, 139, 0.65));
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: bj-confetti-fly 1300ms cubic-bezier(0.22, 1, 0.36, 1) var(--bj-dot-delay, 0ms) forwards;
}
@keyframes bj-confetti-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--bj-dot-dx, 0px), var(--bj-dot-dy, -120px))
      scale(0.6);
  }
}

/* Slight underlight beneath the player hand to anchor it to the
 * felt. Pure decoration, sits below the cards. */
.bj-table-glow {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 56%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent 75%);
  filter: blur(4px);
  pointer-events: none;
}

/* ── Insurance panel ─────────────────────────────────────────────
 * Replaces the hit/stand/split/double grid + Place Bet CTA whenever
 * the dealer's up-card is an Ace and we're waiting for a YES/NO
 * answer. Two big buttons + a "Pays 2:1" hint + the side-bet cost.
 *
 * Visual language: gold-tinted panel (insurance is a casino-edge
 * decision so the gold reads as "premium attention"). YES is
 * emerald (the upside if dealer has BJ), NO is graphite (the
 * statistically-correct default per basic strategy). Both pulse
 * subtly while idle so the eye lands on them without screaming.
 */
.bj-insurance-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(245, 217, 139, 0.05) 0%, rgba(164, 118, 17, 0.04) 100%),
    rgba(15, 21, 38, 0.85);
  border: 1px solid rgba(245, 217, 139, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(245, 217, 139, 0.12),
    0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
.bj-insurance-panel::before {
  /* Soft halo so the panel reads as "active question on the felt"
   * even at a glance from across the table. */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: radial-gradient(
    closest-side,
    rgba(245, 217, 139, 0.18),
    transparent 70%
  );
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}
.bj-insurance-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.bj-insurance-eyebrow {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 217, 139, 0.62);
}
.bj-insurance-title {
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f5d98b;
}
.bj-insurance-cost {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.92);
}
.bj-insurance-cost-hint {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.bj-insurance-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bj-insurance-btn {
  position: relative;
  height: 44px;
  border-radius: 10px;
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bj-insurance-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.bj-insurance-btn:not(:disabled):hover {
  transform: translateY(-1px);
}
.bj-insurance-btn:not(:disabled):active {
  transform: translateY(0);
}
/* YES — emerald, the upside payout side. */
.bj-insurance-btn-yes {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: rgba(167, 243, 208, 0.42);
  color: #ecfdf5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px -8px rgba(16, 185, 129, 0.55);
}
.bj-insurance-btn-yes:not(:disabled):hover {
  background: linear-gradient(180deg, #14c393 0%, #0aa476 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px -8px rgba(16, 185, 129, 0.65);
}
/* NO — graphite, the basic-strategy default. */
.bj-insurance-btn-no {
  background: linear-gradient(180deg, #2a3349 0%, #1a2236 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px -8px rgba(0, 0, 0, 0.55);
}
.bj-insurance-btn-no:not(:disabled):hover {
  background: linear-gradient(180deg, #364162 0%, #252e44 100%);
  border-color: rgba(255, 255, 255, 0.16);
}
.bj-insurance-btn[data-loading="true"] {
  cursor: progress;
  opacity: 0.78;
}
.bj-insurance-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: bj-insurance-shimmer 1.1s linear infinite;
  pointer-events: none;
}
@keyframes bj-insurance-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* ── Split: per-hand wrappers ────────────────────────────────────
 * When a round is split the page renders two PlayerArea components
 * side-by-side. A `data-active` flag marks whichever hand the player
 * is currently acting on — we lift it subtly with an emerald glow
 * so the eye tracks the right cards; `data-waiting` is the sibling
 * that hasn't been played yet, dimmed enough to recede without
 * looking broken. No tone when the round is settled — at that point
 * the per-hand chip colour carries the story. */
.bj-player-hand {
  transition:
    filter 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bj-player-hand[data-active="true"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -10px);
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(52, 211, 153, 0) 0%,
    rgba(52, 211, 153, 0.85) 50%,
    rgba(52, 211, 153, 0) 100%
  );
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
  pointer-events: none;
  animation: bj-active-pulse 2.1s ease-in-out infinite;
}
@keyframes bj-active-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -10px) scaleX(0.85); }
  50%      { opacity: 1;    transform: translate(-50%, -10px) scaleX(1); }
}
.bj-player-hand[data-waiting="true"] {
  opacity: 0.48;
  filter: saturate(0.7);
}

/* ── House-rule ribbon (pre-bet decoration) ─────────────────────
 * Stake / Shuffle-style felt banners — small chevron-tailed pills
 * that read "BLACKJACK PAYS 3 TO 2" / "INSURANCE PAYS 2 TO 1".
 * Pure decoration: signal "this is a real blackjack table" while
 * the player is deciding their bet. The clip-path cuts the chevron
 * tails so the banner reads as a banner instead of a flat pill. */
.bj-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 30px;
  background: linear-gradient(
    180deg,
    rgba(38, 48, 70, 0.92) 0%,
    rgba(24, 32, 50, 0.92) 100%
  );
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  /* Chevron tails — both ends notched into a banner shape. */
  clip-path: polygon(
    14px 0%,
    calc(100% - 14px) 0%,
    100% 50%,
    calc(100% - 14px) 100%,
    14px 100%,
    0% 50%
  );
  /* Inset highlight + soft drop, applied via filter so the clipped
   * shape (which would lose normal box-shadow) still gets depth. */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.04))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

/* Reduce motion — keep the page legible without flying cards. */
@media (prefers-reduced-motion: reduce) {
  .bj-stage::before,
  .bj-card,
  .bj-flip[data-reveal="true"],
  .bj-outcome-ring[data-outcome],
  .bj-confetti-dot,
  .bj-banner {
    animation: none !important;
  }
  .bj-flip[data-reveal="true"] {
    transform: rotateY(180deg);
  }
}

/* ═════════════════════════════ Tower ═════════════════════════════
 * Minimal, corporate-leaning layout: a quiet label-pill header, a
 * single thin accent on the active row, solid colour tiles with
 * small white confirmation glyphs, and zero decorative flourishes
 * (no medallions, no concentric rings, no pulsing halos, no shake
 * animations). The tower itself does the talking — the chrome just
 * frames it.
 *
 * Tile states (data-state on .tower-tile):
 *   • ghost / future     → muted stone panel
 *   • active             → same stone, with a subtle hover lift;
 *                          the row it belongs to gets a thin gold
 *                          accent line on its left edge
 *   • pending            → spinner
 *   • safe-revealed      → solid emerald panel + small white check
 *   • safe-other         → slightly dimmer stone (not a colour
 *                          state — just faded background)
 *   • mine-revealed      → solid burgundy panel + small white dot
 *   • mine-hit           → brighter crimson panel + small white
 *                          dot (same icon; the colour carries the
 *                          "this is the one they clicked") */

.tower-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px 0 4px;
  /* 80% of the available stage width, per the brief — lets the
   * tower breathe on large viewports without going edge-to-edge.
   * Still capped so on 4K screens we don't blow up tiles to absurd
   * sizes. */
  width: 80%;
  max-width: 620px;
  isolation: isolate;
  flex: 1 1 auto;
  align-self: center;
  min-height: 460px;
}

.tower-row {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 14px;
  padding: 0;
}
/* Active row: a single 2px gold accent line to the LEFT of the
 * multiplier column. No glow, no pulse — just a "you are here"
 * marker, like a spreadsheet row indicator. */
.tower-row[data-state="active"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(245, 217, 139, 0) 0%,
    rgba(245, 217, 139, 0.8) 40%,
    rgba(245, 217, 139, 0.8) 60%,
    rgba(245, 217, 139, 0) 100%
  );
}

.tower-row-mult {
  text-align: right;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.tower-row[data-state="active"] .tower-row-mult {
  font-weight: 700;
}

.tower-row-tiles {
  display: grid;
  grid-template-columns: repeat(var(--tower-tiles, 3), 1fr);
  gap: 8px;
}

/* Base tile — a tall, quiet stone panel. Subtle top highlight, thin
 * border, no heavy shadow. The goal is "premium dashboard tile",
 * not "video game power-up". */
.tower-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(
    180deg,
    rgba(34, 43, 66, 1) 0%,
    rgba(22, 30, 50, 1) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease;
}
.tower-tile:disabled {
  cursor: default;
}
.tower-tile-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

/* Active & idle — clickable stone. Hover lifts 1px and tints the
 * border gold. No translucent gradient shift, no purple haze. */
.tower-tile[data-state="active"] {
  border-color: rgba(255, 255, 255, 0.1);
}
.tower-tile[data-state="active"]:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(245, 217, 139, 0.42);
  background: linear-gradient(
    180deg,
    rgba(40, 50, 76, 1) 0%,
    rgba(26, 36, 58, 1) 100%
  );
}
.tower-tile[data-state="active"]:not(:disabled):active {
  transform: translateY(0) scale(0.99);
}

/* Future / ghost — the same stone panel, just slightly darker so
 * rows the player hasn't reached recede without disappearing. */
.tower-tile[data-state="future"],
.tower-tile[data-state="ghost"] {
  background: linear-gradient(
    180deg,
    rgba(28, 36, 56, 1) 0%,
    rgba(18, 24, 40, 1) 100%
  );
  border-color: rgba(255, 255, 255, 0.06);
}

/* Pending — server still resolving the click. Keep the stone
 * surface, just drop in the spinner. */
.tower-tile[data-state="pending"] {
  border-color: rgba(245, 217, 139, 0.32);
}
.tower-tile-spinner {
  animation: tower-spinner 900ms linear infinite;
}
@keyframes tower-spinner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Revealed-tile entrance — quiet scale-and-settle. Plays once when
 * a tile transitions into a revealed state. */
@keyframes tower-tile-reveal {
  0% {
    transform: scale(0.94);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.015);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Safe revealed — bespoke "imperial gold-on-emerald" plate. The
 * tile keeps the emerald base (the universal "safe" colour) but
 * gets a layered gold treatment matching our brand: a thin gold
 * inner ring, a soft warm gold gleam in the top half, and a 1px
 * gold underline on the bottom edge that mimics the active-row
 * indicator. Reads as "this is the chosen path" instead of a
 * generic green fill. */
.tower-tile[data-state="safe-revealed"] {
  position: relative;
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(245, 217, 139, 0.22) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #0e8f6c 0%, #066047 100%);
  border-color: rgba(245, 217, 139, 0.55);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(245, 217, 139, 0.18),
    0 0 22px -8px rgba(16, 185, 129, 0.55);
  animation: tower-tile-reveal 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tower-tile[data-state="safe-revealed"]::after {
  /* Thin gold base line — same vocabulary as the active-row
   * accent, ties the picked tile to the brand. */
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(245, 217, 139, 0) 0%,
    rgba(245, 217, 139, 0.95) 50%,
    rgba(245, 217, 139, 0) 100%
  );
  pointer-events: none;
}
.tower-tile[data-state="safe-revealed"] .tower-tile-icon {
  /* Soft gold drop on the white check so it reads as gilt-on-
   * emerald rather than a clinical white tick. */
  filter: drop-shadow(0 0 8px rgba(245, 217, 139, 0.55));
}

/* Safe-other — other tiles on a climbed row. */
.tower-tile[data-state="safe-other"] {
  background: linear-gradient(
    180deg,
    rgba(22, 28, 44, 1) 0%,
    rgba(14, 20, 34, 1) 100%
  );
  border-color: rgba(255, 255, 255, 0.04);
}

/* Mine revealed (not the one the player hit) — designed treatment:
 * dark crimson plate with a radial "ember" glow in the top half,
 * crisp ruby outline, and a centred dot from the icon component.
 * The ember + rim outline distinguish a "revealed mine" from the
 * even louder "mine you actually clicked" without resorting to a
 * cartoon explosion. */
.tower-tile[data-state="mine-revealed"] {
  position: relative;
  background:
    radial-gradient(
      140% 90% at 50% 0%,
      rgba(248, 113, 113, 0.28) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #5c1414 0%, #3a0a0e 100%);
  border-color: rgba(220, 38, 38, 0.6);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(127, 29, 29, 0.7);
  animation: tower-tile-reveal 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tower-tile[data-state="mine-revealed"] .tower-tile-icon {
  filter: drop-shadow(0 0 6px rgba(254, 202, 202, 0.5));
}

/* Mine hit — louder, brighter crimson with an outer glow so the
 * bust tile dominates the row. Same icon, same animation, but the
 * surface treatment makes it unmistakable. */
.tower-tile[data-state="mine-hit"] {
  position: relative;
  background:
    radial-gradient(
      150% 100% at 50% 0%,
      rgba(254, 202, 202, 0.4) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border-color: rgba(254, 226, 226, 0.55);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px rgba(220, 38, 38, 0.8),
    0 0 28px -2px rgba(220, 38, 38, 0.65);
  animation: tower-tile-reveal 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tower-tile[data-state="mine-hit"] .tower-tile-icon {
  filter: drop-shadow(0 0 10px rgba(254, 202, 202, 0.85));
}

/* (The settled result banner was removed — the side panel's
 *  PayoutCard already shows the multiplier + total payout; a
 *  second copy on the stage was redundant.) */

/* ═════════════════════════════ Slide ═════════════════════════════
 * Stake-style horizontal multiplier conveyor. The stage is a window
 * onto a long horizontal strip of "stones" (hex-style cards each
 * showing one multiplier). On bet:
 *
 *   1. The strip slides left past the centred pointer at high speed
 *   2. Decelerates with a heavy quintic ease-out
 *   3. Snaps to a stop with the landing stone perfectly under the
 *      pointer's plumb-line
 *   4. The landing stone lights up — gold for spin, then emerald
 *      (won) or crimson (lost) once the round resolves
 *
 * Visual language:
 *   • Stones are tall rounded rectangles (hex feel via border
 *     radius + tier-coded surface gradient) with a glassy face and
 *     a "loaded" bottom band that intensifies with the multiplier
 *   • Pointer hangs from the top of the conveyor with a small bead
 *   • History pills above the stage show the last few landings,
 *     most-recent highlighted gold (matches Stake's reel)
 *   • Edge fade gradients on the conveyor mask stones at the
 *     boundaries so they slide on/off the stage smoothly */

.slide-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  isolation: isolate;
  /* Slide is naturally compact — three stones + indicator. We pin a
     tight floor here so the PlayShell's lazy-floor (280px) doesn't
     leave acres of dead space below the stones on phones. */
  min-height: 300px;
}
@media (min-width: 1280px) {
  .slide-stage { min-height: 360px; }
}

/* ── Conveyor viewport ──────────────────────────────────────
 * Fixed-height window we slide the stone strip across. The height
 * is generous (260px on desktop, 200px on mobile) so the stones —
 * which are 175px / 132px tall and sit centred vertically — never
 * get clipped at the top or bottom by the overflow:hidden. Edge
 * fade gradients on the L/R only hide the horizontal clip lines;
 * vertical clipping should never be needed. */
.slide-conveyor {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}
.slide-conveyor-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 4;
  pointer-events: none;
}
.slide-conveyor-fade-left {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 12, 28, 0.95) 0%,
    rgba(8, 12, 28, 0.4) 60%,
    transparent 100%
  );
}
.slide-conveyor-fade-right {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(8, 12, 28, 0.95) 0%,
    rgba(8, 12, 28, 0.4) 60%,
    transparent 100%
  );
}

/* The strip itself — flex row of stones. translateX is set
 * inline. `will-change` so the browser GPU-accelerates the slide. */
.slide-strip {
  --stone-width: 174px;
  --stone-height: 195px;
  --stone-gap: 18px;
  position: absolute;
  left: 0;
  /* Pin to top + use the full conveyor height so the stones'
   * align-items:center inside the strip uses the WHOLE viewport
   * as its vertical reference. The previous `top: 50%; translateY(-50%)`
   * was double-centering and combined with the stone's intrinsic
   * height made the layout drift downward. */
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--stone-gap);
  /* Above the centre column highlight (z-index 1), below the
   * pointer arrow (z-index 5) and the edge fades (z-index 4). */
  z-index: 2;
  will-change: transform;
}
/* Motion blur during the spin was removed — the user found the
 * smear distracting. Stones stay crisp through the entire slide
 * so the multiplier on every passing tile remains readable. */

/* Each stone — a clean rounded rectangle. Wider than tall reads
 * less "medicine bottle"; taller than wide reads "card". We split
 * the difference: 100×120px desktop, slightly square. */
.slide-stone {
  position: relative;
  flex-shrink: 0;
  width: var(--stone-width);
  height: var(--stone-height, 195px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner panel — single subtle gradient + 1px border. No bottom
 * glow band, no clip-path. Tier just tints the BORDER faintly so
 * you can sense hot/cold at a glance without the stones looking
 * painted. */
.slide-stone-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(38, 48, 72, 0.96) 0%,
    rgba(22, 30, 52, 0.96) 100%
  );
  /* Stronger, brighter border with a dual inset rim — top
   * highlight + bottom shade — so the stone reads as a lit
   * panel with depth instead of a flat tile. The base border
   * is now a distinct 1.5px line (up from 1px) at higher
   * opacity. */
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  overflow: hidden;
  transition:
    background 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
/* Tier-coloured border tint — a touch stronger than before so
 * the hot/cold sense reads at the new larger stone size. */
.slide-stone[data-tier="cold"] .slide-stone-inner {
  border-color: rgba(150, 170, 210, 0.32);
}
.slide-stone[data-tier="low"] .slide-stone-inner {
  border-color: rgba(190, 205, 230, 0.38);
}
.slide-stone[data-tier="mid"] .slide-stone-inner {
  border-color: rgba(245, 217, 139, 0.55);
}
.slide-stone[data-tier="hot"] .slide-stone-inner {
  border-color: rgba(251, 146, 60, 0.65);
}
.slide-stone[data-tier="fire"] .slide-stone-inner {
  border-color: rgba(244, 63, 94, 0.7);
}

/* Multiplier label, centred on the stone face. */
.slide-stone-mult {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.005em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Landing stone — restrained: just a brighter border + a
 * subtle inset rim. NO scale-up (would shift the strip), NO
 * background colour swap (looks painted). */
.slide-stone[data-landing="true"] .slide-stone-inner {
  border-color: rgba(245, 217, 139, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(245, 217, 139, 0.4),
    0 0 36px rgba(245, 217, 139, 0.32);
}
.slide-stone[data-landing="true"] .slide-stone-mult {
  color: #fde9a4;
}
.slide-stone[data-won="true"] .slide-stone-inner {
  border-color: rgba(52, 211, 153, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(52, 211, 153, 0.5),
    0 0 40px rgba(52, 211, 153, 0.45);
}
.slide-stone[data-won="true"] .slide-stone-mult {
  color: #d1fae5;
}
.slide-stone[data-lost="true"] .slide-stone-inner {
  border-color: rgba(239, 68, 68, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(239, 68, 68, 0.45),
    0 0 36px rgba(239, 68, 68, 0.4);
}
.slide-stone[data-lost="true"] .slide-stone-mult {
  color: #fee2e2;
}

/* ── Centre slot column ─────────────────────────────────────
 * A soft vertical column of light behind the strip marking where
 * the pointer is reading. Visible at every state — at idle it
 * tells the player which slot is "armed", on settle it tints by
 * outcome. Rendered BEHIND the strip via z-index so the stones
 * sit in front. */
.slide-centre-column {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--stone-width, 116px);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    50% 80% at 50% 50%,
    rgba(245, 217, 139, 0.16) 0%,
    rgba(245, 217, 139, 0.04) 60%,
    transparent 100%
  );
  transition: background 320ms ease;
}
.slide-centre-column[data-state="won"] {
  background: radial-gradient(
    50% 80% at 50% 50%,
    rgba(52, 211, 153, 0.22) 0%,
    rgba(52, 211, 153, 0.05) 60%,
    transparent 100%
  );
}
.slide-centre-column[data-state="lost"] {
  background: radial-gradient(
    50% 80% at 50% 50%,
    rgba(239, 68, 68, 0.2) 0%,
    rgba(239, 68, 68, 0.05) 60%,
    transparent 100%
  );
}

/* ── Pointer arrow ──────────────────────────────────────────
 * SHORT downward indicator mounted at the TOP edge of the
 * conveyor, pointing down at the centred stone. No more
 * full-height vertical bar slicing through the stones.
 *
 * The arrow is a 12px-wide triangle made via clip-path on a
 * gold/white-tinted block. It sits above the stones (z-index 5)
 * and indicates the active slot via simple geometry. */
.slide-pointer {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 18px;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.slide-pointer-arrow {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #d4d8e2 100%);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  transition: background 320ms ease, filter 320ms ease;
}
.slide-pointer[data-state="won"] .slide-pointer-arrow {
  background: linear-gradient(180deg, #ecfdf5 0%, #34d399 100%);
  filter: drop-shadow(0 2px 6px rgba(52, 211, 153, 0.65));
}
.slide-pointer[data-state="lost"] .slide-pointer-arrow {
  background: linear-gradient(180deg, #fff1f1 0%, #ef4444 100%);
  filter: drop-shadow(0 2px 6px rgba(239, 68, 68, 0.6));
}

/* History pills above the stage — same vocabulary as Limbo's. */
/* History pill strip — matches Limbo's exactly so every game on
 * the site shares the same history vocabulary (gradient pill,
 * white text, 28px tall). No per-game flourish; consistency is
 * the point. */
.slide-history {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}
.slide-history-pill {
  display: inline-flex;
  height: 1.75rem;
  min-width: 62px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.slide-history-pill[data-won="true"] {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  border-color: rgba(5, 150, 105, 0.85);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.slide-history-pill[data-won="false"] {
  background: linear-gradient(180deg, #3A4358 0%, #2A3344 100%);
  border-color: rgba(80, 92, 115, 0.85);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Side panel controls ── */

.slide-target-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.slide-target-input {
  width: 100%;
  height: 40px;
  padding: 0 28px 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 20, 34, 0.85);
  color: #ffffff;
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  outline: none;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.slide-target-input:focus {
  border-color: rgba(245, 217, 139, 0.55);
  background: rgba(22, 30, 48, 0.9);
}
.slide-target-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.slide-target-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* (Risk presets were removed — Slide is a fixed-target game now,
 *  there's nothing to preset. The TARGET MULTIPLIER input is the
 *  single control above the bet button.) */

/* Stat row under the payout card — single label / value pair. */
.slide-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(14, 20, 34, 0.6);
}
.slide-stat-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.slide-stat-value {
  font-family: var(--font-jetbrains-mono, ui-monospace, "SFMono-Regular", monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
}

/* ── Slide stage backdrop drift band ── */
.slide-bg-drift {
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 120px;
  transform: translateY(-50%);
  background: radial-gradient(
    closest-side,
    rgba(245, 217, 139, 0.1) 0%,
    rgba(245, 217, 139, 0.03) 55%,
    transparent 80%
  );
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
  animation: slide-bg-drift 14s ease-in-out infinite;
}
@keyframes slide-bg-drift {
  0%, 100% { transform: translateY(-50%) scaleX(1); opacity: 0.65; }
  50%      { transform: translateY(-50%) scaleX(1.08); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-bg-drift {
    animation: none !important;
  }
}

/* Small-screen tweaks — shorter conveyor + smaller stones so the
 * 7+ visible stones still fit a phone width. STONE_WIDTH /
 * STONE_GAP are exposed via inline CSS variables on the strip,
 * so we override those here. */
@media (max-width: 640px) {
  .slide-stage {
    gap: 18px;
  }
  .slide-conveyor {
    height: 220px;
  }
  .slide-strip {
    --stone-width: 132px;
    --stone-height: 156px;
    --stone-gap: 14px;
  }
  .slide-stone-mult {
    font-size: 1.15rem;
  }
  .slide-conveyor-fade {
    width: 70px;
  }
}

/* ═════════════════════════════ Coinflip ═════════════════════════════
 * Stake-style streak coinflip. Big circular coin in the middle of
 * the stage doing a real 3D flip on every action; a history strip
 * below tracking the current run; gold (Tura) and royal (Yazı)
 * side buttons in the side panel.
 *
 * The coin uses CSS preserve-3d so the two faces share a real
 * dimensional axis — no fade tricks. `--cf-turns` is bumped from
 * the page on every flip; CSS multiplies it by 180deg so the coin
 * keeps spinning in the same direction even when the face value
 * repeats. Each face uses backface-visibility:hidden so the back
 * face is invisible until the rotation passes 90deg. */

.cf-stage {
  position: relative;
  /* Single defensive min-height keeps the coin's `top:50%` resolved
     against a real pixel height on every phone size; no `height:100%`
     so we don't fight the outer flex container if it hands down a
     larger box. */
  width: 100%;
  flex: 1 1 auto;
  min-height: 380px;
  isolation: isolate;
}
.cf-stage > .cf-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cf-stage > .cf-history {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

/* Coin disc — 3D flip scene. Both faces share the SAME gold
 * medallion treatment; only the centred glyph distinguishes them
 * (pentagon vs crown). That keeps the coin reading as one
 * cohesive premium artefact regardless of which side is showing,
 * the way an actual minted coin works. */
.cf-coin {
  --cf-turns: 0;
  position: relative;
  width: 240px;
  height: 240px;
  perspective: 1500px;
  /* Soft gold halo behind the coin so it floats off the backdrop. */
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 60px rgba(245, 217, 139, 0.18));
}
.cf-coin-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--cf-turns) * 180deg));
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Shared minted-coin treatment: layered radial highlight (top-
   * left), gold gradient body, double border ring (outer thin
   * gold + inner darker rim) for that "stamped medallion" depth. */
  background:
    radial-gradient(
      130% 130% at 28% 22%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, #f5d98b 0%, #d4a02a 52%, #7a4f0a 100%);
  border: 2px solid rgba(245, 217, 139, 0.85);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 6px rgba(60, 30, 0, 0.35),
    inset 0 0 0 6px rgba(122, 79, 10, 0.35),
    inset 0 0 0 7px rgba(245, 217, 139, 0.4);
}
.cf-coin-face-tura { transform: rotateY(0deg); }
.cf-coin-face-yazi { transform: rotateY(180deg); }

/* Centred glyph — drawn in deep navy so it reads as engraved into
 * the gold disc rather than painted on top. Uses inline SVG via
 * mask-image so we can swap the shape per side while keeping the
 * styling identical. */
.cf-coin-glyph {
  display: block;
  width: 110px;
  height: 110px;
  background: #0b1224;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32));
}
/* Pentagon (5-sided) — heads / "tura" side. Stake-style cleaner
 * regular pentagon pointed up. */
.cf-coin-glyph-tura {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* Crown — tails / "yazi" side. Three-prong king's crown with a
 * solid base; built via clip-path polygon so it stays crisp at
 * any size. */
.cf-coin-glyph-yazi {
  clip-path: polygon(
    /* left base */
    8% 70%, 8% 95%, 92% 95%, 92% 70%,
    /* right outer point */
    100% 38%,
    /* right inner valley */
    78% 55%,
    /* middle peak */
    50% 18%,
    /* left inner valley */
    22% 55%,
    /* left outer point */
    0% 38%
  );
}

/* History strip — clean gallery-plate of mini coin chips. No
 * outer container box; instead a centred row of medallions sits
 * at the foot of the stage with a hairline-flanked uppercase
 * label above. Empty slots collapse to a 6px placeholder pip so
 * a fresh round reads as a quiet horizontal rule rather than 12
 * empty rectangles. Filled slots are 26px gold mini-coins with
 * the same pentagon/crown glyph as the main coin — won chips
 * get an emerald rim, lost chips desaturate and get a crimson
 * rim. The result reads as one coherent "string of trophies"
 * rather than a checkbox grid. */
.cf-history {
  width: min(100%, 740px);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: transparent;
  border: 0;
}
.cf-history-label {
  position: relative;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  padding: 0 18px;
}
.cf-history-label::before,
.cf-history-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
}
.cf-history-label::before { right: 100%; }
.cf-history-label::after  { left: 100%; }

.cf-history-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Empty placeholder — quiet 6px pip sitting on the row baseline. */
.cf-history-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Filled chip — mini gold medallion. Mirrors the main coin's
 * minted treatment at 26px so the row reads like a continuation
 * of the coin itself. The outer rim (drawn with a 2px outline so
 * it sits outside the disc) is the win/loss signal. */
.cf-history-chip {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      130% 130% at 28% 22%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, #f5d98b 0%, #d4a02a 60%, #7a4f0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(60, 30, 0, 0.4),
    inset 0 0 0 1px rgba(245, 217, 139, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.45);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    outline-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
}
.cf-history-chip-won {
  outline-color: rgba(34, 197, 124, 0.75);
  filter: drop-shadow(0 0 5px rgba(34, 197, 124, 0.28));
}
.cf-history-chip-lost {
  outline-color: rgba(244, 63, 94, 0.55);
  filter: grayscale(0.6) brightness(0.72);
}

.cf-history-glyph {
  display: block;
  width: 12px;
  height: 12px;
  background: #0b1224;
}
.cf-history-glyph-tura {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.cf-history-glyph-yazi {
  clip-path: polygon(
    8% 70%, 8% 95%, 92% 95%, 92% 70%,
    100% 38%, 78% 55%, 50% 18%, 22% 55%, 0% 38%
  );
}

/* ── Side panel controls ──
 * Coinflip uses the SAME primary CTA + PayoutCard the rest of
 * the games use. The bespoke cashout / profit blocks were
 * removed for cross-game consistency — only the side picker and
 * random helper remain coinflip-specific. */

/* Random pick button — secondary, neutral. */
.cf-random {
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 30, 48, 0.85);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease;
}
.cf-random:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.cf-random:not(:disabled):hover {
  background: rgba(34, 44, 68, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Side buttons (Tura / Yazı) — display the side dot adjacent to
 * the label, brand-coloured per side. Gold for Tura, royal for
 * Yazı. */
.cf-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 30, 48, 0.85);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-side-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cf-side-btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: rgba(34, 44, 68, 0.95);
}
.cf-side-btn-tura:not(:disabled):hover {
  border-color: rgba(245, 217, 139, 0.55);
}
.cf-side-btn-yazi:not(:disabled):hover {
  border-color: rgba(196, 181, 253, 0.55);
}
/* Side-button glyphs — mini gold coin chips with the same
 * pentagon/crown shape as the main coin so the picker reads as
 * "tap this face" rather than "tap this colour". The rim and
 * gold gradient mirror the .cf-history-chip treatment at a
 * slightly larger 22px so the buttons stay legible. */
.cf-side-dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      130% 130% at 28% 22%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(180deg, #f5d98b 0%, #d4a02a 60%, #7a4f0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(60, 30, 0, 0.4),
    inset 0 0 0 1px rgba(245, 217, 139, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.45);
}
.cf-side-dot::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background: #0b1224;
}
.cf-side-dot-tura::before {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.cf-side-dot-yazi::before {
  clip-path: polygon(
    8% 70%, 8% 95%, 92% 95%, 92% 70%,
    100% 38%, 78% 55%, 50% 18%, 22% 55%, 0% 38%
  );
}

/* (cf-profit-card was removed — the standard PayoutCard from
 *  PlayShell now carries both the current streak and the
 *  next-flip preview, matching every other game on the site.) */

@media (max-width: 640px) {
  .cf-coin {
    width: 170px;
    height: 170px;
  }
  .cf-coin-glyph {
    width: 75px;
    height: 75px;
  }
  .cf-history-row {
    gap: 7px;
  }
  .cf-history-chip {
    width: 22px;
    height: 22px;
  }
  .cf-history-glyph {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-coin-inner {
    transition-duration: 0.01ms !important;
  }
}

/* ── Tower stage backdrop layers ──────────────────────────────
 *
 * tower-bg-pattern: a tiled tower icon (same glyph used in the
 *   subnav crest) repeated across the backdrop at very low opacity
 *   and masked away from the centre, so the playable tiles never
 *   sit on top of busy texture. SVG is inlined as a data URI for
 *   zero-network rendering.
 *
 * tower-bg-wave: two wide horizontal sheets that drift up and
 *   down in counter-phase. Reads as ambient stage lighting
 *   "breathing" — calm, not strobing.
 */
.tower-bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23F5D98B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g opacity='0.95'><path d='M 18 14 L 18 18 L 22 18 L 22 14 L 28 14 L 28 18 L 32 18 L 32 14 L 38 14 L 38 18 L 42 18 L 42 14 L 46 14 L 46 22'/><path d='M 18 14 L 18 22'/><path d='M 18 22 L 16 50 L 48 50 L 46 22 Z'/><path d='M 28 50 L 28 38 Q 32 33 36 38 L 36 50'/></g></svg>");
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: 0.045;
  /* Mask so the pattern fades out behind the centred tower — keeps
   * the playable column quiet and avoids competing texture. */
  -webkit-mask-image: radial-gradient(
    ellipse 55% 75% at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 50%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 55% 75% at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 50%,
    #000 100%
  );
  animation: tower-bg-pattern-drift 32s linear infinite;
}
@keyframes tower-bg-pattern-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 -96px; }
}

.tower-bg-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 220px;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.55;
  border-radius: 50%;
}
.tower-bg-wave-1 {
  top: 18%;
  background: radial-gradient(
    closest-side,
    rgba(245, 217, 139, 0.18) 0%,
    rgba(245, 217, 139, 0.05) 50%,
    transparent 75%
  );
  animation: tower-bg-wave-up 11s ease-in-out infinite;
}
.tower-bg-wave-2 {
  bottom: 12%;
  background: radial-gradient(
    closest-side,
    rgba(139, 92, 246, 0.16) 0%,
    rgba(139, 92, 246, 0.04) 50%,
    transparent 75%
  );
  animation: tower-bg-wave-down 13s ease-in-out infinite;
}
@keyframes tower-bg-wave-up {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.55; }
  50%      { transform: translateY(-40px) scaleX(1.04); opacity: 0.75; }
}
@keyframes tower-bg-wave-down {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.45; }
  50%      { transform: translateY(30px) scaleX(0.96); opacity: 0.7; }
}

/* Reduce-motion overrides: drop the pattern drift and wave float so
 * the backdrop becomes a still image. */
@media (prefers-reduced-motion: reduce) {
  .tower-bg-pattern,
  .tower-bg-wave {
    animation: none !important;
  }
}

/* Difficulty — segmented control (3 cells, single outer border,
 * thin dividers, gold underline on the active option). The
 * pattern borrows straight from iOS / macOS segmented controls and
 * financial dashboards — reads as professional regardless of game
 * context. No per-cell glow, no background tint on hover, no
 * multi-line meta — the label alone carries it. */
.tower-difficulty-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 20, 34, 0.85);
  overflow: hidden;
}
.tower-difficulty-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  font-family: var(--font-display, "Urbanist"), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}
.tower-difficulty-btn:not(:first-child)::before {
  /* Thin vertical divider between options — cheaper visually than
   * a full border per cell, and keeps the group feeling like one
   * control instead of three. */
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.tower-difficulty-btn:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.3);
}
.tower-difficulty-btn:not(:disabled):hover {
  color: #ffffff;
}
.tower-difficulty-btn[data-active="true"] {
  color: #ffffff;
}
.tower-difficulty-btn[data-active="true"]::after {
  /* Gold underline indicator — the only visual cue for selection.
   * A 2px line tucked to the bottom of the cell, narrower than the
   * label so it reads as an indicator rather than a full border. */
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    90deg,
    rgba(245, 217, 139, 0) 0%,
    rgba(245, 217, 139, 0.95) 50%,
    rgba(245, 217, 139, 0) 100%
  );
}

/* Small screens: tighter multiplier column + shorter tiles so the
 * 9-row stack still fits. Header scales down a touch. */
@media (max-width: 640px) {
  .tower-row {
    grid-template-columns: 54px 1fr;
    gap: 10px;
  }
  .tower-row-mult {
    font-size: 0.82rem;
  }
  .tower-row-tiles {
    gap: 6px;
  }
  .tower-tile {
    height: 52px;
    border-radius: 5px;
  }
  .tower-header {
    padding: 6px 14px 6px 11px;
    gap: 8px;
  }
  .tower-header-title {
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    padding-left: 0.26em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tower-tile-spinner {
    animation: none !important;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.placeholder\:text-text-dim::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.placeholder\:text-text-dim::placeholder {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.placeholder\:text-text-muted\/60::-moz-placeholder {
  color: rgb(154 163 188 / 0.6);
}
.placeholder\:text-text-muted\/60::placeholder {
  color: rgb(154 163 188 / 0.6);
}
.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:inset-x-4::before {
  content: var(--tw-content);
  left: 1rem;
  right: 1rem;
}
.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}
.before\:h-px::before {
  content: var(--tw-content);
  height: 1px;
}
.before\:bg-gradient-to-r::before {
  content: var(--tw-content);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.before\:to-transparent::before {
  content: var(--tw-content);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-\[1px\]:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-\[3px\]:hover {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-\[4px\]:hover {
  --tw-translate-y: -4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-crimson-400\/60:hover {
  border-color: rgb(248 113 113 / 0.6);
}
.hover\:border-crimson-500\/40:hover {
  border-color: rgb(239 68 68 / 0.4);
}
.hover\:border-crimson-500\/45:hover {
  border-color: rgb(239 68 68 / 0.45);
}
.hover\:border-edge:hover {
  --tw-border-opacity: 1;
  border-color: rgb(39 52 88 / var(--tw-border-opacity, 1));
}
.hover\:border-emerald-400\/60:hover {
  border-color: rgb(52 211 153 / 0.6);
}
.hover\:border-emerald-500\/35:hover {
  border-color: rgb(16 185 129 / 0.35);
}
.hover\:border-emerald-500\/45:hover {
  border-color: rgb(16 185 129 / 0.45);
}
.hover\:border-gold-400\/60:hover {
  border-color: rgb(231 184 76 / 0.6);
}
.hover\:border-gold-400\/80:hover {
  border-color: rgb(231 184 76 / 0.8);
}
.hover\:border-gold-500\/30:hover {
  border-color: rgb(212 160 42 / 0.3);
}
.hover\:border-gold-500\/40:hover {
  border-color: rgb(212 160 42 / 0.4);
}
.hover\:border-gold-500\/45:hover {
  border-color: rgb(212 160 42 / 0.45);
}
.hover\:border-gold-500\/50:hover {
  border-color: rgb(212 160 42 / 0.5);
}
.hover\:border-gold-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(164 118 17 / var(--tw-border-opacity, 1));
}
.hover\:border-line:hover {
  --tw-border-opacity: 1;
  border-color: rgb(29 39 64 / var(--tw-border-opacity, 1));
}
.hover\:border-royal-400\/60:hover {
  border-color: rgb(167 139 250 / 0.6);
}
.hover\:border-royal-500\/40:hover {
  border-color: rgb(139 92 246 / 0.4);
}
.hover\:border-royal-500\/45:hover {
  border-color: rgb(139 92 246 / 0.45);
}
.hover\:bg-crimson-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.hover\:bg-crimson-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:bg-crimson-500\/15:hover {
  background-color: rgb(239 68 68 / 0.15);
}
.hover\:bg-crimson-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2);
}
.hover\:bg-crimson-500\/\[0\.08\]:hover {
  background-color: rgb(239 68 68 / 0.08);
}
.hover\:bg-crimson-500\/\[0\.16\]:hover {
  background-color: rgb(239 68 68 / 0.16);
}
.hover\:bg-crimson-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-crimson-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(58 22 32 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gold-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(231 184 76 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gold-500\/10:hover {
  background-color: rgb(212 160 42 / 0.1);
}
.hover\:bg-gold-500\/\[0\.08\]:hover {
  background-color: rgb(212 160 42 / 0.08);
}
.hover\:bg-gold-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(114 81 8 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ink-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 43 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ink-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 34 59 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ink-700\/20:hover {
  background-color: rgb(24 34 59 / 0.2);
}
.hover\:bg-ink-700\/30:hover {
  background-color: rgb(24 34 59 / 0.3);
}
.hover\:bg-ink-700\/40:hover {
  background-color: rgb(24 34 59 / 0.4);
}
.hover\:bg-ink-700\/60:hover {
  background-color: rgb(24 34 59 / 0.6);
}
.hover\:bg-ink-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 26 46 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ink-800\/40:hover {
  background-color: rgb(18 26 46 / 0.4);
}
.hover\:bg-ink-800\/80:hover {
  background-color: rgb(18 26 46 / 0.8);
}
.hover\:bg-ink-900\/70:hover {
  background-color: rgb(12 18 34 / 0.7);
}
.hover\:bg-mint-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(62 226 156 / var(--tw-bg-opacity, 1));
}
.hover\:bg-mint-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 181 114 / var(--tw-bg-opacity, 1));
}
.hover\:bg-text-dim\/70:hover {
  background-color: rgb(98 108 135 / 0.7);
}
.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}
.hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgb(255 255 255 / 0.04);
}
.hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:text-crimson-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:text-gold-200:hover {
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.hover\:text-gold-300:hover {
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
}
.hover\:text-text:hover {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.hover\:text-text-dim:hover {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-\[0_0_18px_rgba\(46\2c 161\2c 230\2c 0\.5\)\]:hover {
  --tw-shadow: 0 0 18px rgba(46,161,230,0.5);
  --tw-shadow-colored: 0 0 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_20px_-6px_rgba\(212\2c 160\2c 42\2c 0\.55\)\]:hover {
  --tw-shadow: 0 0 20px -6px rgba(212,160,42,0.55);
  --tw-shadow-colored: 0 0 20px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_30px_rgba\(231\2c 184\2c 76\2c 0\.15\)\]:hover {
  --tw-shadow: 0 0 30px rgba(231,184,76,0.15);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-card-lift:hover {
  --tw-shadow: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 48px -18px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,160,42,0.14);
  --tw-shadow-colored: inset 0 1px 0 0 var(--tw-shadow-color), 0 24px 48px -18px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-100:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-\[1\.08\]:hover {
  --tw-brightness: brightness(1.08);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-crimson-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.focus\:border-crimson-500\/80:focus {
  border-color: rgb(239 68 68 / 0.8);
}
.focus\:border-gold-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(212 160 42 / var(--tw-border-opacity, 1));
}
.focus\:border-gold-500\/40:focus {
  border-color: rgb(212 160 42 / 0.4);
}
.focus\:border-gold-500\/45:focus {
  border-color: rgb(212 160 42 / 0.45);
}
.focus\:border-gold-500\/60:focus {
  border-color: rgb(212 160 42 / 0.6);
}
.focus\:border-sky-400\/70:focus {
  border-color: rgb(56 189 248 / 0.7);
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-crimson-500\/20:focus {
  --tw-ring-color: rgb(239 68 68 / 0.2);
}
.focus\:ring-gold-500\/15:focus {
  --tw-ring-color: rgb(212 160 42 / 0.15);
}
.focus\:ring-gold-500\/20:focus {
  --tw-ring-color: rgb(212 160 42 / 0.2);
}
.focus\:ring-gold-500\/25:focus {
  --tw-ring-color: rgb(212 160 42 / 0.25);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-gold-400\/40:focus-visible {
  --tw-ring-color: rgb(231 184 76 / 0.4);
}
.active\:translate-y-px:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gold-700:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(114 81 8 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-ink-700:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(24 34 59 / var(--tw-bg-opacity, 1));
}
.disabled\:text-text-dim:disabled {
  --tw-text-opacity: 1;
  color: rgb(98 108 135 / var(--tw-text-opacity, 1));
}
.disabled\:text-text-muted:disabled {
  --tw-text-opacity: 1;
  color: rgb(154 163 188 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-35:disabled {
  opacity: 0.35;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.disabled\:hover\:border-white\/10:hover:disabled {
  border-color: rgb(255 255 255 / 0.1);
}
.disabled\:hover\:bg-ink-900\/60:hover:disabled {
  background-color: rgb(12 18 34 / 0.6);
}
.disabled\:hover\:text-white\/75:hover:disabled {
  color: rgb(255 255 255 / 0.75);
}
.disabled\:hover\:shadow-\[0_0_12px_rgba\(46\2c 161\2c 230\2c 0\.3\)\]:hover:disabled {
  --tw-shadow: 0 0 12px rgba(46,161,230,0.3);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:hover\:shadow-none:hover:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:hover\:brightness-100:hover:disabled {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.group:hover .group-hover\:w-4 {
  width: 1rem;
}
.group:hover .group-hover\:-translate-x-\[3px\] {
  --tw-translate-x: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-x-\[8px\] {
  --tw-translate-x: -8px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-\[12px\] {
  --tw-translate-y: -12px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-\[4px\] {
  --tw-translate-y: -4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-\[6px\] {
  --tw-translate-y: -6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[-6px\] {
  --tw-translate-x: -6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[-8px\] {
  --tw-translate-x: -8px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[360\%\] {
  --tw-translate-x: 360%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[420\%\] {
  --tw-translate-x: 420%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[480\%\] {
  --tw-translate-x: 480%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[5px\] {
  --tw-translate-x: 5px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[6px\] {
  --tw-translate-x: 6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-\[-12px\] {
  --tw-translate-y: -12px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-\[-14px\] {
  --tw-translate-y: -14px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-\[-6px\] {
  --tw-translate-y: -6px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-\[-6deg\] {
  --tw-rotate: -6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.04\] {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.06\] {
  --tw-scale-x: 1.06;
  --tw-scale-y: 1.06;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-edge {
  --tw-border-opacity: 1;
  border-color: rgb(39 52 88 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:border-gold-300 {
  --tw-border-opacity: 1;
  border-color: rgb(239 200 112 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:border-gold-500\/30 {
  border-color: rgb(212 160 42 / 0.3);
}
.group:hover .group-hover\:bg-gold-sheen {
  background-image: linear-gradient(135deg, #F5D98B 0%, #D4A02A 45%, #A47611 72%, #F5D98B 100%);
}
.group\/count:hover .group-hover\/count\:text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.group\/count:hover .group-hover\/count\:text-text {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-crimson-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gold-200 {
  --tw-text-opacity: 1;
  color: rgb(245 217 139 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gold-300 {
  --tw-text-opacity: 1;
  color: rgb(239 200 112 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-ink-950 {
  --tw-text-opacity: 1;
  color: rgb(8 13 26 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-royal-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-text {
  --tw-text-opacity: 1;
  color: rgb(232 238 247 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-40 {
  opacity: 0.4;
}
.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}
.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}
.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}
.group:hover .group-hover\:opacity-90 {
  opacity: 0.9;
}
.group:hover .group-hover\:opacity-\[0\.14\] {
  opacity: 0.14;
}
.group:hover .group-hover\:opacity-\[0\.6\] {
  opacity: 0.6;
}
@media (min-width: 640px) {

  .sm\:bottom-4 {
    bottom: 1rem;
  }

  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mt-5 {
    margin-top: 1.25rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-\[224px\] {
    height: 224px;
  }

  .sm\:h-\[270px\] {
    height: 270px;
  }

  .sm\:h-\[280px\] {
    height: 280px;
  }

  .sm\:h-\[300px\] {
    height: 300px;
  }

  .sm\:h-\[340px\] {
    height: 340px;
  }

  .sm\:h-\[78px\] {
    height: 78px;
  }

  .sm\:min-h-\[300px\] {
    min-height: 300px;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-\[160px\] {
    width: 160px;
  }

  .sm\:w-\[193px\] {
    width: 193px;
  }

  .sm\:w-\[216px\] {
    width: 216px;
  }

  .sm\:w-\[78px\] {
    width: 78px;
  }

  .sm\:min-w-\[92px\] {
    min-width: 92px;
  }

  .sm\:max-w-\[60\%\] {
    max-width: 60%;
  }

  .sm\:auto-cols-\[170px\] {
    grid-auto-columns: 170px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr\2c auto\] {
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[auto\2c 1fr\] {
    grid-template-columns: auto 1fr;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:justify-self-end {
    justify-self: end;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[0\.84rem\] {
    font-size: 0.84rem;
  }

  .sm\:text-\[0\.85rem\] {
    font-size: 0.85rem;
  }

  .sm\:text-\[1\.05rem\] {
    font-size: 1.05rem;
  }

  .sm\:text-\[1\.14rem\] {
    font-size: 1.14rem;
  }

  .sm\:text-\[1\.35rem\] {
    font-size: 1.35rem;
  }

  .sm\:text-\[1\.65rem\] {
    font-size: 1.65rem;
  }

  .sm\:text-\[2\.4rem\] {
    font-size: 2.4rem;
  }

  .sm\:text-\[2\.7rem\] {
    font-size: 2.7rem;
  }

  .sm\:text-\[2rem\] {
    font-size: 2rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[244px\] {
    height: 244px;
  }

  .md\:h-\[296px\] {
    height: 296px;
  }

  .md\:min-h-\[340px\] {
    min-height: 340px;
  }

  .md\:min-h-\[360px\] {
    min-height: 360px;
  }

  .md\:w-\[174px\] {
    width: 174px;
  }

  .md\:w-\[211px\] {
    width: 211px;
  }

  .md\:w-\[280px\] {
    width: 280px;
  }

  .md\:auto-cols-\[185px\] {
    grid-auto-columns: 185px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.05fr\2c 1fr\] {
    grid-template-columns: 1.05fr 1fr;
  }

  .md\:grid-cols-\[1\.05fr_1fr\] {
    grid-template-columns: 1.05fr 1fr;
  }

  .md\:grid-cols-\[1\.1fr\2c 1fr\] {
    grid-template-columns: 1.1fr 1fr;
  }

  .md\:grid-cols-\[1\.4fr\2c 1fr\] {
    grid-template-columns: 1.4fr 1fr;
  }

  .md\:grid-cols-\[1fr\2c 1\.1fr\] {
    grid-template-columns: 1fr 1.1fr;
  }

  .md\:grid-cols-\[1fr\2c auto\] {
    grid-template-columns: 1fr auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-7 {
    gap: 1.75rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:text-\[2\.3rem\] {
    font-size: 2.3rem;
  }

  .md\:text-\[3\.4rem\] {
    font-size: 3.4rem;
  }

  .md\:text-\[3\.8rem\] {
    font-size: 3.8rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) {

  .lg\:absolute {
    position: absolute;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:left-1\/2 {
    left: 50%;
  }

  .lg\:top-\[140px\] {
    top: 140px;
  }

  .lg\:top-\[88px\] {
    top: 88px;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-10 {
    height: 2.5rem;
  }

  .lg\:h-9 {
    height: 2.25rem;
  }

  .lg\:w-10 {
    width: 2.5rem;
  }

  .lg\:w-9 {
    width: 2.25rem;
  }

  .lg\:flex-initial {
    flex: 0 1 auto;
  }

  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:auto-cols-\[195px\] {
    grid-auto-columns: 195px;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr\2c 1fr\] {
    grid-template-columns: 1.15fr 1fr;
  }

  .lg\:grid-cols-\[1\.1fr_1fr\] {
    grid-template-columns: 1.1fr 1fr;
  }

  .lg\:grid-cols-\[1\.4fr\2c 1fr\] {
    grid-template-columns: 1.4fr 1fr;
  }

  .lg\:grid-cols-\[1fr\2c 1\.4fr\] {
    grid-template-columns: 1fr 1.4fr;
  }

  .lg\:grid-cols-\[260px_1fr\] {
    grid-template-columns: 260px 1fr;
  }

  .lg\:grid-cols-\[360px_1fr\] {
    grid-template-columns: 360px 1fr;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
}
@media (min-width: 1280px) {

  .xl\:sticky {
    position: sticky;
  }

  .xl\:z-50 {
    z-index: 50;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:h-screen {
    height: 100vh;
  }

  .xl\:min-h-\[640px\] {
    min-height: 640px;
  }

  .xl\:w-0 {
    width: 0px;
  }

  .xl\:w-\[320px\] {
    width: 320px;
  }

  .xl\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:border-r {
    border-right-width: 1px;
  }

  .xl\:border-t-0 {
    border-top-width: 0px;
  }

  .xl\:border-transparent {
    border-color: transparent;
  }

  .xl\:transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}