.ux-menu-bonus { font-family: "Fredoka","Chillax","Trebuchet MS",sans-serif; font-size: 16px; font-weight: 600; }
.ux-menu-bonus.ux-page::after { height: 0.3125rem; background: var(--fxkc); }
.ux-unit-view .ux-table { border: 2.5px solid rgb(58, 22, 72); box-shadow: 5px 5px 0 rgb(58, 22, 72); }
.ux-box-ace { min-height: 28.75rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); display: grid; gap: 14px; }
.ux-nav-win, .ux-unit-head {
  position: relative; overflow: hidden; isolation: isolate; display: block;
  border-radius: var(--u8x0); border: 2.5px solid rgba(58,22,72,0.14); box-shadow: 5px 5px 0 0 rgb(58 22 72); background: rgb(255, 246, 250);
}
.ux-hero-main { gap: 14px; grid-template-rows: 1fr 1fr; display: grid; }
.ux-slot-shape { position: absolute; inset: 0; transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1); height: 100%; object-fit: cover; width: 100%; z-index: -2; object-position: 70% 40%; }
.ux-nav-win:hover .ux-slot-shape, .ux-unit-head:hover .ux-slot-shape { transform: scale(1.04); }
.ux-bar-core { background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.2) 75%); inset: 0; z-index: -1; position: absolute; }
.ux-group-promo { position: absolute; left: clamp(22px, 4vw, 52px); bottom: clamp(22px, 4vw, 48px); right: 42%; display: grid; justify-items: start; gap: 0.875rem; color: #fff; }
.ux-group-promo .ux-bar { color: var(--la5); }
.ux-star-note { display: block; font-size: clamp(34px, 4vw, 60px); }
.ux-star-note em { display: block; }
.ux-row-chip { color: rgba(255, 255, 255, 0.78); max-width: 42ch; }
.ux-zone-zone { left: 1.25rem; right: 20px; bottom: 18px; gap: 8px; }
.ux-meta-inner { font-size: clamp(22px, 2vw, 30px); }
.ux-panel-tray { font-size: var(--lbd); gap: 6px; align-items: center; font-weight: 600; display: inline-flex; color: var(--la5); }
@media (max-width: 960px) {
  .ux-box-ace { grid-template-columns: 1fr; min-height: 0; }
  .ux-nav-win { min-height: 26.25rem; }
  .ux-hero-main { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .ux-unit-head { min-height: 220px; }
  .ux-group-promo { right: 22px; }
}
@media (max-width: 560px) { .ux-hero-main { grid-template-columns: 1fr; } }
.ux-nav-win:has(.ux-race-club) { background: radial-gradient(50% 70% at 80% 50%, rgba(255, 207, 63, 0.45), transparent 70%), radial-gradient(circle at 4px 4px, rgba(255, 79, 154, 0.35) 2px, transparent 2.5px) 0 0 / 28px 28px, radial-gradient(circle at 18px 18px, rgba(63, 217, 160, 0.35) 2px, transparent 2.5px) 0 0 / 28px 28px, rgb(255, 246, 250); }
.ux-nav-win:has(.ux-race-club) .ux-slot-shape { display: none; }
.ux-nav-win:has(.ux-race-club) .ux-group-promo { right: 44%; }
.ux-page-feature { bottom: 0; z-index: 1; width: 46%; min-height: 0; right: 0; position: absolute; top: 8%; }
@media (max-width: 760px) {
  .ux-nav-win:has(.ux-race-club) { min-height: 520px; }
  .ux-nav-win:has(.ux-race-club) .ux-group-promo { right: clamp(22px, 4vw, 52px); }
  .ux-page-feature { height: min(56vw, 250px); right: 0; width: 72%; bottom: auto; top: 0.75rem; }
}
.ux-reel-view { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); list-style: none; margin: 0; gap: 0.625rem; padding: 0; }
.ux-head-crown {
  --rx7: var(--fxkc);
  position: relative; display: grid; align-content: space-between; aspect-ratio: 1; padding: 14px; overflow: hidden;
  border-radius: var(--u8x0); border: 2.5px solid rgba(58,22,72,0.14); background: rgb(255 255 255); box-shadow: 5px 5px 0 0 rgb(58 22 72);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 220ms, box-shadow 220ms;
}
.ux-win-body { --rx7: var(--yxi5); }
.ux-media-star { --rx7: var(--rims); }
.ux-base-offer { --rx7: var(--la5); }
.ux-head-crown::before { content: ""; opacity: 0.12; top: -30%; width: 90%; transition: opacity 220ms, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); aspect-ratio: 1; position: absolute; background: var(--rx7); right: -30%; border-radius: 50%; }
.ux-head-crown:hover { transform: translateY(calc(var(--u2p) * -1)); border-color: var(--rx7); box-shadow: 8px 8px 0 0 rgb(58, 22, 72); }
.ux-head-crown:hover::before { opacity: 0.22; transform: scale(1.15); }
.ux-panel-tile { font-size: 2.125rem; color: var(--rx7); position: relative; }
.ux-crown-card { position: relative; font-weight: 700; font-size: var(--u7c); }
.ux-hero-zone { position: absolute; right: 0.75rem; bottom: 14px; font-size: 11px; color: rgb(156 132 166); }
@media (max-width: 1180px) { .ux-reel-view { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ux-head-crown { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .ux-reel-view { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-set-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.125rem; }
.ux-tray-top { margin: 0; display: grid; list-style: none; padding: 0; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ux-block-lobby {
  --cuy2: 26px;
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  background: rgb(255, 246, 250); align-items: center; gap: 12px;
  min-height: 116px; margin-left: calc(var(--cuy2) * -1 + 4px); padding: 16px 18px 16px calc(var(--cuy2) + 20px);
  clip-path: polygon(0 0, calc(100% - var(--cuy2)) 0, 100% 50%, calc(100% - var(--cuy2)) 100%, 0 100%, var(--cuy2) 50%);
}
.ux-zone-tab { padding-left: 1.25rem; clip-path: polygon(0 0, calc(100% - var(--cuy2)) 0, 100% 50%, calc(100% - var(--cuy2)) 100%, 0 100%); border-radius: var(--u8x0) 0 0 var(--u8x0); margin-left: 0; }
.ux-main-inner { background: rgb(255 217 232); }
.ux-edge-foot { background: color-mix(in srgb, var(--fxkc) 22%, rgb(255, 246, 250)); }
.ux-edge-foot .ux-chip2-body, .ux-edge-foot .ux-promo-row { color: rgb(58, 22, 72); opacity: 0.85; }
.ux-main-list { background: var(--fxkc); color: var(--ayl); }
.ux-main-list .ux-chip2-body, .ux-main-list .ux-promo-row { color: inherit; opacity: 0.8; }
.ux-base-page { color: var(--fxkc); background: rgb(255, 241, 246); border-radius: 50%; height: 2.5rem; font-size: 1.25rem; width: 2.5rem; place-items: center; display: grid; }
.ux-bar-pane { gap: 2px; display: grid; min-width: 0; }
.ux-promo-row { color: rgb(156 132 166); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.ux-chip2-body { font-size: 0.75rem; color: rgb(107 74 120); }
@media (max-width: 1100px) { .ux-set-body { grid-template-columns: 1fr; } .ux-band-dock { justify-self: center; } }
@media (max-width: 760px) {
  .ux-tray-top { filter: none; gap: 6px; grid-template-columns: 1fr; }
  .ux-block-lobby, .ux-zone-tab { margin-left: 0; padding: 14px 18px; min-height: 0; clip-path: none; border-radius: var(--aefa); }
}
.ux-area-line { gap: 0.875rem; overflow-x: auto; padding: 2px 2px 0.625rem; grid-auto-columns: minmax(420px, calc((100% - 14px) / 2)); margin: 0; scroll-snap-type: x mandatory; grid-auto-flow: column; list-style: none; display: grid; scrollbar-width: none; }
.ux-area-line::-webkit-scrollbar { display: none; }
.ux-area-line > li { scroll-snap-align: start; }
.ux-list-chip2 { position: relative; isolation: isolate; display: block; height: 14.375rem; overflow: hidden; border-radius: var(--u8x0); border: 2.5px solid rgba(58,22,72,0.14); background: rgb(255 255 255); box-shadow: 5px 5px 0 0 rgb(58 22 72); }
.ux-list-chip2 img { position: absolute; right: 0; top: 0; z-index: -2; width: 48%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ux-list-chip2:hover img { transform: scale(1.06); }
/*  layout  */
.ux-page-menu { z-index: -1; position: absolute; background: linear-gradient(90deg, rgb(255 255 255) 50%, color-mix(in srgb, rgb(255 255 255) 60%, transparent) 62%, transparent 85%); inset: 0; }
.ux-slot-menu { bottom: 22px; gap: 6px; display: grid; position: absolute; left: 24px; width: 52%; align-content: space-between; top: 22px; }
.ux-ring-grid { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 1.5rem; padding: 0 10px; border-radius: 62.4375rem; background: var(--dyc); color: var(--fxkc); font-size: 11px; font-weight: 600; }
.ux-note-field { font-size: 26px; }
.ux-seal-tab { display: -webkit-box; font-size: var(--lbd); -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: rgb(107 74 120); overflow: hidden; }
.ux-main-pane { font-weight: 600; font-size: var(--lbd); gap: 0.375rem; align-items: center; display: inline-flex; color: var(--fxkc); }
@media (max-width: 720px) { .ux-area-line { grid-auto-columns: 86vw; } .ux-slot-menu { width: 64%; } .ux-list-chip2 img { width: 42%; opacity: 0.55; } .ux-seal-tab { -webkit-line-clamp: 3; } }
.ux-live-slot { padding: 8px; grid-auto-flow: column; display: grid; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); list-style: none; column-gap: 0; }
.ux-bar-list { border-radius: var(--aefa); align-items: center; grid-template-columns: 30px 56px minmax(0, 1fr) auto 36px; gap: 0.75rem; padding: 10px 14px; display: grid; transition: background 220ms; }
.ux-bar-list:hover { background: rgb(255, 246, 250); }
.ux-rail-core { font-size: var(--lo7); color: rgb(156 132 166); }
.ux-bar-list:nth-child(-n + 3) .ux-rail-core { color: var(--fxkc); }
.ux-bar-list img { width: 3.75rem; height: 3.75rem; object-fit: cover; border-radius: calc(var(--aefa) * 0.6); }
.ux-win-stage { min-width: 0; gap: 2px; display: grid; }
.ux-side-page { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 600; }
.ux-pane-link { font-size: var(--ct8l); color: rgb(156 132 166); }
.ux-chip2-race { display: grid; justify-items: end; gap: 2px; font-size: 11px; color: rgb(156 132 166); }
.ux-chip2-race .ux-flag { font-size: var(--lbd); color: rgb(32, 185, 127); }
.ux-page-vip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid rgb(58 22 72); color: rgb(107 74 120); transition: background 220ms, color 220ms, border-color 220ms; }
.ux-bar-list:hover .ux-page-vip { color: var(--ayl); background: var(--fxkc); border-color: var(--fxkc); }
@media (max-width: 1180px) { .ux-live-slot { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ux-live-slot { grid-template-columns: 1fr; } .ux-chip2-race { display: none; } .ux-bar-list { grid-template-columns: 26px 52px minmax(0, 1fr) 36px; } .ux-bar-list img { width: 52px; height: 3.25rem; } }
.ux-item-chip2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; list-style: none; padding: 0; }
.ux-game-dice { gap: 0.25rem; display: grid; min-width: 0; }
.ux-tile-media { display: block; }
.ux-chip2-vip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 6px 8px; text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 55%);
}
.ux-chip2-vip .ux-flag { display: inline-block; padding: 3px 0.5rem; border-radius: 999px; background: var(--fxkc); color: var(--ayl); font-size: 12px; font-weight: 700; }
.ux-chip2-vip.ux-strip .ux-flag { font-size: 13px; box-shadow: 0 0 18px color-mix(in srgb, var(--fxkc) 60%, transparent); }
.ux-deck-spin { overflow: hidden; margin-top: 0.25rem; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; font-size: var(--lbd); }
.ux-band-block { font-size: var(--ct8l); color: rgb(156 132 166); }
@media (max-width: 1180px) { .ux-item-chip2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ux-item-chip2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-seal-ring { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.ux-head-mark { font-size: 38px; gap: 10px; align-items: center; display: flex; }
.ux-head-mark .ux-mark { color: var(--fxkc); }
.ux-field-pane { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ux-frame-frame { flex: none; height: 2.25rem; padding: 0 0.875rem; border-radius: var(--r5tt); border: 2.5px solid rgb(58 22 72); font-size: var(--lbd); color: rgb(107 74 120); transition: background 220ms, color 220ms; }
.ux-frame-frame.ux-page { background: var(--fxkc); border-color: var(--fxkc); color: var(--ayl); }
.ux-front-foot { list-style: none; display: grid; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ux-panel-reel { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem 0.625rem 0.625rem; transition: border-color 220ms; }
.ux-panel-reel:hover { border-color: var(--fxkc); }
.ux-panel-reel img { height: 5.25rem; border-radius: var(--aefa); width: 5.25rem; object-fit: cover; object-position: 50% 15%; }
.ux-line-block { display: grid; gap: 0.3125rem; min-width: 0; }
.ux-step-crest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ux-ace-tile { display: inline-flex; font-size: var(--ct8l); align-items: center; color: rgb(156 132 166); gap: 6px; }
.ux-frame-zone { display: flex; gap: 4px; }
.ux-frame-zone i { width: 14px; height: 0.875rem; border-radius: 50%; border: 2px solid rgb(32, 185, 127); }
.ux-frame-zone i.ux-foot { background: rgb(156 132 166); border-color: rgb(156 132 166); }
@media (max-width: 1180px) { .ux-front-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ux-front-foot { grid-template-columns: 1fr; } }