.introjs-light{--introjs-btn-bg:#f4f4f4;--introjs-btn-color:#424242;--introjs-btn-border:#bdbdbd;--introjs-btn-hover-bg:#e0e0e0;--introjs-btn-hover-color:#212121;--introjs-btn-focus-bg:#eeeeee;--introjs-btn-focus-color:#424242;--introjs-btn-active-bg:#e0e0e0;--introjs-btn-active-color:#212121;--introjs-btn-active-border:#9e9e9e;--introjs-btn-textShadow:#ffffff;--introjs-arrow-color:#ffffff;--introjs-overlay-bg:#f4f4f4;--introjs-bg:#ffffff;--introjs-color:#212121}.introjs-dark{--introjs-btn-bg:#616161;--introjs-btn-color:#ffffff;--introjs-btn-border:#ffffff;--introjs-btn-hover-bg:#ffffff;--introjs-btn-hover-color:#424242;--introjs-btn-focus-bg:#9e9e9e;--introjs-btn-focus-color:#ffffff;--introjs-btn-active-bg:#616161;--introjs-btn-active-color:#ffffff;--introjs-btn-active-border:#bdbdbd;--introjs-btn-textShadow:#424242;--introjs-arrow-color:#424242;--introjs-overlay-bg:#424242;--introjs-bg:#424242;--introjs-color:#ffffff}.introjs-overlay{position:absolute;box-sizing:content-box;z-index:999999;opacity:0;transition:all .3s ease-out}.introjs-showElement{z-index:9999999!important}tr.introjs-showElement>td{z-index:9999999!important;position:relative}tr.introjs-showElement>th{z-index:9999999!important;position:relative}.introjs-disableInteraction{z-index:99999999!important;position:absolute;background-color:#fff;opacity:0}.introjs-relativePosition{position:relative}.introjs-helperLayer{box-sizing:content-box;position:absolute;z-index:9999998;border-radius:4px;opacity:var(--introjs-fade-opacity,1);transition:all .3s ease-out}.introjs-helperLayer *{box-sizing:content-box}.introjs-helperLayer :before{box-sizing:content-box}.introjs-helperLayer :after{box-sizing:content-box}.introjs-tooltipReferenceLayer{font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;box-sizing:content-box;position:absolute;visibility:hidden;z-index:100000000;background-color:transparent;opacity:var(--introjs-fade-opacity,1);transition:all .3s ease-out}.introjs-tooltipReferenceLayer *{font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.introjs-helperNumberLayer{font-family:"Helvetica Neue",Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif;color:#9e9e9e;text-align:center;padding-top:10px;padding-bottom:10px}.introjs-arrow{border:5px solid transparent;content:"";position:absolute}.introjs-arrow.top{top:-10px;left:10px;border-bottom-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.top-right{top:-10px;right:10px;border-bottom-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-bottom-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.right{right:-10px;top:10px;border-left-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.right-bottom{bottom:10px;right:-10px;border-left-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.bottom{bottom:-10px;left:10px;border-top-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.bottom-right{bottom:-10px;right:10px;border-top-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.bottom-middle{bottom:-10px;left:50%;margin-left:-5px;border-top-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.left{left:-10px;top:10px;border-right-color:var(--introjs-arrow-color,#fff)}.introjs-arrow.left-bottom{left:-10px;bottom:10px;border-right-color:var(--introjs-arrow-color,#fff)}.introjs-tooltip{box-sizing:content-box;position:absolute;visibility:visible!important;background-color:var(--introjs-bg,#fff);min-width:250px;max-width:300px;border-radius:5px;box-shadow:0 3px 30px rgba(33,33,33,.3);transition:opacity .1s ease-out}.introjs-tooltiptext{padding:20px;color:var(--introjs-color,#212121)}.introjs-dontShowAgain{padding-left:20px;padding-right:20px}.introjs-dontShowAgain input{padding:0;margin:0;margin-bottom:2px;display:inline;width:10px;height:10px}.introjs-dontShowAgain label{font-size:14px;display:inline-block;font-weight:400;margin:0 0 0 5px;padding:0;background-color:var(--introjs-bg,#fff);color:#616161;-webkit-user-select:none;-moz-user-select:none;user-select:none}.introjs-tooltip-title{font-size:18px;width:90%;min-height:1.5em;margin:0;padding:0;font-weight:700;line-height:1.5;color:var(--introjs-color,#212121)}.introjs-tooltip-header{position:relative;padding-left:20px;padding-right:20px;padding-top:10px;min-height:1.5em;color:var(--introjs-color,#212121)}.introjs-tooltipbuttons{border-top:1px solid #e0e0e0;padding:10px;text-align:right;white-space:nowrap}.introjs-tooltipbuttons:after{content:"";visibility:hidden;display:block;height:0;clear:both}.introjs-button{box-sizing:content-box;position:relative;overflow:visible;padding:.5rem 1rem;border:1px solid #bdbdbd;text-decoration:none;text-shadow:1px 1px 0 var(--introjs-btn-textShadow,#fff);font-size:14px;color:var(--introjs-btn-color,#424242);white-space:nowrap;cursor:pointer;outline:0;background-color:var(--introjs-btn-bg,#f4f4f4);border-radius:.2em;zoom:1;display:inline}.introjs-button:hover{outline:0;text-decoration:none;border-color:var(--introjs-btn-border,#bdbdbd);background-color:var(--introjs-btn-hover-bg,#e0e0e0);color:var(--introjs-btn-hover-color,#212121)}.introjs-button:focus{outline:0;text-decoration:none;background-color:var(--introjs-btn-focus-bg,#eee);box-shadow:0 0 0 .2rem rgba(158,158,158,.5);border:1px solid var(--introjs-btn-border,#bdbdbd);color:var(--introjs-btn-focus-color,#424242)}.introjs-button:active{outline:0;text-decoration:none;background-color:var(--introjs-btn-active-bg,#e0e0e0);border-color:var(--introjs-btn-active-border,#9e9e9e);color:var(--introjs-btn-active-color,#212121)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{position:absolute;top:0;right:0;display:inline-block;width:45px;height:45px;line-height:45px;color:var(--introjs-btn-color,#424242);font-size:22px;cursor:pointer;font-weight:700;text-align:center;text-decoration:none}.introjs-skipbutton:focus,.introjs-skipbutton:hover{color:var(--introjs-btn-focus-color,#424242);outline:0;text-decoration:none}.introjs-prevbutton{float:left;color:var(--introjs-btn-color,#424242)}.introjs-nextbutton{float:right;color:var(--introjs-btn-color,#424242)}.introjs-disabled{color:var(--introjs-btn-color,#424242);border-color:var(--introjs-btn-border,#bdbdbd);box-shadow:none;cursor:default;background-color:var(--introjs-btn-bg,#f4f4f4);background-image:none;text-decoration:none}.introjs-disabled:focus,.introjs-disabled:hover{color:var(--introjs-btn-focus-color,#424242);border-color:var(--introjs-btn-border,#bdbdbd);box-shadow:none;cursor:default;background-color:var(--introjs-btn-focus-bg,#eee);background-image:none;text-decoration:none}.introjs-hidden{display:none}.introjs-bullets{text-align:center;padding-top:10px;padding-bottom:10px}.introjs-bullets ul{box-sizing:content-box;clear:both;margin:0 auto 0;padding:0;display:inline-block}.introjs-bullets ul li{box-sizing:content-box;list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{transition:width .1s ease-in;box-sizing:content-box;display:block;width:6px;height:6px;background:#ccc;border-radius:10px;text-decoration:none;cursor:pointer}.introjs-bullets ul li a:focus,.introjs-bullets ul li a:hover{width:15px;background:#999;text-decoration:none;outline:0}.introjs-bullets ul li a.active{width:15px;background:#999}.introjs-progress{box-sizing:content-box;overflow:hidden;height:10px;margin:10px;border-radius:4px;background-color:#e0e0e0}.introjs-progressbar{box-sizing:content-box;float:left;width:0%;height:100%;font-size:10px;line-height:10px;text-align:center;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}.introjs-fixedTooltip{position:fixed}.introjs-hint{box-sizing:content-box;position:absolute;background:0 0;width:20px;height:15px;cursor:pointer}.introjs-hint:focus{border:0;outline:0}.introjs-hint:hover>.introjs-hint-pulse{background-color:rgba(60,60,60,.57)}.introjs-hidehint{display:none}.introjs-fixedhint{position:fixed}@keyframes introjspulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(0,0,0,.7)}70%{transform:scale(1);box-shadow:0 0 0 10px transparent}100%{transform:scale(.95);box-shadow:0 0 0 0 transparent}}.introjs-hint-pulse{box-sizing:content-box;width:15px;height:15px;border-radius:30px;background-color:rgba(136,136,136,.24);z-index:10;position:absolute;transition:all .2s ease-out;animation:introjspulse 2s infinite}.introjs-hint-no-anim .introjs-hint-pulse{animation:none}.introjs-hint-dot{box-sizing:content-box;background:0 0;border-radius:60px;height:50px;width:50px;position:absolute;top:-18px;left:-18px;z-index:1;opacity:0}
/*# sourceMappingURL=introjs.css.map */
/* Selena Gaming Tour Theme: quiet obsidian surfaces, clear typography, and warm gold accents. */
.selena-tour-open .introjs-overlay,
.admin-tour-open .introjs-overlay {
  background: #020711 !important;
  backdrop-filter: none !important;
  opacity: 0.68 !important;
}

.selena-tour-tooltip.introjs-tooltip,
.admin-tour-tooltip.introjs-tooltip {
  width: 300px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: 1px solid #d7e0ef26 !important;
  border-radius: 12px !important;
  background: #151e2b !important;
  box-shadow: 0 24px 70px #00000066, 0 2px 8px #00000033 !important;
  color: #f2f4f8 !important;
  font-family: inherit !important;
  text-align: left !important;
  transform: translate(calc(var(--tour-gap-x, 0px) + var(--tour-shift-x, 0px)), calc(var(--tour-gap-y, 0px) + var(--tour-shift-y, 0px)));
  overflow: hidden !important;
  animation: none !important;
}

.selena-tour-tooltip.introjs-tooltip::before,
.admin-tour-tooltip.introjs-tooltip::before {
  display: none !important;
}

.selena-tour-tooltip .introjs-tooltip-header,
.admin-tour-tooltip .introjs-tooltip-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 12px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
}

.selena-tour-tooltip .introjs-tooltip-header::after,
.admin-tour-tooltip .introjs-tooltip-header::after {
  display: none !important;
}

.selena-tour-tooltip .introjs-tooltip-title,
.admin-tour-tooltip .introjs-tooltip-title {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #b5c0d0 !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

.selena-tour-tooltip .introjs-skipbutton,
.admin-tour-tooltip .introjs-skipbutton {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #b5c0d0 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 150ms ease, background-color 150ms ease !important;
}

.selena-tour-tooltip .introjs-skipbutton:hover,
.admin-tour-tooltip .introjs-skipbutton:hover {
  color: #ffffff !important;
  background: #ffffff08 !important;
  border: 0 !important;
}

.selena-tour-tooltip .introjs-tooltiptext,
.admin-tour-tooltip .introjs-tooltiptext {
  padding: 6px 16px 16px !important;
  color: #adb9ca !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.selena-tour-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.selena-tour-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #e8c78a30;
  border-radius: 9px;
  background: #e8c78a0c;
  color: #e8c78a;
}

.selena-tour-icon svg {
  width: 17px;
  height: 17px;
}

.selena-tour-tooltip #selena-tour-heading,
.admin-tour-tooltip #selena-tour-heading,
.admin-tour-tooltip h2 {
  margin: 0 !important;
  color: #f5f2ea !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.4 !important;
}

.selena-tour-tooltip #selena-tour-description,
.admin-tour-tooltip #selena-tour-description,
.admin-tour-tooltip p {
  margin: 0 !important;
  color: #adb9ca !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.selena-tour-tooltip .introjs-progress,
.admin-tour-tooltip .introjs-progress {
  height: 2px !important;
  margin: 0 16px !important;
  border-radius: 3px !important;
  background: #ffffff10 !important;
  overflow: hidden !important;
}

.selena-tour-tooltip .introjs-progressbar,
.admin-tour-tooltip .introjs-progressbar {
  height: 100% !important;
  border-radius: inherit !important;
  background: #e8c78a !important;
  transition: width 180ms ease !important;
  animation: none !important;
}

.selena-tour-tooltip .introjs-tooltipbuttons,
.admin-tour-tooltip .introjs-tooltipbuttons {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px 16px 14px !important;
  border: 0 !important;
  background: transparent !important;
}

.selena-tour-tooltip .introjs-tooltipbuttons::after,
.admin-tour-tooltip .introjs-tooltipbuttons::after {
  display: none !important;
}

.selena-tour-tooltip .introjs-button,
.admin-tour-tooltip .introjs-button,
.admin-tour-tooltip a.introjs-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #ffffff20 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #d2dbe7 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

.selena-tour-tooltip .introjs-button:hover,
.admin-tour-tooltip .introjs-button:hover,
.admin-tour-tooltip a.introjs-button:hover {
  background: #ffffff08 !important;
  border-color: #ffffff40 !important;
  transform: none !important;
}

.selena-tour-tooltip .introjs-nextbutton,
.admin-tour-tooltip .introjs-nextbutton,
.admin-tour-tooltip a.introjs-nextbutton,
.selena-tour-tooltip .introjs-donebutton,
.admin-tour-tooltip .introjs-donebutton,
.admin-tour-tooltip a.introjs-donebutton {
  margin-left: auto !important;
  min-width: 84px !important;
  border-color: #e8c78a !important;
  background: #e8c78a !important;
  color: #201d16 !important;
  box-shadow: none !important;
}

.selena-tour-tooltip .introjs-nextbutton:hover,
.admin-tour-tooltip .introjs-nextbutton:hover,
.admin-tour-tooltip a.introjs-nextbutton:hover,
.selena-tour-tooltip .introjs-donebutton:hover,
.admin-tour-tooltip .introjs-donebutton:hover,
.admin-tour-tooltip a.introjs-donebutton:hover {
  background: #f3d9ac !important;
  border-color: #f3d9ac !important;
  color: #201d16 !important;
  box-shadow: none !important;
  transform: none !important;
}

.selena-tour-tooltip .introjs-prevbutton,
.admin-tour-tooltip .introjs-prevbutton,
.admin-tour-tooltip a.introjs-prevbutton {
  background: transparent !important;
  border: 1px solid #ffffff20 !important;
  color: #d2dbe7 !important;
}

.selena-tour-tooltip .introjs-prevbutton:hover,
.admin-tour-tooltip .introjs-prevbutton:hover,
.admin-tour-tooltip a.introjs-prevbutton:hover {
  background: #ffffff08 !important;
  border-color: #ffffff40 !important;
  transform: none !important;
}

.selena-tour-tooltip .introjs-button:focus-visible,
.selena-tour-tooltip .introjs-skipbutton:focus-visible,
.admin-tour-tooltip .introjs-button:focus-visible,
.admin-tour-tooltip .introjs-skipbutton:focus-visible {
  outline: 2px solid #e8c78a !important;
  outline-offset: 4px !important;
}

.selena-tour-tooltip .introjs-disabled,
.admin-tour-tooltip .introjs-disabled,
.admin-tour-tooltip a.introjs-prevbutton.introjs-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  transform: none !important;
}

.selena-tour-tooltip .introjs-hidden,
.admin-tour-tooltip .introjs-hidden {
  display: none !important;
}

.selena-tour-tooltip .introjs-nextbutton::after,
.admin-tour-tooltip .introjs-nextbutton::after,
.admin-tour-tooltip a.introjs-nextbutton::after {
  content: " →";
  font-size: 15px;
}

.selena-tour-tooltip .introjs-donebutton::after,
.admin-tour-tooltip .introjs-donebutton::after,
.admin-tour-tooltip a.introjs-donebutton::after {
  content: " ✓";
  font-size: 14px;
}

.selena-tour-tooltip .introjs-prevbutton::before,
.admin-tour-tooltip .introjs-prevbutton::before,
.admin-tour-tooltip a.introjs-prevbutton::before {
  content: "← ";
  font-size: 15px;
}

.selena-tour-highlight.introjs-helperLayer,
.admin-tour-highlight.introjs-helperLayer {
  border: 1px solid #e8c78acc !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: 0 0 0 4px #e8c78a14 !important;
  animation: none !important;
}

.selena-tour-tooltip .introjs-arrow.top,
.selena-tour-tooltip .introjs-arrow.top-right,
.selena-tour-tooltip .introjs-arrow.top-middle,
.admin-tour-tooltip .introjs-arrow.top,
.admin-tour-tooltip .introjs-arrow.top-right,
.admin-tour-tooltip .introjs-arrow.top-middle {
  border-bottom-color: #151e2b !important;
}

.selena-tour-tooltip .introjs-arrow.bottom,
.selena-tour-tooltip .introjs-arrow.bottom-right,
.selena-tour-tooltip .introjs-arrow.bottom-middle,
.admin-tour-tooltip .introjs-arrow.bottom,
.admin-tour-tooltip .introjs-arrow.bottom-right,
.admin-tour-tooltip .introjs-arrow.bottom-middle {
  border-top-color: #151e2b !important;
}

.selena-tour-tooltip .introjs-arrow.left,
.admin-tour-tooltip .introjs-arrow.left {
  border-right-color: #151e2b !important;
}

.selena-tour-tooltip .introjs-arrow.right,
.admin-tour-tooltip .introjs-arrow.right {
  border-left-color: #151e2b !important;
}

.selena-tour-tooltip[class*="introjs-bottom"],
.admin-tour-tooltip[class*="introjs-bottom"] {
  --tour-gap-y: 10px;
}

.selena-tour-tooltip[class*="introjs-top"],
.admin-tour-tooltip[class*="introjs-top"] {
  --tour-gap-y: -10px;
}

.selena-tour-tooltip.introjs-right,
.admin-tour-tooltip.introjs-right {
  --tour-gap-x: 10px;
}

.selena-tour-tooltip.introjs-left,
.admin-tour-tooltip.introjs-left {
  --tour-gap-x: -10px;
}

.casino-app .tour-replay-button {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 480px) {
  .selena-tour-tooltip.introjs-tooltip,
  .admin-tour-tooltip.introjs-tooltip {
    width: min(300px, calc(100vw - 40px)) !important;
  }
  .selena-tour-tooltip .introjs-button,
  .admin-tour-tooltip .introjs-button {
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selena-tour-open .introjs-overlay,
  .admin-tour-open .introjs-overlay,
  .selena-tour-open .introjs-helperLayer,
  .admin-tour-open .introjs-helperLayer,
  .selena-tour-tooltip,
  .admin-tour-tooltip,
  .selena-tour-tooltip *,
  .admin-tour-tooltip * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

*, ::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.19 | 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, Segoe 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 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;
}
.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}}
.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}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0px}
.-bottom-24{bottom:-6rem}
.-left-24{left:-6rem}
.-right-24{right:-6rem}
.-top-24{top:-6rem}
.left-1\/2{left:50%}
.top-1\/2{top:50%}
.z-30{z-index:30}
.z-50{z-index:50}
.mx-5{margin-left:1.25rem;margin-right:1.25rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-1\.5{margin-top:0.375rem;margin-bottom:0.375rem}
.my-3{margin-top:0.75rem;margin-bottom:0.75rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.mb-0\.5{margin-bottom:0.125rem}
.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}
.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}
.mb-\[-18px\]{margin-bottom:-18px}
.ml-0\.5{margin-left:0.125rem}
.ml-1{margin-left:0.25rem}
.ml-2{margin-left:0.5rem}
.ml-auto{margin-left:auto}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-10{margin-top:2.5rem}
.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-7{margin-top:1.75rem}
.mt-8{margin-top:2rem}
.block{display:block}
.inline-block{display:inline-block}
.\!inline{display:inline !important}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.table{display:table}
.grid{display:grid}
.hidden{display:none}
.aspect-square{aspect-ratio:1 / 1}
.h-1{height:0.25rem}
.h-2{height:0.5rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-7{height:1.75rem}
.h-72{height:18rem}
.h-\[550px\]{height:550px}
.h-full{height:100%}
.max-h-56{max-height:14rem}
.max-h-\[75vh\]{max-height:75vh}
.max-h-\[80vh\]{max-height:80vh}
.max-h-\[90vh\]{max-height:90vh}
.w-2{width:0.5rem}
.w-20{width:5rem}
.w-24{width:6rem}
.w-7{width:1.75rem}
.w-72{width:18rem}
.w-\[550px\]{width:550px}
.w-full{width:100%}
.min-w-0{min-width:0px}
.max-w-4xl{max-width:56rem}
.max-w-\[140px\]{max-width:140px}
.max-w-\[260px\]{max-width:260px}
.max-w-\[420px\]{max-width:420px}
.max-w-\[85vw\]{max-width:85vw}
.max-w-\[90vw\]{max-width:90vw}
.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}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.-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-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))}
.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))}
.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))}
@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}
.animate-bounce{animation:bounce 1s infinite}
@keyframes ping{75%, 100%{transform:scale(2);opacity:0}}
.animate-ping{animation:ping 1s cubic-bezier(0, 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}
.cursor-pointer{cursor:pointer}
.cursor-wait{cursor:wait}
.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.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-5{gap:1.25rem}
.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-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))}
.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-white\/5 > :not([hidden]) ~ :not([hidden]){border-color:rgb(255 255 255 / 0.05)}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rounded{border-radius:0.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-xl{border-radius:0.75rem}
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-l-2{border-left-width:2px}
.border-amber-400{--tw-border-opacity:1;border-color:rgb(251 191 36 / var(--tw-border-opacity, 1))}
.border-amber-500\/20{border-color:rgb(245 158 11 / 0.2)}
.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-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}
.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-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity, 1))}
.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64 / var(--tw-border-opacity, 1))}
.border-neutral-800{--tw-border-opacity:1;border-color:rgb(38 38 38 / var(--tw-border-opacity, 1))}
.border-red-500\/40{border-color:rgb(239 68 68 / 0.4)}
.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}
.border-white\/10{border-color:rgb(255 255 255 / 0.1)}
.border-white\/15{border-color:rgb(255 255 255 / 0.15)}
.border-white\/5{border-color:rgb(255 255 255 / 0.05)}
.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\/5{background-color:rgb(245 158 11 / 0.05)}
.bg-amber-600\/70{background-color:rgb(217 119 6 / 0.7)}
.bg-amber-950\/40{background-color:rgb(69 26 3 / 0.4)}
.bg-amber-950\/50{background-color:rgb(69 26 3 / 0.5)}
.bg-amber-950\/60{background-color:rgb(69 26 3 / 0.6)}
.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}
.bg-black\/40{background-color:rgb(0 0 0 / 0.4)}
.bg-black\/85{background-color:rgb(0 0 0 / 0.85)}
.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}
.bg-emerald-500\/20{background-color:rgb(16 185 129 / 0.2)}
.bg-emerald-950\/60{background-color:rgb(2 44 34 / 0.6)}
.bg-indigo-600\/10{background-color:rgb(79 70 229 / 0.1)}
.bg-neutral-400{--tw-bg-opacity:1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}
.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(82 82 82 / var(--tw-bg-opacity, 1))}
.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity, 1))}
.bg-neutral-800\/80{background-color:rgb(38 38 38 / 0.8)}
.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity, 1))}
.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}
.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}
.bg-red-950\/40{background-color:rgb(69 10 10 / 0.4)}
.bg-rose-600\/10{background-color:rgb(225 29 72 / 0.1)}
.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}
.bg-slate-900\/80{background-color:rgb(15 23 42 / 0.8)}
.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}
.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}
.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-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}
.from-\[\#16152b\]{--tw-gradient-from:#16152b var(--tw-gradient-from-position);--tw-gradient-to:rgb(22 21 43 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.from-\[\#1c1836\]{--tw-gradient-from:#1c1836 var(--tw-gradient-from-position);--tw-gradient-to:rgb(28 24 54 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.from-amber-300{--tw-gradient-from:#fcd34d var(--tw-gradient-from-position);--tw-gradient-to:rgb(252 211 77 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.from-amber-400{--tw-gradient-from:#fbbf24 var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 191 36 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}
.via-\[\#0d0c1b\]{--tw-gradient-to:rgb(13 12 27 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0d0c1b var(--tw-gradient-via-position), var(--tw-gradient-to)}
.via-yellow-400{--tw-gradient-to:rgb(250 204 21 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to)}
.to-\[\#080712\]{--tw-gradient-to:#080712 var(--tw-gradient-to-position)}
.to-\[\#0a0815\]{--tw-gradient-to:#0a0815 var(--tw-gradient-to-position)}
.to-amber-500{--tw-gradient-to:#f59e0b var(--tw-gradient-to-position)}
.to-amber-600{--tw-gradient-to:#d97706 var(--tw-gradient-to-position)}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.fill-amber-400{fill:#fbbf24}
.fill-white{fill:#fff}
.object-contain{-o-object-fit:contain;object-fit:contain}
.object-cover{-o-object-fit:cover;object-fit:cover}
.p-0\.5{padding:0.125rem}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-2\.5{padding:0.625rem}
.p-3{padding:0.75rem}
.p-3\.5{padding:0.875rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-7{padding:1.75rem}
.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-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-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pb-2{padding-bottom:0.5rem}
.pb-3{padding-bottom:0.75rem}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-base{font-size:1rem;line-height:1.5rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}
.leading-none{line-height:1}
.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-amber-100{--tw-text-opacity:1;color:rgb(254 243 199 / var(--tw-text-opacity, 1))}
.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-400{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}
.text-amber-900\/80{color:rgb(120 53 15 / 0.8)}
.text-amber-950{--tw-text-opacity:1;color:rgb(69 26 3 / var(--tw-text-opacity, 1))}
.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}
.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}
.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{--tw-text-opacity:1;color:rgb(237 189 98 / var(--tw-text-opacity, 1))}
.text-jade{--tw-text-opacity:1;color:rgb(102 217 174 / var(--tw-text-opacity, 1))}
.text-muted{--tw-text-opacity:1;color:rgb(180 165 189 / var(--tw-text-opacity, 1))}
.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229 / var(--tw-text-opacity, 1))}
.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212 / var(--tw-text-opacity, 1))}
.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}
.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202 / var(--tw-text-opacity, 1))}
.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}
.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}
.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}
.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}
.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}
.text-transparent{color:transparent}
.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.underline{text-decoration-line:underline}
.no-underline{text-decoration-line:none}
.opacity-0{opacity:0}
.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}
.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-\[0_0_15px_rgba\(16\2c 185\2c 129\2c 0\.2\)\]{--tw-shadow:0 0 15px rgba(16,185,129,0.2);--tw-shadow-colored:0 0 15px 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-inner{--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)}
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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-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-amber-500\/20{--tw-shadow-color:rgb(245 158 11 / 0.2);--tw-shadow:var(--tw-shadow-colored)}
.shadow-amber-500\/25{--tw-shadow-color:rgb(245 158 11 / 0.25);--tw-shadow:var(--tw-shadow-colored)}
.shadow-amber-500\/30{--tw-shadow-color:rgb(245 158 11 / 0.3);--tw-shadow:var(--tw-shadow-colored)}
.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-4{--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(4px + 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-amber-300\/30{--tw-ring-color:rgb(252 211 77 / 0.3)}
.ring-amber-300\/40{--tw-ring-color:rgb(252 211 77 / 0.4)}
.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)}
.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));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-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-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-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}

:root {
  color-scheme: dark;
  --bg: #0a1010;
  --surface: #131c1b;
  --border: #24302c;
  --muted: #98aaa4;
  --gold: #edcd82;
  --jade: #66d9ae;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: #edf0e8;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
button,
a,
input,
textarea,
select {
  outline-offset: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #66d9ae80;
}
::-moz-selection {
  background: #edcd8238;
  color: #fff;
}
::selection {
  background: #edcd8238;
  color: #fff;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.035em;
}
h1 {
  font-size: 32px;
  line-height: 1.2;
}
h2 {
  font-size: 23px;
  line-height: 1.25;
}
h3 {
  font-size: 17px;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  flex-shrink: 0;
}
button {
  font: inherit;
}
img {
  max-width: 100%;
  display: block;
}
small {
  font-size: 11px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #34463e transparent;
}
.button-gold,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 19px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background 0.18s,
    transform 0.18s,
    border-color 0.18s;
}
.button-gold {
  background: linear-gradient(115deg, #f1d79b, #dfbc6c);
  border: 1px solid #f5dc9a;
  color: #242112;
  box-shadow: 0 3px 16px #d9af4420;
}
.button-gold:hover {
  background: #f6dfab;
  transform: translateY(-1px);
}
.button-secondary {
  border: 1px solid #35443b;
  background: #ffffff04;
  color: #e4e9df;
}
.button-secondary:hover {
  border-color: #73816a;
  background: #ffffff07;
}
.compact {
  padding: 10px 16px;
  min-height: 39px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  border-radius: 9px;
  color: #b5c1b8;
}
.icon-button:hover {
  background: #ffffff08;
  color: var(--gold);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
}
.text-link:hover {
  color: #ffebbb;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 9px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.17em;
}
.field-label {
  display: block;
}
.field-label > span {
  display: block;
  font-size: 12px;
  color: #c8d1c7;
  margin-bottom: 8px;
}
.field {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #33433a;
  border-radius: 8px;
  background: #0b1311;
  color: #f3f3e9;
  font-size: 14px;
  transition: border-color 0.18s;
}
.field::-moz-placeholder {
  color: #667b70;
}
.field::placeholder {
  color: #667b70;
}
.field:focus {
  border-color: #83ae8e;
}
.field[readonly] {
  color: #8ea399;
}
.field option,
.small-select option {
  background: #14211b;
}
.small-select {
  background: #14211b;
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 200;
  background: var(--gold);
  color: #172019;
  padding: 14px;
}
.skip-link:focus {
  top: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.brand-mark {
  color: var(--gold);
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #a18a4a75;
  border-radius: 13px 13px 17px 17px;
  background: linear-gradient(140deg, #cdaa4421, #0a1310);
}
.brand b {
  display: block;
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: #f7e6b4;
}
.brand i {
  font-style: normal;
  color: #ad9265;
  padding: 0 1px;
}
.brand small {
  display: block;
  color: #829889;
  font-size: 7px;
  letter-spacing: 0.22em;
  margin-top: 6px;
}
.brand-small .brand-mark {
  width: 29px;
  height: 32px;
}
.brand-small .brand-mark svg {
  width: 18px;
}
.brand-small b {
  font-size: 12px;
}
.brand-small small {
  font-size: 6px;
}
.casino-app {
  min-height: 100dvh;
}
.sidebar {
  width: 216px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 65;
  background: #0e1613;
  border-right: 1px solid #202c24;
  padding: 29px 17px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 0 2px 35px;
}
.nav-caption {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #708777;
  font-weight: 700;
  padding: 0 13px;
  margin-bottom: 13px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 5px;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  color: #91a497;
  font-weight: 500;
}
.side-link:hover {
  color: #ece8c5;
  background: #e9db9805;
}
.side-link.active {
  border-color: #7f714633;
  color: #e5cb8b;
  background: linear-gradient(100deg, #e8c16617, #dab25504);
}
.nav-dot {
  margin-left: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.sidebar-divider {
  height: 1px;
  background: #27342b;
  margin: 20px 10px;
}
.sidebar-feature {
  margin: 30px 1px 22px;
  padding: 22px 14px 17px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid #5e603134;
  background: radial-gradient(ellipse at top, #bfa43e15, transparent 85%);
}
.mini-crown {
  display: inline-grid;
  place-items: center;
  background: #cfb15b14;
  border: 1px solid #ac945336;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  color: var(--gold);
}
.sidebar-feature p {
  font-family: Georgia, serif;
  font-size: 17px;
  margin: 14px 0 9px;
  color: #e7dcc0;
}
.sidebar-feature > span:not(.mini-crown) {
  font-size: 11px;
  color: #829485;
  line-height: 1.7;
}
.sidebar-feature > a {
  margin-top: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
}
.sidebar-bottom {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  color: #768979;
  font-size: 9px;
  line-height: 1.6;
}
.sidebar-bottom b {
  font-weight: 400;
  color: #a6b2a4;
}
.main-shell {
  margin-left: 216px;
  min-width: 0;
}
.topbar {
  height: 76px;
  padding: 0 32px;
  border-bottom: 1px solid #263029;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1511ed;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  color: #768a7d;
  white-space: nowrap;
}
.breadcrumb b {
  font-weight: 500;
  color: #e0e7dc;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sign-in-link {
  font-size: 12px;
  color: #c5cebf;
}
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b7c9b3;
  background: #17241b;
  border: 1px solid #2b3d2c;
  border-radius: 8px;
  padding: 7px 8px 7px 12px;
}
.wallet-chip span {
  display: flex;
  gap: 12px;
  align-items: center;
}
.wallet-chip small {
  font-size: 8px;
  letter-spacing: 0.07em;
  color: #81977e;
}
.wallet-chip b {
  font-size: 13px;
  color: #eee4c5;
  font-weight: 600;
}
.wallet-chip .wallet-plus {
  background: #e6c982;
  color: #21341f;
  border-radius: 5px;
  min-width: 23px;
  min-height: 23px;
  justify-content: center;
  margin-left: 4px;
  font-size: 18px;
}
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #ecdaae;
  border: 1px solid #6d6641;
  border-radius: 50%;
  background: #77703425;
  font-family: Georgia, serif;
}
.mobile-menu,
.mobile-brand,
.bottom-nav {
  display: none;
}
.preview-bar {
  padding: 8px 32px;
  background: #ae854412;
  border-bottom: 1px solid #8e70422e;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b2a991;
  font-size: 10px;
}
.preview-bar > span {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #e0c593;
  font-weight: 700;
}
.preview-bar > a {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.page-content {
  max-width: 1536px;
  margin: 0 auto;
  padding: 31px 32px 45px;
  min-height: calc(100dvh - 250px);
  animation: enter 0.3s ease-out;
}
.lobby-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 25px;
}
.lobby-intro h1 {
  font-size: 25px;
  letter-spacing: -0.045em;
  margin-top: 6px;
  font-weight: 500;
}
.lounge-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #9bab9a;
  white-space: nowrap;
}
.lounge-label > span,
.inline-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #78c397;
  display: inline-block;
  margin-right: 3px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.8fr) minmax(210px, 1fr);
  gap: 18px;
}
.casino-hero {
  min-height: 365px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #91804b70;
  background-color: #141c13;
  background-image:
    linear-gradient(
      90deg,
      #0c1d15 0%,
      #112016ef 26%,
      #1620185c 52%,
      #11151408 100%
    ),
    var(--hero-art);
  background-size:
    cover,
    auto 135%;
  background-position:
    center,
    82% 39%;
  box-shadow: inset 0 1px 0 #c0a56330;
}
.casino-hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  pointer-events: none;
  background: linear-gradient(transparent, #0f1b17bd);
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: 62%;
  padding: 29px 30px 45px;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: #e2c784;
}
.hero-copy h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 47px;
  line-height: 1.01;
  letter-spacing: -0.035em;
  margin: 19px 0 15px;
  color: #fcf5df;
}
.hero-copy h2 em {
  color: #efd497;
  font-weight: 400;
}
.hero-copy > p {
  font-size: 11px;
  line-height: 1.7;
  max-width: 245px;
  color: #c9d1b9;
}
.hero-copy .button-gold {
  margin-top: 22px;
  min-height: 42px;
  padding: 12px 16px;
  font-size: 11px;
}
.hero-footnote {
  display: block;
  font-size: 9px;
  color: #a7b098;
  margin-top: 12px;
}
.hero-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 16px;
  left: 30px;
  right: 20px;
  color: #d8c193;
  z-index: 1;
  font-size: 7px;
  letter-spacing: 0.18em;
}
.hero-edition > span {
  color: #c4bfa5;
}
.spotlight-card {
  border: 1px solid #5e57382b;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 35%, #65502035, transparent 68%),
    linear-gradient(135deg, #211f14, #111912);
  padding: 22px 22px 21px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spotlight-card > .flex {
  width: 100%;
  color: #dbc585;
}
.spotlight-card .eyebrow {
  font-size: 8px;
}
.spotlight-art {
  position: relative;
  height: 156px;
  width: 160px;
  display: grid;
  place-items: center;
  margin: 3px 0 2px;
}
.spotlight-art img {
  width: 93px;
  height: 93px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 22px;
  transform: rotate(-9deg);
  box-shadow: 0 13px 35px #0009;
  z-index: 1;
  border: 1px solid #ceb5695e;
}
.orbit {
  position: absolute;
  border: 1px solid #bb985c25;
  border-radius: 50%;
  width: 145px;
  height: 145px;
}
.orbit-two {
  width: 120px;
  height: 120px;
  border-style: dashed;
  transform: rotate(-25deg);
}
.spotlight-spark {
  position: absolute;
  color: #f6d780;
  top: 21px;
  right: 12px;
  font-size: 26px;
  z-index: 2;
}
.status-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #94cda5;
  font-weight: 600;
}
.status-label > span {
  width: 5px;
  height: 5px;
  background: #7bc292;
  border-radius: 50%;
}
.spotlight-card h2 {
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  margin: 13px 0 9px;
  color: #f3e5c3;
}
.spotlight-card p {
  color: #a2ac93;
  font-size: 11px;
  line-height: 1.6;
}
.spotlight-card .button-secondary {
  width: 100%;
  margin-top: auto;
  padding: 11px 9px;
  min-height: 39px;
  font-size: 10px;
  border-color: #89744255;
  color: #e4d4a5;
}
.lobby-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 32px;
  border: 1px solid #243329;
  border-radius: 10px;
  background: #121c15;
}
.lobby-shortcuts > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  min-width: 0;
}
.lobby-shortcuts > a + a {
  border-left: 1px solid #25382b;
}
.lobby-shortcuts svg {
  color: #c2af70;
  width: 20px;
}
.lobby-shortcuts b {
  font-size: 11px;
  color: #dce1cc;
  font-weight: 500;
  display: block;
}
.lobby-shortcuts small {
  font-size: 9px;
  color: #7d947e;
  display: block;
  margin-top: 4px;
}
.lobby-shortcuts a:hover {
  background: #ffffff03;
}
.content-section {
  margin-top: 25px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin-top: 6px;
  font-weight: 500;
}
.section-heading h2 svg {
  color: #d1b879;
}
.section-description {
  color: #728979;
  font-size: 10px;
  margin-bottom: 20px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 15px;
}
.game-cover {
  position: relative;
  aspect-ratio: 4/4.5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--game-color, #283c2c);
  border: 1px solid #dadab318;
}
.game-cover > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition:
    transform 0.35s,
    filter 0.35s;
}
.game-cover:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #0c1a17a1);
  pointer-events: none;
}
.game-status {
  position: absolute;
  top: 8px;
  left: 7px;
  padding: 4px 6px;
  font-size: 7px;
  background: #0d171ad9;
  color: #b1bdb6;
  border: 1px solid #d4efcc22;
  border-radius: 4px;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.game-status.connected {
  background: #154532e6;
  border-color: #58d89466;
  color: #cffce0;
}
.favorite-button {
  position: absolute;
  bottom: 9px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0d171c91;
  color: #e4e9e0;
  backdrop-filter: blur(8px);
}
.favorite-button.selected {
  color: #f6cd74;
}
.game-cover-action {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
  background: #06181355;
}
.game-cover-action > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efd39a;
  color: #283523;
  box-shadow: 0 6px 22px #0004;
}
.game-cover:hover .game-cover-action,
.game-cover:focus-within .game-cover-action {
  opacity: 1;
}
.game-cover:hover > img {
  transform: scale(1.055);
  filter: brightness(0.8);
}
.game-caption {
  padding: 11px 2px 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}
.game-caption h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.game-caption p {
  font-size: 9px;
  color: #7c9381;
  margin-top: 5px;
}
.game-caption > button {
  color: #a2b393;
  padding: 5px 0 5px 3px;
}
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 33px;
}
.promo-card {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-radius: 12px;
  border: 1px solid #57664148;
  padding: 26px;
  overflow: hidden;
  position: relative;
  min-height: 178px;
}
.promo-card h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.16;
  font-weight: 400;
  color: #e8e3c9;
  margin: 11px 0 18px;
}
.promo-card .eyebrow {
  font-size: 8px;
}
.promo-card div > span:not(.eyebrow) {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ccb983;
}
.promo-gold {
  background:
    radial-gradient(ellipse at 85% 70%, #a38b364a, transparent 65%), #222417;
}
.promo-green {
  background:
    radial-gradient(ellipse at 85% 50%, #225b404f, transparent 70%), #10281f;
}
.promo-medallion {
  align-self: center;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid #c5aa6355;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #a18e4230, #13251a);
  color: #d9c887;
  box-shadow:
    0 0 0 10px #aeb96808,
    0 0 0 20px #b1b45905;
  transform: rotate(-13deg);
}
.promo-green .promo-medallion {
  color: #a3c6a5;
  border-color: #90b79d55;
}
.site-footer {
  border-top: 1px solid #243229;
  max-width: 1536px;
  margin: auto;
  padding: 27px 32px 32px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px 30px;
  align-items: center;
}
.play-note {
  font-size: 10px;
  color: #778b7b;
  line-height: 1.7;
  max-width: 530px;
}
.site-footer > span {
  font-size: 9px;
  color: #657a6c;
  grid-column: 2;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 29px;
}
.page-heading .eyebrow {
  margin-bottom: 9px;
}
.page-heading > div > p:last-child {
  font-size: 13px;
  line-height: 1.7;
}
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.segmented {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #111e17;
  border: 1px solid #2a392a;
  border-radius: 9px;
  padding: 4px;
}
.segmented > button {
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 11px;
  color: #93a78f;
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
}
.segmented > button.selected {
  background: #293329;
  color: #e9d397;
  box-shadow: 0 2px 4px #0002;
}
.segmented > button > span {
  margin-left: 6px;
  color: #eac572;
}
.search-field {
  display: flex;
  gap: 9px;
  align-items: center;
  max-width: 300px;
  flex: 1;
  padding: 12px 14px;
  background: #131f17;
  border: 1px solid #2e3d2d;
  border-radius: 9px;
  color: #8fa287;
}
.search-field input {
  outline: none;
  background: none;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  color: #e0e8d9;
}
.search-field input::-moz-placeholder {
  color: #7e927b;
}
.search-field input::placeholder {
  color: #7e927b;
}
.catalog-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #7d927d;
  margin-bottom: 19px;
}
.catalog-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 29px;
}
.catalog-grid .game-cover {
  aspect-ratio: 1;
}
.catalog-grid .game-status {
  font-size: 8px;
}
.quiet-card {
  border: 1px solid #304132;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #142219;
  color: #9fb299;
  font-size: 12px;
  line-height: 1.65;
}
.quiet-card svg {
  color: var(--gold);
}
.quiet-card h3 {
  color: #d7e2cf;
  margin-bottom: 5px;
}
.surface-panel {
  background: #121d17;
  border: 1px solid #293b2a;
  border-radius: 13px;
  overflow: hidden;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid #253929;
}
.panel-heading h2 {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-heading svg {
  color: var(--gold);
}
.panel-footnote {
  font-size: 10px;
  color: #7c957e;
  padding: 15px 23px;
  border-top: 1px solid #253729;
}
.empty-state {
  padding: 52px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.empty-state h3 {
  margin-top: 18px;
  font-size: 20px;
  color: #d9e2d4;
}
.empty-state > p {
  margin-top: 10px;
  color: #90a88e;
  font-size: 12px;
  line-height: 1.8;
  max-width: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-icon {
  display: inline-grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 16px;
  background: #b7c4780c;
  border: 1px solid #80945935;
  color: #d2c184;
}
.loading-state {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #9db29a;
  font-size: 12px;
}
.error-state {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #925748;
  border-radius: 10px;
  background: #a2522b10;
  font-size: 12px;
  margin: 15px 0;
  color: #e1bc9d;
}
.error-state p {
  margin-top: 5px;
  font-size: 11px;
}
.error-state button {
  margin-left: auto;
  text-decoration: underline;
  padding: 8px;
}
.error-inline {
  border: 1px solid #a85d4c70;
  background: #bd5c3615;
  border-radius: 8px;
  padding: 12px;
  color: #e9bb9f;
  font-size: 12px;
  line-height: 1.6;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #030b09bf;
  backdrop-filter: blur(7px);
  z-index: 100;
  animation: enter 0.15s;
}
.modal-content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  background: #142019;
  border: 1px solid #6b744e;
  border-radius: 17px;
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 29px;
  box-shadow: 0 30px 120px #0009;
}
.modal-title {
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 400;
  padding-right: 32px;
  color: #eee4c2;
}
.modal-close {
  position: absolute;
  right: 16px;
  top: 17px;
}
.game-onboarding {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 15px 0 27px;
}
.game-onboarding img {
  width: 80px;
  height: 80px;
  border-radius: 17px;
}
.game-onboarding h3 {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}
.game-onboarding p {
  font-size: 12px;
  color: #99ad8f;
  line-height: 1.6;
  margin-top: 8px;
}
.game-balance-display {
  background: linear-gradient(125deg, #293324, #17251a);
  padding: 21px;
  border: 1px solid #6975425c;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
}
.game-balance-display > span {
  font-size: 11px;
  color: #b1bd9b;
}
.game-balance-display strong {
  display: block;
  font-size: 34px;
  color: #f0e2b4;
  margin-top: 8px;
  font-weight: 500;
}
.credential-row {
  border-bottom: 1px solid #30412e;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.credential-row > span {
  flex: 1;
  min-width: 0;
}
.credential-row small {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #849a7b;
  display: block;
  margin-bottom: 7px;
}
.credential-row code {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.account-card {
  padding: 25px;
  border-radius: 15px;
  border: 1px solid #6d784649;
  background:
    radial-gradient(circle at top left, #9a91402b, transparent), #14241a;
}
.account-card-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 23px;
}
.account-card-top img {
  width: 55px;
  height: 55px;
  border-radius: 13px;
}
.account-card h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}
.account-balance {
  margin: 25px 0 10px;
}
.account-balance span {
  font-size: 10px;
  color: #a0b194;
  display: block;
}
.account-balance strong {
  font-size: 35px;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}
.wallet-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
}
.cash-card {
  padding: 28px;
  background:
    radial-gradient(ellipse at 100% 0, #4f65314d, transparent 80%), #1b2d1d;
  border: 1px solid #89934b69;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
}
.cash-card > strong {
  display: block;
  font-size: 49px;
  font-weight: 400;
  color: #f3e2ac;
  margin: 20px 0 6px;
  letter-spacing: -0.055em;
}
.cash-card > div {
  position: relative;
  z-index: 1;
}
.wallet-watermark {
  position: absolute;
  right: -22px;
  bottom: 24px;
  color: #d1ca8140;
  transform: rotate(-17deg);
  pointer-events: none;
}
.balance-card {
  padding: 26px;
  background: #131f17;
  border: 1px solid #2b3d2a;
  border-radius: 13px;
}
.balance-card .empty-icon {
  width: 41px;
  height: 41px;
  border-radius: 11px;
  margin-bottom: 17px;
}
.balance-card > p {
  font-size: 11px;
  color: #b5c4a7;
  margin-bottom: 7px;
}
.balance-card > strong {
  font-size: 33px;
  font-weight: 500;
  color: #e5d5a2;
  display: block;
  margin: 7px 0;
}
.balance-card strong > small {
  font-size: 13px;
}
.balance-card > span:not(.empty-icon) {
  font-size: 10px;
  color: #829b7c;
  display: block;
  margin: 11px 0 22px;
  line-height: 1.7;
}
.balance-card h3 {
  font-size: 24px;
  line-height: 1.2;
  font-family: Georgia, serif;
  font-weight: 400;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
th {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7e987a;
  padding: 15px 23px;
  border-bottom: 1px solid #273c27;
}
td {
  padding: 18px 23px;
  border-bottom: 1px solid #243825;
  color: #bdcdb3;
}
td > b {
  text-transform: capitalize;
  font-weight: 500;
  display: block;
}
td > small {
  display: block;
  font-size: 9px;
  color: #738e70;
  margin-top: 5px;
}
.status-tag {
  border: 1px solid #75694166;
  background: #86712e15;
  color: #c9b582;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 9px;
  text-transform: capitalize;
}
.status-tag.approved {
  border-color: #4b965c55;
  background: #328c3c13;
  color: #93c395;
}
.rewards-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 40px;
  border: 1px solid #5e745751;
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 90% 40%, #67814c30, transparent 65%), #18281b;
  overflow: hidden;
}
.rewards-hero h2 {
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 17px 0;
  color: #ece3be;
}
.rewards-hero p {
  color: #a2b596;
  font-size: 13px;
  margin-bottom: 26px;
}
.reward-sculpture {
  position: relative;
  width: 230px;
  height: 230px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  justify-content: center;
  color: #d9c987;
  flex-shrink: 0;
}
.reward-sculpture > span {
  font-size: 8px;
  letter-spacing: 0.2em;
}
.reward-sculpture svg {
  filter: drop-shadow(0 5px 20px #9cba4a66);
  transform: rotate(-12deg);
}
.reward-orbit {
  position: absolute;
  inset: 5px;
  border: 1px solid #c2c58544;
  border-radius: 50%;
  box-shadow:
    0 0 0 20px #9fab5410,
    0 0 0 40px #9fab5408;
}
.reward-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 21px;
}
.reward-nav > a {
  position: relative;
  border: 1px solid #354b30;
  border-radius: 12px;
  padding: 25px;
  background: #15261a;
}
.reward-nav > a > svg:first-child {
  color: #d9c48a;
  margin-bottom: 17px;
}
.reward-nav h3 {
  font-size: 17px;
  font-weight: 500;
}
.reward-nav p {
  color: #8fa787;
  font-size: 11px;
  margin-top: 7px;
}
.reward-nav-arrow {
  position: absolute;
  top: 24px;
  right: 23px;
  color: #a4b996;
}
.balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #b6b45b0c;
  border: 1px solid #828f4342;
  color: #d3c688;
  border-radius: 7px;
  font-size: 11px;
}
.reward-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px;
}
.reward-item {
  text-align: center;
  padding: 25px 18px;
  background: #20321f55;
  border: 1px solid #3b5230;
  border-radius: 11px;
}
.reward-item-icon {
  color: #dcca82;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.reward-item strong {
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 400;
  display: block;
  margin: 10px 0;
  color: #e5d49d;
}
.reward-item p {
  font-size: 12px;
  color: #9aaf88;
  margin-bottom: 23px;
}
.two-column {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 25px;
}
.large-stat {
  font-size: 70px;
  font-family: Georgia, serif;
  margin-top: 25px;
  color: #e6d79d;
}
.membership-banner {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 32px;
  background:
    radial-gradient(ellipse at right, #97834b25, transparent), #202c1b;
  border: 1px solid #7d80533b;
  border-radius: 13px;
  margin-bottom: 26px;
}
.membership-emblem {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid #a49b5977;
  border-radius: 50%;
  color: #e3cd81;
  background: #d4b66514;
}
.membership-banner h2 {
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  margin: 9px 0;
  color: #e6d1a1;
}
.membership-banner p {
  font-size: 12px;
  color: #98ac89;
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tier-card {
  padding: 25px;
  border: 1px solid #4c623a70;
  background: #142119;
  border-radius: 12px;
}
.tier-card.current {
  border-color: #d3b76580;
  background: #202b1a;
}
.tier-card > svg {
  color: #ccbb7b;
  margin-bottom: 15px;
}
.tier-card h2 {
  margin-bottom: 15px;
  font-family: Georgia, serif;
  font-weight: 400;
}
.tier-card ul {
  margin: 20px 0 28px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #afc29f;
  font-size: 12px;
}
.tier-card li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wheel-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 20px;
}
.prize-wheel {
  margin: 35px auto;
  width: min(100%, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 12px solid #bca25c;
  background: repeating-conic-gradient(
    from -15deg,
    #183b2c 0 30deg,
    #cfb777 30deg 60deg
  );
  box-shadow:
    0 0 0 6px #2b3924,
    0 0 0 8px #7c6c3d,
    0 0 55px #b8a24c10;
  display: grid;
  place-items: center;
  position: relative;
}
.prize-wheel:after {
  content: "";
  position: absolute;
  top: -18px;
  width: 24px;
  height: 30px;
  background: #f7e4a8;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.wheel-inner {
  width: 43%;
  height: 43%;
  border-radius: 50%;
  background: #15291c;
  border: 5px solid #d8c68b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #e5cc84;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.14em;
}
.is-spinning {
  animation: wheel-spin 2s linear infinite;
}
.wheel-rewards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #bfcb9b;
  font-size: 12px;
}
.wheel-rewards li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.result-message {
  padding: 20px;
  text-align: center;
  color: #e0d58d;
  border: 1px solid #93914666;
  border-radius: 9px;
  margin-top: 20px;
}
.support-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 26px;
}
.chat-panel {
  border: 1px solid #30442e;
  border-radius: 14px;
  background: #132218;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-heading {
  padding: 21px;
  display: flex;
  gap: 13px;
  align-items: center;
  border-bottom: 1px solid #2f442d;
}
.chat-heading h2 {
  font-size: 17px;
}
.chat-heading p {
  font-size: 10px;
  color: #8aa17f;
  margin-top: 6px;
}
.support-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid #6e925444;
  background: #6d93481c;
  color: #d5c893;
}
.chat-welcome {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 45px 28px;
  text-align: center;
  color: #d5c893;
}
.chat-welcome h3 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  margin-top: 24px;
}
.chat-welcome p {
  max-width: 280px;
  font-size: 12px;
  color: #8fa985;
  line-height: 1.7;
  margin: 15px 0 27px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-list details {
  border: 1px solid #30482e;
  border-radius: 9px;
  background: #16251a;
  padding: 18px;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #c6d4bb;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary svg {
  color: #90a77f;
}
.faq-list details p {
  font-size: 12px;
  line-height: 1.8;
  color: #8fa782;
  padding-top: 15px;
}
.message-list {
  height: 360px;
  overflow: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.chat-empty {
  margin: auto;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 17px;
  color: #8da581;
  font-size: 12px;
  line-height: 1.7;
}
.message {
  max-width: 85%;
  padding: 13px 16px;
  align-self: flex-start;
  border: 1px solid #48603966;
  border-radius: 11px;
  background: #263921;
  color: #d5e1c6;
}
.message.from-player {
  align-self: flex-end;
  background: #30452a;
}
.message small {
  font-size: 9px;
  color: #abbf99;
}
.message p {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 7px 0;
}
.message time {
  font-size: 8px;
  color: #9bab88;
}
.chat-composer {
  display: flex;
  padding: 17px;
  gap: 12px;
  border-top: 1px solid #2b422c;
  margin-top: auto;
  align-items: center;
}
.chat-composer textarea {
  resize: vertical;
  max-height: 140px;
  min-height: 46px;
  background: #0c1a11;
  border: 1px solid #344d2f;
  border-radius: 8px;
  padding: 12px;
  color: #d7dfc8;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.chat-composer button {
  padding: 12px;
}
.profile-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 25px;
}
.profile-identity {
  border: 1px solid #3a502f;
  padding: 38px 24px;
  text-align: center;
  border-radius: 13px;
  background: radial-gradient(ellipse at top, #64743a25, transparent), #15271b;
  align-self: start;
}
.profile-avatar {
  width: 89px;
  height: 89px;
  margin: auto;
  border-radius: 50%;
  border: 1px solid #b4b16c;
  background: #707c3425;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 41px;
  color: #ddca8a;
}
.profile-identity h2 {
  margin-top: 24px;
  font-size: 25px;
}
.profile-identity p {
  margin: 10px 0 20px;
  color: #8fa87d;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.notification-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  border: 1px solid #354e2e;
  border-radius: 12px;
  background: #16271a;
}
.notification-card > svg {
  color: #d4bf7a;
}
.notification-card > div {
  flex: 1;
}
.notification-card h3 {
  font-size: 16px;
}
.notification-card p {
  color: #a4b591;
  font-size: 13px;
  margin: 7px 0;
}
.notification-card small {
  color: #7c9872;
  font-size: 10px;
}
.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-direction: column;
  min-height: 100dvh;
}
.app-loading p {
  font-size: 12px;
  color: #809d76;
}
.player-auth {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  min-height: 100dvh;
  background: #101a14;
}
.auth-visual {
  position: relative;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, #102117f5, #122316bb 54%, #14211a4d), var(--hero-art);
  background-size:
    cover,
    auto 120%;
  background-position:
    center,
    62% 50%;
  min-height: 100dvh;
  border-right: 1px solid #5e674031;
}
.auth-visual-copy {
  position: relative;
  z-index: 1;
  margin: 55px 0;
}
.auth-visual-copy h1 {
  font-family: Georgia, serif;
  font-size: clamp(45px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.04;
  margin: 25px 0;
  letter-spacing: -0.035em;
  color: #f3e9c8;
}
.auth-visual-copy h1 em {
  color: #edce88;
}
.auth-visual-copy > p {
  font-size: 13px;
  line-height: 1.8;
  max-width: 260px;
  color: #b9c8a5;
}
.auth-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 35px;
  font-size: 10px;
  color: #b1c39e;
}
.auth-benefits > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.auth-visual-foot {
  color: #9caa86;
  font-size: 8px;
  letter-spacing: 0.14em;
}
.auth-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 30px;
}
.auth-form-wrap {
  width: 100%;
  max-width: 365px;
}
.auth-back {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #8da582;
  font-size: 10px;
  margin-bottom: 30px;
}
.auth-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #8c8b504a;
  color: #dfca87;
  background: #949d4610;
  border-radius: 12px;
  margin-bottom: 23px;
}
.auth-form-wrap > .eyebrow {
  font-size: 8px;
}
.auth-form-wrap h2 {
  font-family: Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  color: #f1e5be;
  margin-top: 9px;
}
.auth-form-wrap > .text-muted {
  font-size: 12px;
}
.auth-tabs {
  margin: 24px 0;
}
.password-field {
  position: relative;
}
.password-field .field {
  padding-right: 48px;
}
.password-field .icon-button {
  position: absolute;
  right: 4px;
  top: 4px;
}
.auth-help {
  font-size: 10px;
  text-align: center;
  color: #93a781;
  line-height: 1.6;
  margin-top: 22px;
}
.auth-form-wrap > .play-note {
  font-size: 9px;
  margin-top: 24px;
  text-align: center;
  color: #6f8863;
}
.auth-mobile-brand {
  display: none;
}
.eligibility-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 10px;
  color: #95ac85;
  line-height: 1.6;
}
.eligibility-check input {
  margin-top: 3px;
  accent-color: #d3bd72;
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wheel-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1450px) {
  .page-content {
    padding: 35px 45px 45px;
  }
  .topbar {
    padding: 0 45px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 3fr) minmax(255px, 1fr);
  }
  .casino-hero {
    min-height: 412px;
    background-size:
      cover,
      auto 150%;
    background-position:
      center,
      85% 42%;
  }
  .hero-copy {
    padding: 35px 40px 45px;
  }
  .hero-copy h2 {
    font-size: 59px;
  }
  .hero-copy > p {
    font-size: 13px;
    max-width: 290px;
  }
  .hero-copy .button-gold {
    font-size: 12px;
  }
  .spotlight-art {
    height: 180px;
    width: 180px;
  }
  .spotlight-art img {
    width: 109px;
    height: 109px;
  }
  .spotlight-card h2 {
    font-size: 33px;
  }
  .spotlight-card p {
    font-size: 12px;
  }
  .spotlight-card {
    padding: 25px;
  }
  .game-caption h3 {
    font-size: 14px;
  }
  .game-caption p {
    font-size: 10px;
  }
  .game-status {
    font-size: 9px;
  }
  .game-cover {
    aspect-ratio: 1;
  }
  .lobby-shortcuts {
    margin-bottom: 36px;
  }
  .lobby-shortcuts b {
    font-size: 12px;
  }
  .lobby-shortcuts small {
    font-size: 10px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 190px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sidebar .brand b {
    font-size: 13px;
  }
  .sidebar .brand {
    gap: 7px;
  }
  .sidebar .brand-mark {
    width: 32px;
  }
  .main-shell {
    margin-left: 190px;
  }
  .page-content {
    padding: 27px 25px 38px;
  }
  .topbar {
    padding: 0 25px;
  }
  .hero-copy {
    padding-left: 24px;
    width: 65%;
  }
  .hero-copy h2 {
    font-size: 44px;
  }
  .hero-grid {
    gap: 15px;
    grid-template-columns: minmax(0, 2.7fr) minmax(195px, 1fr);
  }
  .spotlight-card {
    padding: 20px 15px;
  }
  .game-grid {
    gap: 12px;
  }
  .game-caption h3 {
    font-size: 11px;
  }
  .game-caption p {
    font-size: 8px;
  }
  .game-status {
    font-size: 6px;
    padding: 3px 4px;
  }
  .favorite-button {
    width: 24px;
    height: 24px;
  }
  .lobby-shortcuts > a {
    padding: 15px 13px;
    gap: 9px;
  }
  .lobby-shortcuts b {
    font-size: 10px;
  }
  .lobby-shortcuts small {
    font-size: 8px;
  }
  .promo-card {
    padding: 22px;
  }
  .promo-card h2 {
    font-size: 23px;
  }
  .promo-medallion {
    width: 75px;
    height: 75px;
  }
  .wallet-grid {
    grid-template-columns: 1.5fr 1fr;
  }
  .wallet-grid > .balance-card:last-child {
    display: none;
  }
  .account-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rewards-hero h2 {
    font-size: 39px;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 178px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .sidebar .brand b {
    font-size: 12px;
  }
  .sidebar .brand small {
    font-size: 6px;
  }
  .main-shell {
    margin-left: 178px;
  }
  .side-link {
    font-size: 11px;
    gap: 9px;
    padding: 11px 9px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .spotlight-card {
    display: none;
  }
  .casino-hero {
    min-height: 350px;
    background-position:
      center,
      right 40%;
    background-size:
      cover,
      auto 160%;
  }
  .hero-copy {
    width: 55%;
  }
  .hero-copy h2 {
    font-size: 49px;
  }
  .lounge-label {
    display: none;
  }
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 15px;
  }
  .game-cover {
    aspect-ratio: 1;
  }
  .game-status {
    font-size: 8px;
  }
  .game-caption h3 {
    font-size: 13px;
  }
  .game-caption p {
    font-size: 10px;
  }
  .lobby-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lobby-shortcuts > a {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .lobby-shortcuts > a > svg:last-child {
    display: none;
  }
  .lobby-shortcuts b {
    font-size: 10px;
  }
  .lobby-shortcuts small {
    font-size: 8px;
  }
  .promo-medallion {
    display: none;
  }
  .promo-card h2 {
    font-size: 23px;
  }
  .promo-grid {
    gap: 15px;
  }
  .topbar-actions {
    gap: 12px;
  }
  .site-footer {
    grid-template-columns: 1fr;
    padding: 25px;
  }
  .site-footer > span {
    grid-column: 1;
  }
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .support-layout {
    grid-template-columns: 1fr;
  }
  .support-layout > aside {
    display: grid;
    grid-template-columns: 1fr;
  }
  .rewards-hero {
    padding: 28px;
  }
  .rewards-hero h2 {
    font-size: 35px;
  }
  .reward-sculpture {
    width: 160px;
    height: 160px;
  }
  .reward-sculpture svg {
    width: 80px;
  }
  .reward-orbit {
    inset: 0;
  }
  .reward-nav {
    gap: 12px;
  }
  .reward-nav > a {
    padding: 20px;
  }
  .reward-nav h3 {
    font-size: 15px;
  }
  .reward-nav p {
    font-size: 10px;
  }
  .wheel-layout {
    gap: 28px;
    padding: 0;
  }
  .prize-wheel {
    border-width: 9px;
  }
  .wheel-inner svg {
    width: 30px;
  }
  .wheel-inner {
    font-size: 7px;
    gap: 5px;
  }
  .player-auth {
    grid-template-columns: 1fr 1fr;
  }
  .auth-visual {
    padding: 30px;
  }
  .auth-visual-copy h1 {
    font-size: 49px;
  }
}
@media (max-width: 760px) {
  body {
    font-size: 13px;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 234px;
    padding: 27px 17px;
    z-index: 81;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .sidebar .brand b {
    font-size: 15px;
  }
  .sidebar .brand small {
    font-size: 7px;
  }
  .sidebar .brand-mark {
    width: 38px;
  }
  .side-link {
    font-size: 13px;
    padding: 12px;
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: #020905aa;
    backdrop-filter: blur(4px);
    z-index: 80;
  }
  .main-shell {
    margin-left: 0;
  }
  .topbar {
    height: 66px;
    padding: 0 20px;
    gap: 8px;
  }
  .breadcrumb {
    display: none;
  }
  .mobile-menu,
  .mobile-brand {
    display: flex;
  }
  .mobile-menu {
    min-width: 28px;
  }
  .mobile-brand small {
    display: none;
  }
  .mobile-brand .brand-mark {
    width: 24px;
    height: 28px;
    border: none;
    background: transparent;
  }
  .mobile-brand b {
    font-size: 11px;
  }
  .mobile-brand .brand {
    gap: 4px;
  }
  .topbar-actions {
    gap: 10px;
  }
  .wallet-chip {
    padding: 5px 7px;
    gap: 6px;
    border-radius: 7px;
  }
  .wallet-chip > svg,
  .wallet-chip small,
  .notifications-button {
    display: none;
  }
  .wallet-chip span {
    gap: 0;
  }
  .wallet-chip b {
    font-size: 11px;
  }
  .wallet-chip .wallet-plus {
    margin-left: 5px;
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }
  .avatar {
    width: 29px;
    height: 29px;
    font-size: 13px;
  }
  .page-content {
    padding: 23px 20px 30px;
    min-height: calc(100dvh - 260px);
  }
  .preview-bar {
    padding: 8px 20px;
    font-size: 9px;
    line-height: 1.6;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .preview-bar > a {
    display: none;
  }
  .lobby-intro {
    margin-bottom: 21px;
  }
  .lobby-intro h1 {
    font-size: 23px;
  }
  .eyebrow {
    font-size: 8px;
  }
  .casino-hero {
    min-height: 360px;
    border-radius: 12px;
    background-size:
      cover,
      auto 125%;
    background-position:
      center,
      65% 40%;
    background-image:
      linear-gradient(90deg, #0c1d15f7 0%, #112016eb 28%, #16201850 75%),
      var(--hero-art);
  }
  .hero-copy {
    padding: 28px 23px 40px;
    width: 68%;
    max-width: 350px;
  }
  .hero-copy h2 {
    font-size: 48px;
    line-height: 1.02;
    margin: 22px 0 17px;
  }
  .hero-kicker {
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .hero-copy > p {
    font-size: 11px;
    max-width: 215px;
    color: #c2cfb2;
  }
  .hero-copy .button-gold {
    font-size: 11px;
    margin-top: 20px;
  }
  .hero-footnote {
    font-size: 8px;
  }
  .hero-edition {
    left: 23px;
    font-size: 6px;
  }
  .lobby-shortcuts {
    margin: 17px 0 28px;
    border-radius: 9px;
  }
  .lobby-shortcuts > a {
    padding: 15px 6px;
    gap: 9px;
  }
  .lobby-shortcuts small {
    display: none;
  }
  .lobby-shortcuts b {
    font-size: 9px;
    line-height: 1.4;
    max-width: 88px;
  }
  .lobby-shortcuts svg {
    width: 19px;
  }
  .section-heading h2 {
    font-size: 20px;
  }
  .section-heading .text-link {
    font-size: 10px;
    gap: 5px;
    white-space: nowrap;
  }
  .section-heading .text-link svg {
    width: 13px;
  }
  .section-description {
    font-size: 10px;
    line-height: 1.6;
    margin-bottom: 17px;
  }
  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .game-status {
    font-size: 6px;
    left: 5px;
    top: 6px;
    padding: 3px 4px;
  }
  .game-cover {
    border-radius: 10px;
    aspect-ratio: 1;
  }
  .game-caption {
    padding: 9px 0 0;
  }
  .game-caption h3 {
    font-size: 11px;
  }
  .game-caption p {
    font-size: 8px;
    line-height: 1.5;
  }
  .game-caption button {
    padding: 0;
  }
  .game-caption button svg {
    width: 14px;
  }
  .favorite-button {
    width: 23px;
    height: 23px;
    right: 6px;
    bottom: 7px;
  }
  .favorite-button svg {
    width: 12px;
  }
  .game-cover-action {
    display: none;
  }
  .promo-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 29px;
  }
  .promo-card {
    padding: 25px;
    min-height: 170px;
  }
  .promo-medallion {
    display: grid;
    width: 75px;
    height: 75px;
  }
  .promo-card h2 {
    font-size: 26px;
  }
  .promo-card .eyebrow {
    font-size: 8px;
  }
  .promo-card div > span:not(.eyebrow) {
    font-size: 10px;
  }
  .site-footer {
    padding: 24px 20px 104px;
    gap: 18px;
  }
  .site-footer .play-note {
    font-size: 9px;
    max-width: none;
  }
  .site-footer > span {
    font-size: 8px;
  }
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 60;
    background: #112117f5;
    border-top: 1px solid #56733d55;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter: blur(20px);
  }
  .bottom-nav > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #859c77;
    min-height: 43px;
    font-size: 9px;
    border-radius: 8px;
  }
  .bottom-nav > a.active {
    color: #ebd492;
    background: #d5c1740b;
  }
  .bottom-nav > a.active svg {
    filter: drop-shadow(0 0 5px #c6b75335);
  }
  .page-heading {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
  }
  .page-heading h1 {
    font-size: 30px;
  }
  .page-heading > div > p:last-child {
    font-size: 12px;
  }
  .page-heading > .button-gold,
  .page-heading > .button-secondary {
    font-size: 11px;
    min-height: 38px;
  }
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .search-field {
    max-width: none;
  }
  .segmented > button {
    padding: 10px 9px;
    font-size: 10px;
  }
  .catalog-caption {
    font-size: 9px;
    flex-direction: column;
    gap: 8px;
  }
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .catalog-grid .game-status {
    font-size: 6px;
  }
  .quiet-card {
    padding: 16px;
    font-size: 11px;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
  .account-card {
    padding: 24px;
  }
  .wallet-grid {
    grid-template-columns: 1fr;
  }
  .wallet-grid > .balance-card:last-child {
    display: block;
  }
  .balance-card {
    padding: 23px;
  }
  .cash-card {
    padding: 25px;
  }
  .balance-card > strong {
    font-size: 30px;
  }
  .balance-card > span:not(.empty-icon) {
    margin: 9px 0 17px;
  }
  .panel-heading {
    padding: 19px;
  }
  .panel-heading h2 {
    font-size: 16px;
  }
  .empty-state {
    padding: 42px 20px;
  }
  .empty-state > p {
    font-size: 11px;
  }
  .modal-content {
    padding: 25px 22px;
    max-height: calc(100dvh - 36px);
  }
  .modal-title {
    font-size: 27px;
  }
  .rewards-hero {
    padding: 28px;
    position: relative;
    min-height: 295px;
  }
  .rewards-hero h2 {
    font-size: 35px;
  }
  .rewards-hero p {
    font-size: 11px;
    max-width: 200px;
    line-height: 1.7;
  }
  .rewards-hero > div:first-child {
    position: relative;
    z-index: 2;
  }
  .reward-sculpture {
    position: absolute;
    right: -40px;
    top: 32px;
    opacity: 0.35;
    width: 185px;
    height: 185px;
  }
  .reward-nav {
    grid-template-columns: 1fr;
  }
  .reward-nav > a {
    padding: 23px;
  }
  .reward-nav h3 {
    font-size: 19px;
  }
  .reward-nav p {
    font-size: 11px;
  }
  .reward-nav > a > svg:first-child {
    margin-bottom: 13px;
  }
  .reward-items {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .two-column {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .membership-banner {
    padding: 25px;
    gap: 20px;
  }
  .membership-emblem {
    width: 68px;
    height: 68px;
  }
  .membership-emblem svg {
    width: 32px;
  }
  .membership-banner h2 {
    font-size: 31px;
  }
  .tier-grid {
    grid-template-columns: 1fr;
  }
  .wheel-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .prize-wheel {
    max-width: 270px;
    margin: 30px auto;
  }
  .wheel-inner {
    font-size: 8px;
    gap: 9px;
  }
  .wheel-inner svg {
    width: 35px;
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-identity {
    padding: 30px 20px;
  }
  .notification-card {
    padding: 20px;
    flex-wrap: wrap;
    gap: 13px;
  }
  .notification-card .button-secondary {
    margin-left: 36px;
  }
  .player-auth {
    display: block;
    min-height: 100dvh;
  }
  .auth-visual {
    display: none;
  }
  .auth-form-side {
    min-height: 100dvh;
    padding: 27px 25px;
  }
  .auth-mobile-brand {
    display: block;
    margin: 0 0 27px;
  }
  .auth-back {
    margin-bottom: 23px;
  }
  .auth-icon {
    display: none;
  }
  .auth-form-wrap h2 {
    font-size: 35px;
  }
  .auth-form-wrap > .play-note {
    margin-top: 23px;
  }
  .sign-in-link {
    font-size: 10px;
  }
  .topbar .compact {
    font-size: 9px;
    min-height: 34px;
    padding: 9px 11px;
    gap: 6px;
  }
  .topbar .compact svg {
    width: 12px;
  }
}
@media (max-width: 380px) {
  .topbar {
    padding: 0 13px;
  }
  .topbar-actions {
    gap: 7px;
  }
  .mobile-brand b {
    font-size: 10px;
  }
  .mobile-brand .brand-mark {
    display: none;
  }
  .page-content {
    padding-inline: 15px;
  }
  .hero-copy {
    padding-left: 20px;
    width: 74%;
  }
  .hero-copy h2 {
    font-size: 44px;
  }
  .hero-copy > p {
    font-size: 10px;
  }
  .game-grid {
    gap: 17px 9px;
  }
  .game-caption h3 {
    font-size: 10px;
  }
  .game-caption p {
    font-size: 7px;
  }
  .game-status {
    font-size: 5px;
  }
  .catalog-grid .game-status {
    font-size: 5px;
  }
  .section-heading h2 {
    font-size: 18px;
  }
  .promo-medallion {
    width: 60px;
    height: 60px;
  }
  .promo-medallion svg {
    width: 37px;
  }
  .promo-card {
    padding: 22px;
  }
  .promo-card h2 {
    font-size: 23px;
  }
}
@media (min-width: 761px) and (max-height: 760px) {
  .auth-visual {
    padding-block: 30px;
  }
  .auth-visual-copy {
    margin: 25px 0;
  }
  .auth-visual-copy h1 {
    font-size: 52px;
  }
  .auth-form-side {
    padding-block: 23px;
  }
  .auth-back {
    margin-bottom: 19px;
  }
  .auth-icon {
    margin-bottom: 17px;
    height: 39px;
    width: 39px;
  }
  .auth-form-wrap h2 {
    font-size: 32px;
  }
  .auth-tabs {
    margin: 17px 0;
  }
  .auth-help {
    margin-top: 17px;
  }
  .auth-form-wrap > .play-note {
    margin-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 760px) {
  .sidebar {
    visibility: hidden;
  }
  .sidebar.is-open {
    visibility: visible;
  }
  .game-cover-action {
    display: grid;
  }
  .game-caption > button {
    min-width: 28px;
    min-height: 30px;
  }
  .game-cover-action:focus-visible {
    opacity: 1;
  }
}
.hero-copy h2 em {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-copy {
    width: 78%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CLASSIC ROULETTE WHEEL
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.rlt-main {
  width: 374px;
  margin: 0 auto;
  font-family: 'Roboto', 'Inter', sans-serif;
}

/* ── Buttons ── */
.rlt-btns {
  display: flex;
  gap: 0;
  margin-bottom: 4px;
}
.rlt-btn {
  background: green;
  border: 1px solid #003300;
  border-top-color: #00aa00;
  border-left-color: #00aa00;
  padding: 12px;
  margin: 12px;
  display: inline-block;
  font-size: 15px;
  width: 175px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  border-radius: 3px;
  transition: opacity 0.24s;
}
.rlt-btn-label {
  padding: 12px;
  white-space: nowrap;
}
.rlt-btn-reset {
  background: darkgreen;
  border: 1px solid #001a00;
  border-top-color: #006600;
  border-left-color: #006600;
}
.rlt-btn.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ── Plate ── */
.rlt-plate {
  background-color: gray;
  width: 350px;
  height: 350px;
  margin: 12px;
  border-radius: 50%;
  position: relative;
  animation: rlt-rotate 24s infinite linear;
}
.rlt-plate::after,
.rlt-plate::before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
}
/* Gold rim */
.rlt-plate::after {
  top: -6px; right: -6px; bottom: -6px; left: -6px;
  border: 6px solid gold;
  box-shadow:
    inset 0 0 0 2px #b8860b,
    0 0 0 2px #ffe066;
}
/* Inner dark hub mask */
.rlt-plate::before {
  background: rgba(0,0,0,.65);
  border: 1px solid silver;
  box-shadow: inset 0 0 0 2px #909090;
  top: 12%; left: 12%; right: 12%; bottom: 12%;
  z-index: 1;
}
@keyframes rlt-rotate {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* ── Number segments (CSS triangles) ── */
.rlt-inner {
  display: block;
  height: 350px;
  width: 350px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Inner ring pseudo elements */
.rlt-inner::after,
.rlt-inner::before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
}
/* The silver inner ring */
.rlt-inner::after {
  z-index: 3;
  top: 24%; right: 24%; bottom: 24%; left: 24%;
  background-color: #606060;
  border: 3px solid #909090;
}
/* The ball (hidden by default via tiny size) */
.rlt-inner::before {
  top: 24%; bottom: 21%; left: 24%; right: 22%;
  content: '';
  z-index: 5;
  border-radius: 0;
}

.rlt-number {
  width: 32px;
  height: 175px;   /* platesize/2 */
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 16px);
  transform-origin: 50% 100%;
  background-color: transparent;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 175px solid black;
  box-sizing: border-box;
}
/* Red numbers */
.rlt-number[data-nc="red"]   { border-top-color: red; }
/* Green zero */
.rlt-number[data-nc="green"] { border-top-color: green; }

.rlt-pit {
  color: #fff;
  padding-top: 12px;
  width: 32px;
  display: inline-block;
  font-size: 12px;
  transform: scale(1, 1.8);
  position: absolute;
  top: -175px;
  left: -16px;
}

/* ── Ball spin-to positions (ported from LESS @spins:8) ──
   transform = rotateZ( (-2880 + angle)deg )
   transition only active when the .inner has data-spinto set */
.rlt-inner[data-spinto="1"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2602deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="2"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2774deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="3"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2850deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="4"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2793deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="5"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2642deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="6"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2734deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="7"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2526deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="8"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2673deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="9"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2564deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="10"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2652deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="11"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2693deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="12"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2868deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="13"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2714deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="14"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2582deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="15"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2813deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="16"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2622deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="17"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2755deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="18"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2545deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="19"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2803deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="20"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2592deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="21"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2784deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="22"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2554deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="23"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2662deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="24"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2632deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="25"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2764deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="26"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2840deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="27"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2724deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="28"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2877deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="29"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2535deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="30"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2684deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="31"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2573deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="32"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2822deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="33"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2612deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="34"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2745deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="35"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2499deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="36"]::before { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2703deg); transition:transform 9s ease-out; }
.rlt-inner[data-spinto="0"]::before  { content:'\2022'; color:#fff; font-size:60px; transform:rotateZ(-2831deg); transition:transform 9s ease-out; }

/* Ball resting position (after spin completes) */
.rlt-inner.rest::before {
  transition: top .5s ease-in, right .5s ease-in, bottom .5s ease-in, left .5s ease-in;
  top: 25%; right: 25%; bottom: 24%; left: 25%;
}

/* ── Flip-card data panel ── */
.rlt-data {
  display: block;
  position: absolute;
  top: 30%; right: 30%; bottom: 30%; left: 30%;
  border-radius: 50%;
  animation: rlt-rotate 24s reverse linear infinite;
  perspective: 2000px;
  z-index: 100;
}
.rlt-data-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.72s;
  transform-style: preserve-3d;
}
.rlt-data.reveal .rlt-data-inner {
  transform: rotateY(180deg);
}
.rlt-mask,
.rlt-result {
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}
.rlt-mask {
  color: #fff;
  font-size: 16px;
  margin: auto;
  line-height: 1.4;
  padding-top: 28px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
}
.rlt-result {
  background-color: green;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rlt-result-number {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 8px;
}
.rlt-result-color {
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
}
.rlt-result-prize {
  font-size: 10px;
  opacity: 0.85;
  margin-top: 6px;
  padding: 0 8px;
  text-align: center;
  line-height: 1.4;
}

/* ── Previous results ── */
.rlt-previous {
  max-width: 350px;
  margin: 24px 12px;
}
.rlt-prev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  perspective: 2000px;
}
.rlt-prev-item {
  display: flex;
  gap: 12px;
  margin: 1px;
  padding: 10px 12px;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  animation: rlt-flipin 0.48s ease-out;
}
.rlt-prev-item:first-child {
  animation: rlt-flipin 0.48s ease-out;
}
.rlt-prev-number { flex: 0 0 28px; font-weight: 600; }
.rlt-prev-color  { opacity: 0.75; text-transform: capitalize; }
.rlt-prev-prize  { margin-left: auto; font-size: 11px; opacity: 0.7; }
.rlt-color-green  { background-color: green; }
.rlt-color-black  { background-color: #1a1a1a; }
.rlt-color-red    { background-color: red; }
.rlt-placeholder  { color: rgba(255,255,255,0.4); font-size: 12px; padding: 8px 12px; }

@keyframes rlt-flipin {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

/* ── Responsive ── */
@media (max-width: 420px) {
  .rlt-main { width: 100%; }
  .rlt-plate { width: 300px; height: 300px; }
  .rlt-inner { width: 300px; height: 300px; }
  .rlt-number { height: 150px; border-top-width: 150px; }
  .rlt-pit    { top: -150px; }
  .rlt-btn    { width: 130px; margin: 8px; font-size: 13px; }
  .rlt-previous { max-width: 300px; }
}


/* Layout */
.wheel-page {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 860px;
  margin: 36px auto 0;
}

/* ── Wheel stage (left column) ── */
.wheel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

/* Radial glow aura behind the wheel */
.wheel-aura {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(237, 205, 130, 0.18) 0%,
    rgba(200, 152, 32, 0.08) 45%,
    transparent 72%);
  pointer-events: none;
  animation: wheel-aura-pulse 3s ease-in-out infinite;
}
@keyframes wheel-aura-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* Outer decorative bezel ring */
.wheel-bezel {
  position: relative;
  width: 316px;
  height: 316px;
  border-radius: 50%;
  background: conic-gradient(
    #3d2f08, #8c6a1a, #f0cc50, #c99a1e, #3d2f08
  );
  padding: 8px;
  box-shadow:
    0 0 0 2px rgba(255, 220, 80, 0.18),
    0 12px 48px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* The rotating disc container */
.wheel-disc {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  will-change: transform;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}

/* Metallic pointer at top */
.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* Decorative pin dots around bezel */
.wheel-dots {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  pointer-events: none;
}
.wheel-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px;
  background: radial-gradient(circle, #ffe082, #c89820);
  box-shadow: 0 0 4px rgba(240, 200, 60, 0.6);
  transform:
    rotate(var(--rot))
    translateY(calc(-50% - 148px));
}

/* ── Panel (right column) ── */
.wheel-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wheel-panel-inner {
  background: linear-gradient(160deg, #171e1a 0%, #0d1310 100%);
  border: 1px solid #2b3d2e;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.wheel-title {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  color: #f5eccf;
  margin-top: 14px;
  line-height: 1.2;
}
.wheel-title em {
  color: var(--gold);
  font-style: italic;
}
.wheel-subtitle {
  font-size: 12px;
  color: #869e8c;
  line-height: 1.7;
  margin-top: 14px;
}

/* Prize list */
.wheel-prizes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wheel-prize-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #c8d4c6;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.045);
  transition: background 0.18s;
}
.wheel-prize-row:hover {
  background: rgba(255,255,255,0.05);
}
.wheel-prize-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* Spin button */
.wheel-spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #d4a935, #a87e0f);
  color: #1a1200;
  border: 1px solid rgba(255,220,80,0.35);
  box-shadow:
    0 4px 18px rgba(200, 152, 30, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}
.wheel-spin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(200, 152, 30, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.2);
  background: linear-gradient(135deg, #e8bb45, #c09015);
}
.wheel-spin-btn:active:not(:disabled) {
  transform: translateY(0);
}
.wheel-spin-btn.is-done {
  background: rgba(255,255,255,0.06);
  color: #7a9386;
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.wheel-spin-btn.is-busy {
  background: linear-gradient(135deg, #a87e0f, #7c5d0a);
  cursor: wait;
}
.wheel-spin-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,221,60,0.85);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.wheel-preview-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.14);
  color: #657e6e;
  font-size: 11px;
  text-align: center;
  transition: all 0.18s;
}
.wheel-preview-btn:hover {
  border-color: rgba(255,255,255,0.25);
  color: #9fbba8;
}

/* Result card */
.wheel-result-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0e2a1e, #091f14);
  border: 1px solid rgba(100, 220, 150, 0.25);
  box-shadow:
    0 0 0 1px rgba(100, 220, 150, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.35);
  animation: ws-section-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wheel-result-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(255, 200, 50, 0.4));
  animation: bounce-in 0.5s cubic-bezier(0.34, 1.9, 0.64, 1) both 0.1s;
}
@keyframes bounce-in {
  from { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);    opacity: 1; }
}
.wheel-result-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #78c497;
  text-transform: uppercase;
}
.wheel-result-prize {
  font-size: 20px;
  font-weight: 700;
  color: #f5eccf;
  letter-spacing: -0.025em;
  margin-top: 4px;
}
.wheel-result-note {
  font-size: 11px;
  color: #6a9678;
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Confetti ── */
.wheel-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}
.confetti-p {
  position: absolute;
  bottom: 45%;
  border-radius: 2px;
  animation: confetti-fly 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  opacity: 0;
}
.confetti-circle { border-radius: 50%; }
.confetti-line   { border-radius: 1px; }
@keyframes confetti-fly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  80%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .wheel-page {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 480px;
  }
  .wheel-bezel { width: 280px; height: 280px; }
  .wheel-disc  { width: 264px; height: 264px; }
}
@media (max-width: 500px) {
  .wheel-stage { padding: 16px; }
  .wheel-bezel { width: 248px; height: 248px; }
  .wheel-disc  { width: 232px; height: 232px; }
  .wheel-panel-inner { padding: 22px 18px; }
  .wheel-title { font-size: 24px; }
}

/* Sticky Fixed Public Social Links (Bottom Right) */
.public-social-links {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 75;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(14, 21, 30, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(237, 189, 98, 0.28);
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(237, 189, 98, 0.12);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.public-social-links a.public-social-link-item,
.public-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 0;
  color: #edbd62;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.public-social-links a:hover {
  background: rgba(237, 189, 98, 0.2);
  border-color: #edbd62;
  color: #fff;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 12px rgba(237, 189, 98, 0.35);
}
.public-social-links a:active {
  transform: translateY(0) scale(0.98);
}
.public-social-links .social-icon-img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
.public-social-links .social-icon-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.public-social-links a:focus-visible, .install-app-button:focus-visible { outline: 2px solid #edbd62; outline-offset: 3px; }
.install-app-button { position: fixed; right: 16px; bottom: 86px; z-index: 40; box-shadow: 0 4px 20px #0008; }

@media (max-width: 768px) {
  .public-social-links {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    padding: 5px 8px;
  }
  .account-page ~ .public-social-links,
  .public-page ~ .public-social-links,
  body:not(:has(.bottom-nav)) .public-social-links {
    bottom: 16px;
  }
}

/* A single size keeps the roulette triangles, labels and wheel in proportion. */
.rlt-main {
  --roulette-size: min(350px, calc(100vw - 72px));
  width: min(374px, 100%);
  min-width: 0;
  overflow: hidden;
}
.rlt-plate, .rlt-inner { width: var(--roulette-size); height: var(--roulette-size); }
.rlt-plate { margin: 12px auto; }
.rlt-number {
  width: calc(var(--roulette-size) * .09142857);
  height: calc(var(--roulette-size) / 2);
  left: calc(50% - var(--roulette-size) * .04571428);
  border-left-width: calc(var(--roulette-size) * .04571428);
  border-right-width: calc(var(--roulette-size) * .04571428);
  border-top-width: calc(var(--roulette-size) / 2);
}
.rlt-pit {
  width: calc(var(--roulette-size) * .09142857);
  top: calc(var(--roulette-size) / -2);
  left: calc(var(--roulette-size) * -.04571428);
  padding-top: calc(var(--roulette-size) * .03428571);
  font-size: clamp(9px, 2.6vw, 12px);
}
.rlt-btns { gap: 12px; padding-inline: 12px; }
.rlt-btn { flex: 1; width: auto; min-width: 0; min-height: 44px; margin: 12px 0; padding-inline: 8px; }
.rlt-btn-label { padding-inline: 0; }
.rlt-previous { max-width: 100%; }

/* Floating controls share the same clearances on phones and tablets. */
.public-social-links {
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  flex-wrap: wrap;
  justify-content: flex-end;
}
.install-app-button {
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 1024px) {
  body:has(.casino-app .bottom-nav) .public-social-links { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body:has(.casino-app .bottom-nav) .install-app-button { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) {
  .public-social-links a.public-social-link-item { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN-CONFIGURABLE CASINO ROULETTE REWARDS WHEEL
   ═══════════════════════════════════════════════════════════════ */

.wheel-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-p {
  position: absolute;
  top: 50%;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-drop 3.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.confetti-circle {
  border-radius: 50%;
}

@keyframes confetti-drop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--dx) * 1.5), calc(var(--dy) + 600px), 0) rotate(calc(var(--rot) * 2.5)) scale(0.8);
  }
}

.casino-wheel-outer {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd700 0%, #b8860b 45%, #7a5405 80%, #3d2802 100%);
  box-shadow:
    0 0 35px rgba(212, 175, 55, 0.35),
    0 15px 40px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.6);
  padding: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.casino-wheel-rim {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1a2e 0%, #0d0d18 100%);
  border: 3px solid #f59e0b;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
}

.casino-pointer {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transform-origin: top center;
  transition: transform 0.08s ease;
}

.casino-pointer.tick {
  animation: pointer-tick 0.12s ease-in-out;
}

@keyframes pointer-tick {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

.casino-spin-btn {
  background: radial-gradient(circle at 35% 35%, #ffe082 0%, #ffb300 50%, #e65100 100%);
  box-shadow:
    0 4px 15px rgba(255, 179, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.casino-spin-btn:not(:disabled):hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 22px rgba(255, 179, 0, 0.75),
    0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(255, 255, 255, 0.8);
}

.casino-spin-btn:not(:disabled):active {
  transform: scale(0.96);
}

.casino-spin-btn:disabled {
  background: radial-gradient(circle at 35% 35%, #475569 0%, #334155 70%, #1e293b 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  opacity: 0.7;
}

@keyframes pulse-gold-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 15px rgba(245, 158, 11, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.6), inset 0 0 25px rgba(245, 158, 11, 0.4);
  }
}

.glow-active {
  animation: pulse-gold-glow 2.4s infinite ease-in-out;
}

/* Shared brand and public surfaces. Player account pages retain their layout. */
.public-dialog {
  background: #1d1f24;
  border-color: #42454e;
  border-radius: 8px;
}
.public-dialog .modal-title {
  font-family: Inter, "Segoe UI", sans-serif;
  color: #f0f1f4;
}
.public-dialog .text-muted {
  color: #9ca4b1;
}
.brand {
  gap: 10px;
}
.brand .brand-mark {
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.brand b {
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 0.025em;
  color: #f5e6bc;
}
.brand b i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #b5c5b9;
}
.brand small {
  font-size: 7px;
  letter-spacing: 0.2em;
  color: #9caa9e;
}
.brand-small .brand-mark {
  width: 32px;
  height: 32px;
}
.brand-small b {
  font-size: 13px;
}
.brand-small b i {
  font-size: 8px;
}
.public-site,
.account-page {
  --public-bg: #151618;
  --public-surface: #1d1e21;
  --public-border: #303135;
  --public-muted: #a0a2a9;
  --public-gold: #e4ba6b;
  color: #f3f3f5;
  background: var(--public-bg);
  font-family: Inter, "Segoe UI", sans-serif;
  min-height: 100dvh;
  color-scheme: dark;
}
.public-site h1,
.public-site h2,
.public-site h3,
.account-page h1 {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -0.035em;
}
.public-site section[id] {
  scroll-margin-top: 95px;
}
.public-site .brand small,
.account-page .brand small {
  display: none;
}
.public-site .brand b,
.account-page .brand b {
  color: #f3f3f5;
  font-size: 18px;
  font-weight: 750;
}
.public-site .brand b i,
.account-page .brand b i {
  font-size: 11px;
  color: #babcc2;
  letter-spacing: 0.07em;
}
.public-site .brand .brand-mark,
.account-page .brand .brand-mark {
  width: 35px;
  height: 35px;
}
.public-header {
  position: sticky;
  top: 0;
  background: #191a1c;
  border-bottom: 1px solid #2b2c30;
  z-index: 40;
}
.public-header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  max-width: 1280px;
  padding: 0 40px;
  margin: auto;
  gap: 60px;
}
.public-nav {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 30px;
  font-size: 13px;
  color: #aaacb3;
}
.public-nav a {
  display: flex;
  align-items: center;
  position: relative;
}
.public-nav a:hover,
.public-nav a.active {
  color: #f4f4f6;
}
.public-nav a.active:after {
  position: absolute;
  content: "";
  height: 2px;
  background: #e4ba6b;
  bottom: 0;
  inset-inline: 0;
}
.public-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.public-button,
.public-secondary,
.public-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  min-height: 43px;
  padding: 11px 19px;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.public-button {
  background: #e4ba6b;
  color: #1b1b1b;
  border-color: #e4ba6b;
}
.public-button:hover {
  background: #edc882;
  border-color: #edc882;
}
.public-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.public-secondary,
.public-login {
  border-color: #3d3e43;
  background: #ffffff03;
  color: #e8e8ed;
}
.public-secondary:hover,
.public-login:hover {
  border-color: #686a70;
  background: #ffffff08;
}
.public-button-wide {
  width: 100%;
}
.public-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e4ba6b;
  font-size: 13px;
  font-weight: 550;
}
.public-link:hover {
  color: #f5d99f;
}
.public-menu {
  display: none;
  min-width: 36px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  color: #d4d5da;
}
.public-main {
  max-width: 1280px;
  padding: 0 40px;
  margin: auto;
}
.public-eyebrow {
  color: #b4a58b;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 650;
  letter-spacing: 0.11em;
  margin-bottom: 17px;
}
.public-catalog {
  padding: 10px 0 40px;
}
.public-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 23px;
}
.public-section-heading h2 {
  font-size: 24px;
}
.public-section-heading p {
  color: #92959e;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 7px;
}
.catalog-total {
  font-size: 12px;
  color: #858994;
  white-space: nowrap;
}
.public-catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #303135;
  margin-bottom: 23px;
}
.catalog-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
}
.catalog-tabs button {
  min-height: 39px;
  padding: 9px 15px;
  color: #a5a8b0;
  border-radius: 4px;
  font-size: 12px;
}
.catalog-tabs button.active {
  background: #303033;
  color: #f0d7ab;
}
.catalog-tabs button span {
  font-size: 10px;
  margin-left: 5px;
  color: #989ba2;
}
.catalog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 255px;
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid #34363b;
  border-radius: 5px;
  color: #82858e;
  background: #1b1c1f;
}
.catalog-search:focus-within {
  border-color: #a88a54;
}
.catalog-search input {
  width: 100%;
  min-width: 0;
  background: transparent;
  font-size: 12px;
  border: 0;
  outline: 0;
  color: #e6e7eb;
  padding: 10px 0;
}
.catalog-search input::-moz-placeholder {
  color: #878a94;
}
.catalog-search input::placeholder {
  color: #878a94;
}
.public-game-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.public-game-card {
  text-align: left;
  min-width: 0;
  border-radius: 7px;
}
.public-game-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/4.7;
  border-radius: 7px;
  background: #23242a;
  border: 1px solid #ffffff0d;
}
.public-game-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.25s;
}
.public-game-card:hover img {
  transform: scale(1.035);
}
.public-game-card:hover .public-game-caption b {
  color: #e9c789;
}
.public-game-image:after {
  position: absolute;
  content: "";
  inset: 55% 0 0;
  background: linear-gradient(transparent, #0008);
  pointer-events: none;
}
.catalog-status {
  position: absolute;
  bottom: 10px;
  left: 9px;
  z-index: 1;
  background: #1a1b21ec;
  border: 1px solid #ffffff20;
  color: #c5c6ce;
  font-size: 8px;
  padding: 4px 7px;
  border-radius: 3px;
  line-height: 1.3;
}
.catalog-status.available {
  color: #c7e2c2;
  background: #243728eb;
  border-color: #63826770;
}
.public-game-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 12px 1px 0;
}
.public-game-caption b {
  display: block;
  font-size: 12px;
  color: #e4e5eb;
  font-weight: 550;
}
.public-game-caption small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #858995;
}
.public-game-caption > svg {
  color: #6d727e;
}
.catalog-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.catalog-bottom > p {
  color: #90949e;
  font-size: 11px;
  line-height: 1.7;
}
.catalog-bottom > p > span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  background: #8caa85;
  border-radius: 50%;
}
.catalog-bottom .public-secondary {
  min-height: 37px;
  padding: 8px 14px;
  font-size: 11px;
}
.catalog-empty {
  padding: 45px 20px;
  text-align: center;
  color: #969ba6;
  border: 1px dashed #373940;
  border-radius: 6px;
}
.catalog-empty > svg {
  margin: auto auto 15px;
}
.catalog-empty h3 {
  font-size: 17px;
  color: #d9dbe0;
}
.catalog-empty p {
  font-size: 12px;
  margin: 10px 0 18px;
}
.account-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid #303135;
  padding: 29px 0;
  gap: 30px;
}
.account-benefits > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.account-benefits svg {
  color: #b6a285;
  margin-top: 3px;
}
.account-benefits h3 {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.01em;
}
.account-benefits p {
  font-size: 11px;
  color: #92969f;
  line-height: 1.7;
  margin-top: 6px;
}
.getting-started {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 65px 0;
}
.getting-started h2 {
  font-size: 32px;
  line-height: 1.15;
}
.getting-started > div > p:not(.public-eyebrow) {
  font-size: 13px;
  color: #9599a3;
  line-height: 1.8;
  margin-top: 17px;
  max-width: 340px;
}
.getting-started .public-link {
  margin-top: 23px;
}
.getting-started ol {
  display: grid;
  gap: 25px;
}
.getting-started li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.getting-started li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #27282b;
  border: 1px solid #3c3b37;
  color: #d4bb8e;
  font-size: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.getting-started li h3 {
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.getting-started li p {
  color: #9599a3;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 7px;
}
.public-highlights {
  border-top: 1px solid #303135;
  padding: 38px 0 45px;
}
.public-highlights-empty {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: #1c1d20;
  border: 1px solid #2c2e33;
  border-radius: 6px;
}
.public-highlights-empty > svg {
  color: #ab987a;
}
.public-highlights-empty h3 {
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #cdd0d6;
}
.public-highlights-empty p {
  margin-top: 6px;
  color: #9195a0;
  font-size: 12px;
  line-height: 1.7;
}
.public-help {
  border-top: 1px solid #303135;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  padding: 50px 0 65px;
}
.public-help h2 {
  font-size: 26px;
}
.public-help > div > p:not(.public-eyebrow) {
  color: #9599a3;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 13px;
}
.public-faq details {
  border-bottom: 1px solid #303238;
}
.public-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 13px;
  font-weight: 500;
  color: #d9dce3;
}
.public-faq details:first-child summary {
  padding-top: 0;
}
.public-faq summary::-webkit-details-marker {
  display: none;
}
.public-faq summary svg {
  color: #9196a1;
}
.public-faq details[open] summary svg {
  transform: rotate(180deg);
}
.public-faq details p {
  color: #a3a7b1;
  font-size: 12px;
  line-height: 1.8;
  padding: 0 20px 20px 0;
}
.public-footer {
  background: #111214;
  border-top: 1px solid #292b30;
  padding: 30px max(40px, calc((100% - 1200px) / 2));
}
.public-footer-main {
  display: flex;
  align-items: center;
  gap: 35px;
}
.public-footer-main nav {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: #a2a6b0;
  font-size: 11px;
  margin-left: auto;
}
.public-footer-main nav a:hover {
  color: #e3c790;
}
.public-footer-main > span {
  color: #727986;
  font-size: 10px;
}
.public-footer-note {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #25272c;
  margin-top: 25px;
  padding-top: 20px;
  color: #737b87;
}
.public-footer-note .play-note {
  font-size: 10px;
  line-height: 1.7;
  color: #8c929d;
}
.public-game-detail {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
}
.public-game-detail img {
  width: 108px;
  border-radius: 7px;
}
.public-game-detail p {
  font-size: 13px;
  line-height: 1.8;
  color: #a9adb5;
}
.public-game-detail p:first-child {
  color: #dbc697;
  margin-bottom: 9px;
  font-size: 11px;
}
.public-winner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.public-winner-card {
  padding: 25px;
  background: #1d1e22;
  border: 1px solid #34363c;
  border-radius: 6px;
}
.winner-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #b5a17d;
}
.winner-card-heading > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.public-winner-card > strong {
  font-size: 32px;
  font-weight: 600;
  display: block;
  color: #e6c48a;
  margin: 25px 0 20px;
  letter-spacing: -0.04em;
}
.public-winner-card h3 {
  font-size: 14px;
}
.public-winner-card time {
  color: #9399a6;
  font-size: 11px;
  display: block;
  margin-top: 7px;
}

/* Enhanced Daily Winners & Cashout Styles */
.daily-rotation-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(230, 196, 138, 0.12);
  border: 1px solid rgba(230, 196, 138, 0.3);
  color: #e6c48a;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.public-winner-card {
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.public-winner-card:hover {
  transform: translateY(-2px);
  border-color: #555963;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.public-winner-card.is-cashout-card {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(180deg, #1b2420 0%, #17181c 100%);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
}
.public-winner-card.is-cashout-card:hover {
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.18);
}
.winner-game-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #d1d5db;
}
.winner-status-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.winner-status-tag.tag-cashout {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.winner-status-tag.tag-daily {
  background: rgba(230, 196, 138, 0.14);
  color: #e6c48a;
  border: 1px solid rgba(230, 196, 138, 0.3);
}
.cashout-amount-text {
  color: #34d399 !important;
}
.cashout-icon-color {
  color: #34d399;
}
.winner-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.winner-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e323b, #191b20);
  border: 1px solid #444852;
  color: #e6c48a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.is-cashout-card .winner-avatar {
  background: linear-gradient(135deg, #1b3829, #13241b);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}
.winner-player-details {
  flex: 1;
  min-width: 0;
}
.winner-player-details h3 {
  font-size: 15px;
  font-weight: 600;
  color: #f3f4f6;
  margin: 0;
  letter-spacing: 0.02em;
}
.winner-meta-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}
.verified-shield {
  color: #34d399;
  flex-shrink: 0;
}
.winner-category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.winner-tab-btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #1e2025;
  border: 1px solid #34373e;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.winner-tab-btn:hover {
  background: #252830;
  color: #f3f4f6;
  border-color: #4a4e58;
}
.winner-tab-btn.active {
  background: rgba(230, 196, 138, 0.15);
  border-color: #e6c48a;
  color: #e6c48a;
  font-weight: 600;
}
.daily-guarantee-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(230, 196, 138, 0.05);
  border: 1px solid rgba(230, 196, 138, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: #d1d5db;
  line-height: 1.6;
}
.daily-guarantee-banner strong {
  color: #e6c48a;
}
.daily-guarantee-banner svg {
  color: #e6c48a;
  flex-shrink: 0;
  margin-top: 2px;
}
.winners-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.stat-pill-card {
  background: #1d1e22;
  border: 1px solid #34363c;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-pill-card span {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-pill-card strong {
  font-size: 22px;
  color: #e6c48a;
  font-weight: 700;
}
.stat-pill-card.stat-cashout strong {
  color: #34d399;
}
.marquee-cashout-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  vertical-align: middle;
}
.marquee-cashout-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.amount-cashout {
  color: #34d399 !important;
}
@media (max-width: 900px) {
  .public-winner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .winners-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .public-winner-grid {
    grid-template-columns: 1fr;
  }
  .winners-stats-row {
    grid-template-columns: 1fr;
  }
}
.winners-main {
  padding-top: 50px;
}
.winners-heading {
  max-width: 610px;
  margin-bottom: 42px;
}
.winners-heading h1 {
  font-size: 42px;
}
.winners-heading > p:last-child {
  color: #a1a6b0;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 16px;
}
.winners-section-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #33363c;
  padding-bottom: 18px;
  margin-bottom: 25px;
}
.winners-section-bar h2 {
  font-size: 19px;
}
.winners-section-bar > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #959eaa;
  font-size: 11px;
}
.winners-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 55px 25px;
  border: 1px solid #30333a;
  border-radius: 7px;
  background: #1a1c20;
}
.winners-empty > span {
  color: #b9a17b;
  margin-bottom: 24px;
}
.winners-empty h2 {
  font-size: 23px;
}
.winners-empty p {
  color: #959da9;
  font-size: 13px;
  margin: 12px 0 23px;
  line-height: 1.8;
  max-width: 370px;
}
.winners-publication-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 22px 0;
  color: #949eab;
}
.winners-publication-note p {
  font-size: 11px;
  line-height: 1.8;
}
.winners-publication-note svg {
  margin-top: 1px;
}
.winners-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 30px;
  padding: 35px 0 55px;
  border-top: 1px solid #30333a;
}
.winners-next h2 {
  font-size: 24px;
}
.winners-next p {
  color: #949da9;
  margin-top: 9px;
  font-size: 12px;
}

/* Account access uses a focused form and the same navigation chrome. */
.account-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  min-height: 76px;
  border-bottom: 1px solid #2c2e34;
  background: #191a1c;
}
.account-back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b0b4bd;
  font-size: 12px;
}
.account-back:hover {
  color: #ecd2a0;
}
.account-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.access-card {
  width: 100%;
  max-width: 410px;
}
.access-card h1 {
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: 10px;
}
.account-intro {
  color: #9ca2ad;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 27px;
}
.access-card form {
  display: grid;
  gap: 18px;
}
.access-card .field-label > span,
.account-password-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #d7dbe2;
  margin-bottom: 9px;
}
.access-card .field {
  background: #1d1f24;
  border: 1px solid #41454e;
  border-radius: 5px;
  min-height: 46px;
  padding: 12px 13px;
  color: #f3f4f6;
  font-size: 13px;
}
.access-card .field::-moz-placeholder {
  color: #747c8a;
}
.access-card .field::placeholder {
  color: #747c8a;
}
.access-card .field:focus {
  border-color: #c4a367;
  outline: 2px solid #c4a36725;
}
.account-password {
  position: relative;
}
.account-password .field {
  padding-right: 48px;
}
.account-password > button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 40px;
  display: grid;
  place-items: center;
  color: #8e97a6;
}
.account-password > button:hover {
  color: #e1c695;
}
.access-card .public-button {
  min-height: 45px;
  width: 100%;
  margin-top: 3px;
}
.account-eligibility {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #a5acb8;
  font-size: 11px;
  line-height: 1.65;
}
.account-eligibility input {
  margin-top: 3px;
  width: 14px;
  height: 14px;
  accent-color: #d9b267;
  flex-shrink: 0;
}
.account-switch {
  text-align: center;
  font-size: 12px;
  color: #959dac;
  margin-top: 25px;
}
.account-switch button {
  color: #e1bd7a;
  font-weight: 550;
  margin-left: 5px;
}
.account-switch button:hover {
  text-decoration: underline;
}
.account-assistance {
  margin-top: 25px;
  padding-top: 21px;
  border-top: 1px solid #30343b;
  text-align: center;
}
.account-assistance summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: #9aa3b0;
}
.account-assistance summary::-webkit-details-marker {
  display: none;
}
.account-assistance[open] summary svg {
  transform: rotate(180deg);
}
.account-assistance p {
  font-size: 11px;
  text-align: left;
  color: #9da6b5;
  line-height: 1.8;
  margin-top: 14px;
}
.account-error {
  padding: 12px;
  border: 1px solid #ab686849;
  background: #ab686811;
  border-radius: 5px;
  color: #e1a3a3;
  font-size: 12px;
  line-height: 1.6;
}
.account-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  border-top: 1px solid #2c2e34;
  padding: 18px 40px;
  color: #777f8d;
}
.account-footer > span {
  font-size: 10px;
  white-space: nowrap;
}
.account-footer .play-note {
  max-width: 630px;
  font-size: 10px;
  line-height: 1.6;
  color: #858d9b;
}

@media (max-width: 1100px) {
  .public-header-inner {
    gap: 35px;
    padding-inline: 28px;
  }
  .public-main {
    padding-inline: 28px;
  }
  .public-game-grid {
    gap: 15px;
  }
  .public-game-caption b {
    font-size: 11px;
  }
  .public-game-caption small {
    font-size: 9px;
  }
  .public-footer {
    padding-inline: 28px;
  }
  .public-footer-main {
    gap: 22px;
  }
  .public-footer-main nav {
    gap: 18px;
  }
}
@media (max-width: 850px) {
  .public-header-inner {
    gap: 25px;
  }
  .public-nav {
    gap: 19px;
    font-size: 12px;
  }
  .public-header .brand b {
    font-size: 16px;
  }
  .public-header .brand b i {
    font-size: 9px;
  }
  .public-button,
  .public-login {
    padding-inline: 14px;
    font-size: 12px;
  }
  .public-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 20px;
  }
  .public-game-caption b {
    font-size: 13px;
  }
  .public-game-caption small {
    font-size: 11px;
  }
  .account-benefits {
    gap: 20px;
  }
  .account-benefits > div {
    flex-direction: column;
  }
  .getting-started {
    gap: 40px;
  }
  .public-help {
    gap: 40px;
  }
  .public-footer-main {
    flex-wrap: wrap;
  }
  .public-footer-main > span {
    width: 100%;
  }
  .public-winner-grid {
    gap: 13px;
  }
  .public-winner-card {
    padding: 20px;
  }
}
@media (max-width: 650px) {
  .public-header-inner {
    height: 65px;
    padding-inline: 20px;
    gap: 10px;
  }
  .public-header .brand {
    gap: 7px;
  }
  .public-header .brand .brand-mark {
    width: 29px;
    height: 32px;
  }
  .public-header .brand b {
    font-size: 14px;
  }
  .public-header .brand b i {
    display: block;
    font-size: 7px;
    letter-spacing: 0.24em;
    margin-top: 2px;
  }
  .public-header-actions {
    gap: 8px;
  }
  .public-header .public-button {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .public-login {
    padding: 8px;
    min-height: 36px;
    border: 0;
    font-size: 11px;
  }
  .public-menu {
    display: flex;
    min-width: 28px;
  }
  .public-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    height: auto;
    background: #1d1f23;
    padding: 8px 20px;
    border-bottom: 1px solid #3b3e46;
  }
  .public-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .public-nav a {
    min-height: 45px;
  }
  .public-nav a.active:after {
    display: none;
  }
  .public-main {
    padding-inline: 20px;
  }
  .public-site section[id] {
    scroll-margin-top: 85px;
  }
  .public-eyebrow {
    font-size: 9px;
    margin-bottom: 14px;
  }
  .public-section-heading {
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }
  .public-section-heading h2 {
    font-size: 23px;
  }
  .public-section-heading p {
    font-size: 11px;
    max-width: 260px;
  }
  .catalog-total {
    display: none;
  }
  .public-catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .catalog-tabs {
    gap: 6px;
  }
  .catalog-tabs button {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 12px;
  }
  .catalog-search {
    width: 100%;
  }
  .public-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .public-game-caption b {
    font-size: 12px;
  }
  .public-game-caption small {
    font-size: 10px;
  }
  .catalog-status {
    font-size: 8px;
    left: 7px;
    bottom: 8px;
  }
  .catalog-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .catalog-bottom > p {
    font-size: 10px;
  }
  .catalog-bottom .public-secondary {
    width: 100%;
    min-height: 40px;
  }
  .public-catalog {
    padding-bottom: 30px;
  }
  .account-benefits {
    grid-template-columns: 1fr;
    padding-block: 27px;
    gap: 25px;
  }
  .account-benefits > div {
    flex-direction: row;
    gap: 16px;
  }
  .account-benefits h3 {
    font-size: 13px;
  }
  .account-benefits p {
    font-size: 11px;
  }
  .getting-started {
    grid-template-columns: 1fr;
    padding: 38px 0;
    gap: 30px;
  }
  .getting-started h2 {
    font-size: 29px;
  }
  .getting-started > div > p:not(.public-eyebrow) {
    font-size: 12px;
  }
  .getting-started .public-link {
    margin-top: 18px;
  }
  .getting-started ol {
    gap: 23px;
  }
  .getting-started li {
    gap: 15px;
  }
  .getting-started li h3 {
    font-size: 13px;
  }
  .getting-started li p {
    font-size: 11px;
  }
  .public-highlights {
    padding-block: 32px;
  }
  .public-highlights .public-section-heading {
    flex-direction: column;
    gap: 17px;
  }
  .public-highlights-empty {
    padding: 20px;
    gap: 15px;
  }
  .public-highlights-empty p {
    font-size: 11px;
  }
  .public-help {
    grid-template-columns: 1fr;
    padding-block: 35px;
    gap: 28px;
  }
  .public-help h2 {
    font-size: 25px;
  }
  .public-faq summary {
    font-size: 12px;
  }
  .public-faq details p {
    font-size: 11px;
  }
  .public-footer {
    padding: 26px 20px;
  }
  .public-footer-main {
    gap: 22px;
  }
  .public-footer-main nav {
    width: 100%;
    margin: 0;
    gap: 22px;
    font-size: 11px;
  }
  .public-footer-main > span {
    font-size: 10px;
  }
  .public-footer-note {
    align-items: flex-start;
    padding-top: 18px;
    margin-top: 20px;
  }
  .public-footer-note .play-note {
    font-size: 10px;
  }
  .public-game-detail {
    gap: 18px;
  }
  .public-game-detail img {
    width: 90px;
  }
  .public-game-detail p {
    font-size: 12px;
  }
  .public-winner-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .winners-main {
    padding-top: 33px;
  }
  .winners-heading {
    margin-bottom: 32px;
  }
  .winners-heading h1 {
    font-size: 35px;
  }
  .winners-heading > p:last-child {
    font-size: 13px;
  }
  .winners-section-bar h2 {
    font-size: 17px;
  }
  .winners-section-bar > span {
    font-size: 10px;
  }
  .winners-empty {
    padding: 40px 22px;
  }
  .winners-empty h2 {
    font-size: 22px;
  }
  .winners-empty p {
    font-size: 12px;
  }
  .winners-next {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 35px;
    gap: 22px;
  }
  .account-header {
    padding-inline: 22px;
    min-height: 66px;
  }
  .account-header .brand b {
    font-size: 16px;
  }
  .account-header .brand b i {
    font-size: 8px;
  }
  .account-header .brand .brand-mark {
    width: 30px;
    height: 30px;
  }
  .account-back {
    font-size: 11px;
  }
  .account-main {
    padding: 36px 24px;
    align-items: flex-start;
  }
  .access-card {
    max-width: 420px;
  }
  .access-card h1 {
    font-size: 29px;
  }
  .access-card .field {
    font-size: 16px;
  }
  .account-footer {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }
  .account-footer .play-note {
    font-size: 10px;
  }
}
@media (max-width: 359px) {
  .public-header-inner,
  .public-main {
    padding-inline: 16px;
  }
  .public-header .brand {
    gap: 5px;
  }
  .public-header-actions {
    gap: 5px;
  }
  .public-header .public-button {
    padding-inline: 10px;
  }
  .account-header {
    padding-inline: 18px;
  }
  .account-header .brand b i {
    display: block;
    margin-top: 2px;
  }
}
@media (min-width: 651px) and (max-height: 780px) {
  .account-main {
    padding-block: 22px;
  }
  .account-intro {
    margin-bottom: 22px;
  }
  .access-card form {
    gap: 14px;
  }
  .account-switch {
    margin-top: 20px;
  }
  .account-assistance {
    margin-top: 20px;
    padding-top: 16px;
  }
}
@media (max-width: 650px) {
  .catalog-search input {
    font-size: 16px;
  }
}

/* The original crown artwork carries the public entrance and player lounge. */
.public-jackpot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.75fr) minmax(225px, 1fr);
  gap: 18px;
  margin: 32px 0 42px;
}
.public-jackpot-main {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border: 1px solid #6e6031;
  border-radius: 13px;
  background-color: #102018;
  background-image:
    linear-gradient(
      90deg,
      #0b1a13 0%,
      #102016ee 24%,
      #14211750 54%,
      #11151408 100%
    ),
    var(--hero-art);
  background-size:
    cover,
    auto 135%;
  background-position:
    center,
    82% 39%;
  background-repeat: no-repeat;
}
.public-jackpot-copy {
  position: relative;
  z-index: 1;
  width: 57%;
  padding: 32px 32px 56px;
}
.public-jackpot-copy .hero-kicker,
.public-vault-spotlight .hero-kicker {
  color: #f0ce80;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.public-jackpot-copy h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: -0.045em;
  color: #fff2cf;
  margin-top: 22px;
}
.public-jackpot-copy h1 em {
  color: #f0d487;
  font-weight: 400;
}
.public-jackpot-copy > p:not(.hero-kicker) {
  color: #efe5c5;
  font-size: 12px;
  line-height: 1.8;
  max-width: 275px;
  margin-top: 20px;
}
.public-jackpot-copy .button-gold {
  margin-top: 24px;
  min-height: 45px;
  padding: 12px 19px;
  font-size: 12px;
  gap: 14px;
}
.public-jackpot-register {
  display: flex;
  align-items: center;
  gap: 7px;
  width: -moz-fit-content;
  width: fit-content;
  color: #dbd0ab;
  font-size: 10px;
  margin-top: 15px;
  line-height: 1.5;
}
.public-jackpot-register:hover {
  color: #fff3c8;
}
.public-jackpot-caption {
  position: absolute;
  bottom: 18px;
  left: 32px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  color: #d8bc73;
  font-size: 6px;
  letter-spacing: 0.19em;
}
.public-vault-spotlight {
  padding: 25px 24px 23px;
  border: 1px solid #373626;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 26%, #463b1d55, transparent 63%),
    linear-gradient(145deg, #222319, #141c16);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.public-vault-spotlight .hero-kicker {
  width: 100%;
  justify-content: space-between;
  font-size: 7px;
}
.public-vault-logo {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  position: relative;
  margin: 18px 0 16px;
}
.public-vault-logo span,
.public-vault-logo:before {
  position: absolute;
  content: "";
  inset: 0;
  border: 1px solid #d9b95726;
  border-radius: 50%;
}
.public-vault-logo span {
  inset: 13px;
}
.public-vault-logo img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 21px;
  transform: rotate(-9deg);
}
.public-vault-logo i {
  position: absolute;
  right: -1px;
  top: 24px;
  font-style: normal;
  color: #f4d98b;
  font-size: 25px;
}
.public-vault-spotlight .status-label {
  font-size: 6px;
  color: #c6c286;
  letter-spacing: 0.15em;
}
.public-vault-spotlight .status-label > span {
  background: #91b89b;
}
.public-vault-spotlight h2 {
  font:
    400 31px/1.15 Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.035em;
  color: #fff0c8;
  margin-top: 18px;
  white-space: nowrap;
}
.public-vault-spotlight > p:not(.hero-kicker) {
  color: #d0c594;
  font-size: 12px;
  line-height: 1.8;
  margin: 13px 0 25px;
}
.public-vault-spotlight .button-secondary {
  width: 100%;
  margin-top: auto;
  min-height: 42px;
  font-size: 11px;
  color: #f0ddb1;
  border-color: #75633466;
}
.public-game-image {
  aspect-ratio: 4 / 5;
}
.public-game-image img {
  -o-object-position: center 15%;
     object-position: center 15%;
}
.game-card-cover-art .game-cover {
  aspect-ratio: 4 / 5;
}
.game-card-cover-art .game-cover img {
  -o-object-position: center 15%;
     object-position: center 15%;
}
@media (max-width: 1000px) {
  .public-jackpot-grid {
    grid-template-columns: minmax(0, 2.6fr) minmax(195px, 1fr);
  }
  .public-jackpot-main {
    min-height: 400px;
  }
  .public-jackpot-copy {
    padding: 29px 25px 52px;
    width: 65%;
  }
  .public-jackpot-copy h1 {
    font-size: 48px;
  }
  .public-vault-spotlight {
    padding: 24px 17px 21px;
  }
  .public-vault-logo {
    width: 125px;
    height: 125px;
    margin-block: 19px;
  }
  .public-vault-logo img {
    width: 89px;
    height: 89px;
  }
  .public-vault-spotlight h2 {
    font-size: 27px;
  }
}
@media (max-width: 760px) {
  .game-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .public-jackpot-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin: 22px 0 30px;
  }
  .public-jackpot-main {
    min-height: 410px;
    background-position:
      center,
      76% 39%;
  }
  .public-jackpot-copy {
    width: 66%;
    padding: 28px 24px 51px;
  }
  .public-jackpot-copy h1 {
    font-size: 49px;
  }
  .public-jackpot-copy > p:not(.hero-kicker) {
    font-size: 11px;
  }
  .public-jackpot-caption {
    left: 24px;
    right: 20px;
  }
  .public-vault-spotlight {
    display: grid;
    grid-template-columns: 83px minmax(0, 1fr);
    -moz-column-gap: 16px;
         column-gap: 16px;
    text-align: left;
    padding: 18px 21px;
  }
  .public-vault-spotlight .hero-kicker,
  .public-vault-spotlight > p:not(.hero-kicker) {
    display: none;
  }
  .public-vault-logo {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 83px;
    height: 83px;
    margin: 0;
  }
  .public-vault-logo img {
    width: 63px;
    height: 63px;
    border-radius: 13px;
  }
  .public-vault-logo span {
    inset: 8px;
  }
  .public-vault-logo i {
    font-size: 20px;
    right: -2px;
    top: 6px;
  }
  .public-vault-spotlight .status-label {
    grid-column: 2;
    justify-content: flex-start;
  }
  .public-vault-spotlight h2 {
    grid-column: 2;
    margin-top: 8px;
    font-size: 25px;
  }
  .public-vault-spotlight .button-secondary {
    grid-column: 2;
    padding: 0;
    min-height: 26px;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 6px;
    border: 0;
    background: none;
    justify-content: flex-start;
    font-size: 10px;
  }
}
@media (max-width: 440px) {
  .public-jackpot-main {
    min-height: 443px;
    background-image:
      linear-gradient(
        90deg,
        #0b1a13f2 0%,
        #102016dc 34%,
        #14211755 70%,
        #11151408 100%
      ),
      var(--hero-art);
    background-size:
      cover,
      auto 105%;
    background-position:
      center,
      68% bottom;
  }
  .public-jackpot-copy {
    width: 77%;
    padding: 26px 21px 54px;
  }
  .public-jackpot-copy h1 {
    font-size: 45px;
    margin-top: 23px;
    text-shadow: 0 2px 18px #08110b66;
  }
  .public-jackpot-copy .hero-kicker {
    font-size: 6px;
    letter-spacing: 0.1em;
    gap: 6px;
  }
  .public-jackpot-copy > p:not(.hero-kicker) {
    max-width: 202px;
    margin-top: 19px;
    line-height: 1.75;
  }
  .public-jackpot-copy .button-gold {
    font-size: 11px;
    padding: 11px 14px;
    margin-top: 21px;
  }
  .public-jackpot-register {
    font-size: 9px;
    max-width: 170px;
  }
  .public-jackpot-caption {
    left: 21px;
    font-size: 5px;
  }
}

/* ─────────────────────────────────────────────────────────────
   MILLION-DOLLAR LUXURY HERO & CAROUSEL STYLES (COMPACT & SLEEK)
   ───────────────────────────────────────────────────────────── */
.luxury-hero-container {
  margin: 14px 0 18px;
}

.luxury-hero-container .public-jackpot-grid {
  margin: 0 0 14px;
  gap: 16px;
  align-items: stretch;
}

.luxury-carousel-main {
  min-height: 460px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  background-color: #0b0d11;
  background-image:
    linear-gradient(
      95deg,
      #090b0e 0%,
      rgba(9, 11, 14, 0.96) 38%,
      rgba(9, 11, 14, 0.72) 65%,
      rgba(9, 11, 14, 0.15) 100%
    ),
    var(--hero-art);
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 35px var(--glow-color, rgba(212, 175, 55, 0.12));
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-carousel-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(212, 175, 55, 0.12), transparent 55%),
    radial-gradient(ellipse at 85% 85%, var(--glow-color, rgba(212, 175, 55, 0.08)), transparent 60%);
  pointer-events: none;
}

.luxury-hero-copy {
  width: 58%;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 460px;
  animation: heroSlideFadeIn 0.4s ease forwards;
}

@keyframes heroSlideFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.luxury-hero-copy h1 {
  font-family: 'Cinzel', Georgia, serif, system-ui;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.luxury-hero-copy h1 em {
  display: block;
  font-style: normal;
  background: linear-gradient(135deg, #fff2cf 0%, #f0ce80 40%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.25));
}

.luxury-hero-copy p {
  color: #cbd2e0;
  font-size: 12px;
  line-height: 1.55;
  max-width: 420px;
  margin-top: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.luxury-hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.luxury-highlight-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #e2e8f0;
  backdrop-filter: blur(8px);
}

.luxury-highlight-pill svg {
  color: var(--accent-color, #d4af37);
}

.luxury-hero-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.button-gold.luxury-cta-primary {
  min-height: 38px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #fae08c 0%, #d4af37 55%, #a8791e 100%);
  color: #121316;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-gold.luxury-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, #ffea9f 0%, #e0bd49 55%, #b58425 100%);
}

.luxury-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.luxury-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 175, 55, 0.4);
  color: #f3d489;
  transform: translateY(-1px);
}

/* Controls */
.carousel-nav-controls {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 16, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
}

.carousel-arrow-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-arrow-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  color: #f3d489;
}

.carousel-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.carousel-dot.active {
  width: 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #d4af37, #f5d77f);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

/* Luxury Spotlight Aside */
.public-vault-spotlight.luxury-spotlight {
  min-height: 460px;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(212, 175, 55, 0.15), transparent 60%),
    linear-gradient(160deg, #181920 0%, #111217 60%, #0d0e12 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 18px 20px 16px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: space-between;
}

.spotlight-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2px;
}

.spotlight-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.38);
  color: #e5c365;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3.5px 11px;
  border-radius: 14px;
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
}

.spotlight-nav-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 2px 7px;
}

.spotlight-arrow-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.spotlight-arrow-btn:hover {
  color: #fbbf24;
}

.spotlight-count {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  font-family: monospace;
  padding: 0 4px;
}

.spotlight-game-carousel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: spotlightFadeIn 0.3s ease;
}

@keyframes spotlightFadeIn {
  from {
    opacity: 0.2;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.public-vault-logo.luxury-vault-logo {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  position: relative;
  margin: 8px auto 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, rgba(24, 26, 32, 0.95) 68%, rgba(10, 11, 14, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), inset 0 0 18px rgba(0, 0, 0, 0.85);
}

.public-vault-logo.luxury-vault-logo:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.3);
  pointer-events: none;
}

.public-vault-logo.luxury-vault-logo span {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.public-vault-logo.luxury-vault-logo img {
  width: 80%;
  height: 80%;
  max-width: 114px;
  max-height: 114px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 12px rgba(212, 175, 55, 0.2);
  transform: rotate(-6deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 2;
}

.public-vault-logo.luxury-vault-logo img:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.9), 0 0 18px rgba(212, 175, 55, 0.35);
}

.spotlight-catalog-label,
.luxury-status-label {
  background: rgba(0, 0, 0, 0.42) !important;
  color: #e5c365 !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}

.public-vault-spotlight.luxury-spotlight h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff9ea;
  margin: 4px 0 10px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
  text-align: center;
}

.jackpot-live-meter {
  background: rgba(7, 9, 13, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 9px;
  padding: 9px 14px 8px;
  width: 100%;
  margin: 2px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.9);
}

.live-pulse-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.jackpot-live-meter small {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jackpot-counter-amount {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  color: #f7ca54;
  letter-spacing: -0.01em;
  text-shadow: 0 0 14px rgba(247, 202, 84, 0.35);
}

.luxury-vault-action {
  width: 100%;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  background: #1c202a !important;
  border: 1px solid rgba(212, 175, 55, 0.38) !important;
  color: #fce298 !important;
  border-radius: 9px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  text-decoration: none;
}

.luxury-vault-action:hover {
  background: #252b38 !important;
  border-color: rgba(212, 175, 55, 0.65) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.spotlight-dots-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.spotlight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.spotlight-dot.active {
  width: 22px;
  border-radius: 4px;
  background: #e0be53;
  box-shadow: 0 0 8px rgba(224, 190, 83, 0.6);
}

/* ─────────────────────────────────────────────────────────────
   MILLION-DOLLAR VIP METRICS STRIP (COMPACT HORIZONTAL BAR)
   ───────────────────────────────────────────────────────────── */
.luxury-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: linear-gradient(180deg, #16171e 0%, #121319 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 10px 18px;
  margin: 12px 0 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  position: relative;
}

.luxury-metric-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.metric-icon.gold-glow {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fbbf24;
}

.metric-icon.emerald-glow {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.metric-icon.purple-glow {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.metric-icon.star-glow {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.luxury-metric-item strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: block;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.luxury-metric-item p {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
  line-height: 1.3;
}

.luxury-metric-divider {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   THE ALPHA HIGH-ROLLER VIP PRIVILEGE SECTION
   ───────────────────────────────────────────────────────────── */
.luxury-vip-privilege {
  margin: 70px 0 50px;
  padding: 50px 40px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 70%),
    linear-gradient(180deg, #15161d 0%, #101116 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.vip-privilege-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.vip-privilege-header h2 {
  font-family: 'Cinzel', Georgia, serif, system-ui;
  font-size: clamp(28px, 3.2vw, 40px);
  color: #ffffff;
  line-height: 1.15;
  margin: 12px 0 14px;
}

.vip-privilege-header p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.7;
}

.vip-privilege-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.vip-feature-card {
  background: rgba(22, 23, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.vip-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.1);
}

.vip-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.vip-card-icon.gold {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fbbf24;
}

.vip-card-icon.emerald {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.vip-card-icon.amber {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.vip-card-icon.cyan {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}

.vip-feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.vip-feature-card p {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}

.vip-perk-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 1024px) {
  .luxury-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .vip-privilege-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .luxury-hero-copy {
    width: 100%;
    padding: 20px 18px 46px;
  }
  .luxury-hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .luxury-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 14px;
    gap: 10px;
  }
  .vip-privilege-grid {
    grid-template-columns: 1fr;
  }
  .luxury-vip-privilege {
    padding: 28px 18px;
  }
}
@media (max-width: 480px) {
  .luxury-metrics-strip {
    grid-template-columns: 1fr;
  }
}
.feature-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #344534;
  border-radius: 22px;
  background: #101b16;
  margin-bottom: 28px;
}
.feature-hero-content { padding: clamp(24px, 4vw, 56px); min-width: 0; display: flex; flex-direction: column; }
.feature-hero-label { display: flex; align-items: center; gap: 10px; color: #e4c778; font-size: 11px; letter-spacing: .16em; margin: 0 0 24px; }
.feature-hero-text { min-height: 220px; }
.feature-hero-text h1 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -.035em; max-width: 12ch; margin: 0 0 20px; text-wrap: balance; }
.feature-hero-text p { font-size: 15px; line-height: 1.7; color: #a9b7ad; max-width: 36ch; margin: 0; }
.feature-hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 24px 0; }
.feature-hero-controls { display: flex; gap: 14px; align-items: center; margin-top: auto; }
.feature-hero-controls > button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #455343; border-radius: 50%; }
.feature-hero-controls > div { display: flex; align-items: center; gap: 4px; }
.feature-hero-controls > div button { width: 28px; height: 32px; position: relative; }
.feature-hero-controls > div button::after { content: ''; width: 7px; height: 7px; background: #617265; border-radius: 10px; display: block; margin: auto; }
.feature-hero-controls > div button[aria-pressed=true]::after { width: 20px; background: #e4c778; }
.feature-hero-controls > span { font-size: 11px; color: #a9b7ad; }
.feature-hero button:focus-visible { outline: 2px solid #e4c778; outline-offset: 3px; }
.feature-hero-art { position: relative; min-width: 0; background: #0c1510; display: grid; align-items: center; }
.feature-hero-art img { display: block; width: 100%; height: 100%; max-height: 540px; -o-object-fit: contain; object-fit: contain; }
.feature-hero-art > span { position: absolute; bottom: 20px; right: 24px; color: #e4c778; font-size: 9px; letter-spacing: .2em; }
@media (max-width: 760px) {
  .feature-hero { grid-template-columns: 1fr; border-radius: 16px; }
  .feature-hero-art { grid-row: 1; height: clamp(180px, 49vw, 300px); }
  .feature-hero-art img { height: 100%; min-height: 0; }
  .feature-hero-text { min-height: 175px; }
  .feature-hero-text h1 { max-width: 18ch; font-size: clamp(30px, 7.5vw, 42px); }
  .feature-hero-label { margin-bottom: 16px; }
  .feature-hero-actions { gap: 16px; }
}

/* ==============================
   PROMO BANNER STRIP
   ============================== */
.promo-banner-strip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0 0;
}
.promo-banner-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: #1c1d21;
  transition: transform 0.22s cubic-bezier(.2,.8,.4,1), box-shadow 0.22s;
  text-decoration: none;
}
a.promo-banner-card {
  cursor: pointer;
}
.promo-banner-card:hover {
  transform: scale(1.012);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(228,186,107,0.3);
}
.promo-banner-img {
  display: block;
  width: 100%;
  max-height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.promo-banner-overlay {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 14px 22px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
a.promo-banner-card::after {
  content: "TAP TO CLAIM \2192";
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(228,186,107,0.9);
  color: #1a1610;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
a.promo-banner-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 650px) {
  .promo-banner-strip {
    gap: 12px;
    margin-top: 20px;
  }
  .promo-banner-img {
    max-height: 180px;
  }
  .promo-banner-overlay {
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* Original provider imagery and restrained motion across public and player pages. */
.lobby-featured {
  scroll-margin-top: 90px;
}
.game-card.is-featured .game-cover {
  border-color: #edcd82;
  box-shadow: 0 0 0 2px #edcd8226;
}
.game-caption .game-title-select {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.casino-hero.has-featured-game {
  background:
    radial-gradient(ellipse at 85% 45%, var(--featured-color), transparent 70%),
    #0e1b15;
}
.has-featured-game .hero-copy {
  width: 58%;
}
.has-featured-game .hero-copy h2 {
  font-size: 43px;
  overflow-wrap: anywhere;
}
.has-featured-game .hero-copy h2 em {
  display: inline-block;
  margin-top: 9px;
  font-size: 31px;
}
.featured-platform-art {
  position: absolute;
  width: 37%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #edcd8240;
  border-radius: 20px;
  box-shadow: 0 20px 50px #0008;
}
.spotlight-preview .status-label {
  color: #d3bd88;
}
.spotlight-preview .status-label > span {
  background: #d3bd88;
}
@media (max-width: 1100px) {
  .lobby-featured .selected-spotlight {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    -moz-column-gap: 16px;
         column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 16px 20px;
  }
  .selected-spotlight > .flex {
    display: none;
  }
  .selected-spotlight .spotlight-art {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 80px;
    height: 80px;
    margin: 0;
  }
  .selected-spotlight .spotlight-art img {
    width: 62px;
    height: 62px;
    border-radius: 13px;
  }
  .selected-spotlight .orbit {
    width: 78px;
    height: 78px;
  }
  .selected-spotlight .orbit-two {
    width: 67px;
    height: 67px;
  }
  .selected-spotlight .spotlight-spark {
    font-size: 18px;
    top: 0;
    right: 0;
  }
  .selected-spotlight .status-label,
  .selected-spotlight h2,
  .selected-spotlight p {
    grid-column: 2;
  }
  .selected-spotlight h2 {
    font-size: 23px;
    margin: 7px 0 4px;
  }
  .selected-spotlight .button-secondary {
    grid-column: 3;
    grid-row: 1 / 4;
    margin: 0;
    width: auto;
  }
}
@media (max-width: 650px) {
  .casino-hero.has-featured-game {
    min-height: 480px;
  }
  .has-featured-game .hero-copy {
    width: 100%;
    max-width: none;
    padding: 24px 24px 215px;
  }
  .has-featured-game .hero-copy h2 {
    font-size: 38px;
    margin-top: 17px;
  }
  .has-featured-game .hero-copy h2 em {
    font-size: 24px;
  }
  .has-featured-game .hero-copy > p {
    max-width: 100%;
  }
  .featured-platform-art {
    top: auto;
    bottom: 41px;
    right: 24px;
    width: 145px;
    transform: none;
    border-radius: 15px;
  }
  .lobby-featured .selected-spotlight {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 16px;
    gap: 5px 14px;
  }
  .selected-spotlight .spotlight-art {
    width: 66px;
    height: 76px;
    grid-row: 1 / 5;
  }
  .selected-spotlight .orbit {
    width: 66px;
    height: 66px;
  }
  .selected-spotlight .orbit-two {
    width: 58px;
    height: 58px;
  }
  .selected-spotlight .spotlight-art img {
    width: 53px;
    height: 53px;
  }
  .selected-spotlight .button-secondary {
    grid-column: 2;
    grid-row: 4;
    padding: 7px 0;
    min-height: 28px;
    border: 0;
    justify-content: flex-start;
  }
}
.public-site,
.account-page {
  --public-bg: #0a1010;
  --public-surface: #131c1b;
  --public-border: #24302c;
  --public-gold: #edcd82;
  background: #0a1010;
}
.public-header {
  background: #0e1714;
  border-color: #24302c;
}
.public-game-image,
.game-card-original .game-cover {
  aspect-ratio: 1;
}
.public-game-image img,
.game-card-original .game-cover img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.public-jackpot-grid {
  margin-bottom: 22px;
}
.winner-marquee {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 18px;
  margin: 20px 0 32px;
  padding: 14px 16px;
  border: 1px solid #b7a56530;
  border-radius: 10px;
  background: #111d18;
  color: #e5d6ac;
}
.marquee-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.marquee-heading b {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.marquee-heading small {
  display: block;
  font-size: 9px;
  margin-top: 6px;
  color: #8fa79a;
}
.marquee-window {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
          mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: alpha-marquee 95s linear infinite;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 145px;
}
.marquee-item img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  -o-object-fit: cover;
     object-fit: cover;
}
.marquee-item b {
  display: block;
  color: #f2ead4;
  font-size: 11px;
  font-weight: 600;
}
.marquee-item small {
  display: block;
  font-size: 9px;
  color: #a1aea2;
  margin-top: 4px;
}
.marquee-item strong {
  font-size: 15px;
  color: #edcd82;
  padding-right: 12px;
}
.marquee-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.marquee-controls a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.marquee-controls button {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid #edcd8233;
  border-radius: 50%;
  color: #edcd82;
}
.winner-marquee:hover .marquee-track,
.winner-marquee:focus-within .marquee-track,
.winner-marquee.is-paused .marquee-track {
  animation-play-state: paused;
}
.public-jackpot-main:after,
.casino-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 38%,
    #ffe6a81a 49%,
    transparent 60%
  );
  transform: translateX(120%);
  animation: alpha-sheen 2.6s ease-out 1;
}
.public-game-card,
.game-card-original {
  transition: transform 0.2s ease;
}
.public-game-card:hover,
.game-card-original:hover {
  transform: translateY(-3px);
}
.public-vault-logo img,
.spotlight-art > img {
  animation: alpha-spotlight 2s ease-out 1;
}
@keyframes alpha-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes alpha-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}
@keyframes alpha-spotlight {
  from {
    opacity: 0.5;
    transform: translateY(8px) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-9deg);
  }
}
@media (max-width: 900px) {
  .marquee-controls a span {
    display: none;
  }
}
@media (max-width: 650px) {
  .winner-marquee {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 14px;
    margin: 18px 0 27px;
  }
  .marquee-heading {
    grid-column: 1;
    grid-row: 1;
  }
  .marquee-controls {
    grid-column: 2;
    grid-row: 1;
  }
  .marquee-window {
    grid-column: 1 / -1;
  }
  .marquee-controls a span {
    display: inline;
  }
  .marquee-group {
    gap: 20px;
    padding-right: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .public-jackpot-main:after,
  .casino-hero:after,
  .public-vault-logo img,
  .spotlight-art > img {
    animation: none;
  }
  .marquee-window {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-group[aria-hidden="true"],
  .marquee-controls button {
    display: none;
  }
  .public-game-card,
  .game-card-original {
    transition: none;
  }
  .public-game-card:hover,
  .game-card-original:hover {
    transform: none;
  }
}

.social-auth-page {
  --public-bg: #0b1210;
  --public-surface: #121e19;
  --public-border: #2c3930;
  --public-muted: #9dab9f;
  --public-gold: #e4c483;
  background:
    radial-gradient(ellipse at 50% 40%, #19312344, transparent 65%),
    var(--public-bg);
}
.social-auth-page .account-header {
  background: #0e1814;
  border-color: var(--public-border);
}
.social-auth-page .account-main {
  padding-block: 28px;
}
.social-auth-page .access-card {
  max-width: 410px;
}
.social-auth-page .access-card h1 {
  font-size: clamp(25px, 4vw, 29px);
  color: #f1eee3;
}
.social-auth-page .account-intro {
  color: var(--public-muted);
  margin-bottom: 22px;
}
.social-auth-options {
  display: grid;
  gap: 10px;
}
.social-auth-hint { margin: 12px 0 18px; color: var(--public-muted); font-size: 12px; line-height: 1.6; }
.telegram-contact-panel {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid #3b493e;
  border-radius: 10px;
  background: #121e19;
  color: #d6ddcf;
}
.telegram-contact-panel h2 { margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.telegram-contact-panel p { margin: 8px 0; font-size: 13px; line-height: 1.6; }
.telegram-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.telegram-login-widget {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 12px;
  border: 1px solid var(--public-border);
  border-radius: 7px;
  color: var(--public-muted);
  font-size: 12px;
}
.telegram-login-widget > div { max-width: 100%; overflow: hidden; }
.telegram-login-help { text-align: left; line-height: 1.6; }
.telegram-login-help details { margin-top: 12px; }
.telegram-login-help summary { cursor: pointer; color: var(--public-gold); }
.telegram-login-help details p { margin-top: 8px; }
.telegram-login-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.telegram-login-actions button { color: var(--public-gold); text-decoration: underline; }
.telegram-login-actions button:disabled { opacity: .5; cursor: wait; }
.social-auth-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 53px;
  padding: 11px 14px;
  border: 1px solid #3a493b;
  border-radius: 7px;
  background: #17241c;
  color: #f0eee3;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}
.social-auth-button:hover:not(:disabled) {
  border-color: var(--public-gold);
  background: #213025;
}
.social-auth-button:disabled {
  opacity: 1;
  color: #a6b1a7;
  border-color: #2a362d;
  background: #121d17;
}
.social-auth-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  color: #e4c483;
}
.social-auth-icon svg {
  width: 21px;
  height: 21px;
}
.social-auth-button:disabled .social-auth-icon {
  color: #9eac9e;
}
.social-auth-button small {
  margin-left: auto;
  font-size: 9px;
  font-weight: 400;
  color: #a1aca1;
  white-space: nowrap;
}
.social-auth-arrow {
  margin-left: auto;
  color: var(--public-gold);
  flex-shrink: 0;
}
.social-auth-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 11px;
  color: #a8b4a9;
}
.social-auth-methods-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 11px;
  color: #bcc6bd;
}
.social-auth-methods-error button {
  color: var(--public-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}
.social-auth-page .account-eligibility {
  margin-top: 18px;
  margin-bottom: 16px;
  color: #a6b1a6;
}
.social-auth-page .account-error {
  margin-top: 14px;
}
.social-auth-email {
  margin-top: 20px;
  border-top: 1px solid var(--public-border);
  padding-top: 17px;
}
.social-auth-email summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: #c4c7b9;
  font-size: 12px;
}
.social-auth-email summary::-webkit-details-marker {
  display: none;
}
.social-auth-email summary:focus-visible {
  outline: 2px solid var(--public-gold);
  outline-offset: 5px;
}
.social-auth-email[open] summary > svg:last-child {
  transform: rotate(180deg);
}
.social-auth-email form {
  margin-top: 18px;
}
.social-auth-page .access-card form {
  gap: 15px;
}
.social-auth-page .access-card .field {
  background: #121e18;
  border-color: #3b493e;
}
.social-auth-page .account-password-label,
.social-auth-page .field-label > span {
  color: #d6ddcf;
}
.social-auth-page .account-switch {
  margin-top: 22px;
  color: #9ca99d;
}
.social-auth-page .account-assistance {
  margin-top: 20px;
  padding-top: 17px;
  border-color: var(--public-border);
}
.social-auth-page .account-assistance summary,
.social-auth-page .account-assistance p {
  color: #9caa9e;
}
.social-auth-page .account-footer {
  border-color: var(--public-border);
}
@media (max-width: 380px) {
  .social-auth-page .account-main {
    padding-inline: 18px;
  }
  .social-auth-button {
    gap: 9px;
    padding-inline: 11px;
    font-size: 12px;
  }
  .social-auth-button small {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-auth-button {
    transition: none;
  }
}

/* Google button: white background per Google brand guidelines */
.social-auth-page .social-auth-button.social-auth-button-google {
  background: #fff;
  border-color: #dadce0;
  color: #3c4043;
}
.social-auth-page .social-auth-button.social-auth-button-google:hover:not(:disabled) {
  background: #f8f8f8;
  border-color: #bdc1c6;
}
.social-auth-page .social-auth-button.social-auth-button-google:disabled {
  background: #f1f3f4;
  border-color: #e0e0e0;
  color: #9aa0a6;
}
.social-auth-page .social-auth-button-google .social-auth-icon {
  color: inherit;
}
.social-auth-page .social-auth-button-google .social-auth-icon svg {
  width: 20px;
  height: 20px;
}
.social-auth-page .social-auth-button-google .social-auth-arrow {
  color: #5f6368;
}

.manual-game-panel {
  display: grid;
  gap: 16px;
}
.manual-service-note {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border, #29372b);
  border-radius: 12px;
  background: #14231c;
  color: #e5d294;
}
.manual-service-note > svg {
  flex-shrink: 0;
}
.manual-service-note strong {
  font-size: 14px;
}
.manual-service-note p,
.manual-request-form p,
.manual-notice,
.manual-help {
  font-size: 12px;
  line-height: 1.7;
  color: #acbba9;
}
.manual-service-note p {
  margin-top: 4px;
}
.manual-service-badge {
  color: #d8c07a;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-align: right;
}
.manual-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.manual-section-heading h3 {
  margin-top: 5px;
  font-family: Georgia, serif;
  font-size: 21px;
  color: #f3e9c9;
}
.game-requests {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid #29372b;
  border-radius: 16px;
  background: #101c15;
}
.game-requests-compact {
  margin-top: 4px;
  padding: 18px;
}
.manual-request-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.manual-request {
  border-top: 1px solid #29372b;
  padding-top: 14px;
}
.manual-request:first-child {
  border-top: 0;
  padding-top: 0;
}
.manual-request-top {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.manual-request-top strong {
  display: block;
  color: #e6e9df;
  font-size: 12px;
}
.manual-request-top small {
  display: block;
  color: #8d9d90;
  font-size: 10px;
  margin-top: 5px;
}
.manual-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d8c07a;
  font-size: 10px;
}
.status-completed .manual-status {
  color: #8bcfa7;
}
.status-rejected .manual-status {
  color: #e6a797;
}
.manual-request p {
  color: #aebcad;
  font-size: 11px;
  line-height: 1.65;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.manual-cancel {
  margin-top: 9px;
  font-size: 11px;
}
.manual-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.manual-actions .button-secondary {
  font-size: 12px;
  min-height: 40px;
  padding: 10px;
}
.manual-actions .selected {
  border-color: #c5ab62;
  background: #232b1c;
}
.manual-request-form {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}
.manual-request-form h3 {
  color: #eee4c0;
  font-size: 15px;
}
.manual-request-form a,
.manual-notice a,
.manual-help a {
  color: #e0c881;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.manual-notice {
  padding: 12px 14px;
  border-left: 2px solid #99834d;
  background: #211f14;
  border-radius: 0 8px 8px 0;
}
.manual-notice strong {
  color: #e6d493;
}
.manual-notice .manual-actions {
  margin-top: 10px;
}
.manual-help {
  text-align: center;
}
@media (max-width: 540px) {
  .game-requests {
    padding: 16px;
  }
  .manual-request-top {
    flex-direction: column;
    gap: 8px;
  }
  .manual-service-note {
    padding: 12px;
  }
}

.alpha-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #52603c;
  border-radius: 20px;
  background: #09150f;
  color: #f8f4e5;
  container-type: inline-size;
  margin-bottom: 26px;
  min-width: 0;
}
.alpha-hero-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.alpha-hero-visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 70% center;
     object-position: 70% center;
  display: block;
}
.alpha-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    #08170ff5 0%,
    #08170fed 24%,
    #08170f96 45%,
    #08170f00 72%
  );
}
.alpha-hero-copy {
  padding: clamp(24px, 5cqw, 64px);
  padding-bottom: 24px;
  width: 53%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.alpha-hero-eyebrow {
  color: #e4ca83;
  font: 600 10px/1.5 sans-serif;
  letter-spacing: 0.2em;
  margin-bottom: 22px;
}
.alpha-hero-copy h1 {
  font-family: Georgia, serif;
  font-size: clamp(30px, 4.4cqw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 14ch;
  margin: 0 0 22px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.alpha-hero-copy p {
  font-size: 14px;
  line-height: 1.65;
  color: #d5dece;
  max-width: 36ch;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.alpha-hero-actions {
  margin-top: 28px;
}
.alpha-hero-button {
  display: inline-flex;
  background: #e4c77c;
  color: #142016;
  padding: 13px 23px;
  border-radius: 7px;
  font: 600 12px/1.5 sans-serif;
  text-decoration: none;
}
.alpha-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px clamp(24px, 5cqw, 64px);
  background: #07140f88;
  border-top: 1px solid #d7c16b25;
  min-height: 68px;
}
.alpha-hero-bottom > span {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #b3bda6;
}
.alpha-hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.alpha-hero-controls > button {
  border: 1px solid #c8ba8155;
  border-radius: 50%;
  height: 34px;
  width: 34px;
  background: #07140f;
  color: #f4e1a2;
}
.alpha-hero-controls > div {
  display: flex;
  flex-wrap: wrap;
  max-width: 140px;
}
.alpha-hero-controls > div button {
  width: 20px;
  height: 32px;
  display: grid;
  place-items: center;
}
.alpha-hero-controls i {
  width: 5px;
  height: 5px;
  background: #9d9d79;
  border-radius: 10px;
}
.alpha-hero-controls [aria-pressed="true"] i {
  background: #efd58c;
  width: 15px;
}
.alpha-hero-controls > span {
  font-size: 10px;
  color: #e0d3a8;
  white-space: nowrap;
}
.alpha-hero button:focus-visible,
.alpha-hero a:focus-visible {
  outline: 2px solid #efd58c;
  outline-offset: 3px;
}
@container (max-width:650px) {
  .alpha-hero-copy {
    width: 100%;
    padding-top: 250px;
    min-height: 0;
  }
  .alpha-hero-visual {
    bottom: auto;
    height: 280px;
  }
  .alpha-hero-visual img {
    -o-object-position: 70% center;
       object-position: 70% center;
  }
  .alpha-hero::before {
    background: linear-gradient(0deg, #09150f 0%, #09150f 42%, #09150f00 75%);
  }
  .alpha-hero-copy h1 {
    font-size: 36px;
    max-width: 18ch;
  }
  .alpha-hero-copy p {
    max-width: 48ch;
  }
  .alpha-hero-bottom {
    flex-wrap: wrap;
  }
  .alpha-hero-bottom > span {
    display: none;
  }
  .alpha-hero-controls {
    width: 100%;
    justify-content: center;
  }
}

.push-settings { min-width: 0; padding: 20px; border: 1px solid var(--ora-line, var(--player-border, #e2e8f0)); border-radius: 16px; }
.push-settings h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.push-settings p { line-height: 1.6; overflow-wrap: anywhere; }
.push-settings button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid currentColor; border-radius: 10px; font-size: 13px; line-height: 1.4; font-weight: 600; white-space: normal; }
.push-settings .button-gold { color: var(--ora-bg0, white); background: var(--ora-gold, #173d32); border-color: var(--ora-gold, #173d32); }
.push-settings button:focus-visible { outline: 2px solid #b39450; outline-offset: 3px; }
.push-settings button:disabled { opacity: .6; cursor: wait; }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.push-onboarding { margin: 0 0 24px; background: var(--ora-bg2, var(--surface, #fff)); color: var(--ora-text, var(--text, #172a25)); }
.push-onboarding h2 { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.push-onboarding h2 svg { flex: 0 0 auto; }
.push-onboarding p { margin: 10px 0 16px; color: var(--ora-muted, var(--muted, #53665f)); font-size: 13px; }
.push-onboarding .push-dismiss { margin-left: auto; background: transparent; color: inherit; border-color: transparent; }
.push-settings-link { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; color: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.push-permission-help { margin-top: 16px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.push-permission-help summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-weight: 600; }
.push-permission-help summary:focus-visible, .push-settings-link:focus-visible { outline: 2px solid var(--ora-gold, #b39450); outline-offset: 3px; border-radius: 4px; }
.push-permission-help ul { margin: 8px 0; padding-left: 20px; list-style: disc; }
.push-permission-help li { margin: 8px 0; }
@media (max-width: 560px) { .push-onboarding .push-actions > button:first-child { flex-grow: 1; } .push-onboarding .push-dismiss { margin-left: 0; } }
@media (max-width: 380px) { .push-settings { padding: 16px; } }

/* Palette sampled visually from the supplied purple-and-gold reference. */
:root {
  --bg: #100916;
  --surface: #201329;
  --border: #432a50;
  --muted: #b4a5bd;
  --gold: #edbd62;
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
[id] { scroll-margin-top: 100px; }
.public-site, .account-page {
  --public-bg: #100916;
  --public-surface: #201329;
  --public-border: #432a50;
  --public-muted: #b4a5bd;
  --public-gold: #edbd62;
  background: #100916;
}
.casino-app, .public-main { background: #100916; }
.public-header, .sidebar, .bottom-nav, .site-footer, .public-footer {
  background: #170d20;
  border-color: #432a50;
}
.surface-panel, .quiet-card, .spotlight-card, .public-game-caption, .account-benefits, .public-faq details {
  background: #201329;
  border-color: #432a50;
}
.public-button, .button-gold, .alpha-hero-button {
  background: #edbd62;
  color: #25122e;
}
.alpha-hero { background: #100916; border-color: #73522f; }
.alpha-hero::before { background: linear-gradient(90deg,#100916f5 0%,#170d20ed 24%,#22112e96 45%,#10091600 72%); }
.alpha-hero-copy p { color: #e0d4e6; }
.alpha-hero-eyebrow { color: #f2c76e; }
.alpha-hero-bottom { background: #100916b8; border-color: #73522f; }
.alpha-hero-controls > button { background: #25122e; }
.public-site a:focus-visible, .casino-app a:focus-visible, .account-page a:focus-visible {
  outline: 2px solid #edbd62;
  outline-offset: 4px;
}
@container (max-width:650px) {
  .alpha-hero::before { background: linear-gradient(0deg,#100916 0%,#100916 42%,#10091600 75%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Public navigation and content below the existing hero. Hero styles are intentionally untouched. */
.public-header { background: #0e121bf5; border-color: #ffffff12; backdrop-filter: blur(18px); }
.public-header-inner { gap: 42px; }
.public-header .public-button { border-radius: 9px; background: #e8c78a; border-color: #e8c78a; color: #201b12; }
.public-header .public-login { border: 0; padding-inline: 12px; }
.public-nav { color: #aab3c1; }
.public-header .brand b { color: #f4f0e6; }
.public-header .brand b i { color: #bac1cb; }
.public-header .public-menu { min-width: 44px; min-height: 44px; border-radius: 9px; background: #ffffff06; border-color: #ffffff16; }
.public-catalog, .ag-start, .public-help, .ag-invitation, .winners-main {
  --public-surface: #151b26;
  --public-border: #303745;
  --public-muted: #a1adbd;
  --public-gold: #e8c78a;
  color: #f4f0e6;
}
.public-catalog { margin-top: 64px; padding-top: 0; }
.public-catalog .public-section-heading { align-items: flex-end; gap: 24px; margin-bottom: 30px; }
.public-catalog .public-section-heading h2 { margin-top: 10px; font-size: clamp(27px, 3vw, 38px); font-weight: 550; letter-spacing: -.04em; }
.public-catalog .public-section-heading p:not(.ag-section-kicker) { margin-top: 10px; color: #a1adbd; font-size: 14px; line-height: 1.6; }
.ag-section-kicker, .public-catalog .public-section-heading .ag-section-kicker { margin: 0; color: #d8b979; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .18em; }
.public-catalog .catalog-total { padding: 9px 13px; border: 1px solid #e8c78a25; border-radius: 7px; color: #ceb991; font-size: 11px; white-space: nowrap; }
.public-catalog-toolbar { gap: 20px; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #ffffff12; }
.public-catalog .catalog-tabs { gap: 5px; flex-wrap: wrap; }
.public-catalog .catalog-tabs button { min-height: 44px; padding: 10px 19px; border: 1px solid transparent; border-radius: 9px; color: #abb4c1; font-size: 12px; }
.public-catalog .catalog-tabs button:hover { color: #f4f0e6; background: #ffffff05; }
.public-catalog .catalog-tabs button.active { background: #e8c78a13; color: #e8c78a; border-color: #e8c78a30; }
.public-catalog .catalog-search { width: 270px; min-height: 46px; border: 1px solid #ffffff16; border-radius: 9px; background: #0e121b; padding-inline: 14px; }
.public-catalog .catalog-search input { font-size: 13px; min-width: 0; }
.public-catalog .public-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.public-catalog .public-game-card { min-width: 0; border: 1px solid #ffffff0e; border-radius: 15px; overflow: hidden; background: #151b26; text-align: left; transition: transform .2s, border-color .2s, box-shadow .2s; }
.public-catalog .public-game-card:hover { transform: translateY(-4px); border-color: #e8c78a55; box-shadow: 0 16px 35px #0004; }
.public-catalog .public-game-image { height: auto; aspect-ratio: 1.35; border-radius: 0; overflow: hidden; background: #111823; }
.public-catalog .public-game-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .4s; }
.public-catalog .public-game-image:after { background: linear-gradient(transparent 65%, #151b2660); }
.ag-game-open { display: grid; place-items: center; position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 35px; height: 35px; border: 1px solid #ffffff40; border-radius: 50%; background: #101722bc; color: #fff4db; backdrop-filter: blur(8px); }
.public-catalog .public-game-caption { min-height: 82px; gap: 8px; padding: 18px; background: #151b26; border: 0; }
.public-catalog .public-game-caption b { color: #f2ede3; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; white-space: normal; }
.public-catalog .public-game-caption small { margin-top: 6px; color: #96a3b5; font-size: 11px; }
.public-catalog .public-game-caption > svg { display: none; }
.public-catalog .catalog-bottom { margin-top: 28px; padding-top: 0; border: 0; }
.public-catalog .catalog-bottom p { color: #9aa6b7; font-size: 12px; }
.public-catalog .catalog-bottom p > span { display: none; }
.public-catalog .public-secondary, .winners-main .public-secondary { min-height: 46px; padding-inline: 20px; border-radius: 9px; background: #ffffff03; border: 1px solid #ffffff20; color: #e2ddcf; font-size: 12px; }
.public-catalog .catalog-empty { padding: 55px 20px; border-radius: 14px; background: #151b26; }
.ag-start { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; margin-top: 80px; padding: 52px; background: linear-gradient(120deg, #1d202a, #121a26); border: 1px solid #ffffff0e; border-radius: 22px; }
.ag-start-intro h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; font-size: clamp(32px, 3.5vw, 46px); line-height: 1.1; margin-top: 16px; }
.ag-start-intro > p:not(.ag-section-kicker) { max-width: 320px; margin-top: 20px; color: #a1adbd; font-size: 13px; line-height: 1.9; }
.ag-start-intro .public-link { margin-top: 25px; min-height: 44px; display: inline-flex; align-items: center; gap: 14px; color: #e8c78a; font-size: 13px; }
.ag-steps { list-style: none; padding: 0; margin: 0; }
.ag-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 16px; padding: 25px 0; border-bottom: 1px solid #ffffff10; }
.ag-steps li:first-child { padding-top: 0; }
.ag-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-steps li > span { font-size: 11px; color: #ceb991; letter-spacing: .07em; padding-top: 4px; }
.ag-steps h3 { font-size: 16px; font-weight: 550; line-height: 1.5; }
.ag-steps p { margin-top: 7px; font-size: 12px; line-height: 1.8; color: #a1adbd; }
.ag-steps svg { color: #ceb991; margin-top: 3px; }
.public-help { grid-template-columns: .8fr 1.2fr; gap: 70px; margin-top: 80px; padding: 0; }
.public-help .public-eyebrow { color: #d8b979; font-size: 10px; letter-spacing: .18em; }
.public-help h2 { margin-top: 14px; font-size: clamp(27px, 3vw, 37px); line-height: 1.17; font-weight: 550; }
.public-help > div > p:not(.public-eyebrow) { margin-top: 16px; color: #a1adbd; font-size: 13px; }
.ag-help-icon { display: grid; place-items: center; width: 66px; height: 66px; margin-top: 28px; border: 1px solid #e8c78a25; border-radius: 18px; color: #e8c78a; background: #e8c78a09; }
.public-help .public-faq details { border: 0; border-bottom: 1px solid #ffffff15; background: transparent; }
.public-help .public-faq summary, .public-help .public-faq details:first-child summary { min-height: 68px; padding: 21px 0; gap: 20px; font-size: 14px; font-weight: 500; color: #e6e4df; }
.public-help .public-faq summary svg { color: #bdab8b; }
.public-help .public-faq details p { padding: 0 26px 24px 0; font-size: 13px; line-height: 1.85; color: #a1adbd; }
.ag-invitation { display: flex; align-items: center; gap: 25px; padding: 32px 38px; margin: 72px 0 52px; border: 1px solid #e8c78a25; border-radius: 18px; background: linear-gradient(100deg, #25212a, #151b26); }
.ag-invitation > img { width: 76px; height: 76px; -o-object-fit: contain; object-fit: contain; }
.ag-invitation h2 { font-size: clamp(22px, 2.4vw, 29px); font-weight: 550; margin-top: 5px; }
.ag-invitation div > p:last-child { margin-top: 7px; color: #a1adbd; font-size: 13px; }
.ag-invitation .public-button { margin-left: auto; flex-shrink: 0; min-height: 48px; border-radius: 9px; background: #e8c78a; color: #201b12; border-color: #e8c78a; }
.public-footer { background: #0e121b; border-color: #ffffff10; }
.public-footer-main { gap: 26px; padding-block: 32px; }
.public-footer-main nav { gap: 24px; color: #a1adbd; }
.public-footer-main nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
.public-footer-main > span { color: #909caf; font-size: 11px; }
.public-footer-note { border-color: #ffffff10; padding-block: 24px; color: #8996a8; }
.public-footer-note .play-note { color: #8996a8; line-height: 1.8; }
.public-dialog { border-radius: 18px; background: #151b26; border-color: #354052; max-width: 530px; }
.public-dialog .modal-title { color: #f4f0e6; font-size: 25px; padding-right: 36px; }
.public-dialog .public-game-detail { gap: 24px; margin-block: 24px; }
.public-dialog .public-game-detail img { border-radius: 12px; -o-object-fit: cover; object-fit: cover; }
.public-dialog .public-game-detail p { font-size: 13px; line-height: 1.85; color: #a1adbd; }
.public-dialog .public-game-detail p:first-child { color: #e8c78a; font-size: 11px; margin-bottom: 10px; }
.public-dialog .public-button { background: #e8c78a; color: #201b12; border-color: #e8c78a; border-radius: 9px; min-height: 48px; }
.winners-main .winners-heading { text-align: center; padding-block: 45px 30px; }
.winners-main .winners-heading h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 62px); font-weight: 400; margin-top: 20px; }
.winners-main .winners-heading > p { max-width: 520px; margin: 20px auto 0; color: #a1adbd; font-size: 14px; line-height: 1.9; }
.winners-main .daily-rotation-pill { color: #d8b979; border-color: #e8c78a25; background: #e8c78a0a; font-size: 10px; letter-spacing: .12em; }
.winners-main .stat-pill-card, .winners-main .public-winner-card { background: #151b26; border-color: #ffffff10; border-radius: 15px; }
.winners-main .stat-pill-card strong { color: #e8c78a; font-size: 25px; }
.winners-main .winners-empty { background: #151b26; border: 1px solid #ffffff0e; border-radius: 18px; padding: 65px 24px; }
.winners-main .winners-empty h2 { font-weight: 550; }
.winners-main .winners-publication-note { color: #a1adbd; font-size: 12px; border-color: #ffffff10; }
.winners-main .winner-category-tabs { flex-wrap: wrap; gap: 8px; }
.winners-main .winner-tab-btn { min-height: 44px; font-size: 12px; }
@media (max-width: 1050px) {
  .public-header-inner { gap: 24px; padding-inline: 24px; }
  .public-nav { gap: 22px; }
  .public-catalog .public-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ag-start { gap: 35px; padding: 35px; }
  .public-help { gap: 35px; }
  .public-footer-main { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .public-header-inner { height: 70px; gap: 12px; padding-inline: 20px; }
  .public-header .brand b { font-size: 15px; }
  .public-header .brand b i { font-size: 9px; }
  .public-header-actions { gap: 7px; }
  .public-header .public-button { font-size: 12px; padding-inline: 13px; min-height: 43px; }
  .public-header .public-login { font-size: 12px; padding-inline: 5px; }
  .public-header .public-nav.is-open { background: #121924; border: 1px solid #ffffff15; border-radius: 0 0 15px 15px; padding: 12px 20px; box-shadow: 0 15px 30px #0005; }
  .public-header .public-nav.is-open a { min-height: 46px; padding-inline: 12px; }
  .public-catalog { margin-top: 42px; }
  .public-catalog .public-section-heading { align-items: start; margin-bottom: 22px; }
  .public-catalog .catalog-total { display: none; }
  .public-catalog-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .public-catalog .catalog-search { width: 100%; }
  .public-catalog .catalog-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .public-catalog .catalog-tabs button { flex: 1; padding-inline: 12px; white-space: nowrap; }
  .public-catalog .public-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; }
  .public-catalog .public-game-image { aspect-ratio: 1.1; }
  .public-catalog .public-game-caption { padding: 15px 13px; min-height: 79px; }
  .public-catalog .public-game-caption b { font-size: 14px; }
  .public-catalog .catalog-bottom { flex-direction: column; gap: 20px; align-items: center; margin-top: 24px; }
  .ag-start { grid-template-columns: 1fr; gap: 32px; padding: 30px 24px; margin-top: 52px; border-radius: 16px; }
  .ag-start-intro > p:not(.ag-section-kicker) { max-width: 100%; }
  .ag-start-intro h2 { font-size: 36px; }
  .ag-steps { border-top: 1px solid #ffffff12; padding-top: 28px; }
  .ag-steps li { gap: 12px; grid-template-columns: 25px minmax(0, 1fr) 20px; }
  .public-help { grid-template-columns: 1fr; gap: 25px; margin-top: 55px; }
  .ag-help-icon { display: none; }
  .public-help .public-faq summary { min-height: 70px; font-size: 13px; }
  .ag-invitation { flex-wrap: wrap; gap: 20px; padding: 26px; margin-top: 48px; border-radius: 16px; }
  .ag-invitation > img { width: 55px; height: 55px; }
  .ag-invitation > div { flex: 1; min-width: 180px; }
  .ag-invitation .public-button { margin-left: 0; width: 100%; }
  .public-footer-main { padding-block: 25px; gap: 20px; }
  .public-footer-main nav { width: 100%; justify-content: flex-start; gap: 14px 24px; flex-wrap: wrap; }
  .public-footer-main > span { width: 100%; margin: 0; }
  .public-footer-note { align-items: flex-start; }
  .public-dialog .public-game-detail { grid-template-columns: 95px minmax(0, 1fr); gap: 18px; }
  .public-dialog .public-game-detail img { width: 95px; }
  .winners-main .winners-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .winners-main .winners-section-bar { flex-wrap: wrap; gap: 12px; }
  .winners-main .winners-section-bar h2 { font-size: 20px; }
  .winners-main .winners-next { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 390px) {
  .public-header-inner { padding-inline: 14px; gap: 8px; }
  .public-header .brand .brand-mark { width: 29px; height: 29px; }
  .public-header .brand { gap: 6px; }
  .public-header .brand b { font-size: 12px; }
  .public-header .brand b i { font-size: 8px; }
  .public-header .public-button { padding-inline: 10px; font-size: 11px; }
  .public-catalog .catalog-tabs button { font-size: 11px; padding-inline: 9px; }
  .public-catalog .public-game-caption { padding: 13px 11px; }
  .public-catalog .public-game-caption b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-catalog .public-game-card, .public-catalog .public-game-image img { transition: none; }
  .public-catalog .public-game-card:hover { transform: none; }
}

/* Player surfaces: calm hierarchy, readable controls and generous touch targets. */
.casino-app {
  --player-panel: #111a27;
  --player-panel-raised: #172232;
  --player-line: #293444;
  --player-copy: #aeb8c6;
  --player-heading: #f3f0e7;
}
.casino-app .lobby-intro {
  margin-bottom: 30px;
}
.casino-app .lobby-intro h1 {
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.2;
  letter-spacing: -.045em;
  color: var(--player-heading);
  margin-top: 10px;
}
.casino-app .lounge-label {
  font-size: 10px;
  color: var(--player-copy);
  border: 1px solid var(--player-line);
  border-radius: 999px;
  padding: 10px 13px;
}
.casino-app .lounge-label > span {
  background: var(--gold);
}
.casino-app .lobby-shortcuts {
  background: var(--player-panel);
  border-color: var(--player-line);
  border-radius: 16px;
  margin: 24px 0 38px;
}
.casino-app .lobby-shortcuts > a {
  min-height: 90px;
  padding: 20px;
  gap: 13px;
}
.casino-app .lobby-shortcuts > a + a {
  border-color: var(--player-line);
}
.casino-app .lobby-shortcuts b {
  color: var(--player-heading);
  font-size: 13px;
  font-weight: 600;
}
.casino-app .lobby-shortcuts small {
  font-size: 11px;
  line-height: 1.5;
  color: var(--player-copy);
}
.casino-app .lobby-shortcuts a:hover {
  background: #ffffff04;
}
.casino-app .section-heading h2 {
  font-size: clamp(21px, 2vw, 27px);
  color: var(--player-heading);
  line-height: 1.3;
}
.casino-app .section-description {
  font-size: 13px;
  line-height: 1.7;
  max-width: 620px;
  color: var(--player-copy);
  margin: 13px 0 25px;
}
.casino-app .game-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px 20px;
}
.casino-app .game-cover {
  border-radius: 17px;
  border-color: #ffffff15;
  box-shadow: 0 8px 24px #0002;
}
.casino-app .game-caption {
  padding: 12px 1px 0;
  gap: 8px;
}
.casino-app .game-caption > div {
  min-width: 0;
}
.casino-app .game-caption h3 {
  font-size: 15px;
  line-height: 1.3;
  color: var(--player-heading);
  overflow-wrap: anywhere;
}
.casino-app .game-caption p {
  font-size: 11px;
  color: var(--player-copy);
  line-height: 1.5;
}
.casino-app .game-caption > button {
  width: 40px;
  min-width: 40px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #c8b382;
}
.casino-app .game-caption > button:hover {
  background: #ffffff06;
}
.casino-app .favorite-button {
  top: 10px;
  right: 10px;
  bottom: auto;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff20;
  background: #0a111dd9;
}
.casino-app .game-cover-action {
  background: #09101b70;
}
.casino-app .game-cover-action > span {
  width: 54px;
  height: 54px;
  color: #18202b;
  background: #e6c782;
}
.casino-app .catalog-toolbar {
  gap: 16px;
  flex-wrap: wrap;
}
.casino-app .catalog-toolbar .segmented {
  flex: 0 1 auto;
  max-width: 100%;
}
.casino-app .segmented {
  background: #0d1520;
  border-color: var(--player-line);
  border-radius: 12px;
}
.casino-app .segmented > button {
  min-height: 44px;
  font-size: 12px;
  color: #aeb8c6;
}
.casino-app .segmented > button.selected {
  color: #f3d599;
  background: #243043;
  box-shadow: 0 2px 6px #0002;
}
.casino-app .search-field {
  max-width: 300px;
  min-width: 210px;
  min-height: 50px;
  background: #111a27;
  border-color: var(--player-line);
  border-radius: 12px;
  color: #aeb8c6;
}
.casino-app .search-field:focus-within {
  border-color: #dfc087;
  box-shadow: 0 0 0 3px #dfc08716;
}
.casino-app .search-field input {
  color: #f3f0e7;
  font-size: 14px;
}
.casino-app .search-field input::-moz-placeholder {
  color: #929eae;
}
.casino-app .search-field input::placeholder {
  color: #929eae;
}
.casino-app .catalog-caption {
  color: var(--player-copy);
  font-size: 12px;
}
.casino-app .catalog-caption > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.casino-app .catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 30px;
}
.casino-app .promo-grid {
  margin-top: 38px;
  gap: 20px;
}
.casino-app .promo-card {
  border-radius: 20px;
  border-color: #d2b8792b;
  padding: 28px;
  min-height: 208px;
}
.casino-app .promo-gold {
  background: radial-gradient(ellipse at right, #b58a4620, transparent 75%), #18212b;
}
.casino-app .promo-green {
  background: radial-gradient(ellipse at right, #437f9c20, transparent 75%), #131f2c;
}
.casino-app .promo-card h2 {
  font-size: clamp(25px, 2.6vw, 33px);
  line-height: 1.18;
  color: #f0e6d0;
}
.casino-app .promo-card .eyebrow {
  font-size: 10px;
}
.casino-app .promo-card div > span:not(.eyebrow) {
  font-size: 12px;
}
.casino-app .promo-medallion {
  background: #d7b26e09;
  width: 82px;
  height: 82px;
}
.casino-app .promo-green .promo-medallion {
  border-color: #87adc645;
  color: #adc8db;
}
.casino-app :is(.account-card, .balance-card, .surface-panel, .chat-panel, .profile-identity, .notification-card, .tier-card) {
  border-color: var(--player-line);
  border-radius: 18px;
  background: var(--player-panel);
  min-width: 0;
}
.casino-app :is(.quiet-card, .faq-list details, .reward-nav > a) {
  border-color: var(--player-line);
  background: #121d2b;
  border-radius: 13px;
  color: var(--player-copy);
}
.casino-app :is(.quiet-card h3, .faq-list summary, .balance-card > p, .reward-nav h3, .notification-card h3) {
  color: var(--player-heading);
}
.casino-app :is(.quiet-card p, .faq-list details p, .balance-card > span:not(.empty-icon), .reward-nav p, .notification-card p) {
  color: var(--player-copy);
  font-size: 13px;
  line-height: 1.7;
}
.casino-app .account-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}
.casino-app .account-card {
  padding: 27px;
  background: radial-gradient(ellipse at top left, #d3af6011, transparent 75%), var(--player-panel);
}
.casino-app .account-card .status-label {
  color: #c1b899;
  font-size: 10px;
  line-height: 1.6;
}
.casino-app .account-card-top img {
  width: 62px;
  height: 62px;
  -o-object-fit: cover;
     object-fit: cover;
}
.casino-app .account-balance span {
  font-size: 12px;
  color: var(--player-copy);
}
.casino-app .account-balance strong {
  color: #ead6ab;
  font-size: 37px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.casino-app .wallet-grid {
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.casino-app .wallet-grid > .balance-card:last-child {
  display: block;
}
.casino-app .cash-card {
  background: radial-gradient(ellipse at top right, #dbb86e1e, transparent 75%), #172231;
  border-color: #cfb47359;
  border-radius: 20px;
  padding: 30px;
}
.casino-app .cash-card > strong {
  color: #f1ddb4;
  font-size: clamp(38px, 4vw, 54px);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.casino-app .cash-card > div {
  flex-wrap: wrap;
}
.casino-app .balance-card > p {
  font-size: 13px;
}
.casino-app .balance-card > strong {
  color: #eed8aa;
  font-variant-numeric: tabular-nums;
}
.casino-app .wallet-watermark {
  color: #d1b37b20;
}
.casino-app :is(.panel-heading, th, td, .chat-heading, .chat-composer) {
  border-color: var(--player-line);
}
.casino-app .panel-heading {
  padding: 23px 25px;
  flex-wrap: wrap;
}
.casino-app th {
  color: #a4afbd;
  font-size: 10px;
}
.casino-app td {
  color: #d0d7df;
  font-size: 13px;
}
.casino-app td > small {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #91a0b3;
}
.casino-app .panel-footnote {
  color: var(--player-copy);
  font-size: 12px;
  line-height: 1.7;
}
.casino-app .membership-banner {
  border-color: #d0b57535;
  background: radial-gradient(ellipse at top right, #d6b77616, transparent 65%), #142132;
  border-radius: 20px;
}
.casino-app :is(.membership-banner p, .tier-card ul) {
  color: var(--player-copy);
}
.casino-app .reward-item {
  border-color: var(--player-line);
}
.casino-app .reward-item p {
  color: var(--player-copy);
}
.casino-app .tier-card.current {
  border-color: #d0b5758a;
  background: #1c2734;
}
.casino-app .support-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 28px;
}
.casino-app .chat-heading {
  min-height: 91px;
}
.casino-app .chat-heading p {
  color: var(--player-copy);
  font-size: 12px;
  line-height: 1.5;
}
.casino-app .support-avatar {
  color: #ddc593;
  background: #d6b7760f;
  border-color: #d6b77635;
}
.casino-app .chat-welcome p {
  color: var(--player-copy);
  font-size: 13px;
}
.casino-app .chat-empty {
  color: var(--player-copy);
}
.casino-app .message {
  background: #1a293c;
  color: #e0e6ed;
  border-color: #3e50634d;
  max-width: 90%;
}
.casino-app .message.from-player {
  background: #2a2b28;
  border-color: #ae956638;
}
.casino-app .message :is(small, time) {
  color: #a5b0be;
  font-size: 10px;
}
.casino-app .message-actions:focus-within,
.casino-app .message:focus-within .message-actions {
  opacity: 1;
}
.casino-app .message-actions button {
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
}
.casino-app .chat-composer {
  align-items: stretch;
}
.casino-app .chat-composer textarea {
  width: 100%;
  background: #0b1420;
  border-color: #344256;
  color: #f3f0e7;
  font-size: 14px;
}
.casino-app .chat-composer button {
  min-height: 44px;
  min-width: 44px;
}
.casino-app .faq-list summary {
  min-height: 30px;
  font-size: 13px;
  line-height: 1.6;
}
.casino-app .profile-identity {
  background: radial-gradient(ellipse at top, #d9b97516, transparent 70%), #111c2b;
}
.casino-app .profile-avatar {
  background: #d3b4730c;
  border-color: #d3b47388;
}
.casino-app .profile-identity p {
  color: var(--player-copy);
  font-size: 13px;
}
.casino-app .notification-card {
  padding: 24px;
}
.casino-app .notification-card > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.casino-app .notification-card small {
  font-size: 11px;
  color: #9aabba;
}
.winner-marquee {
  border-color: #cdb47b2e;
  background: #111c28;
  border-radius: 14px;
  padding: 17px 20px;
}
.marquee-heading :is(b, small), .marquee-item small {
  font-size: 10px;
}
.marquee-heading small, .marquee-item small {
  color: #a5b2bf;
}
.marquee-controls button {
  min-width: 40px;
  height: 40px;
}
.marquee-controls a {
  min-height: 40px;
  font-size: 11px;
}
.modal-content {
  background: #111c2b;
  border-color: #455366;
  border-radius: 22px;
  padding: 30px;
  scrollbar-gutter: stable;
}
.modal-content .segmented {
  flex-wrap: wrap;
  background: #0d1520;
  border-color: #2c394b;
}
.modal-content .segmented > button {
  min-height: 44px;
  color: #aeb8c6;
}
.modal-content .segmented > button.selected {
  color: #f3d599;
  background: #243043;
}
.modal-content .quiet-card {
  background: #182335;
  color: #b4bfcd;
  border-color: #344357;
  align-items: flex-start;
}
.modal-content .quiet-card h3 {
  color: #f3ead7;
}
.modal-content .game-onboarding {
  gap: 17px;
}
.modal-content .game-onboarding img {
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.modal-content .game-onboarding p {
  color: #aeb8c6;
  font-size: 13px;
  line-height: 1.7;
}
.modal-content .game-balance-display {
  background: linear-gradient(130deg, #243041, #172434);
  border-color: #d4b8793d;
  gap: 15px;
}
.modal-content .game-balance-display > span {
  color: #b6c0cc;
  font-size: 12px;
}
.modal-content .game-balance-display strong {
  color: #f0d9aa;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.modal-content .credential-row {
  border-color: #2c3b4f;
}
.modal-content .credential-row small {
  font-size: 10px;
  color: #9eaec0;
}
.modal-content .icon-button {
  min-width: 44px;
  min-height: 44px;
}
.manual-service-note {
  background: #1a2738;
  border-color: #374456;
  color: #e6c994;
  border-radius: 14px;
}
.manual-service-note p, .manual-request-form p, .manual-notice, .manual-help {
  color: #b2bfcd;
  font-size: 13px;
}
.manual-service-badge {
  color: #d1bc90;
  font-size: 10px;
  line-height: 1.6;
}
.game-requests {
  background: #111b2a;
  border-color: #2a394d;
  border-radius: 18px;
}
.manual-request {
  border-color: #2a394d;
  padding-top: 18px;
}
.manual-request-top strong {
  color: #eeeade;
  font-size: 13px;
}
.manual-request-top small {
  color: #94a5b8;
  font-size: 11px;
  line-height: 1.6;
}
.manual-status {
  background: #d4b5760c;
  border: 1px solid #d4b57622;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
}
.manual-request p {
  color: #acb9c9;
  font-size: 12px;
}
.manual-cancel {
  min-height: 40px;
  font-size: 12px;
}
.manual-actions .button-secondary {
  min-height: 46px;
  border-color: #3b4b60;
  background: #1c2b3f;
  color: #e1dccd;
}
.manual-actions .button-secondary.selected {
  border-color: #d6b779;
  background: #d6b77913;
}
@media (min-width: 1500px) {
  .casino-app .game-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .casino-app .catalog-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .casino-app .wallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .casino-app .cash-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1000px) {
  .casino-app .support-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .casino-app .game-grid, .casino-app .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .casino-app .lobby-shortcuts > a {
    padding: 16px;
    gap: 10px;
  }
  .casino-app .lobby-shortcuts > a > svg:last-child {
    display: none;
  }
  .casino-app .promo-card {
    padding: 24px;
  }
  .casino-app .promo-medallion {
    width: 62px;
    height: 62px;
  }
  .casino-app .promo-medallion svg {
    width: 36px;
  }
}
@media (max-width: 760px) {
  .casino-app .lounge-label {
    display: none;
  }
  .casino-app .lobby-intro {
    margin-bottom: 23px;
  }
  .casino-app .lobby-shortcuts {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 32px;
  }
  .casino-app .lobby-shortcuts > a {
    min-height: 76px;
    padding: 16px 20px;
  }
  .casino-app .lobby-shortcuts > a + a {
    border-left: 0;
    border-top: 1px solid var(--player-line);
  }
  .casino-app .lobby-shortcuts > a > svg:last-child {
    display: block;
  }
  .casino-app .section-heading {
    flex-wrap: wrap;
    gap: 13px;
  }
  .casino-app .section-heading .page-link {
    min-height: 36px;
  }
  .casino-app .catalog-toolbar {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 14px;
    margin-bottom: 20px;
  }
  .casino-app .catalog-toolbar .segmented {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .casino-app .catalog-toolbar .segmented > button {
    flex: 0 0 auto;
    padding: 10px 14px;
  }
  .casino-app .catalog-toolbar .search-field {
    width: 100%;
    max-width: none;
  }
  .casino-app .search-field input, .casino-app .chat-composer textarea {
    font-size: 16px;
  }
  .casino-app .promo-grid {
    grid-template-columns: 1fr;
  }
  .casino-app .promo-card {
    min-height: 190px;
    padding: 25px;
  }
  .casino-app .promo-card h2 {
    font-size: 29px;
  }
  .casino-app .promo-medallion {
    width: 76px;
    height: 76px;
  }
  .casino-app .wallet-grid {
    gap: 14px;
  }
  .casino-app .cash-card {
    padding: 25px;
  }
  .casino-app .balance-card {
    padding: 22px;
  }
  .casino-app .panel-heading {
    padding: 20px;
  }
  .casino-app .notification-card {
    padding: 20px;
    gap: 15px;
    align-items: flex-start;
  }
}
@media (max-width: 520px) {
  .casino-app .game-grid, .casino-app .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }
  .casino-app .game-caption {
    gap: 4px;
  }
  .casino-app .game-caption h3 {
    font-size: 14px;
  }
  .casino-app .game-caption > button {
    min-width: 28px;
    width: 28px;
  }
  .casino-app .favorite-button {
    width: 38px;
    height: 38px;
    top: 8px;
    right: 8px;
  }
  .casino-app .catalog-caption > span:last-child {
    display: none;
  }
  .casino-app .wallet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .casino-app .balance-card {
    padding: 24px;
  }
  .casino-app .cash-card > div > button {
    flex: 1;
    min-width: 110px;
  }
  .casino-app .account-card {
    padding: 24px;
  }
  .casino-app .chat-heading {
    padding: 18px;
  }
  .casino-app .message-list {
    padding: 18px 14px;
  }
  .casino-app .message {
    max-width: 95%;
  }
  .modal-content {
    padding: 25px 20px;
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 19px;
  }
  .modal-content .game-onboarding {
    align-items: flex-start;
  }
  .modal-content .game-onboarding img {
    width: 65px;
    height: 65px;
  }
  .modal-content .game-onboarding h3 {
    font-size: 21px;
  }
  .game-requests {
    padding: 21px;
  }
  .game-requests-compact {
    padding: 17px;
  }
  .manual-service-note {
    padding: 14px;
    gap: 10px;
  }
}
@media (hover: none) {
  .casino-app .message-actions {
    opacity: 1;
  }
  .casino-app .message-actions button {
    min-height: 40px;
    min-width: 40px;
  }
  .casino-app .game-cover-action {
    opacity: 1;
    background: linear-gradient(transparent 68%, #0a132660);
    align-items: end;
    justify-items: start;
    padding: 12px;
  }
  .casino-app .game-cover-action > span {
    width: 36px;
    height: 36px;
    background: #0b1426cd;
    color: #f5e3bd;
    border: 1px solid #ffffff2a;
    box-shadow: none;
  }
  .casino-app .game-cover-action svg {
    width: 16px;
    height: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .casino-app .game-cover > img {
    transition: none;
  }
}

/* Keep long account values and dense panels inside narrow app windows. */
.casino-app :is(.page-content, .panel, .table-scroll, .chat-panel, .wallet-grid > *, .profile-layout > *, .support-layout > *, .account-grid > *) {
  min-width: 0;
  max-width: 100%;
}
.casino-app .table-scroll {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.casino-app :is(.account-card-top > div, .chat-heading > div, .credential-row > div, .credential-row code) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.casino-app :is(.account-card-top img, .support-avatar) { flex-shrink: 0; }
.casino-app .message-list { overscroll-behavior-y: contain; }
.casino-app .chat-panel { overflow: clip; }
.modal-content {
  width: min(520px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
}
.modal-content .modal-title { padding-right: 44px; overflow-wrap: anywhere; }
.modal-content :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { min-width: 0; max-width: 100%; }

@media (max-width: 1024px) {
  .casino-app .chat-composer {
    scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .casino-app .chat-composer:focus-within {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    background: var(--player-panel);
  }
}
@media (max-width: 760px) {
  .casino-app .notification-card {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
  }
  .casino-app .notification-card > button { grid-column: 2; justify-self: start; }
  .casino-app .message-list { height: clamp(180px, 45dvh, 360px); }
  .casino-app .chat-composer > .flex { min-width: 0; }
  .casino-app .chat-composer > .flex:has(> div > .animate-ping) { flex-wrap: wrap; gap: 8px; }
  .modal-content :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { font-size: 16px; }
  .modal-content .game-balance-display { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .casino-app .page-content { padding-inline: 14px; }
  .casino-app :is(.cash-card, .balance-card, .account-card, .profile-identity) { padding-inline: 18px; }
  .casino-app .account-card-top { gap: 10px; }
  .casino-app .account-card h2 { font-size: 24px; }
  .casino-app .cash-card > strong { font-size: 38px; }
  .modal-content .game-onboarding { flex-wrap: wrap; }
  .modal-content .game-onboarding > div { min-width: 0; width: 100%; }
}
@media (pointer: coarse) {
  .casino-app :is(.icon-button, .favorite-button, .game-caption > button, .message-actions button, .text-link, .manual-cancel),
  .modal-content .icon-button { min-width: 44px; min-height: 44px; }
  .casino-app .favorite-button { width: 44px; height: 44px; }
  .casino-app .faq-list summary { min-height: 44px; }
}

/* Account access and the player's navigation share the public lounge palette. */
.social-auth-page {
  --public-bg: #0c1018;
  --public-surface: #151b26;
  --public-border: #2b3342;
  --public-muted: #a1adbd;
  --public-gold: #e8c78a;
  background: radial-gradient(ellipse at 20% 35%, #b4894020, transparent 45%), #0c1018;
  color: #f4f0e6;
}
.social-auth-page .account-header {
  min-height: 84px;
  padding-inline: clamp(24px, 5vw, 80px);
  background: #0c1018e8;
  border-color: #ffffff0e;
}
.social-auth-page .account-back { min-height: 44px; color: #bcc5d2; font-size: 13px; }
.social-auth-page .account-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .93fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 56px 36px;
}
.account-kicker { color: #d8b979; font-size: 10px; font-weight: 650; letter-spacing: .18em; line-height: 1.6; }
.account-welcome h2 {
  margin-top: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.8vw, 64px);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.045em;
  color: #f5efdf;
}
.account-welcome-copy { max-width: 360px; margin-top: 24px; color: #a1adbd; font-size: 15px; line-height: 1.85; }
.account-emblem { position: relative; display: grid; justify-items: center; align-content: center; width: 100%; max-width: 340px; height: 260px; margin: 20px auto 0; }
.account-emblem:before, .account-emblem:after { content: ""; position: absolute; width: 210px; height: 210px; border: 1px solid #e8c78a18; border-radius: 50%; pointer-events: none; }
.account-emblem:after { width: 250px; height: 250px; border-style: dashed; border-color: #e8c78a12; }
.account-emblem img { position: relative; z-index: 1; width: 132px; height: 132px; -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0 14px 38px #d2a24930); }
.account-emblem-orbit { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #ca9b4c13, transparent 62%); }
.account-emblem-caption { position: relative; z-index: 1; margin-top: 8px; color: #cbb68d; font-size: 8px; letter-spacing: .3em; }
.account-welcome-features { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid #ffffff12; }
.account-welcome-features > span { display: flex; flex-direction: column; gap: 12px; color: #b3bfcd; font-size: 11px; }
.account-welcome-features svg { color: #d8b979; }
.social-auth-page .access-card {
  max-width: none;
  min-width: 0;
  padding: 36px;
  border: 1px solid #ffffff12;
  border-radius: 22px;
  background: linear-gradient(145deg, #1a202cf5, #121823);
  box-shadow: 0 30px 80px #00000030, inset 0 1px #ffffff05;
}
.social-auth-page .access-card > .account-kicker { margin-bottom: 14px; font-size: 9px; }
.social-auth-page .access-card h1 { font-size: clamp(28px, 3vw, 35px); font-weight: 550; letter-spacing: -.035em; color: #f4f0e6; }
.social-auth-page .account-intro { margin-top: 12px; margin-bottom: 25px; color: #a8b3c3; font-size: 13px; }
.social-auth-page .social-auth-button {
  min-height: 54px;
  padding: 12px 16px;
  border-color: #529eca66;
  border-radius: 11px;
  background: #183045;
  color: #eaf6ff;
  font-size: 14px;
  font-weight: 600;
}
.social-auth-page .social-auth-button:hover:not(:disabled) { background: #1e3d55; border-color: #76c1ef; }
.social-auth-page .social-auth-button:disabled { color: #a5b1c0; border-color: #344253; background: #1b2532; cursor: not-allowed; }
.social-auth-page .social-auth-icon, .social-auth-page .social-auth-arrow { color: #a4dafb; }
.social-auth-page .social-auth-button small { color: #aab7c7; font-size: 10px; }
.social-auth-page .social-auth-hint { font-size: 12px; line-height: 1.7; color: #a1adbd; margin-block: 12px 20px; }
.social-auth-page .account-eligibility { margin-top: 20px; padding: 12px; border-radius: 9px; background: #ffffff04; border: 1px solid #ffffff08; color: #bcc5d2; font-size: 11px; cursor: pointer; }
.social-auth-page .account-eligibility input { width: 18px; height: 18px; margin-top: 1px; accent-color: #e8c78a; }
.social-auth-page .social-auth-email { margin-top: 24px; padding-top: 14px; border-color: #ffffff13; }
.social-auth-page .social-auth-email summary { color: #c1c9d5; font-size: 12px; min-height: 36px; }
.social-auth-page .social-auth-email form { margin-top: 16px; gap: 17px; }
.social-auth-page .access-card .field { min-height: 48px; border: 1px solid #354051; border-radius: 9px; background: #0e1520; color: #f4f0e6; font-size: 14px; }
.social-auth-page .access-card .field::-moz-placeholder { color: #8491a3; }
.social-auth-page .access-card .field::placeholder { color: #8491a3; }
.social-auth-page .access-card .field:focus { border-color: #dfc18a; outline: 3px solid #dfc18a18; }
.social-auth-page .account-password-label, .social-auth-page .field-label > span { color: #c8d0dc; font-size: 12px; }
.social-auth-page .account-password > button { width: 44px; color: #9eabbd; }
.social-auth-page .access-card .public-button { min-height: 50px; border-radius: 10px; color: #211d15; background: linear-gradient(110deg, #edd4a2, #d7af6a); font-size: 13px; }
.social-auth-page .access-card .public-button:disabled { opacity: .48; cursor: not-allowed; }
.social-auth-page .account-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; -moz-column-gap: 5px; column-gap: 5px; margin-top: 19px; color: #a3afc0; }
.social-auth-page .account-switch button { min-height: 36px; margin-left: 0; color: #e8c78a; }
.social-auth-page .account-assistance { margin-top: 17px; padding-top: 12px; border-color: #ffffff13; }
.social-auth-page .account-assistance summary { min-height: 36px; color: #aeb9c9; }
.social-auth-page .account-assistance p { color: #a8b3c3; }
.social-auth-page .social-auth-status, .social-auth-page .social-auth-methods-error { color: #b6c1d0; font-size: 12px; }
.social-auth-page .social-auth-methods-error button, .social-auth-page .telegram-login-actions button { min-height: 44px; }
.social-auth-page .account-footer { gap: 24px; padding: 22px clamp(24px, 5vw, 80px); border-color: #ffffff0e; color: #8f9bad; }
.social-auth-page .account-footer .play-note { color: #8f9bad; font-size: 11px; }
.social-auth-page .account-footer > span { font-size: 11px; }
.social-auth-page :is(button, summary, input, a):focus-visible { outline: 2px solid #e8c78a; outline-offset: 4px; }

.casino-app .sidebar { width: 236px; padding: 30px 18px 24px; background: #101620; border-color: #ffffff0c; }
.casino-app .sidebar-brand { padding: 0 10px 36px; }
.casino-app .sidebar .brand b { font-size: 15px; }
.casino-app .nav-caption { color: #728096; font-size: 9px; letter-spacing: .16em; padding-inline: 14px; }
.casino-app .side-link { min-height: 48px; padding: 12px 14px; margin-bottom: 6px; gap: 12px; border-radius: 10px; font-size: 12px; color: #a2afc2; }
.casino-app .side-link svg { flex-shrink: 0; }
.casino-app .side-link:hover { background: #ffffff04; color: #f0e5cb; }
.casino-app .side-link.active { color: #edd2a2; border-color: #dfbd7830; background: linear-gradient(100deg, #d8b97419, #d8b97404); }
.casino-app .sidebar-divider { margin: 18px 12px; background: #ffffff0d; }
.casino-app .sidebar-feature { margin: 28px 0 22px; padding: 24px 12px; background: radial-gradient(ellipse at top, #d8b97412, transparent 80%); border-color: #dfbd781b; border-radius: 14px; }
.casino-app .sidebar-feature p { font-size: 19px; color: #e6dbc1; }
.casino-app .sidebar-feature > span:not(.mini-crown) { color: #929fb1; font-size: 11px; }
.casino-app .sidebar-feature > a { min-height: 36px; margin-top: 10px; font-size: 11px; }
.casino-app .sidebar-bottom { color: #8794a7; font-size: 10px; }
.casino-app .sidebar-bottom b { color: #acb7c8; }
.casino-app .sidebar-close, .casino-app .sidebar-account-links { display: none; }
.casino-app .main-shell { margin-left: 236px; }
.casino-app .topbar { height: 80px; padding-inline: 36px; background: #0d131dec; border-color: #ffffff0d; }
.casino-app .breadcrumb { color: #8290a5; font-size: 12px; gap: 12px; }
.casino-app .breadcrumb b { color: #e1e5ec; font-weight: 500; }
.casino-app .topbar-actions { gap: 15px; }
.casino-app .topbar .icon-button { min-width: 44px; min-height: 44px; border-radius: 11px; color: #a7b4c7; }
.casino-app .topbar .icon-button:hover { color: #edcf9c; background: #ffffff05; }
.casino-app .wallet-chip { min-height: 44px; padding: 6px 7px 6px 13px; border-radius: 11px; border-color: #d9be8535; background: #d9be8508; color: #b8c3d3; }
.casino-app .wallet-chip small { color: #97a5b9; font-size: 8px; letter-spacing: .11em; }
.casino-app .wallet-chip b { color: #f0dfbe; font-size: 13px; font-variant-numeric: tabular-nums; }
.casino-app .wallet-chip .wallet-plus { width: 29px; height: 29px; background: #e8c78a; color: #262116; border-radius: 7px; font-size: 19px; }
.casino-app .avatar { width: 40px; height: 40px; color: #ead1a4; border-color: #cfb06c4a; background: #d8b9740d; font-size: 17px; }
.casino-app .sign-in-link { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
.casino-app .site-footer { border-color: #ffffff0d; background: #0e141e; color: #8f9db1; }
.casino-app .site-footer .play-note { color: #8f9db1; }
.casino-app .telegram-contact-panel { background: #161e2b; border-color: #334052; border-radius: 14px; color: #b9c4d4; }
.casino-app .telegram-contact-panel h2 { color: #eee4ce; }

@media (max-width: 1100px) {
  .social-auth-page .account-main { gap: 36px; padding-inline: 28px; grid-template-columns: minmax(0, .85fr) minmax(350px, 1fr); }
  .social-auth-page .access-card { padding: 30px; }
  .account-welcome h2 { font-size: 49px; }
  .account-welcome-copy { font-size: 14px; }
  .account-welcome-features { gap: 15px; }
  .account-welcome-features > span { font-size: 10px; }
}
@media (max-width: 1024px) {
  .casino-app .sidebar { transform: translateX(-100%); transition: transform 180ms ease; width: min(300px, calc(100vw - 48px)); padding: 32px 20px 24px; z-index: 81; }
  .casino-app .sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 80px #00000050; }
  .casino-app .sidebar-brand { padding-right: 35px; }
  .casino-app .sidebar-close { display: grid; position: absolute; right: 13px; top: 27px; width: 44px; height: 44px; color: #b7c3d4; }
  .casino-app .sidebar-account-links { display: block; }
  .casino-app .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: #020711aa; backdrop-filter: blur(5px); }
  .casino-app .side-link { font-size: 13px; }
  .casino-app .main-shell { margin-left: 0; }
  .casino-app .topbar { height: 74px; padding-inline: 24px; gap: 12px; }
  .casino-app .breadcrumb { display: none; }
  .casino-app .mobile-menu, .casino-app .mobile-brand { display: flex; }
  .casino-app .mobile-brand .brand { gap: 8px; }
  .casino-app .mobile-brand .brand-mark { display: grid; width: 32px; height: 34px; background: transparent; border: 0; }
  .casino-app .mobile-brand b { font-size: 13px; }
  .casino-app .mobile-brand small { display: none; }
  .casino-app .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: 0; inset-inline: 0; z-index: 60; padding: 8px max(12px, calc((100vw - 640px) / 2)) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #e8c78a20; background: #111924f5; backdrop-filter: blur(20px); }
  .casino-app .bottom-nav > a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; gap: 6px; border-radius: 11px; color: #94a3b8; font-size: 10px; }
  .casino-app .bottom-nav > a.active { background: #e8c78a0c; color: #ebcc97; }
  .casino-app .bottom-nav > a.active svg { filter: none; }
  .casino-app .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .social-auth-page .account-header { min-height: 72px; padding-inline: 22px; }
  .social-auth-page .account-main { display: block; max-width: 540px; padding: 28px 22px 40px; }
  .account-welcome { display: none; }
  .social-auth-page .access-card { padding: 30px 26px; border-radius: 18px; }
  .social-auth-page .access-card h1 { font-size: 32px; }
  .social-auth-page .access-card .field { font-size: 16px; }
  .social-auth-page .account-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .social-auth-page .account-footer .play-note { max-width: 430px; line-height: 1.7; }
  .casino-app .topbar { height: 70px; padding-inline: 16px; }
  .casino-app .topbar-actions { gap: 8px; }
  .casino-app .wallet-chip { padding: 6px; gap: 5px; }
  .casino-app .wallet-chip > svg, .casino-app .wallet-chip small { display: none; }
  .casino-app .wallet-chip span { gap: 0; }
  .casino-app .wallet-chip b { padding-left: 3px; font-size: 12px; }
  .casino-app .wallet-chip .wallet-plus { width: 26px; height: 26px; }
  .casino-app .notifications-button { display: grid; }
  .casino-app .preview-bar { flex-wrap: wrap; gap: 5px 9px; padding: 10px 20px; font-size: 10px; }
}
@media (max-width: 480px) {
  .social-auth-page .account-header { min-height: 66px; padding-inline: 18px; }
  .social-auth-page .account-back { font-size: 11px; gap: 6px; }
  .social-auth-page .account-main { padding: 22px 14px 32px; }
  .social-auth-page .access-card { padding: 26px 20px; }
  .social-auth-page .account-intro { font-size: 12px; }
  .social-auth-page .social-auth-button { gap: 10px; padding-inline: 13px; font-size: 13px; }
  .social-auth-page .social-auth-button small { font-size: 9px; }
  .casino-app .topbar { padding-inline: 12px; gap: 8px; }
  .casino-app .topbar > div:first-child { gap: 5px; }
  .casino-app .mobile-brand .brand { gap: 5px; }
  .casino-app .mobile-brand b { font-size: 11px; }
  .casino-app .mobile-brand .brand-mark { width: 27px; height: 30px; }
  .casino-app .notifications-button { display: none; }
  .casino-app .avatar { width: 36px; height: 36px; }
  .casino-app .topbar-actions > .button-gold { padding-inline: 12px; min-height: 42px; font-size: 11px; }
  .casino-app .topbar-actions > .button-gold svg { display: none; }
  .casino-app .sign-in-link { font-size: 11px; }
}
@media (max-width: 380px) {
  .casino-app .mobile-brand b { display: none; }
  .social-auth-page .access-card { padding-inline: 17px; }
  .social-auth-page .social-auth-button { font-size: 12px; gap: 8px; }
  .social-auth-page .social-auth-button small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .casino-app .sidebar { transition: none; }
}

/* Installed windows must keep controls clear of notches and the home indicator. */
.casino-app .sidebar {
  padding-top: calc(30px + env(safe-area-inset-top, 0px));
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
}
.casino-app .topbar {
  height: calc(80px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: calc(36px + env(safe-area-inset-right, 0px));
}
.social-auth-page .account-header {
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(84px + env(safe-area-inset-top, 0px));
}
.social-auth-page .account-footer { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.social-auth-page .account-header > * { min-width: 0; }
.social-auth-page .account-back { flex-shrink: 0; }
.public-header { padding-top: env(safe-area-inset-top, 0px); }
.public-header-inner {
  padding-left: max(40px, env(safe-area-inset-left, 0px));
  padding-right: max(40px, env(safe-area-inset-right, 0px));
}
.public-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
.casino-app .install-app-inline { min-height: 44px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .casino-app .sidebar {
    padding-top: calc(32px + env(safe-area-inset-top, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
  }
  .casino-app .sidebar-close { top: calc(27px + env(safe-area-inset-top, 0px)); }
  .casino-app .topbar {
    height: calc(74px + env(safe-area-inset-top, 0px));
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
  }
  .casino-app .bottom-nav {
    padding-left: max(12px, env(safe-area-inset-left, 0px), calc((100vw - 640px) / 2));
    padding-right: max(12px, env(safe-area-inset-right, 0px), calc((100vw - 640px) / 2));
  }
  .casino-app .page-content { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .public-header-inner { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .casino-app .topbar {
    height: calc(70px + env(safe-area-inset-top, 0px));
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  }
  .social-auth-page .account-header { min-height: calc(72px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 480px) {
  .casino-app .topbar { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  .social-auth-page .account-header { min-height: calc(66px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 380px) {
  .public-header-inner { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .social-auth-page .account-header .brand b { font-size: 13px; }
  .social-auth-page .account-header .brand { gap: 7px; }
  .social-auth-page .account-header .brand-mark { width: 30px; }
}
@media (max-height: 500px) and (max-width: 1024px) {
  .casino-app .sidebar-feature { display: none; }
  .casino-app .topbar { height: calc(58px + env(safe-area-inset-top, 0px)); }
  .casino-app .bottom-nav { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .casino-app .bottom-nav > a { min-height: 44px; gap: 3px; }
}

/* Decorative photography keeps the category controls within the lounge palette. */
.ag-category-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 32px;
}
.ag-category-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: 276px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #d9bd862c;
  border-radius: 18px;
  background: #150f1c;
  color: #f8f2e8;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px #07050a22;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ag-category-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  pointer-events: none;
  transition: transform 450ms ease;
}
.ag-category-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #100b1710 10%, #130d1a32 32%, #120c1bd9 70%, #100b17fa 100%), linear-gradient(90deg, #130d1a45, transparent 75%);
  pointer-events: none;
}
.ag-category-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}
.ag-category-eyebrow {
  color: #e7c994;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.ag-category-name {
  margin: 9px 0 8px;
  color: #fbf5eb;
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.ag-category-description {
  max-width: calc(100% - 38px);
  color: #ded7e1;
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
}
.ag-category-arrow {
  position: absolute;
  right: 23px;
  bottom: 25px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e7c99445;
  border-radius: 50%;
  background: #e7c9940b;
  color: #e7c994;
  pointer-events: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.ag-category-tile[aria-pressed="true"] { border-color: #e7c994; box-shadow: 0 0 0 1px #e7c99433; }
.ag-category-tile:focus-visible { outline: 3px solid #e7c994; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .ag-category-tile:hover { transform: translateY(-3px); border-color: #e7c99480; box-shadow: 0 18px 38px #07050a50; }
  .ag-category-tile:hover .ag-category-image { transform: scale(1.035); }
  .ag-category-tile:hover .ag-category-arrow { border-color: #e7c99499; background: #e7c99419; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .ag-category-tiles { gap: 12px; }
  .ag-category-tile { min-height: 252px; padding: 21px 18px; border-radius: 16px; }
  .ag-category-image { -o-object-position: 80% center; object-position: 80% center; }
  .ag-category-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .ag-category-name { font-size: 25px; }
  .ag-category-description { font-size: 11px; max-width: calc(100% - 24px); }
  .ag-category-arrow { width: 27px; height: 27px; right: 14px; bottom: 21px; }
  .ag-category-arrow svg { width: 16px; height: 16px; }
}
@media (max-width: 650px) {
  .ag-category-tiles { grid-template-columns: 1fr; gap: 12px; margin: 22px 0 28px; }
  .ag-category-tile { min-height: 170px; align-items: center; padding: 24px; border-radius: 16px; }
  .ag-category-image { -o-object-position: right center; object-position: right center; }
  .ag-category-tile::before { background: linear-gradient(90deg, #120c1bf5 0%, #120c1bd9 36%, #120c1b5e 69%, #120c1b0d 100%), linear-gradient(0deg, #100b1799, transparent 65%); }
  .ag-category-copy { max-width: 61%; }
  .ag-category-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .ag-category-name { margin: 9px 0 7px; font-size: 28px; }
  .ag-category-description { max-width: 100%; font-size: 11px; line-height: 1.6; }
  .ag-category-arrow { right: 19px; bottom: 19px; width: 30px; height: 30px; background: #120c1b80; }
}
@media (max-width: 380px) {
  .ag-category-tile { min-height: 164px; padding: 22px 18px; }
  .ag-category-copy { max-width: 68%; }
  .ag-category-name { font-size: 25px; }
  .ag-category-eyebrow { font-size: 7px; letter-spacing: .1em; }
  .ag-category-arrow { right: 15px; bottom: 17px; width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-category-tile, .ag-category-image, .ag-category-arrow { transition: none; }
  .ag-category-tile:hover, .ag-category-tile:hover .ag-category-image { transform: none; }
}

/* Image-led collection feature, scoped away from the existing hero. */
.ag-slot-showcase { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 455px; margin-top: 64px; padding: 58px; overflow: hidden; border: 1px solid #e8c78a26; border-radius: 20px; background: #100c17; }
.ag-slot-copy { position: relative; z-index: 2; width: 43%; max-width: 460px; }
.ag-slot-copy .ag-section-kicker { color: #d9bc86; font-size: 9px; letter-spacing: .22em; }
.ag-slot-copy h2 { margin-top: 21px; color: #f5f0e6; font-size: clamp(30px, 3.3vw, 46px); font-weight: 550; line-height: 1.16; letter-spacing: -.035em; }
.ag-slot-copy h2 em { color: #e8c78a; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.ag-slot-copy > p:not(.ag-section-kicker) { max-width: 310px; margin-top: 21px; color: #c0b9c9; font-size: 13px; line-height: 1.9; }
.ag-slot-copy .ag-slot-browse { min-height: 48px; gap: 18px; margin-top: 29px; padding-inline: 21px; border-color: #e8c78a; border-radius: 8px; background: #e8c78a; color: #211b13; }
.ag-slot-copy .ag-slot-browse:hover { background: #f4d9a6; border-color: #f4d9a6; }
.ag-slot-browse:focus-visible { outline: 2px solid #f5dda7; outline-offset: 5px; }
.ag-slot-scene { position: absolute; z-index: 0; inset: 0 0 0 24%; overflow: hidden; pointer-events: none; }
.ag-slot-scene img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 67% 50%; object-position: 67% 50%; }
.ag-slot-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #100c17 1%, #100c17a8 22%, #100c1712 50%, transparent 75%), linear-gradient(0deg, #100c1755, transparent 35%); }
@media (max-width: 1000px) {
  .ag-slot-showcase { min-height: 400px; padding: 38px; }
  .ag-slot-copy { width: 45%; }
  .ag-slot-copy h2 { font-size: 34px; }
  .ag-slot-scene { left: 22%; }
}
@media (max-width: 700px) {
  .ag-slot-showcase { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-top: 44px; padding: 0; border-radius: 17px; }
  .ag-slot-copy { width: auto; max-width: none; padding: 31px 28px 0; }
  .ag-slot-copy h2 { margin-top: 15px; font-size: clamp(29px, 7vw, 38px); }
  .ag-slot-copy > p:not(.ag-section-kicker) { max-width: 330px; margin-top: 15px; font-size: 12px; }
  .ag-slot-copy .ag-slot-browse { margin-top: 23px; }
  .ag-slot-scene { position: relative; inset: auto; width: 100%; aspect-ratio: 1.45; margin-top: -8px; }
  .ag-slot-scene img { -o-object-position: 75% 50%; object-position: 75% 50%; }
  .ag-slot-scene::after { background: linear-gradient(180deg, #100c17 0%, #100c1755 16%, transparent 40%, #100c1733 100%); }
}
@media (max-width: 380px) {
  .ag-slot-copy { padding: 27px 22px 0; }
  .ag-slot-copy h2 { font-size: 28px; }
  .ag-slot-scene { aspect-ratio: 1.25; }
}

.promotion-code {
  padding: 16px;
  border: 1px dashed var(--border, #432a50);
  border-radius: 14px;
  background: #edbd6205;
}
.promotion-code.is-applied {
  border-style: solid;
  border-color: #edbd6259;
  background: #edbd620a;
}
.promotion-code-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}
.promotion-code-label svg {
  color: var(--gold, #edbd62);
  flex-shrink: 0;
}
.promotion-code-controls {
  display: flex;
  gap: 8px;
  min-width: 0;
  align-items: stretch;
}
.promotion-code-controls input {
  min-width: 0;
  flex: 1;
  text-transform: uppercase;
}
.promotion-code-controls input::-moz-placeholder {
  text-transform: none;
}
.promotion-code-controls input::placeholder {
  text-transform: none;
}
.promotion-code-controls .button-secondary {
  min-height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}
.promotion-clear {
  display: grid;
  place-items: center;
  width: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
}
.promotion-clear:hover {
  color: var(--gold);
  background: #edbd620a;
}
.promotion-code-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  margin-top: 10px;
}
.promotion-code-error {
  color: #ffb8bb;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.promotion-code-success {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
}
.promotion-code-success svg {
  flex: 0 0 15px;
  margin-top: 3px;
}
.game-load-breakdown {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 3px 16px;
  font-size: 13px;
}
.game-load-breakdown > div {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 0;
  align-items: center;
}
.game-load-breakdown dt {
  color: var(--muted);
}
.game-load-breakdown dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.game-load-breakdown .game-load-total {
  border-top: 1px solid var(--border);
}
.game-load-breakdown .game-load-reward {
  border-top: 1px solid var(--border);
  color: var(--gold);
}
.game-load-breakdown .game-load-reward dt {
  color: var(--gold);
}

.referral-rewards {
  min-width: 0;
}
.referral-preview {
  margin: 0 0 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
}
.referral-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.referral-stat {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 19px;
  background: linear-gradient(145deg, #291933, var(--surface));
  min-width: 0;
}
.referral-stat > svg {
  color: var(--gold);
  position: absolute;
  right: 18px;
  top: 18px;
}
.referral-stat > span {
  font-size: 12px;
  color: var(--muted);
  display: block;
  padding-right: 22px;
}
.referral-stat > strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.8px;
}
.referral-main-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 22px;
  margin-bottom: 26px;
}
.referral-invite-card,
.referral-rules-card,
.referral-tracking-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 23px;
  background: var(--surface);
  padding: 28px;
}
.referral-invite-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0, #edbd621a, transparent 56%),
    linear-gradient(150deg, #2b1935, #1a1023);
}
.referral-invite-card > * {
  position: relative;
}
.referral-hero-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #edbd6210;
  color: var(--gold);
  border: 1px solid #edbd6245;
  margin-bottom: 24px;
}
.referral-invite-card h2 {
  margin: 10px 0 12px;
  max-width: 360px;
  font-size: clamp(22px, 3vw, 29px);
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.referral-intro {
  color: var(--muted);
  max-width: 420px;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 26px;
}
.referral-link-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.referral-link-input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  text-overflow: ellipsis;
  border-color: #edbd6240;
}
.referral-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.referral-share-buttons > button {
  flex: 1 1 auto;
  min-height: 44px;
}
.referral-code-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 12px;
}
.referral-code-label button {
  width: 36px;
  height: 36px;
  min-height: 36px;
}
.referral-code-label code {
  color: var(--gold);
  border: 1px solid #edbd6230;
  border-radius: 6px;
  padding: 3px 9px;
  margin-left: 6px;
  overflow-wrap: anywhere;
}
.referral-invite-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  margin-top: 24px;
}
.referral-invite-note svg {
  flex: 0 0 15px;
  margin-top: 2px;
}
.referral-program-paused {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.referral-program-paused svg {
  flex: 0 0 18px;
  margin-top: 2px;
}
.referral-share-status {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--gold);
  font-size: 12px;
  margin-top: 12px;
}
.referral-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.referral-program-badge {
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.referral-program-badge.is-active {
  background: #8bcbae10;
  color: #a6dfbb;
  border-color: #8bcbae40;
}
.referral-reward-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 27px;
}
.referral-reward-pair > div {
  background: #10091685;
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 13px;
  min-width: 0;
}
.referral-reward-pair small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 7px;
}
.referral-reward-pair strong {
  color: var(--gold);
  font-size: 22px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.referral-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.referral-steps > li {
  display: flex;
  gap: 14px;
}
.referral-steps > li > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border: 1px solid #edbd6235;
  border-radius: 50%;
  color: var(--gold);
  background: #edbd6208;
  font-size: 12px;
}
.referral-steps b {
  font-size: 13px;
  font-weight: 600;
}
.referral-steps p {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 5px;
}
.referral-terms {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 17px;
  font-size: 12px;
}
.referral-terms summary {
  cursor: pointer;
  color: var(--gold);
}
.referral-terms p {
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
  margin-top: 12px;
}
.referral-tracking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.referral-tracking-heading h2 {
  font-size: 21px;
  margin-top: 8px;
}
.referral-tracking-heading > button {
  min-height: 44px;
  white-space: nowrap;
  font-size: 12px;
}
.referral-earned-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  border: 1px solid var(--border);
  background: #10091670;
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.referral-earned-summary b {
  font-weight: 600;
  color: #f5edf8;
  margin-left: 6px;
}
.referral-activity-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.referral-activity {
  border: 1px solid var(--border);
  background: #10091640;
  border-radius: 15px;
  padding: 20px;
  min-width: 0;
}
.referral-activity-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.referral-friend-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: #ffffff03;
}
.referral-activity-top > div {
  flex: 1;
  min-width: 0;
}
.referral-activity h3 {
  font-size: 13px;
  font-weight: 600;
}
.referral-activity-top p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.referral-status {
  border: 1px solid #edbd6230;
  border-radius: 99px;
  padding: 5px 10px;
  color: var(--gold);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}
.referral-status.is-paid {
  color: #a6dfbb;
  background: #8bcbae09;
  border-color: #8bcbae35;
}
.referral-status.is-rejected {
  color: #ffb8bb;
  border-color: #ffb8bb35;
}
.referral-row-reward {
  font-size: 14px;
  color: var(--gold);
  white-space: nowrap;
  margin-left: 3px;
}
.referral-timeline {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.referral-timeline li {
  display: flex;
  gap: 7px;
  font-size: 11px;
  line-height: 1.5;
  color: #b4a5bd80;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  min-width: 0;
}
.referral-timeline li.is-complete {
  color: #bbdbc9;
  border-color: #8bcbae50;
}
.referral-timeline svg {
  flex: 0 0 15px;
  margin-top: 1px;
}
.referral-timeline small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.referral-timeline-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  margin-top: 3px;
}
.referral-timeline .is-complete .referral-timeline-dot {
  background: currentColor;
}
.referral-activity-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 15px 0 0 52px;
}
.referral-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 23px;
}
.referral-pagination > span {
  color: var(--muted);
  font-size: 12px;
}
.referral-pagination > button {
  min-height: 44px;
}
.promotion-history {
  min-width: 0;
  margin-top: 30px;
  padding: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 22px;
}
.promotion-history-intro {
  margin-top: 9px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 580px;
}
.promotion-history-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.promotion-history-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 19px;
  background: #10091640;
}
.promotion-history-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.promotion-history-top > div {
  flex: 1;
  min-width: 0;
}
.promotion-history-top h3 {
  font-weight: 600;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.promotion-history-top p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.6;
}
.promotion-history-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}
.promotion-history-details dt {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.promotion-history-details dd {
  font-size: 15px;
  font-weight: 600;
  margin: 7px 0 0;
}
.promotion-history-details .is-earned {
  color: var(--gold);
}
.promotion-history-pending {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
  margin-top: 15px;
}
.promotion-history-pending svg {
  flex: 0 0 14px;
  margin-top: 3px;
}
@media (max-width: 1000px) {
  .referral-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .referral-invite-card h2 {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .referral-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }
  .referral-stat {
    padding: 17px 14px;
  }
  .referral-stat > svg {
    right: 13px;
    top: 16px;
    width: 16px;
  }
  .referral-stat > strong {
    font-size: 27px;
  }
  .referral-main-grid {
    gap: 16px;
    margin-bottom: 18px;
  }
  .referral-invite-card,
  .referral-rules-card,
  .referral-tracking-card {
    padding: 21px 17px;
    border-radius: 18px;
  }
  .referral-tracking-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .referral-tracking-heading > button {
    align-self: stretch;
  }
  .referral-earned-summary {
    padding: 12px;
  }
  .referral-activity {
    padding: 16px 13px;
  }
  .referral-activity-top {
    flex-wrap: wrap;
    gap: 9px;
  }
  .referral-activity-top > div {
    flex-basis: calc(100% - 52px);
  }
  .referral-status {
    margin-left: 49px;
  }
  .referral-row-reward {
    margin-left: auto;
  }
  .referral-timeline {
    margin-left: 0;
    gap: 8px;
  }
  .referral-timeline li {
    gap: 5px;
    font-size: 10px;
  }
  .referral-activity-note {
    margin-left: 0;
  }
  .referral-pagination {
    gap: 9px;
  }
  .referral-pagination > button {
    padding-inline: 12px;
    font-size: 12px;
  }
  .promotion-history {
    padding: 21px 17px;
    border-radius: 18px;
    margin-top: 24px;
  }
  .promotion-history-row {
    padding: 16px 13px;
  }
  .promotion-history-top {
    flex-wrap: wrap;
    gap: 9px;
  }
  .promotion-history-top > div {
    flex-basis: calc(100% - 52px);
  }
  .promotion-history-top .referral-status {
    margin-left: 49px;
  }
  .promotion-history-details {
    gap: 11px;
    grid-template-columns: minmax(0, 1fr);
  }
  .promotion-history-details > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
  }
  .promotion-history-details dd {
    margin: 0;
    white-space: nowrap;
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .promotion-code {
    padding: 12px;
  }
  .promotion-code-controls {
    flex-wrap: wrap;
  }
  .promotion-code-controls input {
    flex-basis: 100%;
  }
  .promotion-code-controls .button-secondary {
    flex: 1;
  }
  .referral-share-buttons > button {
    flex-basis: 100%;
  }
}

/* The game artwork frames account access without overlapping its controls. */
.auth-games-page {
  --public-bg: #100e1b;
  --public-surface: #1b172a;
  --public-border: #393047;
  --public-muted: #b5acc5;
  background:
    radial-gradient(ellipse at 18% 47%, #62349b32, transparent 42%),
    radial-gradient(ellipse at 93% 84%, #592a6426, transparent 34%),
    #100e1b;
}
.auth-games-page .account-header {
  background: #100e1bcc;
  border-color: #e3ccff0c;
}
.auth-games-page .account-main {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .9fr);
  gap: clamp(42px, 6vw, 88px);
  max-width: 1240px;
  padding-block: 36px;
}
.auth-games-page .account-welcome { min-width: 0; }
.auth-games-page .account-welcome-heading { position: relative; z-index: 1; }
.auth-games-page .account-welcome h2 {
  margin-top: 14px;
  font-size: clamp(42px, 4.4vw, 59px);
  line-height: 1.07;
  letter-spacing: -.045em;
}
.auth-games-page .account-welcome h2 em { color: #dcc1fa; font-weight: 400; }
.auth-games-page .account-welcome-copy {
  max-width: none;
  margin-top: 17px;
  color: #b5acc5;
  font-size: 14px;
}
.auth-games-page .auth-game-art {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 530px;
  height: 306px;
  margin: 10px auto 14px;
  pointer-events: none;
}
.auth-games-page .auth-game-art::before {
  content: "";
  position: absolute;
  inset: 12% 0 1%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #a66bdf2e, #743e9510 50%, transparent 70%);
  filter: blur(12px);
}
.auth-games-page .auth-art-orbit {
  position: absolute;
  z-index: -1;
  width: 94%;
  height: 71%;
  left: 3%;
  top: 16%;
  border: 1px solid #d8b9ef1c;
  border-radius: 50%;
  transform: rotate(-18deg);
}
.auth-games-page .auth-art-orbit-inner {
  width: 78%;
  height: 93%;
  left: 10%;
  top: 1%;
  border-color: #d8b9ef0c;
  transform: rotate(24deg);
}
.auth-games-page .auth-game-cover {
  position: absolute;
  width: var(--cover-size);
  aspect-ratio: 1;
  border: 1px solid #f0dbff40;
  border-radius: 22%;
  background: #241b35;
  box-shadow: 0 18px 34px #05020c80, inset 0 1px #fff3;
  overflow: hidden;
  transform: rotate(var(--cover-angle));
  animation: auth-cover-arrive 650ms cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--cover-delay);
}
.auth-games-page .auth-game-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.auth-games-page .auth-game-cover-orion {
  --cover-size: 22%; --cover-angle: -15deg; --cover-delay: 60ms;
  top: 14%; left: 4%; z-index: 1;
}
.auth-games-page .auth-game-cover-milkyway {
  --cover-size: 21%; --cover-angle: 14deg; --cover-delay: 100ms;
  top: 10%; right: 6%; z-index: 1;
}
.auth-games-page .auth-game-cover-juwa {
  --cover-size: 31%; --cover-angle: -12deg; --cover-delay: 160ms;
  top: 38%; left: 7%; z-index: 2;
}
.auth-games-page .auth-game-cover-firekirin {
  --cover-size: 30%; --cover-angle: 12deg; --cover-delay: 200ms;
  top: 40%; right: 3%; z-index: 2;
}
.auth-games-page .auth-game-cover-gamevault {
  --cover-size: 36%; --cover-angle: -3deg; --cover-delay: 260ms;
  top: 18%; left: 33%; z-index: 3;
  box-shadow: 0 24px 50px #05020cb3, 0 0 36px #b276d321;
}
.auth-games-page .auth-art-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #e7c98e;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
.auth-games-page .auth-art-spark-one { top: 10%; left: 32%; }
.auth-games-page .auth-art-spark-two { bottom: 9%; right: 33%; width: 12px; height: 12px; }
.auth-games-page .account-welcome-features { padding-top: 20px; border-color: #d8b9ef16; }
.auth-games-page .account-welcome-features > span { flex-direction: row; align-items: center; gap: 8px; color: #bdb2cb; }
.auth-games-page .account-welcome-features svg { width: 16px; height: 16px; color: #d2b4eb; }
.auth-games-page .access-card {
  position: relative;
  padding: 36px;
  border-color: #e0baff26;
  border-radius: 24px;
  background: linear-gradient(145deg, #251e34f5, #191523fa 70%);
  box-shadow: 0 30px 90px #05020d59, inset 0 1px #ecd5ff0d;
}
.auth-games-page .access-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d8b9ef99, transparent);
  pointer-events: none;
}
.auth-games-page .account-intro { color: #b9afc6; }
.auth-games-page .access-card .field { border-color: #44374f; background: #130f1d; }
.auth-games-page .access-card .field::-moz-placeholder { color: #9e91ad; }
.auth-games-page .access-card .field::placeholder { color: #9e91ad; }
.auth-games-page .account-password-label,
.auth-games-page .field-label > span { color: #cec3da; }
.auth-games-page .social-auth-email,
.auth-games-page .account-assistance { border-color: #e3ccff17; }
.auth-games-page .social-auth-email summary,
.auth-games-page .account-assistance summary { min-height: 44px; color: #c8bdd4; }
.auth-games-page .account-switch { color: #ada0bb; }
.auth-games-page .account-switch button { min-height: 44px; }
.auth-games-page .account-eligibility { color: #c8bdd4; border-color: #e3ccff12; }
.auth-games-page .account-footer { border-color: #e3ccff0c; }

@keyframes auth-cover-arrive {
  from { opacity: 0; transform: translateY(16px) rotate(calc(var(--cover-angle) - 4deg)) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(var(--cover-angle)) scale(1); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .auth-games-page .account-main { gap: 38px; padding-inline: 28px; grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr); }
  .auth-games-page .account-welcome h2 { font-size: 46px; }
  .auth-games-page .auth-game-art { height: 260px; }
  .auth-games-page .account-welcome-features { gap: 12px; }
  .auth-games-page .account-welcome-features > span { font-size: 10px; gap: 5px; }
  .auth-games-page .access-card { padding: 30px; }
}

@media (max-width: 760px) {
  .auth-games-page { background: radial-gradient(ellipse at 50% 10%, #6636943b, transparent 46%), #100e1b; }
  .auth-games-page .account-main { display: block; max-width: 510px; padding: 12px 22px 34px; }
  .auth-games-page .account-welcome { display: block; }
  .auth-games-page .account-welcome-heading,
  .auth-games-page .account-welcome-features { display: none; }
  .auth-games-page .auth-game-art { max-width: 320px; height: 128px; margin: 0 auto 18px; }
  .auth-games-page .auth-art-orbit { height: 80%; top: 14%; }
  .auth-games-page .auth-art-orbit-inner { display: none; }
  .auth-games-page .auth-game-cover { border-radius: 23%; box-shadow: 0 10px 18px #05020c80; }
  .auth-games-page .auth-game-cover-orion { --cover-size: 20%; top: 33%; left: 3%; }
  .auth-games-page .auth-game-cover-milkyway { --cover-size: 20%; top: 29%; right: 3%; }
  .auth-games-page .auth-game-cover-juwa { --cover-size: 25%; top: 18%; left: 17%; }
  .auth-games-page .auth-game-cover-firekirin { --cover-size: 25%; top: 18%; right: 16%; }
  .auth-games-page .auth-game-cover-gamevault { --cover-size: 30%; top: 4%; left: 35%; }
  .auth-games-page .auth-art-spark-one { top: 5%; left: 25%; width: 6px; height: 6px; }
  .auth-games-page .auth-art-spark-two { bottom: 5%; right: 30%; width: 7px; height: 7px; }
  .auth-games-page .access-card { padding: 28px; border-radius: 22px; }
  .auth-games-page .access-card .field { font-size: 16px; }
}

@media (max-width: 480px) {
  .auth-games-page .account-main { padding: 8px 16px 28px; }
  .auth-games-page .auth-game-art { max-width: 292px; height: 114px; margin-bottom: 14px; }
  .auth-games-page .access-card { padding: 26px 24px; }
}

@media (max-width: 359px) {
  .auth-games-page .account-main { padding-inline: 12px; }
  .auth-games-page .auth-game-art { max-width: 264px; height: 105px; margin-bottom: 10px; }
  .auth-games-page .access-card { padding: 24px 18px; }
  .auth-games-page .access-card h1 { font-size: 29px; }
}

@media (max-height: 500px) and (max-width: 760px) {
  .auth-games-page .auth-game-art { max-width: 230px; height: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-games-page .auth-game-cover { animation: none; }
}

@font-face { font-family: OraInter; src: url('/assets/ora/fonts/inter-400-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-800-latin.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: OraPoppins; src: url('/assets/ora/fonts/poppins-900-latin.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ora-bg0: #06020f;
  --ora-bg1: #0d061c;
  --ora-bg2: #150a26;
  --ora-bg3: #1f0f3a;
  --ora-bg4: #2a1452;
  --ora-line: #8c5adc38;
  --ora-text: #ffffff;
  --ora-muted: #c2b9d3;
  --ora-soft: #a49ab8;
  --ora-purple: #7c3aed;
  --ora-purple-bright: #a855f7;
  --ora-purple-light: #d6b4ff;
  --ora-gold: #ffc936;
  --ora-gold-light: #ffe27a;
  --ora-font-body: OraInter, Inter, 'Segoe UI', sans-serif;
  --ora-font-display: OraPoppins, OraInter, 'Segoe UI', sans-serif;
  --ora-ease: cubic-bezier(.16, 1, .3, 1);
  --bg: var(--ora-bg0);
  --surface: var(--ora-bg2);
  --border: var(--ora-line);
  --muted: var(--ora-muted);
  --gold: var(--ora-gold);
  --jade: #4ade80;
}

html { background: var(--ora-bg0); scroll-padding-top: 84px; }
body { background: var(--ora-bg0); color: var(--ora-text); font-family: var(--ora-font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--ora-font-display); }
::-moz-selection { background: #7c3aed99; color: #fff; }
::selection { background: #7c3aed99; color: #fff; }
input, textarea { caret-color: var(--ora-gold); }
* { scrollbar-color: #693bb7 var(--ora-bg1); scrollbar-width: thin; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ora-bg1); }
::-webkit-scrollbar-thumb { background: #693bb7; border-radius: 8px; }
a, button { text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ora-gold-light);
  outline-offset: 4px;
}

.button-gold {
  color: #241101;
  background: linear-gradient(180deg, #fff3b2 0%, #ffdb50 28%, #ffc126 64%, #e69406 100%);
  border: 1px solid #ffdd67;
  border-bottom-color: #a35b04;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff7cb, inset 0 -4px 0 #bd650f99, 0 5px 14px #bd650f26;
  font-family: var(--ora-font-display);
  font-weight: 800;
  transition: transform 180ms var(--ora-ease), box-shadow 180ms var(--ora-ease), filter 180ms ease;
}
.button-gold:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff7cb, inset 0 -4px 0 #bd650f99, 0 8px 20px #bd650f38; }
.button-gold:active:not(:disabled) { transform: translateY(1px); }
.button-secondary {
  color: #fff;
  background: linear-gradient(180deg, #211134, #0d061b);
  border: 1px solid #6f429a70;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 4px 12px #0003;
}
.button-secondary:hover:not(:disabled) { background: #25113e; border-color: #a855f7; }
.button-gold:disabled, .button-secondary:disabled { transform: none; cursor: not-allowed; opacity: .48; }
.modal-overlay { background: #030009b8; }
.modal-content { color: var(--ora-text); background: var(--ora-bg2); border-color: #7244a978; border-radius: 16px; box-shadow: 0 24px 80px #0009; }
.modal-title { font-family: var(--ora-font-display); font-weight: 700; }
.modal-content input, .modal-content textarea, .modal-content select { background-color: var(--ora-bg1); border-color: #68439370; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ora-public *, .ora-player *, .account-page *, .modal-content * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Ora reference adaptation: public presentation only. */
.ora-public { --public-bg: var(--ora-bg0); --public-surface: var(--ora-bg2); --public-border: var(--ora-line); --public-muted: var(--ora-muted); --public-gold: var(--ora-gold); background: var(--ora-bg0); color: var(--ora-text); font-family: var(--ora-font-body); overflow-x: clip; }
.ora-public *, .ora-public *::before, .ora-public *::after { box-sizing: border-box; }
.ora-public h1, .ora-public h2, .ora-public h3 { font-family: var(--ora-font-display); color: #fff; font-weight: 700; letter-spacing: -.025em; }
.ora-public button, .ora-public a, .ora-public input { -webkit-tap-highlight-color: transparent; }
.ora-public a { text-decoration: none; }
.ora-public button { font-family: inherit; cursor: pointer; }
.ora-public :is(a, button, input, summary):focus-visible { outline: 3px solid var(--ora-purple-light); outline-offset: 4px; }
.ora-public ::-moz-selection { background: #7c3aed; color: #fff; }
.ora-public ::selection { background: #7c3aed; color: #fff; }
.ora-public input { caret-color: var(--ora-purple-light); }
.ora-public ::-webkit-scrollbar { width: 6px; height: 5px; }
.ora-public ::-webkit-scrollbar-thumb { border-radius: 6px; background: #4e2b77; }
.ora-public ::-webkit-scrollbar-track { background: #10071c; }
.ora-public .ag-section-kicker { display: none; }
.ora-public section[id] { scroll-margin-top: 88px; }
.ora-public .public-main { width: calc(100% - 240px); max-width: 1680px; padding: 88px 24px 0; margin: 0 0 0 240px; }
.ora-public .brand { gap: 9px; }
.ora-public .brand .brand-mark { width: 35px; height: 35px; flex-shrink: 0; }
.ora-public .brand b { color: #fff; font-family: var(--ora-font-display); font-size: 16px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.ora-public .brand b i { display: block; margin-top: 3px; color: var(--ora-purple-light); font-size: 9px; letter-spacing: .22em; }
.ora-public .brand small { display: none; }
.ora-public .ora-public-sidebar { position: fixed; z-index: 70; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 240px; padding: 0 16px 16px; background: #0d061c; border-right: 1px solid var(--ora-line); overflow-y: auto; overscroll-behavior: contain; }
.ora-public .ora-public-sidebar[hidden] { display: none; }
.ora-sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 80px; padding: 5px 7px 0; }
.ora-sidebar-brand > a { display: inline-flex; }
.ora-public .ora-drawer-close { display: none; min-width: 36px; min-height: 40px; place-items: center; color: #fff; background: #27123f; border: 0; border-radius: 8px; }
.ora-sidebar-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; }
.ora-sidebar-nav > :is(a, button) { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 10px 13px; border: 1px solid transparent; border-radius: 9px; color: var(--ora-muted); background: transparent; text-align: left; font-size: 13px; font-weight: 600; transition: background .18s, color .18s; }
.ora-sidebar-nav > :is(a, button) > svg { flex-shrink: 0; color: #a78bc4; }
.ora-sidebar-nav > :is(a, button):hover, .ora-sidebar-nav > button.is-selected { background: #201032; color: #fff; }
.ora-sidebar-nav > :is(a, button):hover > svg { color: var(--ora-purple-light); }
.ora-sidebar-nav > .ora-nav-lobby { margin-bottom: 8px; min-height: 48px; background: #7c3aed; border-color: #9860f5; color: #fff; box-shadow: 0 4px 15px #05010d55; }
.ora-sidebar-nav > .ora-nav-lobby:hover { background: #8b46f1; }
.ora-sidebar-nav > .ora-nav-lobby > svg { color: #fff; }
.ora-sidebar-nav > .ora-nav-lobby > svg:last-child { margin-left: auto; }
.ora-sidebar-nav small { margin-left: auto; padding: 3px 7px; background: #38204f; border-radius: 5px; color: #ddc7f6; font-size: 10px; font-variant-numeric: tabular-nums; }
.ora-sidebar-section-label { padding: 10px 13px 4px; color: #a89ab8; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ora-sidebar-rule { height: 1px; background: var(--ora-line); margin: 17px 10px 10px; }
.ora-sidebar-bottom { margin-top: auto; padding-top: 40px; }
.ora-sidebar-account { position: relative; padding: 17px 14px 14px; border: 1px solid #7c3aed50; border-radius: 12px; background: linear-gradient(125deg, #2a1548, #170b2a); }
.ora-sidebar-account > svg { margin-bottom: 9px; color: var(--ora-purple-light); }
.ora-sidebar-account strong { display: block; color: #fff; font-family: var(--ora-font-display); font-size: 17px; line-height: 1.25; font-weight: 700; }
.ora-sidebar-account p { margin: 9px 0 14px; color: var(--ora-muted); font-size: 11px; line-height: 1.6; }
.ora-sidebar-account .ora-gold-button { width: 100%; min-height: 40px; font-size: 12px; }
.ora-sidebar-play-note { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 22px; color: #b8a9cc; font-size: 10px; line-height: 1.6; }
.ora-sidebar-play-note svg { color: var(--ora-purple-light); }
.ora-public .ora-public-header { position: fixed; z-index: 50; inset: 0 0 auto 240px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 24px; background: #0d061cf5; border-bottom: 1px solid var(--ora-line); }
.ora-header-leading, .ora-header-actions, .ora-desktop-title { display: flex; align-items: center; }
.ora-header-leading { min-width: 0; gap: 12px; }
.ora-header-actions { gap: 10px; }
.ora-desktop-title { gap: 10px; color: #d6c7e7; font-size: 12px; font-weight: 600; }
.ora-desktop-title svg { color: #ad8fcc; }
.ora-public .ora-menu-button { display: none; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; color: #c9b8df; border-radius: 8px; }
.ora-mobile-brand { display: none; }
.ora-public .ora-gold-button, .ora-public .ora-dark-button, .ora-public .ora-login-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 10px 22px; border: 1px solid #ffe27a; border-radius: 8px; background: linear-gradient(180deg, #ffe27a 0%, #ffc936 100%); box-shadow: inset 0 1px 0 #fff6ae, 0 4px 9px #0003; color: #201400; font-family: var(--ora-font-body); font-size: 13px; font-weight: 800; line-height: 1.35; white-space: nowrap; transition: background .18s, transform .18s, border-color .18s; }
.ora-public .ora-gold-button:hover { background: linear-gradient(180deg, #fff0ab, #ffd34a); transform: translateY(-1px); }
.ora-public .ora-login-button { background: #211032; color: #fff; border-color: #653a8c; box-shadow: none; min-width: 86px; }
.ora-public .ora-dark-button { background: #211032; color: #fff; border-color: #764396; box-shadow: none; }
.ora-public :is(.ora-dark-button, .ora-login-button):hover { background: #32184a; border-color: #a66bd3; }
.ora-lobby-hero { display: grid; grid-template-columns: 1.42fr 1fr; gap: 16px; }
.ora-hero-main { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 460px; overflow: hidden; padding: 34px; border: 1px solid #8a4dc9; border-radius: 20px; background: radial-gradient(ellipse at 85% 60%, #39126a 0, #19092e 47%, #12071f 90%); }
.ora-hero-main::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #190a2ddd, #190a2d88 47%, transparent 85%); pointer-events: none; }
.ora-hero-art { position: absolute; z-index: -2; width: 53%; height: 105%; bottom: -11%; right: -1%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; pointer-events: none; animation: ora-hero-arrive 850ms var(--ora-ease) both; }
.ora-hero-copy { position: relative; z-index: 1; width: 83%; }
.ora-public .ora-hero-copy h1 { margin: 0; max-width: 510px; font-size: clamp(36px, 3.45vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.ora-hero-copy h1 em { color: var(--ora-gold-light); font-style: normal; }
.ora-hero-copy p { margin: 21px 0 0; color: #d1c3e1; font-size: 13px; line-height: 1.75; }
.ora-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.ora-hero-actions .ora-gold-button, .ora-hero-actions .ora-dark-button { min-height: 48px; padding-inline: 22px; font-size: 13px; }
.ora-hero-secondary { display: grid; grid-template-rows: 1fr 1fr; min-width: 0; gap: 16px; }
.ora-discover-promo, .ora-spotlight { position: relative; isolation: isolate; min-width: 0; min-height: 222px; border: 1px solid #8c5adc60; border-radius: 16px; overflow: hidden; }
.ora-discover-promo { display: flex; align-items: center; padding: 24px; background: linear-gradient(115deg, #3b1767, #25103f); }
.ora-discover-promo > div { z-index: 1; }
.ora-discover-promo > img { position: absolute; z-index: -1; width: 65%; height: 115%; top: 1%; right: -17%; -o-object-fit: contain; object-fit: contain; transform: rotate(-7deg); opacity: .93; }
.ora-public .ora-discover-promo h2 { max-width: 255px; margin: 0; font-size: clamp(24px, 2.1vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.ora-discover-promo h2 em { color: var(--ora-gold-light); font-style: normal; }
.ora-discover-promo p { margin: 11px 0 16px; color: #d6c6e7; font-size: 11px; }
.ora-public .ora-promo-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ora-gold-light); font-size: 12px; font-weight: 750; line-height: 1.4; }
.ora-public .ora-promo-link:hover { color: #fff2b1; }
.ora-spotlight { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 18px 24px; background: #160b27; }
.ora-spotlight-content { position: relative; z-index: 1; min-width: 0; }
.ora-spotlight-label { display: flex; align-items: center; gap: 7px; color: var(--ora-purple-light); font-size: 10px; font-weight: 700; }
.ora-public .ora-spotlight h2 { margin: 10px 0 5px; font-size: clamp(21px, 1.85vw, 29px); font-weight: 750; line-height: 1.1; }
.ora-spotlight p { margin: 0 0 9px; color: var(--ora-muted); font-size: 11px; line-height: 1.5; }
.ora-spotlight-art { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 41%; overflow: hidden; }
.ora-spotlight-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #160b27 0%, #160b2722 65%), linear-gradient(0deg, #160b2733, transparent); }
.ora-spotlight-art img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; opacity: .8; }
.ora-carousel-controls { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: #cebddc; font-size: 9px; font-variant-numeric: tabular-nums; }
.ora-carousel-controls button { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid #75449866; border-radius: 6px; color: #d9c5ed; background: #31184d; }
.ora-carousel-controls button:hover { background: #512675; }
.ora-public .promo-banner-strip { margin: 20px 0 0; gap: 14px; }
.ora-public .promo-banner-card { border-radius: 12px; border-color: var(--ora-line); }
.ora-public .ag-category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; }
.ora-public .ag-category-tile { min-height: 102px; height: 102px; align-items: center; padding: 20px; border-color: #8c5adc44; border-radius: 12px; background: #170b28; box-shadow: none; }
.ora-public .ag-category-tile::before { background: linear-gradient(90deg, #170b28 0%, #170b28ec 28%, #170b2810 100%); }
.ora-public .ag-category-image { left: auto; right: 0; width: 66%; -o-object-position: center; object-position: center; opacity: .75; }
.ora-public .ag-category-copy { max-width: 74%; }
.ora-public .ag-category-eyebrow, .ora-public .ag-category-description { display: none; }
.ora-public .ag-category-name { font-family: var(--ora-font-display); margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.ora-public .ag-category-arrow { right: 16px; bottom: 17px; width: 27px; height: 27px; border-radius: 7px; color: #eee0ff; border-color: #ad73df66; background: #211032; }
.ora-public .ag-category-tile[aria-pressed="true"] { border-color: #ae75f1; background: #25103d; box-shadow: none; }
.ora-public .public-catalog { margin-top: 32px; padding: 0 0 8px; }
.ora-public .public-catalog .public-section-heading { margin-bottom: 20px; align-items: center; gap: 16px; }
.ora-public .public-catalog .public-section-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 750; line-height: 1.25; }
.ora-public .public-catalog .public-section-heading h2 > svg { color: var(--ora-purple-light); }
.ora-public .public-catalog .public-section-heading p { margin: 5px 0 0; color: var(--ora-muted); font-size: 11px; }
.ora-public .public-catalog .catalog-total { padding: 7px 11px; border-color: #8c5adc44; border-radius: 6px; color: #c8b8db; font-size: 10px; }
.ora-public .public-catalog-toolbar { gap: 14px; padding-bottom: 16px; margin-bottom: 20px; border-color: var(--ora-line); }
.ora-public .public-catalog .catalog-tabs { display: flex; gap: 5px; flex-wrap: nowrap; }
.ora-public .public-catalog .catalog-tabs button { min-height: 40px; padding: 9px 16px; border: 1px solid #8c5adc30; border-radius: 8px; background: #160a26; color: #c2afd4; font-size: 11px; white-space: nowrap; }
.ora-public .public-catalog .catalog-tabs button:hover { color: #fff; background: #2b1346; }
.ora-public .public-catalog .catalog-tabs button.active { border-color: #a462eb; background: #7c3aed; color: #fff; }
.ora-public .public-catalog .catalog-search { width: 245px; min-height: 41px; flex-shrink: 1; padding-inline: 13px; border: 1px solid #8c5adc44; border-radius: 8px; color: #b39bc9; background: #140922; }
.ora-public .public-catalog .catalog-search input { width: 100%; color: #fff; font-size: 11px; caret-color: var(--ora-purple-light); background: transparent; }
.ora-public .catalog-search input::-moz-placeholder { color: #bfa9d5; opacity: 1; }
.ora-public .catalog-search input::placeholder { color: #bfa9d5; opacity: 1; }
.ora-public .public-catalog .public-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.ora-public .public-catalog .public-game-card { min-width: 0; border: 0; border-radius: 12px; overflow: hidden; background: #140922; color: #fff; box-shadow: none; transition: transform 200ms var(--ora-ease), background 200ms; }
.ora-public .public-catalog .public-game-card:hover { transform: translateY(-4px); background: #281341; box-shadow: none; border: 0; }
.ora-public .public-catalog .public-game-image { height: auto; aspect-ratio: .91; border-radius: 12px; background: #211032; }
.ora-public .public-catalog .public-game-image::after { background: linear-gradient(transparent 75%, #10051f55); }
.ora-public .public-catalog .public-game-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ora-public .ag-game-open { right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #c6a7e566; background: #2a1045e8; color: #fff; backdrop-filter: none; }
.ora-public .public-catalog .public-game-caption { min-height: 67px; padding: 12px 12px 13px; background: transparent; border: 0; }
.ora-public .public-catalog .public-game-caption b { color: #fff; font-size: 12px; font-weight: 700; line-height: 1.35; }
.ora-public .public-catalog .public-game-caption small { margin-top: 4px; color: #bba7cf; font-size: 9px; line-height: 1.5; }
.ora-public .public-catalog .public-game-caption > svg { display: none; }
.ora-public .public-catalog .catalog-bottom { margin-top: 22px; }
.ora-public .public-catalog .catalog-bottom p { color: #baabca; font-size: 11px; }
.ora-public .public-catalog .public-secondary { min-height: 42px; padding-inline: 17px; border-color: #8c5adc66; background: #211032; color: #ebdcfa; font-size: 11px; }
.ora-public .public-catalog .public-secondary:hover { background: #32184a; border-color: #a974d1; }
.ora-public .public-catalog .catalog-empty { padding: 45px 20px; border-radius: 12px; background: #160a26; color: #cfbadf; }
.ora-public .public-catalog .catalog-empty h3 { margin-top: 12px; }
.ora-public .public-catalog .catalog-empty p { color: var(--ora-muted); }
.ora-public .public-link { color: var(--ora-gold-light); }
.ora-public .ag-slot-showcase { min-height: 310px; margin-top: 38px; padding: 36px; border-color: #8c5adc60; border-radius: 16px; background: #150a26; }
.ora-public .ag-slot-copy { width: 46%; }
.ora-public .ag-slot-copy h2 { margin-top: 0; font-size: 33px; font-weight: 750; line-height: 1.18; }
.ora-public .ag-slot-copy h2 em { color: var(--ora-gold-light); font-family: var(--ora-font-display); font-style: normal; font-weight: 750; }
.ora-public .ag-slot-copy > p:not(.ag-section-kicker) { margin-top: 14px; color: var(--ora-muted); font-size: 12px; line-height: 1.7; }
.ora-public .ag-slot-copy .ag-slot-browse { margin-top: 22px; min-height: 43px; border-color: #ffe27a; border-radius: 8px; background: linear-gradient(#ffe27a, #ffc936); color: #211400; font-size: 12px; font-weight: 800; }
.ora-public .ag-slot-scene::after { background: linear-gradient(90deg, #150a26 1%, #150a26ae 22%, transparent 70%); }
.ora-public .ag-start { grid-template-columns: .9fr 1.1fr; gap: 45px; margin-top: 36px; padding: 32px; border: 1px solid var(--ora-line); border-radius: 16px; background: #10071c; }
.ora-public .ag-start-intro h2 { margin: 0; font-family: var(--ora-font-display); font-size: 30px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.ora-public .ag-start-intro > p:not(.ag-section-kicker) { margin-top: 14px; max-width: 360px; color: var(--ora-muted); font-size: 12px; line-height: 1.8; }
.ora-public .ag-start-intro .public-link { margin-top: 17px; color: var(--ora-gold-light); font-weight: 650; }
.ora-public .ag-steps li { padding: 18px 0; gap: 14px; border-color: var(--ora-line); }
.ora-public .ag-steps li:first-child { padding-top: 0; }
.ora-public .ag-steps li:last-child { padding-bottom: 0; }
.ora-public .ag-steps li > span { color: var(--ora-purple-light); }
.ora-public .ag-steps h3 { font-size: 14px; font-weight: 650; }
.ora-public .ag-steps p { color: var(--ora-muted); font-size: 11px; line-height: 1.7; }
.ora-public .ag-steps svg { color: var(--ora-purple-light); }
.ora-public .public-help { grid-template-columns: .75fr 1.25fr; gap: 40px; margin: 48px 0 0; padding: 0 8px; }
.ora-public .public-help h2 { margin-top: 0; font-size: 30px; font-weight: 750; line-height: 1.2; }
.ora-public .public-help > div > p { margin-top: 14px; color: var(--ora-muted); font-size: 12px; }
.ora-public .ag-help-icon { margin-top: 22px; border-color: #8c5adc55; color: var(--ora-purple-light); background: #201033; }
.ora-public .public-faq details { padding: 0; border-color: var(--ora-line); background: transparent; }
.ora-public .public-faq summary { padding: 19px 0; color: #f3eafa; font-size: 12px; font-weight: 650; line-height: 1.5; }
.ora-public .public-faq summary svg { color: var(--ora-purple-light); }
.ora-public .public-faq details > p { max-width: 72ch; margin: 0; padding: 0 23px 19px 0; color: var(--ora-muted); font-size: 12px; line-height: 1.85; }
.ora-public .ag-invitation { display: flex; align-items: center; gap: 20px; min-height: 130px; padding: 26px; margin-top: 42px; border: 1px solid #8c5adc60; border-radius: 14px; background: #1d0d32; }
.ora-public .ag-invitation > img { width: 58px; height: 58px; -o-object-fit: contain; object-fit: contain; }
.ora-public .ag-invitation > div { flex: 1; min-width: 0; }
.ora-public .ag-invitation h2 { margin: 0; font-size: 21px; font-weight: 700; }
.ora-public .ag-invitation p { color: var(--ora-muted); font-size: 11px; margin-top: 8px; line-height: 1.6; }
.ora-public .ag-invitation .public-button { min-height: 44px; padding: 12px 18px; border-color: #ffe27a; border-radius: 8px; background: linear-gradient(#ffe27a, #ffc936); color: #211400; font-size: 12px; font-weight: 800; }
.ora-public .public-footer { max-width: none; width: calc(100% - 240px); margin: 44px 0 0 240px; padding: 28px 24px 24px; border-top: 1px solid var(--ora-line); background: #0d061c; }
.ora-public .public-footer-main { gap: 20px; padding: 0; border-bottom: 0; }
.ora-public .public-footer-main nav { color: #c2afd5; font-size: 11px; gap: 23px; }
.ora-public .public-footer-main > span { color: #b6a0ca; font-size: 9px; }
.ora-public .public-footer-note { align-items: flex-start; margin-top: 23px; padding: 18px 0 0; border-top: 1px solid var(--ora-line); color: #baa7cf; }
.ora-public .public-footer-note svg { flex-shrink: 0; margin-top: 2px; color: var(--ora-purple-light); }
.ora-public .public-footer-note .play-note { max-width: 75ch; color: #baa7cf; font-size: 10px; line-height: 1.8; }
.ora-public-bottom-nav { display: none; }
.ora-public-dialog { background: #150a26; border-color: #8c5adc66; border-radius: 16px; }
.ora-public-dialog .modal-title { font-family: var(--ora-font-display); color: #fff; }
.ora-public-dialog .text-muted, .ora-public-dialog .public-game-detail p { color: var(--ora-muted); }
.ora-public-dialog .public-game-detail > img { width: 108px; height: 135px; border-radius: 10px; -o-object-fit: cover; object-fit: cover; }
.ora-public-dialog .public-button { border-color: #ffe27a; border-radius: 8px; background: linear-gradient(#ffe27a, #ffc936); color: #211400; font-weight: 800; }
@keyframes ora-hero-arrive { from { transform: translate(12px, 12px); filter: brightness(.8); } to { transform: translate(0, 0); filter: brightness(1); } }
@media (min-width: 1500px) {
  .ora-public .public-catalog .public-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ora-public .public-catalog .public-game-image { aspect-ratio: .75; }
  .ora-hero-main { min-height: 480px; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .ora-public .public-catalog .public-game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .ora-lobby-hero { grid-template-columns: 1.3fr 1fr; gap: 12px; }
  .ora-hero-main { min-height: 460px; padding: 25px; }
  .ora-hero-copy { width: 100%; }
  .ora-public .ora-hero-copy h1 { font-size: 39px; }
  .ora-hero-copy p { font-size: 12px; }
  .ora-hero-actions .ora-gold-button, .ora-hero-actions .ora-dark-button { padding-inline: 15px; min-height: 44px; font-size: 11px; }
  .ora-discover-promo { padding: 20px; }
  .ora-public .ora-discover-promo h2 { font-size: 25px; }
  .ora-spotlight { padding-left: 20px; }
  .ora-public .ora-spotlight h2 { font-size: 21px; }
  .ora-spotlight-art { width: 38%; }
  .ora-public .public-catalog .catalog-search { width: 200px; }
  .ora-public .public-catalog .catalog-tabs button { padding-inline: 11px; }
  .ora-public .ag-category-name { font-size: 18px; }
}
@media (max-width: 1000px) {
  .ora-public .public-main { width: 100%; max-width: none; margin-left: 0; padding: 82px 20px 0; }
  .ora-public .ora-public-header { left: 0; padding: 0 20px; }
  .ora-public .ora-menu-button { display: grid; }
  .ora-desktop-title { display: none; }
  .ora-mobile-brand { display: inline-flex; }
  .ora-public .ora-mobile-brand .brand .brand-mark { width: 30px; height: 30px; }
  .ora-public .ora-mobile-brand .brand b { font-size: 13px; }
  .ora-public .ora-mobile-brand .brand b i { font-size: 7px; }
  .ora-public .ora-public-sidebar { z-index: 100; width: 260px; box-shadow: 12px 0 40px #0008; }
  .ora-public .ora-drawer-close { display: grid; }
  .ora-nav-backdrop { position: fixed; z-index: 90; inset: 0; padding: 0; border: 0; background: #05010ebd; }
  .ora-public .public-footer { width: 100%; margin-left: 0; padding-inline: 20px; }
  .ora-lobby-hero { grid-template-columns: 1.3fr 1fr; gap: 12px; }
  .ora-hero-main { min-height: 430px; padding: 28px; }
  .ora-hero-copy { width: 100%; }
  .ora-public .ora-hero-copy h1 { font-size: 42px; }
  .ora-hero-secondary { gap: 12px; }
  .ora-discover-promo, .ora-spotlight { min-height: 209px; }
  .ora-public .ora-discover-promo h2 { font-size: 27px; }
  .ora-public .ag-start { gap: 30px; padding: 28px; }
}
@media (max-width: 760px) {
  .ora-lobby-hero { grid-template-columns: 1fr; gap: 12px; }
  .ora-hero-main { min-height: 400px; }
  .ora-public .ora-hero-copy h1 { font-size: 46px; }
  .ora-hero-copy { width: 82%; }
  .ora-hero-art { width: 46%; right: 0; bottom: -13%; height: 113%; }
  .ora-hero-secondary { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .ora-discover-promo, .ora-spotlight { min-height: 210px; padding: 20px; }
  .ora-public .ora-discover-promo h2 { font-size: 25px; }
  .ora-public .ora-spotlight h2 { font-size: 23px; }
  .ora-spotlight-art { width: 40%; opacity: .65; }
  .ora-public .public-catalog .public-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
  .ora-public .public-catalog .public-game-caption { padding-inline: 10px; }
  .ora-public .public-catalog .public-game-caption b { font-size: 11px; }
  .ora-public .public-catalog .public-game-caption small { font-size: 9px; }
  .ora-public .public-catalog .catalog-search { width: 190px; }
  .ora-public .public-catalog .catalog-tabs button { padding-inline: 11px; }
  .ora-public .ag-slot-showcase { flex-direction: row; align-items: center; min-height: 290px; padding: 30px; }
  .ora-public .ag-slot-scene { position: absolute; inset: 0 0 0 24%; width: auto; aspect-ratio: auto; margin-top: 0; }
  .ora-public .ag-slot-copy { width: 50%; }
  .ora-public .ag-slot-copy h2 { font-size: 28px; }
  .ora-public .ag-start { grid-template-columns: 1fr; gap: 28px; }
  .ora-public .ag-start-intro > p:not(.ag-section-kicker) { max-width: 65ch; }
  .ora-public .public-help { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .ora-public .public-help h2 { font-size: 27px; }
  .ora-public .ag-help-icon { display: none; }
  .ora-public .ag-invitation { gap: 16px; padding: 24px; flex-wrap: wrap; }
  .ora-public .ag-invitation h2 { font-size: 20px; }
  .ora-public .public-footer-main { flex-wrap: wrap; justify-content: flex-start; }
  .ora-public .public-footer-main > span { margin-left: auto; }
}
@media (max-width: 600px) {
  .ora-public .public-main { padding: 78px 14px 0; }
  .ora-public section[id] { scroll-margin-top: 78px; }
  .ora-public .ora-public-header { height: 64px; padding-inline: 10px; gap: 8px; }
  .ora-header-leading { gap: 3px; }
  .ora-public .ora-menu-button { width: 35px; }
  .ora-header-actions { gap: 7px; }
  .ora-header-actions .ora-gold-button, .ora-header-actions .ora-login-button { min-height: 36px; padding: 8px 12px; min-width: 0; font-size: 11px; border-radius: 7px; }
  .ora-header-actions .ora-gold-button svg { display: none; }
  .ora-public .ora-mobile-brand .brand { gap: 6px; }
  .ora-public .ora-mobile-brand .brand .brand-mark { width: 27px; height: 27px; }
  .ora-public .ora-mobile-brand .brand b { font-size: 11px; }
  .ora-public .ora-mobile-brand .brand b i { margin-top: 2px; font-size: 6px; }
  .ora-hero-main { min-height: 380px; padding: 27px 23px; border-radius: 16px; }
  .ora-hero-main::after { background: linear-gradient(90deg, #190a2df2, #190a2d77 65%, transparent); }
  .ora-public .ora-hero-copy h1 { font-size: clamp(35px, 9.5vw, 45px); line-height: 1.06; }
  .ora-hero-copy { width: 100%; }
  .ora-hero-copy p { margin-top: 18px; font-size: 11px; line-height: 1.75; }
  .ora-hero-art { width: 62%; height: 106%; bottom: -10%; right: -13%; opacity: .8; }
  .ora-hero-actions { margin-top: 23px; gap: 8px; }
  .ora-hero-actions .ora-gold-button, .ora-hero-actions .ora-dark-button { min-height: 44px; padding-inline: 17px; font-size: 12px; }
  .ora-hero-secondary { grid-template-columns: 1fr; gap: 12px; }
  .ora-discover-promo { min-height: 180px; padding: 23px; }
  .ora-public .ora-discover-promo h2 { font-size: 29px; }
  .ora-discover-promo > img { width: 57%; height: 147%; top: -20%; right: -6%; }
  .ora-discover-promo p { margin-bottom: 10px; }
  .ora-spotlight { min-height: 195px; padding: 22px 23px 17px; }
  .ora-public .ora-spotlight h2 { font-size: 27px; }
  .ora-spotlight-art { width: 42%; opacity: 1; }
  .ora-public .ag-category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
  .ora-public .ag-category-tile { min-height: 96px; height: 96px; padding: 12px 9px; align-items: flex-end; border-radius: 10px; }
  .ora-public .ag-category-name { font-size: 13px; line-height: 1.25; }
  .ora-public .ag-category-copy { max-width: 100%; }
  .ora-public .ag-category-arrow { display: none; }
  .ora-public .ag-category-image { width: 100%; height: 100%; -o-object-position: 70% center; object-position: 70% center; opacity: .65; }
  .ora-public .ag-category-tile::before { background: linear-gradient(0deg, #170b28 0%, #170b2833 100%); }
  .ora-public .public-catalog { margin-top: 28px; padding-bottom: 0; }
  .ora-public .public-catalog .public-section-heading { margin-bottom: 18px; }
  .ora-public .public-catalog .public-section-heading h2 { font-size: 21px; gap: 8px; }
  .ora-public .public-catalog .public-section-heading h2 > svg { width: 21px; }
  .ora-public .public-catalog .public-section-heading p { max-width: 240px; font-size: 10px; }
  .ora-public .public-catalog .catalog-total { padding: 6px 8px; font-size: 9px; }
  .ora-public .public-catalog-toolbar { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
  .ora-public .public-catalog .catalog-search { width: 100%; min-height: 42px; flex-shrink: 0; }
  .ora-public .public-catalog .catalog-search input { font-size: 12px; }
  .ora-public .public-catalog .catalog-tabs { overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .ora-public .public-catalog .catalog-tabs button { flex: 1 0 auto; min-height: 38px; padding: 8px 13px; font-size: 10px; }
  .ora-public .public-catalog .public-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
  .ora-public .public-catalog .public-game-image { aspect-ratio: .84; border-radius: 10px; }
  .ora-public .public-catalog .public-game-card { border-radius: 10px; }
  .ora-public .public-catalog .public-game-caption { min-height: 63px; padding: 11px 11px 13px; }
  .ora-public .public-catalog .public-game-caption b { font-size: 12px; }
  .ora-public .public-catalog .public-game-caption small { font-size: 9px; }
  .ora-public .public-catalog .catalog-bottom { flex-direction: column; gap: 14px; margin-top: 19px; }
  .ora-public .public-catalog .catalog-bottom p { font-size: 10px; text-align: center; }
  .ora-public .public-catalog .public-secondary { width: 100%; min-height: 43px; }
  .ora-public .ag-slot-showcase { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-top: 28px; padding: 0; }
  .ora-public .ag-slot-copy { width: 100%; max-width: none; padding: 27px 24px 0; }
  .ora-public .ag-slot-copy h2 { font-size: 29px; }
  .ora-public .ag-slot-copy > p:not(.ag-section-kicker) { margin-top: 12px; font-size: 11px; }
  .ora-public .ag-slot-copy .ag-slot-browse { margin-top: 18px; }
  .ora-public .ag-slot-scene { position: relative; inset: auto; margin-top: 0; aspect-ratio: 1.7; }
  .ora-public .ag-slot-scene::after { background: linear-gradient(180deg, #150a26, #150a2633 30%, transparent); }
  .ora-public .ag-start { margin-top: 27px; padding: 25px 23px; gap: 25px; border-radius: 14px; }
  .ora-public .ag-start-intro h2 { font-size: 27px; }
  .ora-public .ag-start-intro > p:not(.ag-section-kicker) { font-size: 11px; }
  .ora-public .ag-steps li { grid-template-columns: 24px minmax(0,1fr) 19px; gap: 10px; padding-block: 17px; }
  .ora-public .ag-steps h3 { font-size: 13px; }
  .ora-public .ag-steps p { font-size: 11px; }
  .ora-public .public-help { padding-inline: 5px; margin-top: 30px; }
  .ora-public .public-help h2 { font-size: 27px; }
  .ora-public .public-faq summary { padding-block: 18px; font-size: 12px; }
  .ora-public .public-faq details > p { font-size: 11px; }
  .ora-public .ag-invitation { margin-top: 28px; padding: 24px 20px; gap: 14px; }
  .ora-public .ag-invitation > img { width: 44px; height: 44px; }
  .ora-public .ag-invitation h2 { font-size: 18px; }
  .ora-public .ag-invitation p { font-size: 10px; }
  .ora-public .ag-invitation .public-button { width: 100%; }
  .ora-public .public-footer { margin-top: 30px; padding: 26px 19px 95px; }
  .ora-public .public-footer-main { gap: 24px 16px; }
  .ora-public .public-footer-main > span { width: 100%; margin: 0; }
  .ora-public .public-footer-main nav { gap: 15px; margin-left: auto; font-size: 10px; }
  .ora-public .public-footer-main .brand b { font-size: 12px; }
  .ora-public .public-footer-main .brand b i { font-size: 7px; }
  .ora-public .public-footer-main .brand .brand-mark { width: 29px; height: 29px; }
  .ora-public .public-footer-note { gap: 10px; }
  .ora-public .public-footer-note .play-note { font-size: 9px; line-height: 1.8; }
  .ora-public-bottom-nav { position: fixed; z-index: 60; inset: auto 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 64px; padding: 5px 8px max(7px,env(safe-area-inset-bottom)); border-top: 1px solid #8c5adc55; background: #10061fed; backdrop-filter: blur(12px); }
  .ora-public-bottom-nav :is(a,button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 48px; border: 0; border-radius: 8px; background: none; color: #bba7d0; font-size: 9px; font-weight: 650; }
  .ora-public-bottom-nav .active { color: #d2a4ff; background: #51217b40; }
}
@media (max-width: 360px) {
  .ora-public .ora-mobile-brand .brand .brand-mark { display: none; }
  .ora-public .ora-mobile-brand .brand b { font-size: 12px; }
  .ora-hero-main { padding-inline: 21px; min-height: 370px; }
  .ora-public .ora-hero-copy h1 { font-size: 34px; }
  .ora-hero-actions .ora-gold-button, .ora-hero-actions .ora-dark-button { padding-inline: 14px; font-size: 11px; }
  .ora-public .public-catalog .catalog-tabs button { padding-inline: 10px; }
  .ora-public .ag-category-name { font-size: 12px; }
  .ora-public .public-footer-main nav { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ora-public *, .ora-public *::before, .ora-public *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Ora reference: presentation only. Player actions and route semantics stay in their existing components. */
.ora-player {
  --player-panel: var(--ora-bg2, #150a26);
  --player-panel-raised: var(--ora-bg3, #1f0f3a);
  --player-line: var(--ora-line, #8c5adc38);
  --player-copy: var(--ora-muted, #c2b9d3);
  --player-heading: var(--ora-text, #fff);
  background: var(--ora-bg0, #06020f);
  color: var(--ora-text, #fff);
  font-family: var(--ora-font-body, sans-serif);
  font-size: 14px;
}
.ora-player :is(h1,h2,h3), .account-page.social-auth-page :is(h1,h2,h3) {
  font-family: var(--ora-font-display, sans-serif);
  color: var(--ora-text, #fff);
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ora-player .text-muted { color: var(--ora-muted); }
.ora-player :is(.eyebrow,.hero-kicker,.lounge-label,.hero-edition,.spotlight-spark,.orbit) { display: none; }
.ora-player .text-link { color: var(--ora-purple-light); font-size: 12px; min-height: 36px; }
.ora-player .text-link:hover { color: #fff; }
.ora-player .sidebar {
  width: 240px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  background: var(--ora-bg1, #0d061c);
  border-right: 1px solid var(--ora-line);
}
.ora-player .sidebar-brand { padding: 2px 4px 28px; }
.ora-player .brand { gap: 9px; }
.ora-player .brand b { font-family: var(--ora-font-display); font-size: 14px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.ora-player .brand i { color: var(--ora-purple-light); }
.ora-player .brand small { font-size: 7px; letter-spacing: .14em; color: var(--ora-muted); margin-top: 3px; }
.ora-player .brand-mark { width: 40px; height: 43px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ora-player .brand-mark img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
.ora-player .side-link {
  min-height: 46px;
  padding: 12px 14px;
  gap: 13px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ora-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.ora-player .side-link svg { color: #b291e1; width: 19px; height: 19px; }
.ora-player .side-link:hover { background: var(--ora-bg3); color: #fff; }
.ora-player .side-link.active { color: #fff; background: #6e31d0; border-color: #a86bf066; box-shadow: none; }
.ora-player .side-link.active svg { color: #fff; }
.ora-player .nav-dot { width: 5px; height: 5px; background: #e5c5ff; }
.ora-player .sidebar-divider { margin: 16px 12px; background: var(--ora-line); }
.ora-player .sidebar-bottom { gap: 9px; padding: 30px 10px 14px; color: var(--ora-soft); font-size: 10px; line-height: 1.7; }
.ora-player .sidebar-bottom svg { color: #b48be9; }
.ora-player .sidebar-bottom b { color: var(--ora-muted); }
.ora-player .install-app-inline { border-radius: 10px; border-color: var(--ora-line); color: var(--ora-purple-light); font-size: 12px; background: var(--ora-bg2); }
.ora-player .main-shell { margin-left: 240px; }
.ora-player .topbar {
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(24px, env(safe-area-inset-right, 0px)) 0 24px;
  background: var(--ora-bg1);
  border-bottom: 1px solid var(--ora-line);
  backdrop-filter: none;
  gap: 16px;
}
.ora-player .breadcrumb { color: var(--ora-soft); font-size: 12px; gap: 10px; }
.ora-player .breadcrumb b { color: #fff; font-weight: 600; }
.ora-player .topbar-actions { gap: 12px; }
.ora-player .topbar .icon-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border-radius: 10px; color: #d5c7ed; }
.ora-player .topbar .icon-button:hover { color: #fff; background: var(--ora-bg3); }
.ora-player .wallet-chip {
  min-height: 40px;
  padding: 4px 5px 4px 11px;
  gap: 9px;
  border: 1px solid var(--ora-line);
  border-radius: 9px;
  background: var(--ora-bg2);
  color: var(--ora-purple-light);
}
.ora-player .wallet-chip span { gap: 10px; }
.ora-player .wallet-chip small { color: var(--ora-muted); font-size: 8px; letter-spacing: .07em; }
.ora-player .wallet-chip b { font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ora-player .wallet-chip .wallet-plus { width: 28px; height: 28px; min-height: 28px; margin-left: 2px; border-radius: 7px; background: var(--ora-gold); color: #2c1700; font-size: 20px; }
.ora-player .avatar { width: 38px; height: 38px; background: #452075; color: #f0daff; border: 1px solid #ab6bde66; font-family: var(--ora-font-body); font-size: 15px; font-weight: 700; }
.ora-player .page-content { max-width: 1600px; min-height: calc(100dvh - 260px); padding: 24px 24px 40px; animation: none; }
.ora-player .preview-bar { padding: 8px 24px; background: #261240; color: #d0bce8; border-color: var(--ora-line); font-size: 10px; }
.ora-player .preview-bar > span { color: #f3dcff; font-size: 8px; letter-spacing: .07em; }
.ora-player .preview-bar a { color: #e0c3ff; min-height: 24px; }
.ora-player .lobby-intro { margin-bottom: 18px; }
.ora-player .lobby-intro h1 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -.025em; }
.ora-player .hero-grid { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(230px, 1fr); gap: 16px; }
.ora-player .casino-hero {
  min-height: 382px;
  border: 1px solid #a36def70;
  border-radius: 20px;
  background: #211047 url('/assets/ora/hero-slot-machine.png') no-repeat 96% center / auto 112%;
  box-shadow: inset 0 1px #d8b4ff1a;
  isolation: isolate;
}
.ora-player .casino-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #1d0c3c 0%, #211047f0 33%, #21104770 58%, #21104700 83%); pointer-events: none; }
.ora-player .casino-hero::after { display: none; }
.ora-player .hero-copy { width: 61%; padding: 31px 28px 30px; }
.ora-player .hero-copy h2 { margin: 0 0 17px; font-family: var(--ora-font-display); font-size: clamp(36px, 3.8vw, 58px); font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -.025em; }
.ora-player .hero-copy h2 em { font-style: normal; color: var(--ora-gold-light); font-weight: 800; }
.ora-player .hero-copy > p { max-width: 310px; margin: 0 0 21px; color: #ded2ef; font-size: 12px; line-height: 1.7; }
.ora-player .hero-copy .button-gold { min-height: 44px; padding: 12px 18px; font-size: 12px; }
.ora-player .hero-footnote { display: block; color: #c7b5df; font-size: 10px; line-height: 1.6; margin-top: 13px; max-width: 240px; }
.ora-player .casino-hero.has-featured-game { background-image: none; background-color: #211047; }
.ora-player .has-featured-game .featured-platform-art { right: -10px; bottom: 0; top: auto; width: 49%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; opacity: .95; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); border-radius: 0; transform: none; border: 0; box-shadow: none; }
.ora-player .has-featured-game::before { z-index: 0; background: linear-gradient(90deg, #211047 30%, #211047aa 52%, transparent 82%); }
.ora-player .has-featured-game .hero-copy { z-index: 1; }
.ora-player .spotlight-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 382px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ora-line);
  border-radius: 20px;
  background: #180c2e;
  text-align: left;
}
.ora-player .spotlight-card > .flex { position: absolute; right: 17px; top: 17px; color: var(--ora-gold); z-index: 1; }
.ora-player .spotlight-art { position: absolute; top: 18px; right: 15px; width: 144px; height: 144px; margin: 0; }
.ora-player .spotlight-art img { width: 132px; height: 132px; -o-object-fit: cover; object-fit: cover; border-radius: 16px; transform: rotate(7deg); border: 1px solid #c68dff40; box-shadow: 0 16px 28px #04000966; }
.ora-player .status-label { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .02em; color: var(--ora-muted); line-height: 1.7; }
.ora-player .spotlight-card .status-label { margin: 132px 0 7px; color: #cdb2eb; }
.ora-player .spotlight-card h2 { margin: 0 0 8px; font-family: var(--ora-font-display); font-size: 23px; font-weight: 700; color: #fff; }
.ora-player .spotlight-card p { font-size: 11px; line-height: 1.65; color: var(--ora-muted); margin: 0 0 18px; }
.ora-player .spotlight-card .button-secondary { width: 100%; font-size: 11px; min-height: 42px; padding: 11px 14px; border: 1px solid #9e66d74d; border-radius: 9px; background: #291245; color: #e9d4ff; justify-content: center; }
.ora-player .lobby-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 32px; background: none; border: 0; }
.ora-player .lobby-shortcuts > a { flex-direction: row; align-items: center; text-align: left; min-height: 76px; padding: 14px 16px; gap: 12px; border: 1px solid var(--ora-line); border-radius: 12px; background: var(--ora-bg2); }
.ora-player .lobby-shortcuts > a + a { border: 1px solid var(--ora-line); }
.ora-player .lobby-shortcuts > a > svg:first-child { width: 23px; color: #b58bf0; }
.ora-player .lobby-shortcuts b { color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; }
.ora-player .lobby-shortcuts small { display: block; color: var(--ora-soft); font-size: 10px; line-height: 1.5; margin-top: 3px; }
.ora-player .lobby-shortcuts a:hover { background: var(--ora-bg3); border-color: #a26ce36b; }
.ora-player .lobby-shortcuts > a > svg:last-child { display: block; color: #ae86df; }
.ora-player .content-section { margin-top: 30px; }
.ora-player .section-heading { margin-bottom: 8px; gap: 16px; align-items: center; }
.ora-player .section-heading h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.ora-player .section-heading h2 svg { color: #b48bef; width: 21px; }
.ora-player .section-description { margin: 0 0 18px; max-width: 640px; font-size: 12px; color: var(--ora-muted); line-height: 1.7; }
.ora-player .game-grid, .ora-player .catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; }
.ora-player .game-card { min-width: 0; border: 0; background: transparent; }
.ora-player .game-cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--ora-line); border-radius: 13px; background: var(--ora-bg2); box-shadow: none; }
.ora-player .game-cover > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 240ms var(--ora-ease), filter 180ms; }
.ora-player .game-card.is-featured .game-cover { border-color: #a76bec; box-shadow: none; }
.ora-player .game-cover:hover { border-color: #be84ff; }
.ora-player .game-cover:hover > img { transform: scale(1.04); filter: brightness(.7); }
.ora-player .game-caption { padding: 10px 0 0; gap: 4px; }
.ora-player .game-caption h3 { font-family: var(--ora-font-body); font-size: 13px; line-height: 1.35; font-weight: 650; color: #fff; letter-spacing: -.01em; }
.ora-player .game-caption p { margin-top: 4px; font-size: 10px; color: var(--ora-soft); line-height: 1.5; }
.ora-player .game-caption > button { width: 28px; min-width: 28px; min-height: 40px; color: #b48bef; }
.ora-player .game-caption > button:hover { color: #fff; background: var(--ora-bg3); }
.ora-player .favorite-button { width: 34px; height: 34px; right: 8px; top: 8px; color: #e2d6f4; border: 1px solid #bb8bea4d; border-radius: 9px; background: #0d061cdd; backdrop-filter: none; }
.ora-player .favorite-button.selected { background: #4c2676ed; color: var(--ora-gold-light); }
.ora-player .game-cover-action { background: #15072675; }
.ora-player .game-cover-action > span { width: 48px; height: 48px; background: var(--ora-gold); color: #291000; box-shadow: 0 7px 20px #0006; }
.ora-player .game-title-select { color: inherit; text-align: left; }
.ora-player .promo-grid { gap: 16px; margin-top: 32px; }
.ora-player .promo-card { min-height: 180px; padding: 25px; border-radius: 16px; border: 1px solid var(--ora-line); }
.ora-player .promo-gold { background: linear-gradient(100deg, #281147, #38135c); }
.ora-player .promo-green { background: linear-gradient(100deg, #1a0d32, #2b124f); }
.ora-player .promo-card h2 { margin: 0 0 20px; font-family: var(--ora-font-display); font-size: clamp(21px, 2.2vw, 29px); font-weight: 700; line-height: 1.25; color: #fff; }
.ora-player .promo-card div > span:not(.eyebrow) { font-size: 12px; font-weight: 600; color: var(--ora-purple-light); }
.ora-player .promo-medallion { display: grid; width: 80px; height: 80px; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: rotate(-10deg); color: var(--ora-gold); }
.ora-player .promo-green .promo-medallion { color: #c79cff; border: 0; background: none; }
.ora-player .page-heading { margin-bottom: 26px; gap: 20px; }
.ora-player .page-heading h1 { font-size: clamp(24px, 2.7vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.ora-player .page-heading > div > p:last-child { color: var(--ora-muted); font-size: 13px; line-height: 1.7; max-width: 68ch; }
.ora-player .catalog-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ora-player .segmented { background: var(--ora-bg1); border: 1px solid var(--ora-line); border-radius: 11px; padding: 4px; gap: 4px; }
.ora-player .segmented > button { padding: 10px 15px; border-radius: 8px; font-size: 12px; min-height: 42px; font-weight: 600; color: var(--ora-muted); }
.ora-player .segmented > button.selected { background: #6e31d0; color: #fff; box-shadow: none; }
.ora-player .segmented > button > span { color: #e1c9ff; }
.ora-player .search-field { background: var(--ora-bg2); color: var(--ora-muted); border: 1px solid var(--ora-line); border-radius: 10px; min-height: 49px; max-width: 290px; }
.ora-player .search-field:focus-within { border-color: #ab6bf3; box-shadow: 0 0 0 3px #7c3aed26; }
.ora-player .search-field input { color: #fff; font-size: 13px; caret-color: #d6b4ff; }
.ora-player .search-field input::-moz-placeholder { color: #b4a7c8; }
.ora-player .search-field input::placeholder { color: #b4a7c8; }
.ora-player .catalog-caption { color: var(--ora-muted); font-size: 11px; margin-bottom: 18px; }
.ora-player :is(.account-card,.balance-card,.surface-panel,.chat-panel,.profile-identity,.notification-card,.tier-card) { background: var(--ora-bg2); border: 1px solid var(--ora-line); border-radius: 14px; box-shadow: none; }
.ora-player :is(.quiet-card,.faq-list details,.reward-nav > a) { background: var(--ora-bg2); color: var(--ora-muted); border: 1px solid var(--ora-line); border-radius: 12px; }
.ora-player :is(.quiet-card h3,.faq-list summary,.balance-card > p,.reward-nav h3,.notification-card h3) { color: #fff; }
.ora-player :is(.quiet-card p,.faq-list details p,.balance-card > span:not(.empty-icon),.reward-nav p,.notification-card p,.panel-footnote,.chat-heading p,.chat-welcome p,.chat-empty) { color: var(--ora-muted); font-size: 12px; line-height: 1.7; }
.ora-player :is(.quiet-card svg,.panel-heading svg,.reward-nav > a > svg:first-child,.notification-card > svg) { color: #c19bf3; }
.ora-player :is(.panel-heading,th,td,.chat-heading,.chat-composer,.panel-footnote) { border-color: var(--ora-line); }
.ora-player .panel-heading { padding: 20px 22px; background: #190c2d; }
.ora-player .panel-heading h2 { font-size: 17px; font-weight: 650; }
.ora-player .field-label > span { color: #ded1ee; font-size: 12px; }
.ora-player .field, .ora-player .small-select { min-height: 46px; background: #0d061c; color: #fff; border: 1px solid #79539c70; border-radius: 9px; font-family: var(--ora-font-body); font-size: 14px; caret-color: #d6b4ff; }
.ora-player .field::-moz-placeholder { color: #ad9cc0; }
.ora-player .field::placeholder { color: #ad9cc0; }
.ora-player .field:focus { border-color: #b57af5; outline: 2px solid #a855f733; }
.ora-player .field[readonly] { color: #c5b8d8; }
.ora-player :is(.field option,.small-select option) { color: #fff; background: #1f0f3a; }
.ora-player .account-grid { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.ora-player .account-card { padding: 24px; }
.ora-player .account-card-top img { border-radius: 12px; }
.ora-player .account-card h2 { font-size: 25px; font-weight: 700; }
.ora-player .account-card .status-label { color: var(--ora-muted); font-size: 9px; }
.ora-player .account-balance span { color: var(--ora-muted); font-size: 11px; }
.ora-player .account-balance strong { font-family: var(--ora-font-body); color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -.025em; }
.ora-player .wallet-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2,minmax(0,1fr)); gap: 16px; }
.ora-player .cash-card { grid-column: auto; padding: 27px; border-radius: 16px; border: 1px solid #bd84e754; background: #281144; }
.ora-player .cash-card > .eyebrow { display: block; color: #e1caef; font-size: 11px; letter-spacing: 0; font-weight: 600; }
.ora-player .cash-card > strong { color: #fff; font-size: clamp(36px,4vw,52px); font-weight: 750; letter-spacing: -.025em; margin: 16px 0 8px; }
.ora-player .cash-card > div { flex-wrap: wrap; }
.ora-player .wallet-watermark { color: #b880ec24; }
.ora-player .balance-card { padding: 25px; }
.ora-player .balance-card > strong { color: #fff; font-weight: 700; font-size: 31px; }
.ora-player .balance-card h3 { color: #fff; font-family: var(--ora-font-display); font-weight: 700; font-size: 23px; }
.ora-player .empty-icon { color: #c69ef6; border-color: #a261e454; background: #38165a; border-radius: 12px; }
.ora-player th { color: #bbaaCE; font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 15px 22px; background: #110820; }
.ora-player td { padding: 17px 22px; font-size: 12px; color: #e2d8ef; }
.ora-player td > small { color: #b1a1c7; font-size: 10px; }
.ora-player :is(td,.cash-card,.balance-card,.large-stat,.account-balance) { font-variant-numeric: tabular-nums; }
.ora-player .status-tag { color: #e5cafe; border-color: #a46bd44f; background: #63299d24; }
.ora-player .status-tag.approved { color: #a9ecc7; background: #1c6b4824; border-color: #5fc18b40; }
.ora-player .rewards-hero { padding: 34px; border: 1px solid #a36def70; border-radius: 20px; background: #251145; gap: 26px; }
.ora-player .rewards-hero h2 { margin: 0 0 15px; color: #fff; font-family: var(--ora-font-display); font-size: clamp(31px,3.3vw,46px); font-weight: 750; line-height: 1.15; }
.ora-player .rewards-hero p { color: #d4c1e8; font-size: 13px; }
.ora-player .reward-sculpture { color: var(--ora-gold); width: 190px; height: 190px; }
.ora-player .reward-sculpture svg { filter: drop-shadow(0 12px 16px #07000f5c); }
.ora-player .reward-sculpture > span { color: #d1b5eb; }
.ora-player .reward-orbit { border-color: #bd8aee38; box-shadow: 0 0 0 20px #9853da0a; }
.ora-player .reward-nav { gap: 14px; margin-top: 18px; }
.ora-player .reward-nav > a { padding: 23px; transition: background 160ms,border-color 160ms; }
.ora-player .reward-nav > a:hover { background: #24113d; border-color: #a96be66b; }
.ora-player .reward-nav h3 { font-size: 16px; font-weight: 650; }
.ora-player .reward-nav p { margin-top: 7px; }
.ora-player .reward-nav-arrow { color: #b98aeb; }
.ora-player .balance-badge { border-color: #a164d73b; color: #e0bffc; background: #3e1b5c; }
.ora-player .reward-items { gap: 16px; padding: 22px; }
.ora-player .reward-item { background: #1d0e32; border: 1px solid var(--ora-line); border-radius: 12px; }
.ora-player .reward-item-icon { color: var(--ora-gold); }
.ora-player .reward-item strong { font-family: var(--ora-font-body); font-size: 30px; font-weight: 700; color: #fff; }
.ora-player .reward-item p { color: var(--ora-muted); }
.ora-player .large-stat { font-family: var(--ora-font-display); color: #fff; font-size: 60px; font-weight: 700; }
.ora-player .support-layout { grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); gap: 22px; }
.ora-player .chat-heading { min-height: 82px; padding: 20px; background: #1b0e30; }
.ora-player .chat-heading h2 { font-size: 16px; }
.ora-player .support-avatar { background: #3c1b62; color: #e1bcff; border-color: #a56bdd45; width: 42px; height: 42px; border-radius: 11px; }
.ora-player .chat-welcome { color: #bc94ee; }
.ora-player .chat-welcome h3 { font-family: var(--ora-font-display); font-size: 25px; font-weight: 650; color: #fff; }
.ora-player .message { background: #27123f; border-color: #a263d73d; color: #f0e9fa; border-radius: 11px; }
.ora-player .message.from-player { background: #52228a; border-color: #c18ef541; }
.ora-player .message :is(small,time) { color: #d2bde6; }
.ora-player .chat-composer { background: #130922; padding: 15px; }
.ora-player .chat-composer textarea { background: #0d061c; border-color: #79539c70; color: #fff; border-radius: 9px; font-family: var(--ora-font-body); }
.ora-player .chat-composer textarea::-moz-placeholder { color: #ad9cc0; }
.ora-player .chat-composer textarea::placeholder { color: #ad9cc0; }
.ora-player .faq-list details { padding: 18px; }
.ora-player .faq-list summary { color: #eee4fa; font-size: 12px; }
.ora-player .faq-list summary svg { color: #b084e1; }
.ora-player .profile-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); gap: 22px; }
.ora-player .profile-identity { padding: 34px 24px; background: #1e0e35; }
.ora-player .profile-avatar { background: #4a2176; color: #e8cbff; border: 1px solid #b376e7; font-family: var(--ora-font-display); font-size: 38px; font-weight: 700; }
.ora-player .profile-identity p { color: var(--ora-muted); }
.ora-player .notification-card { padding: 22px; }
.ora-player .notification-card small { color: var(--ora-soft); }
.ora-player .empty-state { padding: 55px 24px; border-radius: 14px; }
.ora-player .empty-state h3 { color: #fff; font-size: 21px; font-weight: 650; }
.ora-player .empty-state > p { color: var(--ora-muted); font-size: 13px; line-height: 1.75; }
.ora-player :is(.loading-state,.ora-page-loading) { color: var(--ora-muted); font-size: 12px; }
.ora-page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; gap: 14px; }
.ora-loading-spinner { width: 36px; height: 36px; border: 2px solid #8c5adc38; border-top-color: #c38af9; border-radius: 50%; animation: spin .75s linear infinite; }
.ora-player .error-inline, .ora-player .error-state { color: #ffc3d2; background: #55162b35; border-color: #bd56774d; }
.ora-player .site-footer { max-width: 1600px; padding: 28px 24px; background: var(--ora-bg1); color: var(--ora-soft); border-color: var(--ora-line); gap: 15px 30px; }
.ora-player .site-footer .play-note { color: var(--ora-soft); font-size: 11px; line-height: 1.8; }
.ora-player .site-footer > span { color: var(--ora-soft); font-size: 10px; }
.ora-player .telegram-contact-panel { background: var(--ora-bg2); border-color: var(--ora-line); color: var(--ora-muted); border-radius: 14px; }
.ora-player .telegram-contact-panel h2 { color: #fff; }
.ora-player .game-requests { background: var(--ora-bg2); border-color: var(--ora-line); border-radius: 14px; }
.ora-player .manual-request { border-color: var(--ora-line); }
.ora-player .manual-request-top strong { color: #fff; }
.ora-player .manual-request :is(p,small) { color: var(--ora-muted); }
.ora-player .manual-status { color: #e3c7ff; background: #67329220; border-color: #b470e133; }
/* Account access keeps the existing auth markup, artwork, eligibility and Telegram handoff intact. */
.account-page.social-auth-page {
  --public-bg: #06020f;
  --public-surface: #150a26;
  --public-border: #8c5adc38;
  --public-muted: #c2b9d3;
  --public-gold: #ffc936;
  background: #0d061c;
  color: #fff;
  font-family: var(--ora-font-body);
}
.account-page.social-auth-page .account-header { min-height: calc(72px + env(safe-area-inset-top, 0px)); padding-inline: clamp(24px,5vw,72px); background: #0d061c; border-color: var(--ora-line); }
.account-page.social-auth-page .account-header .brand b { font-family: var(--ora-font-display); font-weight: 800; color: #fff; letter-spacing: -.03em; }
.account-page.social-auth-page .account-header .brand i { color: #d6b4ff; }
.account-page.social-auth-page .account-header .brand small { color: var(--ora-muted); }
.account-page.social-auth-page .account-header .brand-mark { background: transparent; border: 0; }
.account-page.social-auth-page .account-back { color: #d4c3e7; font-size: 12px; }
.account-page.social-auth-page .account-main { max-width: 1200px; padding-block: 42px; gap: clamp(40px,6vw,84px); }
.account-page.social-auth-page .account-kicker { display: none; }
.account-page.social-auth-page .account-welcome h2 { margin-top: 0; font-size: clamp(38px,4.2vw,56px); font-family: var(--ora-font-display); font-weight: 750; color: #fff; letter-spacing: -.025em; line-height: 1.13; }
.account-page.social-auth-page .account-welcome h2 em { color: #d6b4ff; font-style: normal; font-weight: 750; }
.account-page.social-auth-page .account-welcome-copy { font-size: 14px; color: var(--ora-muted); margin-top: 18px; }
.account-page.social-auth-page .account-welcome-features { border-color: var(--ora-line); }
.account-page.social-auth-page .account-welcome-features > span { color: var(--ora-muted); }
.account-page.social-auth-page .account-welcome-features svg { color: #c491fa; }
.account-page.social-auth-page .access-card { padding: 34px; background: #150a26; border: 1px solid #9b63d14a; border-radius: 16px; box-shadow: 0 22px 60px #02000740; }
.account-page.social-auth-page .access-card::before { display: none; }
.account-page.social-auth-page .access-card h1 { font-size: clamp(28px,3vw,35px); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.account-page.social-auth-page .account-intro { color: var(--ora-muted); font-size: 13px; line-height: 1.75; }
.account-page.social-auth-page .social-auth-button { min-height: 52px; padding: 12px 15px; border: 1px solid #9d6ad94d; border-radius: 10px; color: #f1e6ff; background: #291245; font-size: 13px; }
.account-page.social-auth-page .social-auth-button:hover:not(:disabled) { background: #3b195e; border-color: #bc7bfa; }
.account-page.social-auth-page .social-auth-button:disabled { color: #ac9cbc; border-color: #6849835c; background: #211232; opacity: .65; }
.account-page.social-auth-page :is(.social-auth-icon,.social-auth-arrow) { color: #d9b8ff; }
.account-page.social-auth-page .social-auth-button small { color: #c6b3d9; }
.account-page.social-auth-page .social-auth-button.social-auth-button-google { background: #fff; border-color: #dadce0; color: #3c4043; }
.account-page.social-auth-page .social-auth-button.social-auth-button-google:hover:not(:disabled) { background: #f8f8f8; border-color: #bdc1c6; }
.account-page.social-auth-page .social-auth-button.social-auth-button-google:disabled { background: #f1f3f4; color: #646b75; border-color: #e0e0e0; }
.account-page.social-auth-page .social-auth-button-google .social-auth-arrow { color: #5f6368; }
.account-page.social-auth-page .social-auth-button-google small { color: #646b75; }
.account-page.social-auth-page :is(.social-auth-hint,.social-auth-status,.social-auth-methods-error,.telegram-login-description,.telegram-login-hint) { color: var(--ora-muted); font-size: 12px; line-height: 1.7; }
.account-page.social-auth-page .account-eligibility { color: #d9c9eb; background: #25123d; border: 1px solid var(--ora-line); border-radius: 9px; font-size: 11px; line-height: 1.7; margin: 20px 0; }
.account-page.social-auth-page .account-eligibility input { accent-color: #a855f7; width: 18px; height: 18px; }
.account-page.social-auth-page :is(.social-auth-email,.account-assistance) { border-color: var(--ora-line); }
.account-page.social-auth-page :is(.social-auth-email summary,.account-assistance summary) { color: #e4d5f5; font-size: 12px; }
.account-page.social-auth-page .access-card .field { background: #0d061c; color: #fff; border-color: #79539c70; border-radius: 9px; min-height: 48px; caret-color: #d6b4ff; }
.account-page.social-auth-page .access-card .field::-moz-placeholder { color: #b8a6cc; }
.account-page.social-auth-page .access-card .field::placeholder { color: #b8a6cc; }
.account-page.social-auth-page .access-card .field:focus { border-color: #ba7df7; outline: 3px solid #a855f726; }
.account-page.social-auth-page :is(.account-password-label,.field-label > span) { color: #e2d4ee; font-size: 12px; }
.account-page.social-auth-page .account-password > button { color: #c7b4dc; }
.account-page.social-auth-page .access-card .public-button { min-height: 48px; background: linear-gradient(#ffe27a,#ffc936); color: #2b1600; border: 1px solid #ffe88d; border-bottom-color: #c17e00; border-radius: 9px; box-shadow: inset 0 1px #fff2,0 3px 0 #9b6200; font-family: var(--ora-font-body); font-size: 13px; font-weight: 750; }
.account-page.social-auth-page .account-switch { color: var(--ora-muted); font-size: 12px; }
.account-page.social-auth-page .account-switch button { color: #d6b4ff; }
.account-page.social-auth-page .account-assistance p { color: var(--ora-muted); font-size: 12px; line-height: 1.75; }
.account-page.social-auth-page .account-footer { background: #0d061c; border-color: var(--ora-line); color: var(--ora-soft); }
.account-page.social-auth-page .account-footer :is(.play-note,span) { color: var(--ora-soft); font-size: 10px; }
.account-page.social-auth-page .account-error { color: #ffc3d2; background: #55162b35; border-color: #bd56774d; }
.account-page.social-auth-page :is(button,summary,input,a):focus-visible { outline: 2px solid #d6b4ff; outline-offset: 4px; }
/* Existing game and wallet dialogs use a portal outside the player wrapper. */
.modal-content :is(.game-onboarding h3,.game-balance-display strong) { font-family: var(--ora-font-display); color: #fff; font-weight: 700; }
.modal-content :is(.game-onboarding p,.game-balance-display > span,.credential-row small,.manual-service-note p,.manual-request-form p,.manual-notice,.manual-help) { color: var(--ora-muted); }
.modal-content .game-balance-display { background: #281144; border-color: #bd84e754; border-radius: 12px; }
.modal-content .credential-row { border-color: var(--ora-line); }
.modal-content .credential-row code { color: #f2e7ff; }
.modal-content .quiet-card { background: var(--ora-bg3); color: var(--ora-muted); border-color: var(--ora-line); }
.modal-content .quiet-card h3 { color: #fff; }
.modal-content .segmented { background: var(--ora-bg1); border-color: var(--ora-line); }
.modal-content .segmented > button { color: var(--ora-muted); }
.modal-content .segmented > button.selected { background: #6e31d0; color: #fff; }
.modal-content .field::-moz-placeholder { color: #b8a6cc; }
.modal-content .field::placeholder { color: #b8a6cc; }
.modal-content .field-label > span { color: #ded1ee; }
.modal-content .manual-service-note { background: #281144; border-color: var(--ora-line); color: #e2bdff; }
.modal-content .manual-service-badge { color: #dfc7f4; }
.modal-content .manual-actions .button-secondary { background: #291245; border-color: #9e66d74d; color: #e9d4ff; }
.modal-content .manual-actions .button-secondary.selected { border-color: #ba7df4; background: #4b2174; }
.modal-content .manual-request-form .field { background: #0d061c; border-color: #79539c70; color: #fff; }
@media (min-width: 1500px) {
  .ora-player .game-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .ora-player .catalog-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 1250px) {
  .ora-player .hero-grid { grid-template-columns: minmax(0,2.25fr) minmax(225px,1fr); }
  .ora-player .casino-hero,.ora-player .spotlight-card { min-height: 365px; }
  .ora-player .hero-copy { padding: 28px 24px; width: 68%; }
  .ora-player .hero-copy h2 { font-size: 43px; }
  .ora-player .game-grid,.ora-player .catalog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .ora-player .wallet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ora-player .cash-card { grid-column: 1/-1; }
  .ora-player .lobby-shortcuts > a { padding: 13px; gap: 9px; }
  .ora-player .lobby-shortcuts > a > svg:last-child { display: none; }
}
@media (max-width: 1024px) {
  .ora-player .sidebar { width: min(300px,calc(100vw - 48px)); z-index: 81; padding: calc(24px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px)); transform: translateX(-100%); transition: transform 220ms var(--ora-ease); }
  .ora-player .sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 70px #0008; }
  .ora-player .sidebar-brand { padding: 0 38px 26px 6px; }
  .ora-player .sidebar-close { top: calc(22px + env(safe-area-inset-top,0px)); right: 13px; color: #dac5ef; width: 42px; height: 42px; }
  .ora-player .sidebar-backdrop { background: #05000ccb; backdrop-filter: blur(3px); }
  .ora-player .side-link { min-height: 47px; }
  .ora-player .main-shell { margin-left: 0; }
  .ora-player .topbar { height: calc(64px + env(safe-area-inset-top,0px)); padding-inline: max(20px, env(safe-area-inset-left,0px)) max(20px, env(safe-area-inset-right,0px)); }
  .ora-player .mobile-brand b { font-size: 12px; }
  .ora-player .mobile-brand .brand-mark { width: 30px; height: 34px; background: transparent; border: 0; }
  .ora-player .bottom-nav { border-top: 1px solid var(--ora-line); background: #0d061cf5; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom,0px)); backdrop-filter: none; }
  .ora-player .bottom-nav > a { min-height: 48px; gap: 5px; font-size: 10px; color: #b7a5cc; border-radius: 9px; }
  .ora-player .bottom-nav > a.active { color: #e1c3ff; background: #54218b40; }
  .ora-player .bottom-nav > a.active svg { color: #c694ff; }
  .ora-player .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom,0px)); }
  .ora-player .hero-grid { grid-template-columns: minmax(0,2.3fr) minmax(220px,1fr); }
  .ora-player .spotlight-card { display: flex; }
  .ora-player .support-layout { grid-template-columns: minmax(0,1fr); }
  .ora-player .chat-composer:focus-within { background: #130922; }
}
@media (max-width: 760px) {
  .ora-player .page-content { padding: 20px 16px 30px; }
  .ora-player .preview-bar { padding: 8px 16px; gap: 4px 8px; font-size: 9px; line-height: 1.6; }
  .ora-player .preview-bar a { display: none; }
  .ora-player .topbar { padding-inline: max(14px,env(safe-area-inset-left,0px)) max(14px,env(safe-area-inset-right,0px)); }
  .ora-player .topbar-actions { gap: 6px; }
  .ora-player .wallet-chip { padding: 4px; gap: 4px; }
  .ora-player .wallet-chip b { font-size: 12px; }
  .ora-player .wallet-chip span { gap: 0; }
  .ora-player .lobby-intro { margin-bottom: 15px; }
  .ora-player .lobby-intro h1 { font-size: 23px; }
  .ora-player .hero-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .ora-player .casino-hero { min-height: 350px; background-size: auto 108%; background-position: 104% center; border-radius: 16px; }
  .ora-player .hero-copy { width: 64%; padding: 26px 23px; }
  .ora-player .hero-copy h2 { font-size: 45px; }
  .ora-player .hero-copy > p { font-size: 11px; }
  .ora-player .spotlight-card { min-height: 180px; padding: 20px; padding-left: 175px; justify-content: center; border-radius: 14px; }
  .ora-player .spotlight-art { width: 126px; height: 130px; left: 22px; top: 24px; right: auto; }
  .ora-player .spotlight-art img { width: 120px; height: 120px; transform: rotate(-7deg); }
  .ora-player .spotlight-card .status-label { margin: 0 0 4px; }
  .ora-player .spotlight-card h2 { font-size: 21px; margin-bottom: 6px; }
  .ora-player .spotlight-card p { font-size: 10px; margin-bottom: 12px; }
  .ora-player .spotlight-card p br { display: none; }
  .ora-player .spotlight-card > .flex { display: none; }
  .ora-player .spotlight-card .button-secondary { width: auto; min-height: 40px; padding: 10px 12px; font-size: 10px; align-self: flex-start; }
  .ora-player .lobby-shortcuts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0 28px; }
  .ora-player .lobby-shortcuts > a { min-height: 103px; flex-direction: column; padding: 14px 8px; text-align: center; align-items: center; gap: 10px; }
  .ora-player .lobby-shortcuts b { font-size: 10px; line-height: 1.5; }
  .ora-player .lobby-shortcuts small { display: none; }
  .ora-player .section-heading { gap: 10px; align-items: center; flex-wrap: nowrap; }
  .ora-player .section-heading h2 { font-size: 19px; gap: 7px; }
  .ora-player .section-heading .text-link { font-size: 10px; white-space: nowrap; gap: 4px; }
  .ora-player .section-heading .text-link svg { width: 13px; }
  .ora-player .section-description { font-size: 11px; margin-bottom: 17px; }
  .ora-player .game-grid,.ora-player .catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 11px; }
  .ora-player .game-cover { border-radius: 11px; }
  .ora-player .game-caption h3 { font-size: 12px; }
  .ora-player .game-caption p { font-size: 9px; }
  .ora-player .game-caption > button { min-width: 24px; width: 24px; }
  .ora-player .catalog-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .ora-player .catalog-toolbar .segmented { width: 100%; overflow-x: auto; }
  .ora-player .catalog-toolbar .segmented > button { flex: 0 0 auto; padding: 9px 12px; font-size: 11px; }
  .ora-player .catalog-toolbar .search-field { width: 100%; max-width: none; }
  .ora-player .search-field input,.ora-player .field,.ora-player .chat-composer textarea { font-size: 16px; }
  .ora-player .page-heading { flex-wrap: wrap; margin-bottom: 23px; gap: 16px; }
  .ora-player .page-heading h1 { font-size: 26px; }
  .ora-player .page-heading > div > p:last-child { font-size: 12px; }
  .ora-player .promo-grid { grid-template-columns: minmax(0,1fr); margin-top: 28px; gap: 14px; }
  .ora-player .promo-card { min-height: 165px; padding: 22px; }
  .ora-player .promo-card h2 { font-size: 24px; max-width: 280px; }
  .ora-player .promo-medallion { display: grid; width: 64px; height: 64px; }
  .ora-player .promo-medallion svg { width: 44px; height: 44px; }
  .ora-player .profile-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .ora-player .wallet-grid { gap: 14px; }
  .ora-player .rewards-hero { padding: 26px; }
  .ora-player .rewards-hero h2 { font-size: 33px; }
  .ora-player .reward-sculpture { width: 135px; height: 135px; }
  .ora-player .reward-sculpture svg { width: 75px; }
  .ora-player .reward-items { padding: 18px; gap: 12px; }
  .ora-player .reward-item { padding: 22px 12px; }
  .ora-player .site-footer { padding-inline: 20px; }
  .account-page.social-auth-page .account-header { min-height: calc(64px + env(safe-area-inset-top,0px)); padding-inline: 20px; }
  .account-page.social-auth-page .account-main { display: block; max-width: 510px; padding: 14px 20px 34px; }
  .account-page.social-auth-page .access-card { padding: 28px; border-radius: 14px; }
  .account-page.social-auth-page .access-card h1 { font-size: 30px; }
  .account-page.social-auth-page .access-card .field { font-size: 16px; }
  .account-page.social-auth-page .account-back { font-size: 11px; }
}
@media (max-width: 520px) {
  .ora-player .game-grid,.ora-player .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  .ora-player .hero-copy { width: 78%; padding: 25px 21px; }
  .ora-player .casino-hero { min-height: 365px; background-position: 145% 50%; background-size: auto 96%; }
  .ora-player .casino-hero::before { background: linear-gradient(90deg,#1d0c3cf5,#211047db 42%,#21104740 75%); }
  .ora-player .hero-copy h2 { font-size: 42px; }
  .ora-player .hero-copy > p { max-width: 210px; }
  .ora-player .hero-copy .button-gold { padding-inline: 15px; font-size: 11px; }
  .ora-player .hero-footnote { max-width: 170px; font-size: 9px; }
  .ora-player .spotlight-card { padding-left: 143px; min-height: 180px; }
  .ora-player .spotlight-art { left: 15px; top: 31px; width: 105px; height: 110px; }
  .ora-player .spotlight-art img { width: 105px; height: 105px; }
  .ora-player .spotlight-card h2 { font-size: 19px; }
  .ora-player .spotlight-card .button-secondary { font-size: 9px; gap: 6px; }
  .ora-player .wallet-grid { grid-template-columns: minmax(0,1fr); }
  .ora-player .cash-card { padding: 24px; }
  .ora-player .cash-card > div > button { min-width: 110px; flex: 1; }
  .ora-player .balance-card { padding: 24px; }
  .ora-player .reward-sculpture { display: none; }
  .ora-player .rewards-hero { padding: 26px 23px; }
  .ora-player .rewards-hero h2 { font-size: 31px; }
  .ora-player .reward-items { grid-template-columns: minmax(0,1fr); }
  .ora-player .page-heading h1 { font-size: 25px; }
  .ora-player .catalog-caption > span:last-child { display: none; }
  .ora-player .notifications-button { display: none; }
  .ora-player .mobile-brand b { font-size: 11px; }
  .ora-player .topbar .mobile-menu { min-width: 35px; width: 35px; }
  .ora-player .wallet-chip .wallet-plus { width: 26px; height: 26px; }
  .ora-player .avatar { width: 34px; height: 34px; font-size: 13px; }
  .ora-player .chat-heading { padding: 17px; }
  .ora-player .notification-card { padding: 19px; }
  .account-page.social-auth-page .account-header { padding-inline: 16px; }
  .account-page.social-auth-page .account-main { padding: 10px 14px 30px; }
  .account-page.social-auth-page .access-card { padding: 26px 22px; }
}
@media (max-width: 380px) {
  .ora-player .mobile-brand b { display: none; }
  .ora-player .page-content { padding-inline: 12px; }
  .ora-player .section-heading h2 { font-size: 17px; }
  .ora-player .hero-copy h2 { font-size: 39px; }
  .ora-player .spotlight-card { padding-left: 127px; }
  .ora-player .spotlight-art { left: 14px; width: 94px; }
  .ora-player .spotlight-art img { width: 94px; height: 100px; }
  .ora-player .spotlight-card .button-secondary { font-size: 9px; padding-inline: 9px; }
  .ora-player .promo-card h2 { font-size: 21px; }
  .ora-player .promo-medallion { display: none; }
  .account-page.social-auth-page .access-card { padding-inline: 18px; }
}
@media (hover: none) {
  .ora-player .game-cover-action { opacity: 1; align-items: end; justify-items: start; padding: 10px; background: linear-gradient(transparent 65%,#0d061c77); }
  .ora-player .game-cover-action > span { width: 33px; height: 33px; background: #0d061cdd; color: #ffde72; border: 1px solid #c593ee54; box-shadow: none; }
  .ora-player .game-cover-action svg { width: 15px; height: 15px; }
}
@media (pointer: coarse) {
  .ora-player :is(.icon-button,.favorite-button,.game-caption > button,.message-actions button,.text-link,.manual-cancel) { min-width: 44px; min-height: 44px; }
  .ora-player .favorite-button { width: 44px; height: 44px; }
  .ora-player .faq-list summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ora-player .sidebar,.ora-player .game-cover > img { transition: none; }
  .ora-loading-spinner { animation-duration: 2s; }
}

/* Game accounts keep the approved violet/gold player theme. */
.ora-player .my-game-list { display: grid; gap: 16px; }
.ora-player .my-game-item { display: grid; grid-template-columns: minmax(210px, 1.3fr) minmax(140px, .8fr) minmax(180px, 1fr); align-items: center; gap: 24px; padding: 24px; background: var(--ora-bg2); border: 1px solid var(--ora-line); border-radius: 14px; }
.my-game-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.my-game-identity > img { flex: 0 0 auto; width: 64px; height: 64px; -o-object-fit: cover; object-fit: cover; border-radius: 12px; }
.my-game-identity > div { min-width: 0; }
.ora-player .my-game-identity h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.my-game-identity p { margin-top: 6px; color: var(--ora-muted); font-size: 14px; overflow-wrap: anywhere; }
.my-game-balance { min-width: 0; }
.my-game-balance > span { display: block; color: var(--ora-muted); font-size: 12px; line-height: 1.5; }
.my-game-balance > strong { display: block; margin-top: 5px; color: #fff; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.my-game-manage { display: flex; align-items: flex-end; flex-direction: column; gap: 12px; min-width: 0; }
.my-game-manage > .button-gold { min-width: 164px; }
.my-game-manage > p { margin: 0; color: var(--ora-muted); font-size: 12px; line-height: 1.5; text-align: end; }
.game-account-dialog { max-width: 540px; }
.game-account-dialog .game-account-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.game-account-dialog .game-account-tabs > button { min-width: 0; min-height: 44px; padding: 9px 6px; font-size: 12px; line-height: 1.35; border-radius: 8px; }
.game-wallet-availability { padding-block: 2px 14px; border-bottom: 1px solid var(--ora-line); }
.game-wallet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-account-dialog .game-wallet-heading h3 { font: inherit; font-size: 14px; font-weight: 650; color: #f4eaff; }
.game-wallet-heading > button { flex-shrink: 0; }
.game-wallet-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.game-wallet-balances > div { min-width: 0; }
.game-wallet-balances dt { color: var(--ora-muted); font-size: 12px; }
.game-wallet-balances dd { margin: 5px 0 0; font-size: 24px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; overflow-wrap: anywhere; }
.game-wallet-status { margin-top: 10px; color: var(--ora-muted); font-size: 12px; line-height: 1.6; }
.game-load-availability { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ora-muted); }
.game-load-availability p + p { margin-top: 4px; }
.game-load-availability strong { color: #f1e5ff; font-weight: 650; }
.game-load-availability.is-insufficient { padding: 13px 15px; border: 1px solid #ba825652; border-radius: 10px; background: #3b211f66; color: #f2d5bc; }
.game-load-availability.is-insufficient strong { color: #ffe3ad; }
.game-load-wallet-link { margin-top: 9px; min-height: 32px; }
.game-account-dialog .field, .game-account-dialog .field option { background: #0d061c; color: #f7efff; }
.game-account-dialog .field:focus-visible { outline: 2px solid #d6b4ff; outline-offset: 3px; }
.game-account-dialog :is(.text-link,button):focus-visible, .my-game-item button:focus-visible { outline: 2px solid #d6b4ff; outline-offset: 4px; }
.game-account-dialog .field[aria-invalid="true"] { border-color: #e8a879; }
.game-account-dialog .game-load-breakdown { margin-top: 16px; }
@media (max-width: 850px) {
  .ora-player .my-game-item { grid-template-columns: minmax(180px, 1fr) minmax(130px, auto); gap: 20px; }
  .my-game-manage { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .my-game-manage > p { max-width: 30ch; }
}
@media (max-width: 480px) {
  .ora-player .my-game-item { padding: 20px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .my-game-identity > img { width: 56px; height: 56px; }
  .ora-player .my-game-identity h2 { font-size: 20px; }
  .my-game-balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .my-game-balance > span { max-width: 16ch; }
  .my-game-balance > strong { margin: 0; font-size: 26px; }
  .my-game-manage { flex-direction: column; align-items: stretch; gap: 12px; }
  .my-game-manage > p { max-width: none; text-align: start; }
  .game-account-dialog { padding: 24px 20px; }
  .game-account-dialog .field { font-size: 16px; }
  .game-wallet-balances dd { font-size: 22px; }
}

.deposit-flow,
.deposit-current,
.deposit-form {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.deposit-flow .field { font-size: 16px; }
.deposit-notice {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ffc93655;
  border-radius: 12px;
  background: #ffc9360c;
  color: #ffe6a4;
  font-size: 14px;
  line-height: 1.6;
}
.deposit-status { text-align: center; }
.deposit-status-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: #d6b4ff;
}
.deposit-status.is-approved .deposit-status-icon { color: #66e9c4; }
.deposit-status h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.deposit-status p,
.deposit-form-help,
.deposit-expiry,
.deposit-new-action p,
.deposit-pending > p {
  margin: 8px 0 0;
  color: #c4b5d8;
  font-size: 14px;
  line-height: 1.6;
}
.deposit-summary {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-block: 18px;
  border-block: 1px solid #8c5adc38;
  text-align: center;
}
.deposit-summary > span { color: #e1d5ee; font-size: 14px; }
.deposit-summary strong {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.deposit-summary small { color: #bcaacb; font-size: 12px; }
.deposit-instructions { display: grid; gap: 16px; }
.deposit-instructions > p { margin: 0; font-size: 14px; line-height: 1.6; }
.deposit-copy-row { display: flex; align-items: center; gap: 12px; }
.deposit-copy-row > div { flex: 1; min-width: 0; }
.deposit-copy-row span { display: block; color: #bcaacb; font-size: 12px; }
.deposit-copy-row code { display: block; overflow-wrap: anywhere; font-size: 14px; }
.deposit-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.deposit-actions > button:first-child { flex: 1; }
.deposit-new-action { display: grid; gap: 12px; }
.deposit-new-action p { margin: 0; text-align: center; }
.deposit-form-help, .deposit-expiry { margin: 0; }
.deposit-pending { padding-top: 4px; }
.deposit-pending > h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 700; }
.deposit-pending > p { margin-block: 4px 12px; }
.deposit-history { border-top: 1px solid #8c5adc38; padding-top: 16px; }
.deposit-history summary {
  min-height: 32px;
  color: #d7c8e8;
  font-size: 14px;
  cursor: pointer;
}
.deposit-history summary span { padding-inline-start: 8px; color: #bcaacb; }
.deposit-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 12px 0;
  border-bottom: 1px solid #8c5adc28;
  color: #e9e0f2;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.deposit-history-row > span { min-width: 0; overflow-wrap: anywhere; }
.deposit-history-row > span:last-child { text-align: right; }
.deposit-history-row b { display: block; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.deposit-history-row small { display: block; margin-top: 3px; color: #bcaacb; font-size: 12px; }
.deposit-history-row:hover:not(:disabled) { color: #ffe27a; }
.deposit-history-row:disabled { opacity: .55; cursor: default; }
.deposit-history-action { display: flex; align-items: center; gap: 5px; color: #ffe27a; }
.deposit-history-empty { margin: 0; padding-block: 8px; color: #bcaacb; font-size: 14px; }
.deposit-flow :is(button, a, summary):focus-visible { outline: 2px solid #ffe27a; outline-offset: 4px; }
@media (max-width: 380px) {
  .deposit-actions { flex-direction: column; }
  .deposit-actions > button { width: 100%; }
  .deposit-history-row { gap: 10px; }
}
.hover\:bg-amber-400:hover{--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}
.hover\:bg-amber-950\/60:hover{background-color:rgb(69 26 3 / 0.6)}
.hover\:bg-black\/60:hover{background-color:rgb(0 0 0 / 0.6)}
.hover\:bg-neutral-500:hover{--tw-bg-opacity:1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}
.hover\:bg-neutral-700:hover{--tw-bg-opacity:1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}
.hover\:bg-red-500:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}
.hover\:bg-red-900\/50:hover{background-color:rgb(127 29 29 / 0.5)}
.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}
.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}
.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.hover\:opacity-90:hover{opacity:0.9}
.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)}
.active\:scale-\[0\.98\]:active{--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))}
.group:hover .group-hover\:opacity-100{opacity:1}
@media (min-width: 640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width: 768px){.md\:h-28{height:7rem}.md\:w-28{width:7rem}.md\:p-4{padding:1rem}.md\:p-8{padding:2rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xs{font-size:0.75rem;line-height:1rem}}