/*! For license information please see main.js.LICENSE.txt */
.side-box {
  position: relative; aspect-ratio: var(--t-lobby, 3 / 2); overflow: hidden;
  border-radius: var(--t-media);
  background: hsl(219 20% 14%);
  box-shadow: 0 4px 0 0 #000;
  transition: box-shadow 200ms;
}
.side-box img { width: 100%; height: 100%; object-fit: cover; }
.ace-jackpot { position: absolute; top: 8px; z-index: 1; transform: rotate(-4deg); left: 8px; }
.feature-chip:hover { transform: translateY(-5px); }
.feature-chip:hover .side-box { box-shadow: 0 0 0 3px var(--t-group-14), 0 8px 0 0 #000; }
.stage-star { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-base { justify-content: space-between; color: #6c7686; align-items: center; gap: 8px; display: flex; margin-top: 2px; font-size: 12px; }
.group-base > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-copy { gap: 6px; color: #A5AFBC; display: inline-flex; align-items: center; font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace; flex: none; }
.core-promo {
  --t-field-76: 34px;
  text-decoration: none;
  display: inline-flex; align-items: center;
  white-space: nowrap; line-height: 1; gap: 0.3em;
  font-size: var(--t-field-76);
  color: hsl(210 20% 96%);
}
.club-head { --t-field-76: 44px; }
.lobby-bar {
  font-family: "Tanker", "Impact", "Arial Narrow", sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 0.74em; line-height: 1;
}
.offer-head { position: relative; flex: none; }
@media (max-width: 720px) { .gold-stage .core-promo { --t-field-76: 28px; } }
.unit-dice {
  background: hsl(210 20% 96%); margin: 0 0.06em;
  box-shadow: 0.1em 0.04em 0 -0.02em var(--t-group-14); height: 1em;
  width: 0.72em; place-items: center;
  border-radius: 0.09em;
  display: grid; color: hsl(220 23% 5%);
  transform: rotate(calc(-7deg - var(--t-zone-ne)));
}
.edge-stage { line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", serif; font-size: 0.5em; }
.rear-body .edge-stage { color: var(--t-group-14); }
.item-line {
  position: absolute; left: 0.08em; top: 0.07em;
  font: 700 0.2em/1 "General Sans", "Segoe UI", Arial, sans-serif;
}
.tile-tab { bottom: 0.07em; right: 0.08em; top: auto; transform: rotate(180deg); left: auto; }
.gold-stage {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  height: 72px;
  padding: 0 var(--t-band-hf) 0 18px;
  background: color-mix(in srgb, hsl(220 23% 5%) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgb(34 40 50);
}
.seal-feature { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.area-game { padding: 18px 14px 32px; }
.frame-side { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.head-meta { margin-bottom: 18px; grid-template-columns: 1fr 1fr; display: grid; gap: 8px; }
.band-copy {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 6px 12px;
  background: #151920;
  border: 2px solid rgb(34 40 50);
  border-radius: var(--t-slot-qc);
  box-shadow: 0 5px 0 0 #000;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #A5AFBC;
  transition: border-color 200ms, color 200ms, transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.spin-strip { font-size: 28px; height: 52px; width: 52px; background: radial-gradient(circle at 35% 30%, var(--t-deck-1e), var(--t-group-14) 70%); border-radius: 50%; color: var(--t-chip); display: grid; place-items: center; box-shadow: 0 6px 16px -8px var(--t-group-14); }
.band-copy:nth-child(2) .spin-strip { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, hsl(158 79% 57%) 70%, #fff), hsl(158 79% 57%) 70%); box-shadow: 0 6px 16px -8px hsl(158 79% 57%); }
/*  layout  */
.band-copy:hover { border-color: var(--t-group-14); color: hsl(210 20% 96%); transform: translateY(calc(var(--t-ring-r6) * -1)); }
.bar-block {
  color: #6c7686; text-transform: uppercase;
  margin: 22px 10px 8px;
  font-size: 12px; letter-spacing: 0.08em;
}
.side-meta { gap: 12px;
  font-size: 14px;
  display: flex;
  position: relative; color: #A5AFBC;
  border-radius: var(--t-top-39); padding: 0 10px;
  transition: color 200ms, background 200ms; align-items: center;
  height: 40px;
}
.side-meta .media-pill { margin-left: auto; }
.side-meta:hover { color: hsl(210 20% 96%); background: #151920; }
.side-meta.game-foot { color: hsl(210 20% 96%); background: #151920; }
.side-meta.game-foot .crown-deal { color: var(--t-group-14); }
.tab-rail { min-width: 0; }
.live-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-stage-fb);
  max-width: 1440px; margin: 0 auto;
  padding: 28px var(--t-band-hf) var(--t-stage-fb);
}
.line-vip { display: none; }
.note-bonus.table-jackpot .line-vip { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.55); }
.rail-meta { bottom: 0;
  background: hsl(220 23% 5%);
  width: min(300px, 86vw); top: 0;
  transform: translateX(-102%);
  border-right: 2px solid rgb(34 40 50); left: 0;
  position: fixed; transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1); z-index: 40;
  overflow-y: auto;
}
.note-bonus.table-jackpot .rail-meta { transform: none; }
@media (max-width: 720px) {
  .gold-stage { gap: 12px; padding: 0 16px 0 12px; }
  .seal-feature { min-width: 0; }
  .gold-stage .grid-game { display: none; }
  .seal-feature .frame-step { display: none; }
}
@media (max-width: 480px) {
  .gold-stage { gap: 8px; padding-right: 10px; }
  .seal-feature { gap: 6px; }
  .seal-feature .lead-offer { padding: 0 12px; letter-spacing: 0.02em; }
}
.panel-strip {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: 72px 1fr;
  grid-template-areas: "top top" "side main";
  min-height: 100vh;
}
.panel-strip .gold-stage { grid-area: top; }
.panel-strip .link-slab { display: flex; align-items: center; gap: 18px; min-width: calc(240px - 18px); flex: none; }
.panel-strip .grid-game { flex: 1; max-width: 520px; }
.panel-strip .copy-slab {
  grid-area: side;
  position: sticky;
  background: hsl(220 23% 5%);
  overflow-y: auto;
  height: calc(100vh - 72px); scrollbar-width: thin; top: 72px;
  border-right: 2px solid rgb(34 40 50);
}
.panel-strip .tab-rail { grid-area: main; }
@media (max-width: 1080px) {
  .panel-strip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .panel-strip .link-slab { width: auto; }
  .panel-strip .copy-slab { transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
    position: fixed; left: 0; top: 72px; z-index: 40;
    width: min(300px, 84vw);
    transform: translateX(-102%);
  }
  .panel-strip.table-jackpot .copy-slab { transform: none; }
}
.copy-group { color: #A5AFBC; }
.copy-group p { margin: 0 0 1em; }
.copy-group p:last-child { margin-bottom: 0; }
.step-feature { margin: 1.4em 0 0.5em; font-size: 19px; font-weight: 600; color: hsl(210 20% 96%); }
.box-body, .tile-step { margin: 0 0 1.1em; padding: 0; list-style: none; display: grid; gap: 0.55em; }
.box-body li { position: relative; padding-left: 1.4em; }
.box-body li::before {
  background: var(--t-group-14); left: 0.1em;
  content: ""; border-radius: calc(var(--t-top-39) * 0.2); height: 0.45em;
  width: 0.45em; top: 0.62em;
  transform: rotate(45deg); position: absolute;
}
.tile-step { counter-reset: step; }
.tile-step li { counter-increment: step; position: relative; padding-left: 2.3em; min-height: 1.7em; }
.tile-step li::before {
  content: counter(step);
  position: absolute; top: -0.05em;
  font: 600 0.8em/1 "JetBrains Mono", ui-monospace, monospace; height: 1.7em; width: 1.7em; left: 0; place-items: center; color: var(--t-chip);
  display: grid;
  background: var(--t-group-14); border-radius: 50%;
}
.copy-group, .copy-group > * { min-width: 0; }
.feature-shape { max-width: 100%; margin: 0 0 1.1em; overflow-x: auto; border: 2px solid rgb(34 40 50); border-radius: var(--t-top-39); }
.feature-shape table { font-size: 14px; width: 100%; border-collapse: collapse; }
.feature-shape th, .feature-shape td { white-space: nowrap; border-bottom: 2px solid rgb(34 40 50); text-align: left; padding: 10px 14px; }
.feature-shape tbody tr:last-child > * { border-bottom: 0; }
.feature-shape thead th { font-size: 12px; font-weight: 600; color: #6c7686; background: #151920; letter-spacing: 0.08em; text-transform: uppercase; }
.feature-shape tbody th { font-weight: 600; color: hsl(210 20% 96%); }
.feature-shape caption { font-size: 12px; padding: 10px 14px; letter-spacing: 0.08em; border-bottom: 2px solid rgb(34 40 50); color: var(--t-group-14); text-transform: uppercase; font-weight: 600; text-align: left; caption-side: top; }
.feature-shape tbody tr:nth-child(even) > * { background: color-mix(in srgb, hsl(219 20% 14%) 45%, transparent); }
.inner-label, .label-chip2 { place-items: center; height: 22px; width: 22px; font-size: 12px; display: inline-grid; font-weight: 700; border-radius: 50%; }
.inner-label { background: color-mix(in srgb, hsl(158 79% 57%) 18%, transparent); color: hsl(158 79% 57%); }
.label-chip2 { background: color-mix(in srgb, hsl(8 100% 61%) 14%, transparent); color: hsl(8 100% 61%); }
.bar-copy tbody th { white-space: normal; width: 42%; font-weight: 500; color: #A5AFBC; }
.bar-copy td { color: hsl(210 20% 96%); font-weight: 600; white-space: normal; }
.edge-item td, .edge-item thead th:not(:first-child) { text-align: center; }
.edge-item tbody td:nth-child(2), .edge-item thead th:nth-child(2) { background: var(--t-hero-bl) !important; }
.edge-item thead th:nth-child(2) { color: var(--t-group-14); }
@media (max-width: 520px) { .deck-row { flex-wrap: wrap; row-gap: 8px; } }
img.seal-spin, img.gold-note, img.link-head { background-color: var(--t-note, var(--t-zone)); }
.nav-media { --t-lobby: 3 / 4; position: relative; }
.nav-media img {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-note, #222) 72%, hsl(240 19% 5%)) 0 50%, color-mix(in srgb, var(--t-note, #222) 38%, #0b0b10)) !important; object-position: 50% 0 !important;
  object-fit: contain !important;
}
.nav-media::before { content: ""; position: absolute; left: 0; right: 0; top: 49%; height: 24%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.28), transparent); }
.spin-inner { position: absolute; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 2; display: grid; bottom: 12px; left: 10px; gap: 2px; right: 10px; }
.deck-wrap { -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; font-size: 17px; font-family: "Tanker", "Impact", "Arial Narrow", sans-serif; letter-spacing: 0.01em; font-weight: 400; text-transform: uppercase; line-height: 1.05; display: -webkit-box; }
.set-spin { font-size: 11px; opacity: 0.78; }
.side-box.nav-media + .bonus-meta, .side-box.nav-media + .menu-list { display: none; }
img.hero-rail {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  box-shadow: none !important; mask-image: none !important;
}
.strip-mark { justify-self: center; align-self: stretch; min-height: var(--t-top, 340px);
  width: 100%;
  position: relative;
  pointer-events: none;
}
.strip-mark .field-vip { transform: translate(-50%, -50%);
  width: auto;
  object-fit: contain; left: 50%;
  position: absolute; top: 50%; height: auto; max-width: 116%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35)); object-position: 50% 100%; max-height: 100%;
}
@media (max-width: 820px) {
  .strip-mark { align-self: auto; min-height: var(--t-group, 260px); }
  .strip-mark .field-vip { object-position: 50% 100%; }
}
img.dot-edge { object-fit: contain; border-radius: 0; filter: var(--t-tray, none); }
.label-menu { gap: 0.5em; display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; }
.label-menu svg { height: 1.6em; flex: none; max-width: 3em; width: auto; }
.head-bonus { overflow: hidden; clip-path: inset(50%); white-space: nowrap; height: 1px; width: 1px; position: absolute; }
.ring-base { gap: 12px; display: inline-flex; align-items: center; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ring-base a { color: #A5AFBC; text-decoration: none; }
.ring-base a:hover { color: var(--t-group-14); }
.ring-base a.game-foot { color: hsl(210 20% 96%); font-weight: 600; }
.ace-hero { display: block; }
.jackpot-rail { color: var(--t-group-14); }
.race-wrap {
  display: block; margin-top: 0.5em;
  font-family: var(--t-shape); font-weight: 600; font-size: clamp(12px, 0.22em, 17px); line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: inherit; opacity: 0.72;
}
.tab-pill { font-size: clamp(22px, 2.4vw, 38px); line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase; font-weight: 400;
  font-family: "Tanker", "Impact", "Arial Narrow", sans-serif; display: block;
  margin: 0;
}
.crown-panel { font-style: normal; color: var(--t-group-14); }
.crest-grid { gap: 6px; line-height: 1.3; font-size: 12px; flex-wrap: wrap; align-items: baseline; display: inline-flex; color: #6c7686; }
.block-tray { letter-spacing: 0.08em; text-transform: uppercase; }
.race-tray { font-weight: 600; color: hsl(210 20% 96%); }
.label-page { color: rgba(255, 255, 255, 0.72); }
.label-page .race-tray { color: #fff; }
.live-wrap { flex-wrap: wrap; gap: 8px; display: flex; align-items: center; }
.frame-pane { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 12px; color: #6c7686; border-radius: var(--t-top-39); transition: color .15s, border-color .15s, background-color .15s; }
.frame-pane:hover { color: hsl(210 20% 96%); }
.frame-pane .crown-deal { font-size: 1.25em; }
.head-reel .frame-pane { background: #0F1217; border-radius: var(--t-front-8i); }
.head-tile .frame-pane { border: 2px solid hsl(216 18% 22%); }
.head-tile .frame-pane:hover { border-color: rgb(72, 82, 99); }
.media-head .frame-pane { background: #151920; border: 2px solid rgb(34 40 50); font-weight: 600; }
.dock-front { gap: 4px 18px; }
.dock-front .frame-pane { padding: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(72, 82, 99); }
.frame-stage .frame-pane { text-transform: uppercase; letter-spacing: 0.08em; border-left: 2px solid var(--t-group-14); padding: 0 8px; border-radius: 0; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; }
a[role="button"] { cursor: pointer; }
.seal-flag { display: none; }
@media (max-width: 640px) {
  .band-stage { overflow: visible; border: 0; border-radius: 0; }
  .band-stage thead { display: none; }
  .band-stage table, .band-stage tbody, .band-stage tr { display: block; width: 100%; }
  .band-stage caption { display: block; padding: 0 0 8px; }
  .band-stage tr { margin: 0 0 10px; border: 2px solid rgb(34 40 50); border-radius: var(--t-top-39); overflow: hidden; }
  .band-stage tbody tr > * { background: none; }
  .band-stage tbody th { display: block; white-space: normal; border-bottom: 2px solid rgb(34 40 50); background: color-mix(in srgb, hsl(219 20% 14%) 70%, transparent); }
  .band-stage td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; white-space: normal; text-align: right; }
  .band-stage tbody tr > td:last-child { border-bottom: 0; }
  .band-stage tbody tr:last-child > th { border-bottom: 2px solid rgb(34 40 50); }
  .band-stage .seal-flag { display: block; flex: none; max-width: 48%; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6c7686; }
}
.gold-stage { background: color-mix(in srgb, hsl(220 23% 5%) 80%, transparent); }
.copy-slab { background: transparent; border-right-color: rgb(34 40 50); }
.side-meta { height: 42px; font-weight: 600; }
.side-meta.game-foot { box-shadow: 0 3px 0 #000; background: var(--t-group-14); color: var(--t-chip); }
/*  TODO: clean up  */
.side-meta.game-foot .crown-deal { color: inherit; }
.side-meta.game-foot .media-pill { color: var(--t-group-14); box-shadow: none; background: var(--t-chip); }
.band-copy { background: hsl(219 20% 14%); font-weight: 600; }
.band-copy:nth-child(1) { transform: rotate(-2deg); }
.band-copy:nth-child(2) { transform: rotate(2deg); }
.band-copy:hover { transform: rotate(0) translateY(-3px); }
.bar-block { font-weight: 600; }
.chip2-promo { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); display: grid; gap: 14px; }
.media-label { position: relative; overflow: hidden; isolation: isolate; }
.media-label::before { z-index: -1; inset: 0; position: absolute; background: radial-gradient(50% 70% at 80% 60%, rgba(198, 255, 52, 0.16), transparent 70%), var(--t-meta); content: ""; }
.core-win {
  overflow-x: auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.core-win::-webkit-scrollbar { display: none; }
.reel-reel {
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 400px; padding: 40px 40px 76px clamp(24px, 4vw, 52px);
}
.seal-pill { display: grid; justify-items: start; gap: 18px; }
.front-view { font-size: clamp(36px, 3.6vw, 60px); max-width: 13ch; }
.front-view em { display: block; }
.deck-chip { max-width: 42ch; color: #A5AFBC; }
.area-strip {
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8); object-fit: cover;
  justify-self: center;
  border-radius: var(--t-media); width: min(100%, 320px); aspect-ratio: 1;
  transform: rotate(calc(var(--t-zone-ne) * -1));
}
.side-spin {
  position: absolute; left: clamp(24px, 4vw, 52px); bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.inner-stage { display: flex; gap: 6px; }
.meta-tile { background: hsl(216 18% 22%); border-radius: var(--t-top-39); height: 4px; transition: width 200ms cubic-bezier(0.34, 1.4, 0.64, 1), background 200ms; width: 22px; }
.meta-tile.game-foot { width: 44px; background: var(--t-group-14); }
.jackpot-reel { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.item-top { gap: 18px;
  padding: 16px; align-items: center;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 200ms; overflow: hidden;
  display: grid; grid-template-columns: 112px minmax(0, 1fr);
}
.item-top:hover { transform: translateY(calc(var(--t-ring-r6) * -1)); box-shadow: var(--t-star); }
.item-top img { width: 112px; border-radius: var(--t-media); height: 112px; object-fit: cover; }
.block-promo { display: grid; gap: 8px; }
.ring-unit { font-size: 24px; }
.vip-promo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #A5AFBC; }
@media (max-width: 1180px) {
  .chip2-promo { grid-template-columns: 1fr; }
  .jackpot-reel { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .reel-reel { grid-template-columns: 1fr; padding: 24px 20px 76px; min-height: 0; }
  .area-strip { order: -1; width: 180px; }
  .side-spin { left: 20px; }
  .jackpot-reel { grid-template-columns: 1fr; }
  .item-top { grid-template-columns: 84px minmax(0, 1fr); }
  .item-top img { width: 84px; height: 84px; }
}
.zone-jackpot { --t-top: 320px; width: min(100%, 380px); }
@media (max-width: 720px) {
  .zone-jackpot { --t-group: min(64vw, 280px); order: -1; justify-self: start; width: min(78vw, 320px); }
}
.vip-block {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
}
.menu-area {
  position: relative; grid-column: span 2; grid-row: span 2;
  overflow: hidden; border-radius: var(--t-slot-qc);
  border: 2px solid rgb(34 40 50);
  box-shadow: 0 5px 0 0 #000;
}
.menu-area img { height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1); width: 100%; }
.menu-area:hover img { transform: scale(1.04); }
.menu-area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.6)); }
.pill-dice { z-index: 1;
  display: grid; right: 20px; gap: 10px; justify-items: start; left: 20px;
  position: absolute; bottom: 20px;
}
.live-live { font-size: clamp(26px, 2.4vw, 38px); color: #fff; }
.band-rear { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.box-hero {
  display: grid; justify-items: center; gap: 12px;
  margin: 28px auto 0; width: min(320px, 100%);
}
.cell-rail { font-size: 12px; color: #6c7686; }
.cell-rail .area-top { color: hsl(210 20% 96%); }
.link-slot { width: 100%; height: 4px; border-radius: var(--t-top-39); background: rgb(34 40 50); overflow: hidden; }
.link-slot span { background: var(--t-group-14); display: block; height: 100%; }
@media (max-width: 1180px) {
  .vip-block { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vip-block > .feature-chip:nth-of-type(n + 6) { display: none; }
}
@media (max-width: 720px) {
  .vip-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-area { grid-row: auto; aspect-ratio: 3 / 4; }
  .vip-block > .feature-chip:nth-of-type(n + 6) { display: grid; }
}
.mark-main { overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.line-list {
  display: flex; align-items: center; gap: 10px; text-transform: uppercase;
  padding: 0 22px;
  font-size: 12px;
  color: #A5AFBC;
  border-right: 2px solid rgb(34 40 50); letter-spacing: 0.08em;
}
.race-body {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.front-tray { width: max-content;
  animation: wins-a-marquee 60s linear infinite;
  display: flex;
}
.mark-main:hover .front-tray { animation-play-state: paused; }
.crest-spin { align-items: center;
  display: flex;
  border-right: 2px solid rgb(34 40 50); gap: 12px;
  padding: 12px 26px 12px 18px;
}
.crest-spin img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--t-top-39); }
.tab-crown { display: grid; gap: 4px; }
.stage-unit { white-space: nowrap; color: #6c7686; font-size: 12px; }
.stage-unit span { opacity: 0.7; }
.slot-stack { font-size: 15px; color: var(--t-deck-1e); }
.tile-item { font-size: 12px; color: #A5AFBC; padding: 3px 6px; border: 2px solid hsl(216 18% 22%); border-radius: var(--t-top-39); }
@keyframes wins-a-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .front-tray { animation: none; } .race-body { overflow-x: auto; } }
@media (max-width: 720px) {
  .mark-main { grid-template-columns: 1fr; }
  .line-list { padding: 12px 16px; border-right: 0; border-bottom: 2px solid rgb(34 40 50); }
}
/*  v2  */
.chip-ring { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.view-ring { font-size: 38px; }
.crown-live { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-top {
  height: 34px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: var(--t-front-8i); border: 2px solid hsl(216 18% 22%);
  font-size: 14px; color: #A5AFBC;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.pill-top:hover { color: hsl(210 20% 96%); border-color: rgb(72, 82, 99); }
.pill-top.game-foot { background: hsl(210 20% 96%); border-color: hsl(210 20% 96%); color: hsl(220 23% 5%); }
.win-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.body-pane, .race-table {
  border-radius: var(--t-media); aspect-ratio: 3 / 2; overflow: hidden;
  position: relative; display: block; background: hsl(219 20% 14%);
}
.body-pane img { transition: transform 600ms cubic-bezier(0.34, 1.4, 0.64, 1), filter 200ms; height: 100%; object-fit: cover; width: 100%; }
.dock-stage { top: 8px; right: 8px; z-index: 1; position: absolute; }
.dock-lead {
  position: absolute; inset: 0;
  display: grid; align-content: end; gap: 2px; padding: 14px;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.9));
  color: #fff;
  opacity: 0; transition: opacity 200ms;
}
.pane-rear { line-height: 1.2; font-weight: 600; font-size: 14px; }
.item-zone { font-size: 11px; opacity: 0.7; }
/*  tokens  */
.base-tray {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.8);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--t-group-14); color: var(--t-chip); font-size: 22px;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.body-pane:hover img { transform: scale(1.06); filter: brightness(0.8); }
.body-pane:hover .dock-lead { opacity: 1; }
.body-pane:hover .base-tray { transform: translate(-50%, -50%) scale(1); }
.race-table {
  display: grid; align-content: center; justify-items: center; gap: 6px; padding: 14px; text-align: center;
  border: 2px dashed rgb(72, 82, 99); background: #151920;
  font-size: 12px; color: #A5AFBC;
}
.grid-lobby { font-size: 40px; color: var(--t-group-14); }
@media (max-width: 1280px) { .win-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .win-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock-lead { opacity: 1; }
  .base-tray { display: none; }
}
@media (max-width: 480px) { .win-strip { grid-template-columns: 1fr; } }
.unit-panel {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(170px, 14vw, 215px));
  grid-template-areas: "c1 c1 c2" "c1 c1 c3" "c4 c5 c6";
}
.game-game { grid-area: c1; }
.media-side { grid-area: c2; }
.head-dock { grid-area: c3; }
.meta-wrap { grid-area: c4; }
.win-rail { grid-area: c5; }
.side-gold { grid-area: c6; }
.pill-list {
  position: relative; display: block; height: 100%; overflow: hidden;
  border-radius: var(--t-slot-qc); border: 2px solid rgb(34 40 50); background: hsl(219 20% 14%);
  box-shadow: 0 5px 0 0 #000;
}
.pill-list img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.pill-list::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 70%); inset: 0; position: absolute; content: ""; }
.pill-list:hover img { transform: scale(1.05); }
.panel-jackpot { gap: 6px; z-index: 1; left: 18px; position: absolute; display: grid; bottom: 16px; color: #fff; }
.group-shape { font-size: 26px; }
.game-game .group-shape { font-size: clamp(34px, 3.2vw, 52px); }
.game-game .panel-jackpot { bottom: 72px; left: 24px; }
.top-set { align-items: center; display: inline-flex; font-size: 12px; gap: 6px; color: rgba(255, 255, 255, 0.8); }
.pane-media { position: absolute; left: 24px; bottom: 22px; z-index: 1; }
@media (max-width: 900px) {
  .unit-panel { grid-template-columns: 1fr 1fr; grid-template-rows: 280px repeat(3, 160px); grid-template-areas: "c1 c1" "c2 c3" "c4 c5" "c6 c6"; }
}
.group-star { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none;
  display: grid; padding: 0;
  position: relative; gap: 24px;
  margin: 0;
}
.group-star::before { height: 0; right: 0;
  border-top: calc(2px * 2) dashed hsl(216 18% 22%); position: absolute;
  content: ""; left: 0; top: 37px;
}
.body-band { position: relative; display: grid; justify-items: start; gap: 10px; }
.card-edge { font-size: 12px; color: #6c7686; height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gold-line {
  width: 18px; height: 18px; border-radius: 50%; margin-bottom: 8px;
  background: hsl(220 23% 5%); border: calc(2px * 2) solid rgb(72, 82, 99);
}
.gold-line.stack-edge { background: var(--t-group-14); border-color: var(--t-group-14); box-shadow: 0 0 0 6px var(--t-hero-bl); }
.note-seal { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 2px solid rgb(34 40 50); }
.body-menu { font-size: 26px; }
.head-offer { font-size: 14px; color: #A5AFBC; }
@media (max-width: 1080px) {
  .group-star { padding-left: 36px; gap: 0; grid-template-columns: 1fr; }
  .group-star::before { left: 8px; right: auto; top: 0; bottom: 0; width: 0; border-top: 0; border-left: calc(2px * 2) dashed hsl(216 18% 22%); }
  .body-band { column-gap: 18px; grid-template-columns: 80px minmax(0, 1fr); padding: 16px 0; }
  .card-edge { grid-column: 1 / -1; }
  .gold-line { top: 18px; position: absolute; left: -36px; }
  .note-seal { grid-row: span 3; width: 80px; height: 80px; }
}
/*  legacy  */
.frame-rear {
  --t-line: 14px;
  position: relative;
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto 220px; align-items: center; gap: 28px;
  padding: 18px 0 18px 18px;
  background: #151920;
  border: 2px solid hsl(216 18% 22%);
  border-radius: var(--t-slot-qc);
}
.hero-base { height: 120px; border-radius: var(--t-media); object-fit: cover; width: 120px; }
.star-main { display: grid; gap: 6px; min-width: 0; }
.rear-nav { font-size: clamp(22px, 2vw, 30px); }
.game-chip { font-size: 14px; color: #A5AFBC; }
.strip-hero { display: flex; gap: 6px; margin: 0; }
.strip-hero dd { min-width: 58px; padding: 10px 6px; background: hsl(220 23% 5%); margin: 0; justify-items: center;
  display: grid;
  border-radius: var(--t-top-39);
}
.strip-hero .area-top { font-size: 26px; line-height: 1; color: var(--t-deck-1e); }
.strip-hero small { font-size: 10px; letter-spacing: 0.1em; color: #6c7686; text-transform: uppercase; }
.note-line {
  position: relative; align-self: stretch;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  margin: -18px 0; padding: 18px;
  border-left: 2px dashed hsl(216 18% 22%);
  background: var(--t-hero-bl);
  border-radius: 0 var(--t-slot-qc) var(--t-slot-qc) 0;
}
.note-line::before, .note-line::after {
  content: ""; position: absolute; left: calc(var(--t-line) * -1 - 1px);
  width: calc(var(--t-line) * 2); height: calc(var(--t-line) * 2); border-radius: 50%;
  background: hsl(220 23% 5%);
}
.note-line::before { top: calc(var(--t-line) * -1 - 2px); }
.note-line::after { bottom: calc(var(--t-line) * -1 - 2px); }
.menu-lead { font-size: 24px; }
@media (max-width: 1180px) {
  .frame-rear { grid-template-columns: 100px minmax(0, 1fr) 200px; }
  .hero-base { width: 100px; height: 100px; }
  .strip-hero { grid-column: 2; }
  .note-line { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 700px) {
  .frame-rear { padding: 18px; grid-template-columns: 1fr; gap: 16px; }
  .hero-base, .strip-hero, .note-line { grid-column: auto; grid-row: auto; }
  .note-line { border-radius: 0 0 var(--t-slot-qc) var(--t-slot-qc); border-left: 0; border-top: 2px dashed hsl(216 18% 22%); margin: 0 -18px -18px; }
  .note-line::before, .note-line::after { display: none; }
}
.body-link { padding: clamp(24px, 4vw, 56px); }
.promo-zone {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 16px 48px;
  padding-bottom: 32px; margin-bottom: 32px;
  border-bottom: calc(2px * 3) double hsl(216 18% 22%);
}
.promo-zone .rail-block { grid-column: 1 / -1; }
.card-gold { font-size: clamp(30px, 3.4vw, 52px); }
.game-base { color: hsl(210 20% 96%); line-height: 1.6; font-size: 19px; }
.card-base {
  column-count: 3; column-gap: 48px;
  column-rule: 2px solid rgb(34 40 50);
  font-size: 14px; line-height: 1.7;
}
.group-inner { margin-bottom: 28px; }
.list-race { font-size: 19px; color: hsl(210 20% 96%); margin-bottom: 10px; break-after: avoid; }
.card-base .feature-shape, .card-base .tile-step, .card-base .box-body li { break-inside: avoid; }
.card-base .feature-shape table { font-size: 12px; }
.card-base .bar-panel { column-span: all; margin: 8px 0 28px; }
.card-base .bar-panel table { font-size: 14px; }
.card-base .feature-shape th, .card-base .feature-shape td { padding: 7px 8px; white-space: normal; }
.card-base .feature-shape thead th { font-size: 10px; letter-spacing: 0.04em; }
@media (max-width: 1280px) { .card-base { column-count: 2; } }
@media (max-width: 800px) {
  .promo-zone { grid-template-columns: 1fr; }
  .card-base { column-count: 1; }
}
.core-row { grid-template-columns: minmax(0, 1fr); }
.core-row .card-gold { max-width: 22ch; }
.core-row .game-base { max-width: 64ch; }
.side-ring { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); }
.menu-seal { position: sticky; justify-items: start; top: calc(72px + 28px); gap: 14px; align-self: start; display: grid; }
.chip-block { font-size: clamp(30px, 3vw, 46px); }
.label-list { color: #A5AFBC; }
.edge-head { gap: 12px; width: 100%; padding: 16px; grid-template-columns: 44px minmax(0, 1fr); align-items: center; margin-top: 8px; display: grid; }
.edge-head .lead-offer { grid-column: 1 / -1; }
.edge-head strong { display: block; font-size: 14px; }
.label-label { display: grid; place-items: center; border-radius: 50%; width: 44px; color: var(--t-chip); height: 44px; font-size: 20px; background: var(--t-group-14); }
.core-menu { gap: 6px; font-size: 12px; color: #6c7686; align-items: center; display: inline-flex; }
.pill-slab { display: grid; gap: 10px; }
.card-table { overflow: hidden; }
.card-table summary { list-style: none; cursor: pointer;
  padding: 18px 20px; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center;
  display: grid; gap: 12px;
}
.card-table summary::-webkit-details-marker { display: none; }
.live-group { font-size: 14px; color: var(--t-group-14); }
.core-slab { font-size: 19px; font-weight: 600; }
.deal-offer { place-items: center; display: grid; height: 32px; transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1), background 200ms; background: hsl(219 20% 14%); border-radius: 50%; width: 32px; }
.card-table[open] .deal-offer { transform: rotate(45deg); color: var(--t-chip); background: var(--t-group-14); }
.card-table p { padding: 0 64px 22px 76px; color: #A5AFBC; }
@media (max-width: 900px) {
  .side-ring { grid-template-columns: 1fr; }
  .menu-seal { position: static; }
  .card-table p { padding: 0 20px 20px; }
}
.copy-lead { border-top: 2px solid rgb(34 40 50); background: #0F1217; }
.label-nav { max-width: 1440px; margin: 0 auto; padding: 56px var(--t-band-hf) 32px; display: grid; gap: 40px; }
.base-table { gap: 32px; grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(0, 1fr)); display: grid; }
.box-ace { max-width: 34ch; display: grid; align-content: start; color: #A5AFBC; justify-items: start; gap: 16px; font-size: 14px; }
.rear-spin { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-feature {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  font-size: 12px; color: #A5AFBC;
  border: 2px solid hsl(216 18% 22%); border-radius: var(--t-top-39);
}
.dock-area { margin-bottom: 14px; color: var(--t-group-14); letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; }
.table-ring ul { font-size: 14px; gap: 10px; color: #A5AFBC; display: grid; }
.table-ring a:hover { color: hsl(210 20% 96%); }
.chip-crown { flex-wrap: wrap; border-bottom: 2px solid rgb(34 40 50);
  border-top: 2px solid rgb(34 40 50);
  display: flex;
}
.chip-crown li {
  flex: 1 1 auto; text-align: center; padding: 16px 12px;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #6c7686;
}
.chip-crown .label-menu svg { height: 22px; }
.chip-crown li + li { border-left: 2px solid rgb(34 40 50); }
.pill-reel { display: flex; justify-content: space-between; font-size: 12px; color: #6c7686; gap: 32px; }
.pill-hero { max-width: 90ch; line-height: 1.7; }
.band-wrap { white-space: nowrap; }
@media (max-width: 1080px) { .base-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } .box-ace { grid-column: 1 / -1; } }
@media (max-width: 600px) { .pill-reel { flex-direction: column; } .chip-crown li { flex-basis: 25%; } .chip-crown .label-menu svg { height: 22px; }
.chip-crown li + li { border-left: 0; } }
.copy-lead .live-wrap { margin-top: -16px; }
:root { --t-hero-bl: rgba(227, 29, 26, 0.14); --t-deck-1e: #E84643; --t-chip: rgb(255 255 255); --t-group-14: rgb(227, 29, 26); }
:root { --t-group-14: #e31d1a; --t-deck-1e: hsl(1 78% 59%); --t-hero-bl: rgba(227, 29, 26, 0.14); --t-chip: hsl(0 0% 100%); }
:root { --t-stage-fb: calc(clamp(40px, 4vw, 60px) * 1.22); --t-ring-r6: 6px; --t-top-39: 15px; --t-zone-ne: 1deg; --t-band-hf: calc(clamp(16px, 2.2vw, 32px) * 1.22); --t-front-8i: 1499px; --t-slot-qc: 27px; --t-media: 21px; }
svg.crown-deal{vertical-align:-0.125em;display:inline-block;height:1em;width:1em;fill:currentColor}