.ux-area-row { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ux-dock-head { gap: 0.625rem; display: flex; white-space: nowrap; font-size: 26px; align-items: center; }
.ux-dock-head .ux-mark { color: var(--fxkc); }
.ux-rail-base { display: flex; gap: 4px; padding: 4px; border-radius: calc(var(--aefa) + 4px); background: rgb(255 255 255); border: 2.5px solid rgba(58,22,72,0.14); }
.ux-ring-flag { transition: background 220ms, color 220ms; padding: 0 12px; font-size: 13px; height: 2rem; font-weight: 500; color: rgb(156 132 166); border-radius: var(--aefa); }
.ux-ring-flag.ux-page { background: var(--fxkc); color: var(--ayl); }
.ux-step-chip { display: flex; margin-left: auto; align-items: center; gap: 0.375rem; }
.ux-grid-copy { --ytt: clamp(150px, calc((100% - 12px * 6) / 7), 190px); }
.ux-win-ring { display: grid; gap: 0.5rem; min-width: 0; }
.ux-rail-strip { position: relative; }
.ux-item-reel { position: absolute; right: 8px; top: 0.5rem; z-index: 1; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.66); color: #fff; font-size: 11px; transition: opacity 220ms; }
.ux-club-win {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 220ms;
}
.ux-rail-strip:hover .ux-club-win, .ux-rail-strip:focus-within .ux-club-win { opacity: 1; }
.ux-note-meta { font-size: var(--ct8l); font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ux-mark-race { font-weight: 600; overflow: hidden; font-size: var(--lbd); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) { .ux-rail-base { overflow-x: auto; width: 100%; order: 3; } .ux-step-chip .ux-media { display: none; } .ux-grid-copy { --ytt: 40vw; } }
.ux-bar-copy { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); padding: clamp(24px, 4vw, 48px); }
.ux-crest-side { gap: 14px; justify-items: start; display: grid; }
.ux-strip-win { display: grid; clip-path: polygon(50% 0, 100% 14%, 100% 55%, 50% 100%, 0 55%, 0 14%); place-items: center; width: 4rem; height: 4.5rem; font-size: 30px; color: var(--ayl); background: var(--fxkc); }
.ux-row-hero { font-size: clamp(28px, 3vw, 42px); }
.ux-pill-ring { color: rgb(107 74 120); max-width: 56ch; }
.ux-hero-table { display: grid; align-content: center; gap: 1.375rem; }
.ux-view-crest { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ux-rear-gold {
  display: grid; place-items: center; width: 74px; height: 4.625rem; border-radius: 50%;
  border: calc(2.5px * 2) solid rgb(58,22,72); background: repeating-conic-gradient(rgb(255, 246, 250) 0 10deg, rgb(255 255 255) 10deg 20deg);
}
.ux-rear-gold span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(255, 241, 246); font: 700 11px/1.1 "Chillax", "Trebuchet MS", sans-serif; text-align: center; color: rgb(58, 22, 72); }
.ux-label-head { grid-template-columns: 1fr 1fr; gap: 0.625rem; display: grid; }
.ux-label-head li { display: flex; align-items: center; gap: 8px; font-size: var(--lbd); }
.ux-label-head .ux-mark { color: rgb(32, 185, 127); }
@media (max-width: 860px) { .ux-bar-copy { grid-template-columns: 1fr; } }
.ux-base-chip { display: grid; gap: 26px; }
.ux-table-nav { display: grid; justify-items: center; gap: 12px; text-align: center; }
.ux-live-seal { font-size: clamp(30px, 3.4vw, 52px); }
.ux-jackpot-club { max-width: 56ch; color: rgb(107 74 120); }
.ux-club-set { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.75rem; }
.ux-slab-head { position: relative; display: block; width: 360px; height: 470px; }
.ux-slab-head .ux-view-list { position: absolute; top: 0; }
.ux-copy-main { opacity: 0.85; transform: rotate(-8deg) scale(0.9); left: 0; }
.ux-body-edge { right: 0; top: 1.25rem !important; transform: rotate(5deg); }
.ux-lead-ace { gap: 0.875rem; display: grid; list-style: none; padding: 0; margin: 0; }
.ux-lead-ace li { display: flex; align-items: center; gap: 12px; padding: 1rem 1.125rem; font-size: var(--lbd); font-weight: 600; }
.ux-lead-ace .ux-mark { width: 2.5rem; display: grid; color: var(--fxkc); flex: none; height: 2.5rem; place-items: center; font-size: 20px; border-radius: 50%; background: var(--dyc); }
.ux-chip-table li:nth-child(2), .ux-shape-list li:nth-child(1) { margin-left: 30px; }
.ux-line-offer { display: flex; justify-content: center; }
@media (max-width: 1000px) {
  .ux-club-set { grid-template-columns: 1fr 1fr; }
  .ux-slab-head { grid-column: 1 / -1; order: -1; justify-self: center; transform: scale(0.8); height: 25rem; }
  .ux-lead-ace li { margin-left: 0 !important; }
}
@media (max-width: 560px) { .ux-club-set { grid-template-columns: 1fr; } .ux-slab-head { transform: scale(0.72); margin: -40px 0; } }
.ux-unit-bonus { padding: 0; list-style: none; display: grid; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 0.875rem; }
.ux-pane-chip2 { display: grid; gap: 10px; }
.ux-star-club {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--jfo); border: 2.5px solid rgba(58,22,72,0.14); background: rgb(255, 246, 250); box-shadow: 5px 5px 0 0 rgb(58 22 72);
}
.ux-star-club img { width: 100%; transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 220ms; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ux-row-stack { position: absolute; top: 0.625rem; left: 0.625rem; }
.ux-star-chip2 { display: grid;
  position: absolute; border-radius: 50%;
  transition: opacity 220ms, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); color: var(--ayl); opacity: 0; width: 3.375rem; left: 50%; place-items: center; font-size: 1.375rem; transform: translate(-50%, -50%) scale(0.7); top: 50%; height: 54px;
  background: var(--fxkc);
}
.ux-pane-chip2:hover .ux-star-club img { transform: scale(1.06); filter: brightness(0.7); }
.ux-pane-chip2:hover .ux-star-chip2 { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ux-menu-unit { display: grid; gap: 2px; }
.ux-promo-rail { font-weight: 600; font-size: var(--u7c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-gold-step { display: flex; font-size: var(--ct8l); gap: 8px; justify-content: space-between; color: rgb(156 132 166); }
.ux-pane-note { color: rgb(32, 185, 127); }
@media (max-width: 1080px) { .ux-unit-bonus { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ux-unit-bonus > li:nth-child(n + 7) { display: none; } }
@media (max-width: 640px) { .ux-unit-bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ux-club-note { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); }
.ux-promo-jackpot { gap: 16px; position: sticky; top: calc(74px + 28px); align-self: start; display: grid; }
.ux-page-strip { font-size: clamp(28px, 2.6vw, 40px); }
.ux-top-head { color: rgb(156 132 166); font-size: var(--ct8l); letter-spacing: 0.04em; }
.ux-card-offer { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.ux-card-offer > * { max-width: 100%; }
.ux-grid-gold { line-height: 1.6; font-size: var(--lo7); color: rgb(58, 22, 72); }
.ux-field-gold {
  justify-self: stretch; width: 100%; min-width: 0; max-height: 35rem;
  mask-image: linear-gradient(#000 60%, transparent); overflow: hidden;
}
.ux-flag-zone:checked ~ .ux-field-gold { max-height: none; mask-image: none; }
.ux-race-mark {
  padding: 26px 0;
  display: grid; grid-template-columns: minmax(160px, 0.7fr) minmax(0, 2fr); line-height: 1.7; gap: 12px 40px; border-top: 2.5px solid rgba(58,22,72,0.14);
  font-size: var(--lbd);
}
.ux-race-gold { font-size: var(--u7c); font-weight: 600; color: rgb(58, 22, 72); line-height: 1.35; }
.ux-lobby-rear, .ux-flag-zone:checked ~ .ux-base-note .ux-band-pane { display: none; }
.ux-flag-zone:checked ~ .ux-base-note .ux-lobby-rear { display: inline; }
.ux-flag-zone:focus-visible ~ .ux-base-note { outline: 2px solid var(--fxkc); outline-offset: 3px; }
@media (max-width: 1080px) {
  .ux-club-note { grid-template-columns: 1fr; }
  .ux-promo-jackpot { position: static; }
}
@media (max-width: 640px) { .ux-race-mark { grid-template-columns: 1fr; } }
.ux-frame-mark { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.ux-ace-tab { display: grid; align-content: start; gap: 16px; color: rgb(107 74 120); }
.ux-star-race { font-size: clamp(28px, 2.6vw, 38px); color: rgb(58, 22, 72); max-width: 20ch; margin-bottom: 0.5rem; }
.ux-race-cell { border-top: 2.5px solid rgb(58 22 72); }
/*  TODO: clean up  */
.ux-pill-flag { border-bottom: 2.5px solid rgb(58 22 72); }
.ux-pill-flag summary { gap: 16px; cursor: pointer; list-style: none; align-items: center;
  display: flex;
  padding: 20px 0;
  font-size: var(--lo7); justify-content: space-between;
}
.ux-pill-flag summary::-webkit-details-marker { display: none; }
.ux-pill-flag summary .ux-mark { color: var(--fxkc); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ux-pill-flag[open] summary .ux-mark { transform: rotate(45deg); }
.ux-pill-flag p { padding: 0 48px 22px 0; color: rgb(107 74 120); }
@media (max-width: 900px) { .ux-frame-mark { grid-template-columns: 1fr; } }
.ux-reel-club { margin: 0 clamp(16px, 2.6vw, 40px) clamp(16px, 2.6vw, 40px); border-radius: var(--u8x0); background: rgb(255 255 255); border: 2.5px solid rgba(58,22,72,0.14); }
.ux-core-edge { max-width: 75rem; margin: 0 auto; padding: 36px clamp(20px, 3vw, 40px) 28px; display: grid; gap: 28px; }
.ux-dock-spin { border-bottom: 2.5px solid rgba(58,22,72,0.14); gap: 18px 28px; flex-wrap: wrap; align-items: center; display: flex; padding-bottom: 24px; }
.ux-nav-area { color: rgb(156 132 166); font-size: var(--lbd); flex: 1; }
.ux-ring-chip2 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: var(--lbd); color: rgb(107 74 120); }
.ux-ring-chip2 a:hover { color: var(--fxkc); }
.ux-panel-pane { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; display: flex; }
.ux-dock-field, .ux-live-rail { flex-wrap: wrap; gap: 0.5rem; display: flex; }
.ux-dock-field .ux-club-shape svg { height: 1rem; }
.ux-dock-field .ux-seal-feature { clip-path: none; height: auto; width: auto; position: static; }
.ux-dock-field li, .ux-live-rail li { font-weight: 600;
  border-radius: var(--r5tt); height: 1.875rem;
  display: inline-flex; align-items: center;
  font-size: var(--ct8l); padding: 0 0.75rem; gap: 0.375rem; color: rgb(107 74 120); background: rgb(255,228,238);
}
.ux-live-rail li { background: transparent; border: 2.5px solid rgb(58 22 72); }
.ux-ace-win { text-align: center; font-size: var(--ct8l); margin: 0 auto; line-height: 1.7; color: rgb(156 132 166); max-width: 88ch; }
.ux-spin-body { text-align: center; color: rgb(156 132 166); font-size: var(--ct8l); }
@media (max-width: 640px) { .ux-nav-area { flex-basis: 100%; order: 3; } .ux-panel-pane { justify-content: center; } }
.ux-reel-club .ux-tab-note { justify-content: center; }
:root { --fxkc: rgb(175 113 80); --la5: rgb(144 93 66); --dyc: rgba(175, 113, 80, 0.14); --ayl: rgb(255, 255, 255); }
:root { --r5tt: 500px; --aefa: 7px; --jfo: 10px; --u2p: 6px; --lo7: 20.1px; --ct8l: 12.7px; --u8x0: 14px; --lbd: 14.8px; --u7c: 17.0px; }
.ux-line, .ux-item-zone { position: static; }
/*  sections  */
svg.ux-mark{height:1em;vertical-align:-0.125em;width:1em;fill:currentColor;display:inline-block}