:root {
  color-scheme: dark;
  --gold: #d7ad58;
  --gold-bright: #f4d98b;
  --gold-dark: #76501d;
  --ink: #120d08;
  --panel: rgba(17, 12, 7, 0.94);
  --panel-soft: rgba(23, 16, 9, 0.9);
  --green: #2f7d46;
  --red: #a93a32;
  --blue: #245778;
  --violet: #69417f;
  --muted: #b9aa8b;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: #080604 url("./assets/background.png") center / 100% 100% no-repeat;
  color: #f5e7c8;
  font-family: Georgia, "Times New Roman", serif;
}
button, input, a { font: inherit; color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fantasy-panel {
  position: relative;
  border: 1px solid rgba(220, 177, 88, 0.68);
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 24%, transparent 72%, rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(28, 20, 11, .97), rgba(12, 9, 6, .96));
  box-shadow:
    inset 0 0 0 2px rgba(67, 43, 18, .76),
    inset 0 0 22px rgba(0,0,0,.72),
    0 5px 18px rgba(0,0,0,.52);
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #080604 url("./assets/background.png") center / 100% 100% no-repeat;
}
.access-gate::before {
  content: "";
  position: absolute;
  inset: -2.5%;
  background: inherit;
  filter: blur(6px);
  transform: scale(1.04);
}
.access-card {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 36px));
  padding: 34px 36px 32px;
  text-align: center;
}
.access-card > * {
  position: relative;
  z-index: 2;
}
.access-character {
  position: absolute !important;
  z-index: 2 !important;
  top: -280px;
  right: -145px;
  width: auto;
  height: auto;
  max-width: 300px;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.access-character-2 {
  z-index: 1 !important;
  animation: none !important;
  transform-origin: center center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.access-emblem {
  width: 62px;
  height: 62px;
  margin: -4px auto 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-bright);
  font-size: 31px;
  box-shadow: inset 0 0 16px rgba(215,173,88,.2), 0 0 18px rgba(215,173,88,.12);
}
.access-kicker { margin: 0 0 7px; color: var(--gold); letter-spacing: .22em; font-size: 11px; }
.access-card h1 { margin: 0; color: var(--gold-bright); font-size: 34px; font-weight: 500; text-shadow: 0 2px 8px #000; }
.access-copy { margin: 13px auto 22px; max-width: 320px; color: #cabd9e; font: 14px/1.55 Arial, sans-serif; }
.access-input {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(215,173,88,.65);
  outline: none;
  padding: 0 14px;
  text-align: center;
  letter-spacing: .16em;
  color: #fff3d2;
  background: rgba(3,3,2,.74);
  box-shadow: inset 0 0 12px #000;
}
.access-input:focus { border-color: var(--gold-bright); box-shadow: inset 0 0 12px #000, 0 0 0 2px rgba(215,173,88,.12); }
.gold-button {
  border: 1px solid #c59544;
  background: linear-gradient(#8b5c23, #4f3012);
  box-shadow: inset 0 1px rgba(255,232,173,.38), inset 0 -5px 10px rgba(0,0,0,.32), 0 3px 8px rgba(0,0,0,.5);
  color: #fff0c4;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.gold-button:hover { filter: brightness(1.12); }
.access-submit { width: 100%; height: 47px; margin-top: 12px; }
.access-error { margin: 13px 0 0; color: #ff8b7d; font: 13px Arial, sans-serif; }

.game-shell {
  position: fixed;
  inset: 0;
  background: #080604 url("./assets/background.png") center / 100% 100% no-repeat;
}
.game-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  container-type: size;
  background: url("./assets/background.png") center / 100% 100% no-repeat;
  isolation: isolate;
}

.topbar {
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: 8.2cqh;
  min-height: 64px;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: minmax(18cqw, 1fr) auto minmax(18cqw, 1fr);
  align-items: center;
  gap: 1cqw;
  padding: 0 1.6cqw;
  background: linear-gradient(180deg, rgba(13,10,7,.99), rgba(9,7,5,.96));
}
.brand-block { display: flex; align-items: center; min-width: 0; }
.site-title-image {
  height: 5.5cqh;
  max-width: 26cqw;
  object-fit: contain;
  filter: drop-shadow(0 .2cqh .35cqh rgba(0,0,0,.45));
}
.brand-subtitle { display: none; }
.topbar-dj-button {
  justify-self: center;
  min-width: 6.2cqw;
  height: 4.2cqh;
  padding: 0 1.2cqw;
  border: 1px solid rgba(215,173,88,.72);
  background: linear-gradient(180deg, rgba(91,58,24,.96), rgba(47,29,13,.95));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: .88cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255,232,173,.26), inset 0 -4px 10px rgba(0,0,0,.34), 0 .25cqh .6cqh rgba(0,0,0,.5);
}
.topbar-dj-button:hover,
.topbar-dj-button:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }
.topbar-dj-button.is-disabled { opacity: .45; pointer-events: none; }
.account-block { display: flex; align-items: center; justify-self: end; gap: 1.05cqw; min-width: 0; }
.account-stat { text-align: right; }
.account-label { display: block; color: #9f8b64; font: .56cqw Arial, sans-serif; letter-spacing: .16em; }
.account-stat strong { display: inline-flex; align-items: center; gap: .35cqw; color: var(--gold-bright); font-size: 1.08cqw; font-weight: 500; }
.account-divider { width: 1px; height: 4.4cqh; background: linear-gradient(transparent, rgba(215,173,88,.55), transparent); }
.account-user { display: flex; align-items: center; gap: .65cqw; min-width: 10cqw; }
.account-avatar { width: 2.45cqw; height: 2.45cqw; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; color: #81b6dc; background: #16130d; }
.account-user strong, .account-user span:last-child { display: block; }
.account-user strong { color: #f3e3be; font-size: .8cqw; }
.account-user span:last-child { margin-top: .25cqh; color: #a9946d; font: .59cqw Arial, sans-serif; }
.gil-inline { display: inline-flex; align-items: center; gap: .24cqw; }
.gil-inline img, .gil-number img {
  width: .95cqw;
  min-width: 14px;
  height: .95cqw;
  min-height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.left-rail, .right-rail {
  position: absolute;
  z-index: 40;
  top: 10.1cqh;
  width: 15.8cqw;
  display: grid;
  gap: 1cqh;
}
.left-rail { left: 1cqw; }
.right-rail { right: 1cqw; }
.info-panel { padding: 1.08cqw .95cqw .9cqw; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: .5cqw; padding-bottom: .65cqh; border-bottom: 1px solid rgba(215,173,88,.22); }
.panel-title-row h2 { margin: 0; color: var(--gold-bright); font-size: .86cqw; font-weight: 500; letter-spacing: .03em; }
.live-pill { color: #85d282; border: 1px solid rgba(91,180,92,.5); padding: .18cqh .4cqw; font: .52cqw Arial, sans-serif; background: rgba(35,90,42,.22); }
.table-details { margin: .55cqh 0 0; }
.table-details div { display: flex; align-items: center; justify-content: space-between; gap: .5cqw; padding: .58cqh 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.table-details div:last-child { border-bottom: 0; }
.table-details dt { color: #a79677; font: .62cqw Arial, sans-serif; }
.table-details dd { margin: 0; color: #f1d995; font-size: .68cqw; text-align: right; }

.history-panel { height: 31cqh; padding: 1.05cqw .9cqw .85cqw; }
.history-count { min-width: 1.35cqw; height: 1.35cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(215,173,88,.15); color: var(--gold); font: .55cqw Arial, sans-serif; }
.history-list { height: calc(100% - 2.3cqh); overflow: auto; margin-top: .65cqh; padding-right: .3cqw; scrollbar-width: thin; scrollbar-color: #76501d transparent; }
.history-round-button {
  width: 100%;
  text-align: left;
  padding: .72cqh .6cqw;
  border: 1px solid rgba(215,173,88,.16);
  background: rgba(23,15,8,.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6cqw;
  margin-bottom: .45cqh;
  color: #e8d5ad;
  box-shadow: inset 0 0 .5cqw rgba(0,0,0,.35);
}
.history-round-button strong { font-size: .63cqw; font-weight: 500; }
.history-round-button span { color: #8f7f63; font: .5cqw Arial, sans-serif; white-space: nowrap; }
.history-round-button:hover { border-color: rgba(215,173,88,.45); background: rgba(35,23,12,.85); }
.empty-copy { color: #827660; font: italic .58cqw/1.5 Arial, sans-serif; text-align: center; margin: 2cqh .4cqw; }

.leaderboard-panel { padding: 1.02cqw .85cqw .75cqw; height: 31.5cqh; }
.blackjack-panel { height: 27.5cqh; }
.leaderboard-list { list-style: none; margin: .55cqh 0 0; padding: 0; height: calc(100% - 2.1cqh); overflow: hidden; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 1.45cqw 1fr auto;
  align-items: center;
  gap: .42cqw;
  min-height: 2.62cqh;
  padding: .28cqh .2cqw;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font-size: .68cqw;
}
.leaderboard-row.is-self { background: rgba(63,105,41,.38); color: #fff1b8; }
.leaderboard-rank { color: var(--gold); text-align: center; font: .63cqw Arial, sans-serif; }
.leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbcba9; }
.leaderboard-value { display: inline-flex; align-items: center; gap: .25cqw; color: #f2d47f; white-space: nowrap; font: .66cqw Arial, sans-serif; }
.leaderboard-value.negative { color: #ff9388; }
.leaderboard-empty { padding-top: 3cqh; color: #83745b; text-align: center; font: .58cqw Arial, sans-serif; }

.dealer-zone {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 11.8cqh;
  transform: translateX(-50%);
  width: 27cqw;
  min-height: 16cqh;
  text-align: center;
  pointer-events: none;
}
.dealer-plaque { display: inline-flex; align-items: center; gap: .75cqw; min-width: 9.5cqw; justify-content: center; padding: .45cqh .8cqw; color: var(--gold-bright); letter-spacing: .12em; font-size: .72cqw; }
.dealer-plaque strong { color: #fff3c8; font-size: .74cqw; }
.dealer-hand { display: flex; justify-content: center; align-items: flex-start; min-height: 8cqh; margin-top: .65cqh; }
.dealer-hand .hand-cards { justify-content: center; }

.table-live-banner {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: 26.1cqh;
  transform: translateX(-50%);
  min-width: 22cqw;
  max-width: 34cqw;
  padding: .72cqh 1.15cqw;
}
.round-state {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .55cqw;
  color: #d7c7a7;
  font: .7cqw Arial, sans-serif;
  letter-spacing: .04em;
}
.round-state > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-state strong { color: var(--gold); font-weight: 600; white-space: nowrap; }
.status-dot { width: .52cqw; height: .52cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #5fc46e; box-shadow: 0 0 .6cqw #58ce70; }
.round-state[data-state="dealing"] .status-dot { background: #d5a748; animation: pulse 1s infinite; }
.round-state[data-state="player-turn"] .status-dot { background: #63a7dd; }
.round-state[data-state="dealer-turn"] .status-dot { background: #d1695f; }

.shoe {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 18cqh;
  width: 5cqw;
  height: 6.4cqh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.shoe.is-shuffling { opacity: 1; }
.shoe-card { position: absolute; left: 50%; top: 50%; width: 2.55cqw; height: 3.5cqw; border-radius: .18cqw; transform-origin: center; }
.shoe-card:nth-child(1) { transform: translate(-50%,-50%) rotate(-5deg); }
.shoe-card:nth-child(2) { transform: translate(-50%,-50%) rotate(1deg); }
.shoe-card:nth-child(3) { transform: translate(-50%,-50%) rotate(6deg); }
.shoe.is-shuffling .shoe-card:nth-child(1) { animation: shuffle-left .55s ease-in-out 3; }
.shoe.is-shuffling .shoe-card:nth-child(2) { animation: shuffle-center .55s ease-in-out 3; }
.shoe.is-shuffling .shoe-card:nth-child(3) { animation: shuffle-right .55s ease-in-out 3; }
.card-back {
  border: 1px solid #d8c690;
  background:
    linear-gradient(45deg, transparent 46%, rgba(216,198,144,.35) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(216,198,144,.28) 47% 53%, transparent 54%),
    #244d32;
  background-size: .65cqw .65cqw;
  box-shadow: inset 0 0 0 .18cqw #153521, inset 0 0 0 .28cqw #b69c5d, 0 .18cqw .4cqw rgba(0,0,0,.55);
}

.table-seats { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.player-seat {
  position: absolute;
  left: var(--seat-x);
  top: var(--seat-y);
  width: 10.3cqw;
  transform: translate(-50%, -50%) scale(var(--seat-scale, 1));
  transform-origin: center;
  text-align: center;
  pointer-events: none;
  transition: left .45s ease, top .45s ease, transform .45s ease;
}
.player-seat.is-self { width: 15cqw; z-index: 10; }
.seat-plaque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.8cqw;
  max-width: 100%;
  padding: .35cqh .62cqw .4cqh;
  border: 1px solid rgba(215,173,88,.68);
  background: linear-gradient(180deg, rgba(28,20,11,.96), rgba(11,8,5,.95));
  box-shadow: inset 0 0 0 2px rgba(80,52,22,.58), 0 .25cqh .7cqh rgba(0,0,0,.62);
}
.player-seat.is-self .seat-plaque { min-width: 11.8cqw; }
.seat-name { width: 100%; color: #f1dfb4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68cqw; }
.player-seat.is-self .seat-name { color: var(--gold-bright); font-size: .8cqw; }
.seat-meta { display: flex; align-items: center; justify-content: center; gap: .75cqw; margin-top: .25cqh; color: #bda77d; font: .52cqw Arial, sans-serif; }
.seat-meta strong { color: #f0d078; font-weight: 600; }
.seat-turn { display: none; margin-top: .25cqh; color: #9bd0ff; font: .5cqw Arial, sans-serif; letter-spacing: .08em; }
.player-seat.is-current .seat-plaque { border-color: #73bfff; box-shadow: inset 0 0 0 2px rgba(55,99,136,.65), 0 0 1cqw rgba(65,159,231,.65); }
.player-seat.is-current .seat-turn { display: block; }
.player-seat.state-win .seat-plaque { box-shadow: inset 0 0 0 2px rgba(61,129,67,.7), 0 0 .8cqw rgba(64,178,76,.45); }
.player-seat.state-loss .seat-plaque,
.player-seat.state-bust .seat-plaque,
.player-seat.state-bust-final .seat-plaque { box-shadow: inset 0 0 0 2px rgba(128,48,38,.7), 0 0 .8cqw rgba(190,57,44,.42); }
.player-seat.state-natural .seat-plaque { box-shadow: inset 0 0 0 2px rgba(159,118,33,.78), 0 0 1cqw rgba(244,190,64,.58); }
.seat-hands { display: flex; justify-content: center; gap: .55cqw; min-height: 6.2cqw; margin-top: .45cqh; }
.hand { position: relative; min-width: 3.3cqw; }
.hand.is-active .hand-score { color: #b6ddff; border-color: rgba(97,172,231,.7); }
.hand-cards { display: flex; justify-content: center; align-items: flex-start; min-height: 5.6cqw; }
.playing-card,
.hidden-card {
  position: relative;
  width: 3.35cqw;
  height: 4.57cqw;
  object-fit: contain;
  filter: drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.58));
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hand-cards > * + * { margin-left: -2.22cqw; }
.hand-cards > *:nth-child(2) { transform: rotate(4deg) translateY(.08cqw); }
.hand-cards > *:nth-child(3) { transform: rotate(8deg) translateY(.18cqw); }
.hand-cards > *:nth-child(4) { transform: rotate(12deg) translateY(.3cqw); }
.hand-cards > *:nth-child(5) { transform: rotate(16deg) translateY(.42cqw); }
.player-seat:not(.is-self) .playing-card,
.player-seat:not(.is-self) .hidden-card { width: 2.65cqw; height: 3.61cqw; }
.player-seat:not(.is-self) .hand-cards > * + * { margin-left: -1.82cqw; }
.player-seat:not(.is-self) .seat-hands { min-height: 4.65cqw; }
.dealer-hand .playing-card,
.dealer-hand .hidden-card { width: 3.6cqw; height: 4.91cqw; }
.dealer-hand .hand-cards > * + * { margin-left: -2.35cqw; }
.hidden-card { display: inline-block; border-radius: .2cqw; }
.hand-score {
  position: absolute;
  left: 50%;
  bottom: -.35cqh;
  transform: translate(-50%, 45%);
  z-index: 4;
  min-width: 1.55cqw;
  height: 1.55cqw;
  display: grid;
  place-items: center;
  padding: 0 .27cqw;
  border-radius: 1cqw;
  border: 1px solid rgba(215,173,88,.6);
  background: rgba(10,8,5,.95);
  color: #f4d883;
  font: .59cqw Arial, sans-serif;
  white-space: nowrap;
}
.player-seat.is-self .hand-score { font-size: .68cqw; min-width: 1.75cqw; height: 1.75cqw; }
.playing-card.is-new,
.hidden-card.is-new {
  animation: deal-card .72s cubic-bezier(.12,.72,.25,1) var(--deal-delay, 0ms) both;
  animation-play-state: paused;
}
.playing-card.is-new.is-dealing,
.hidden-card.is-new.is-dealing { animation-play-state: running; }

.bottom-hud {
  position: absolute;
  z-index: 55;
  left: 50%;
  bottom: 1.2cqh;
  transform: translateX(-50%);
  width: 67cqw;
  height: 17.4cqh;
  display: grid;
  grid-template-columns: 15.8cqw 1fr 14.7cqw;
  gap: .75cqw;
  align-items: stretch;
}
.bet-panel, .action-panel, .last-hand-panel { padding: .82cqw; }
.hud-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: .4cqw; color: var(--gold-bright); font-size: .66cqw; letter-spacing: .07em; }
.hud-heading-row small { color: #8f8067; font: .47cqw Arial, sans-serif; letter-spacing: 0; }
.bet-editor { display: grid; grid-template-columns: 2cqw 1fr 2cqw; gap: .4cqw; margin-top: .65cqh; }
.square-button { border: 1px solid rgba(215,173,88,.45); background: linear-gradient(#332416,#17100a); color: var(--gold-bright); box-shadow: inset 0 0 .5cqw rgba(0,0,0,.55); }
.square-button:disabled { opacity: .35; cursor: default; }
.bet-input-wrap { position: relative; }
.bet-input-wrap input { width: 100%; height: 3.45cqh; padding: 0 .65cqw 0 2.15cqw; border: 1px solid rgba(215,173,88,.4); outline: none; background: rgba(4,3,2,.68); color: #ffe7a6; text-align: center; font-size: .83cqw; box-shadow: inset 0 0 .6cqw #000; }
.bet-input-icon {
  position: absolute;
  left: .55cqw;
  top: 50%;
  width: 1cqw;
  height: 1cqw;
  min-width: 14px;
  min-height: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bet-input-icon img { width: 100%; height: 100%; object-fit: contain; }
.bet-presets { display: flex; justify-content: center; gap: .28cqw; margin-top: .55cqh; }
.preset-button { flex: 1; min-width: 0; padding: .35cqh .1cqw; border: 1px solid rgba(215,173,88,.3); background: rgba(39,27,15,.8); color: #cfba8b; font: .48cqw Arial, sans-serif; }
.preset-button:hover { border-color: var(--gold); color: #ffe7a6; }
.preset-button:disabled { opacity: .35; cursor: default; }
.apply-bet-button { width: 100%; margin-top: .55cqh; height: 3.2cqh; border: 1px solid #b7863b; background: linear-gradient(#754a1b,#3c2410); color: #ffe8b1; font-size: .56cqw; letter-spacing: .08em; }
.apply-bet-button:disabled { opacity: .38; cursor: default; }

.action-panel { display: flex; flex-direction: column; justify-content: center; }
.action-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55cqw; }
.action-button {
  height: 7.2cqh;
  border: 1px solid rgba(215,173,88,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55cqh;
  color: #f9e9bd;
  text-shadow: 0 1px 2px #000;
  font-size: .61cqw;
  letter-spacing: .07em;
  box-shadow: inset 0 0 1cqw rgba(0,0,0,.55), 0 .25cqh .6cqh rgba(0,0,0,.5);
}
.action-button span { font: 1.05cqw Arial, sans-serif; color: #fff0bb; }
.action-hit { background: linear-gradient(#3f7b40,#1c4522); }
.action-stand { background: linear-gradient(#8b5e24,#4c2e11); }
.action-dd { background: linear-gradient(#285c7a,#153548); }
.action-split { background: linear-gradient(#73478b,#3e2350); }
.action-button:hover:not(:disabled) { filter: brightness(1.2); transform: translateY(-1px); }
.action-button:disabled { opacity: .34; cursor: default; filter: grayscale(.25); }
.action-button.is-pending { animation: action-pending .8s infinite alternate; }
.turn-message { margin-top: .9cqh; min-height: 2cqh; text-align: center; color: #ad9c7b; font: .55cqw Arial, sans-serif; }
.turn-message.is-your-turn { color: #a9d9ff; }

.last-hand-panel { overflow: hidden; }
.last-hand-content { height: 10.6cqh; margin-top: .55cqh; display: flex; align-items: center; justify-content: center; gap: .55cqw; }
.last-hand-empty { color: #82745d; font: italic .54cqw Arial, sans-serif; text-align: center; }
.last-hand-cards { display: flex; align-items: center; min-width: 5.8cqw; }
.last-hand-cards img { width: 2.6cqw; height: 3.55cqw; object-fit: contain; filter: drop-shadow(0 .15cqw .18cqw #000); }
.last-hand-cards img + img { margin-left: -1.65cqw; }
.last-hand-result { text-align: center; }
.last-hand-result strong { display: block; font-size: .72cqw; }
.last-hand-result span { display: inline-flex; align-items: center; gap: .25cqw; margin-top: .35cqh; color: #c4b18c; font: .55cqw Arial, sans-serif; }
.last-hand-result.win strong { color: #85dc89; }
.last-hand-result.loss strong { color: #ee7e70; }
.last-hand-result.push strong { color: #e5c86e; }

.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
}
.modal-card {
  width: min(36cqw, calc(100vw - 40px));
  max-height: min(70cqh, calc(100vh - 60px));
  padding: 1cqw;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding-bottom: .7cqh;
  border-bottom: 1px solid rgba(215,173,88,.22);
}
.modal-header h2 { margin: 0; color: var(--gold-bright); font-size: 1cqw; font-weight: 500; }
.modal-close {
  width: 2.1cqw;
  min-width: 28px;
  height: 2.1cqw;
  min-height: 28px;
  border: 1px solid rgba(215,173,88,.45);
  background: rgba(39,27,15,.85);
  color: #f0d078;
}
.modal-body { max-height: calc(70cqh - 4.4cqh); overflow: auto; padding-right: .2cqw; margin-top: .8cqh; scrollbar-width: thin; scrollbar-color: #76501d transparent; }
.modal-history-entry { padding: .62cqh 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.modal-history-entry:last-child { border-bottom: 0; }
.modal-history-entry-top { display: flex; justify-content: space-between; gap: .8cqw; }
.modal-history-entry strong { color: #e8d5ad; font-size: .66cqw; font-weight: 500; }
.modal-history-entry time { color: #8a7a60; font: .53cqw Arial, sans-serif; white-space: nowrap; }
.modal-history-entry p { margin: .3cqh 0 0; color: #b9a989; font: .58cqw/1.45 Arial, sans-serif; }

.toast-stack { position: absolute; z-index: 200; top: 9.4cqh; left: 50%; transform: translateX(-50%); display: grid; gap: .5cqh; pointer-events: none; }
.toast { min-width: 16cqw; max-width: 34cqw; padding: .65cqh .9cqw; border: 1px solid rgba(215,173,88,.58); background: rgba(16,11,7,.95); box-shadow: 0 .4cqh 1.2cqh rgba(0,0,0,.55); color: #ead8b2; text-align: center; font: .58cqw Arial, sans-serif; animation: toast-in .25s ease both; }
.toast.error { border-color: rgba(211,85,69,.75); color: #ffafa4; }
.toast.success { border-color: rgba(81,174,91,.72); color: #b5ebb8; }

@keyframes deal-card {
  0% { opacity: 0; translate: var(--deal-x, 0px) var(--deal-y, -18cqh); rotate: var(--deal-rotate, -12deg); scale: .28; }
  62% { opacity: 1; }
  84% { translate: 0 0; rotate: 2deg; scale: 1.04; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes shuffle-left { 0%,100%{transform:translate(-50%,-50%) rotate(-5deg)} 50%{transform:translate(-115%,-55%) rotate(-22deg)} }
@keyframes shuffle-center { 0%,100%{transform:translate(-50%,-50%) rotate(1deg)} 50%{transform:translate(-50%,-70%) rotate(8deg)} }
@keyframes shuffle-right { 0%,100%{transform:translate(-50%,-50%) rotate(6deg)} 50%{transform:translate(15%,-55%) rotate(24deg)} }
@keyframes action-pending { from{filter:brightness(.8)} to{filter:brightness(1.25);box-shadow:0 0 .9cqw rgba(238,205,126,.45)} }
@keyframes pulse { 50% { opacity:.35; transform:scale(.72); } }
@keyframes toast-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

@media (max-width: 1100px) {
  .site-title-image { max-width: 30cqw; }
  .left-rail, .right-rail { width: 18cqw; }
  .bottom-hud { width: 74cqw; grid-template-columns: 18cqw 1fr 16cqw; }
}

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .game-shell { position: relative; min-width: 1180px; min-height: 664px; overflow: auto; }
  .game-stage { width: 1180px; height: 664px; }
  .modal-card { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 30px); }
}

/* Final blackjack table refinements */
.topbar {
  height: 6.9cqh;
  min-height: 54px;
  padding: 0 1.45cqw;
  overflow: visible;
  background:
    radial-gradient(circle at 12% 18%, rgba(191,137,55,.12), transparent 16%),
    radial-gradient(circle at 78% 70%, rgba(125,84,30,.11), transparent 19%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(19,14,9,.985), rgba(8,6,4,.97));
  box-shadow:
    inset 0 -1px rgba(230,187,96,.2),
    inset 0 -8px 20px rgba(0,0,0,.38),
    0 3px 13px rgba(0,0,0,.58);
}
.site-title-image {
  height: 5.15cqh;
  max-width: 23cqw;
}
.account-divider { height: 3.6cqh; }
.left-rail, .right-rail { top: 8.4cqh; }
.dealer-zone { top: 9.5cqh; }
.toast-stack { top: 8cqh; }

.topbar-dj-button {
  position: relative;
  isolation: isolate;
  min-width: 6.8cqw;
  height: 4.15cqh;
  padding: 0 1.35cqw;
  border: 0;
  clip-path: polygon(9% 0, 91% 0, 100% 24%, 96% 78%, 86% 100%, 14% 100%, 4% 78%, 0 24%);
  background:
    linear-gradient(90deg, transparent, rgba(255,235,178,.13), transparent),
    linear-gradient(180deg, #8c612a 0%, #624019 42%, #321d0b 100%);
  color: #fff0c4;
  text-shadow: 0 1px 2px #000, 0 0 .35cqw rgba(244,217,139,.28);
  box-shadow:
    inset 0 2px rgba(255,236,181,.3),
    inset 0 -5px 8px rgba(0,0,0,.44),
    0 .38cqh .15cqh rgba(0,0,0,.62),
    0 .65cqh 1cqh rgba(0,0,0,.38);
  transform: translateY(-.1cqh);
}
.topbar-dj-button::before,
.topbar-dj-button::after {
  content: "◆";
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(255,225,151,.68);
  font-size: .48cqw;
  text-shadow: 0 1px #2b1607;
}
.topbar-dj-button::before { left: .7cqw; }
.topbar-dj-button::after { right: .7cqw; }
.topbar-dj-button:hover,
.topbar-dj-button:focus-visible {
  filter: brightness(1.13);
  transform: translateY(-.25cqh);
  box-shadow:
    inset 0 2px rgba(255,240,196,.4),
    inset 0 -5px 8px rgba(0,0,0,.4),
    0 .52cqh .15cqh rgba(0,0,0,.65),
    0 .8cqh 1.1cqh rgba(0,0,0,.42);
}

.info-panel,
.history-panel,
.leaderboard-panel {
  background:
    radial-gradient(circle at 18% 12%, rgba(173,117,42,.1), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 35%),
    linear-gradient(180deg, rgba(24,17,10,.76), rgba(9,7,5,.62));
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.table-live-banner {
  top: 24.8cqh;
  min-width: 0;
  max-width: 42cqw;
  padding: .2cqh .3cqw;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 2px 3px #000, 0 0 .4cqw rgba(0,0,0,.8);
}

.seat-meta {
  align-items: baseline;
  gap: .85cqw;
  line-height: 1;
}
.seat-meta > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .18cqw;
  white-space: nowrap;
}
.seat-meta strong {
  display: inline-block;
  line-height: 1;
}

.player-seat .hand-score {
  left: auto;
  right: -.15cqw;
  top: .35cqw;
  bottom: auto;
  transform: none;
  z-index: 12;
  box-shadow: 0 .12cqw .35cqw rgba(0,0,0,.72);
}
.player-seat.is-self .hand-score {
  right: -.25cqw;
  top: .45cqw;
}
.dealer-hand .hand-score { display: none; }

.shoe {
  left: 50%;
  top: 42cqh;
  width: 8.2cqw;
  height: 10.5cqw;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.18);
  transition:
    left .78s cubic-bezier(.2,.78,.28,1),
    top .78s cubic-bezier(.2,.78,.28,1),
    transform .78s cubic-bezier(.2,.78,.28,1),
    opacity .2s ease;
}
.shoe.is-visible { opacity: 1; }
.shoe.is-parked {
  left: var(--shoe-park-x, 63cqw);
  top: var(--shoe-park-y, 38cqh);
  transform: translate(-50%, -50%) scale(.74);
}
.shoe-card {
  width: 4.1cqw;
  height: 5.6cqw;
  border-radius: .22cqw;
  --stack-x: 0cqw;
  --stack-y: 0cqw;
  --stack-r: 0deg;
  transform: translate(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y))) rotate(var(--stack-r));
  box-shadow:
    inset 0 0 0 .2cqw #153521,
    inset 0 0 0 .31cqw #b69c5d,
    0 .14cqw .12cqw rgba(0,0,0,.62);
}
.shoe-card:nth-child(1)  { --stack-x: -.48cqw; --stack-y: .42cqw; --stack-r: -4deg; }
.shoe-card:nth-child(2)  { --stack-x: -.39cqw; --stack-y: .34cqw; --stack-r: -3deg; }
.shoe-card:nth-child(3)  { --stack-x: -.31cqw; --stack-y: .27cqw; --stack-r: -2deg; }
.shoe-card:nth-child(4)  { --stack-x: -.23cqw; --stack-y: .20cqw; --stack-r: -1.5deg; }
.shoe-card:nth-child(5)  { --stack-x: -.15cqw; --stack-y: .13cqw; --stack-r: -1deg; }
.shoe-card:nth-child(6)  { --stack-x: -.07cqw; --stack-y: .06cqw; --stack-r: -.5deg; }
.shoe-card:nth-child(7)  { --stack-x: .02cqw; --stack-y: -.02cqw; --stack-r: .5deg; }
.shoe-card:nth-child(8)  { --stack-x: .10cqw; --stack-y: -.09cqw; --stack-r: 1deg; }
.shoe-card:nth-child(9)  { --stack-x: .18cqw; --stack-y: -.16cqw; --stack-r: 1.5deg; }
.shoe-card:nth-child(10) { --stack-x: .26cqw; --stack-y: -.23cqw; --stack-r: 2deg; }
.shoe-card:nth-child(11) { --stack-x: .34cqw; --stack-y: -.30cqw; --stack-r: 3deg; }
.shoe-card:nth-child(12) { --stack-x: .42cqw; --stack-y: -.37cqw; --stack-r: 4deg; }
.shoe.is-shuffling .shoe-card:nth-child(odd) {
  animation: full-deck-shuffle-left .62s ease-in-out 3;
}
.shoe.is-shuffling .shoe-card:nth-child(even) {
  animation: full-deck-shuffle-right .62s ease-in-out 3;
}
.shoe.is-shuffling .shoe-card:nth-child(3n) { animation-delay: .05s; }
.shoe.is-shuffling .shoe-card:nth-child(4n) { animation-delay: .09s; }

.action-button.is-locked { opacity: .28; }

.modal-card {
  width: min(39cqw, calc(100vw - 40px));
  max-height: min(78cqh, calc(100vh - 46px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header { flex: 0 0 auto; }
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 0 .45cqw 1.25cqh 0;
  margin-top: .8cqh;
}
.modal-history-entry:last-child { padding-bottom: 1.1cqh; }

@keyframes full-deck-shuffle-left {
  0%, 100% {
    transform: translate(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y))) rotate(var(--stack-r));
  }
  43% {
    transform: translate(calc(-50% - 2.75cqw + var(--stack-x)), calc(-50% - .25cqw + var(--stack-y))) rotate(calc(var(--stack-r) - 17deg));
  }
  70% {
    transform: translate(calc(-50% + .45cqw + var(--stack-x)), calc(-50% + .15cqw + var(--stack-y))) rotate(calc(var(--stack-r) + 4deg));
  }
}
@keyframes full-deck-shuffle-right {
  0%, 100% {
    transform: translate(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y))) rotate(var(--stack-r));
  }
  43% {
    transform: translate(calc(-50% + 2.75cqw + var(--stack-x)), calc(-50% - .25cqw + var(--stack-y))) rotate(calc(var(--stack-r) + 17deg));
  }
  70% {
    transform: translate(calc(-50% - .45cqw + var(--stack-x)), calc(-50% + .15cqw + var(--stack-y))) rotate(calc(var(--stack-r) - 4deg));
  }
}

/* ===== Round 4 requested visual adjustments ===== */
.topbar {
  top: 0;
  height: 6.7cqh;
  min-height: 56px;
  padding: 0 1.35cqw;
  background:
    radial-gradient(circle at 22% 30%, rgba(183,126,44,.13), transparent 24%),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.04), transparent 20%),
    linear-gradient(180deg, rgba(17,12,8,.82), rgba(9,7,5,.72));
  backdrop-filter: blur(1.8px);
  -webkit-backdrop-filter: blur(1.8px);
}
.site-title-image {
  height: 6.4cqh;
  max-width: 29cqw;
}
.topbar-dj-button {
  width: 83px;
  min-width: 83px;
  height: 43px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  color: #fde9b4;
  font-size: 18px;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  box-shadow: none;
}
.topbar-dj-button::before,
.topbar-dj-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.topbar-dj-button::before {
  inset: .18cqh .18cqw .18cqh;
  border-radius: .6cqw;
  background: linear-gradient(180deg, rgba(59,37,16,.35), rgba(18,11,6,.28));
  box-shadow: inset 0 1px 0 rgba(255,241,195,.12), inset 0 -4px 8px rgba(0,0,0,.24), 0 .15cqh .3cqh rgba(0,0,0,.28);
}
.topbar-dj-button::after {
  background: url("./assets/button.png") center / contain no-repeat;
  filter: drop-shadow(0 .22cqh .4cqh rgba(0,0,0,.35));
}
.topbar-dj-button > * { position: relative; z-index: 2; }
.topbar-dj-button,
.topbar-dj-button:focus-visible,
.topbar-dj-button:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-dj-button:hover,
.topbar-dj-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: none;
}

.panel-frame {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}
.panel-frame::before,
.panel-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.panel-frame::before {
  inset: .42cqh .28cqw .42cqh;
  border-radius: .9cqw;
  background:
    radial-gradient(circle at 18% 16%, rgba(183,126,44,.07), transparent 26%),
    linear-gradient(180deg, rgba(28,19,11,.24), rgba(9,7,5,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,240,196,.04),
    inset 0 -8px 14px rgba(0,0,0,.16),
    0 .35cqh .8cqh rgba(0,0,0,.16);
  backdrop-filter: blur(1.1px);
  -webkit-backdrop-filter: blur(1.1px);
  z-index: 0;
}
.panel-frame::after {
  inset: 0;
  background: var(--frame-image) center / 100% 100% no-repeat;
  filter: drop-shadow(0 .25cqh .45cqh rgba(0,0,0,.45));
  z-index: 1;
}
.panel-frame > * { position: relative; z-index: 2; }

.panel-tabledetails { --frame-image: url("./assets/tabledetails.png"); padding: 1.4cqw 1.15cqw 1.2cqw; min-height: 47.2cqh; }
.panel-totalearnings { --frame-image: url("./assets/totalearnings.png"); padding: 1.3cqw .98cqw .95cqw; }
.panel-blackjacks { --frame-image: url("./assets/blackjacks.png"); padding: 1.3cqw .98cqw .95cqw; }
.panel-bet { --frame-image: url("./assets/betamount.png"); padding: .9cqw .88cqw .78cqw; }
.panel-choices { --frame-image: url("./assets/choices2.png"); padding: .88cqw .82cqw .72cqw; }
.panel-lasthand { --frame-image: url("./assets/lasthand.png"); padding: .95cqw .85cqw .82cqw; }

.left-rail { width: 16.5cqw; }
.right-rail { width: 16.1cqw; }
.info-panel .panel-title-row,
.leaderboard-panel .panel-title-row,
.history-row {
  padding-bottom: .55cqh;
  border-bottom: 1px solid rgba(215,173,88,.16);
}
.info-panel .table-details div { padding: .52cqh 0; }
.history-section {
  margin-top: .9cqh;
  padding-top: .32cqh;
}
.history-list {
  height: 19.2cqh;
  margin-top: .58cqh;
}
.leaderboard-panel { height: 31.2cqh; }
.blackjack-panel { height: 26.8cqh; }
.leaderboard-row {
  min-height: 2.72cqh;
  font-size: .74cqw;
}
.leaderboard-rank { font-size: .68cqw; }
.leaderboard-name { font-size: .72cqw; }
.leaderboard-value { font-size: .72cqw; }

.dealer-zone {
  top: calc(11.8cqh + 70px);
  width: 30cqw;
  min-height: 12cqh;
}
.dealer-hand {
  min-height: 6.7cqh;
  margin-top: .1cqh;
  position: relative;
}
.dealer-score-badge {
  position: absolute;
  min-width: 1.9cqw;
  height: 1.35cqw;
  padding: 0 .28cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f0d17b;
  font-size: .66cqw;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.82);
  z-index: 12;
}
.dealer-score-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/slots.png") center / contain no-repeat;
  filter: drop-shadow(0 .15cqh .25cqh rgba(0,0,0,.48));
  z-index: -1;
}

.table-live-banner {
  top: calc(24.8cqh + 70px);
  max-width: 48cqw;
  font-size: .92cqw;
  text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 0 .6cqw rgba(0,0,0,.85), 0 0 .45cqw rgba(228,196,109,.24);
}
.round-state strong { font-size: .82cqw; }
.status-dot { box-shadow: 0 0 .7cqw currentColor; }

.player-seat { width: 9.2cqw; }
.player-seat.is-self { width: 13.8cqw; }
.seat-plaque {
  min-width: 7.1cqw;
  max-width: 100%;
  padding: .62cqh .55cqw .72cqh;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.seat-plaque::before,
.seat-plaque::after { content:""; position:absolute; inset:0; pointer-events:none; }
.seat-plaque::before {
  inset: .5cqh .42cqw .52cqh;
  background: linear-gradient(180deg, rgba(20,14,8,.8), rgba(7,5,3,.72));
  border-radius: .65cqw;
  box-shadow: inset 0 1px 0 rgba(255,238,189,.08), inset 0 -.42cqh .7cqh rgba(0,0,0,.42), 0 .24cqh .55cqh rgba(0,0,0,.42);
}
.seat-plaque::after {
  background: url("./assets/frame.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 .2cqh .35cqh rgba(0,0,0,.48));
}
.seat-plaque > * { position: relative; z-index: 2; }
.seat-name { font-size: .64cqw; }
.player-seat.is-self .seat-name { font-size: .75cqw; }
.seat-meta {
  margin-top: .22cqh;
  font-size: .48cqw;
  gap: .6cqw;
  align-items: center;
}
.seat-meta > span,
.seat-meta strong {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.seat-meta strong { color: #f1d282; }
.seat-hands { margin-top: .4cqh; min-height: 6.4cqw; }
.playing-card,
.hidden-card {
  width: 3.62cqw;
  height: 4.94cqw;
}
.player-seat:not(.is-self) .playing-card,
.player-seat:not(.is-self) .hidden-card {
  width: 2.96cqw;
  height: 4.04cqw;
}
.hand-cards > * + * { margin-left: -2.35cqw; }
.player-seat:not(.is-self) .hand-cards > * + * { margin-left: -1.96cqw; }
.dealer-hand .playing-card,
.dealer-hand .hidden-card {
  width: 3.7cqw;
  height: 5.05cqw;
}
.dealer-hand .hand-cards > * + * { margin-left: -2.68cqw; }
.hand {
  display: inline-block;
  position: relative;
}
.hand-score {
  left: auto;
  right: -0.75cqw;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  min-width: 1.75cqw;
  height: 1.2cqw;
  padding: 0 .18cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e8c96a;
  font-size: .56cqw;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.hand-score::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/slots.png") center / contain no-repeat;
  filter: drop-shadow(0 .14cqh .22cqh rgba(0,0,0,.4));
  z-index: -1;
}
.player-seat.is-self .hand-score {
  right: -0.82cqw;
  min-width: 1.9cqw;
  height: 1.28cqw;
  font-size: .6cqw;
}
.dealer-hand .hand-score { display: none; }

.bottom-hud {
  width: 61.8cqw;
  height: 16.8cqh;
  grid-template-columns: 13.7cqw 1fr 13.9cqw;
  gap: .58cqw;
}
.bet-editor { grid-template-columns: 1.85cqw 1fr 1.85cqw; }
.bet-input-wrap input { height: 3.16cqh; font-size: .78cqw; }
.preset-button { font-size: .45cqw; }
.apply-bet-button,
.frame-action-button,
.action-button {
  position: relative;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.frame-action-button::before,
.frame-action-button::after,
.action-button::before,
.action-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.frame-action-button::before,
.action-button::before {
  inset: .18cqh .12cqw .22cqh;
  border-radius: .4cqw;
  background: linear-gradient(180deg, rgba(44,29,14,.85), rgba(17,11,6,.9));
  box-shadow: inset 0 1px 0 rgba(255,238,188,.12), inset 0 -7px 10px rgba(0,0,0,.42), 0 .2cqh .45cqh rgba(0,0,0,.42);
}
.frame-action-button::after,
.action-button::after {
  background: url("./assets/choices.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 .12cqh .22cqh rgba(0,0,0,.4));
}
.frame-action-button > *,
.action-button > * { position: relative; z-index: 2; }
.square-button { font-size: .88cqw; }
.apply-bet-button { height: 3.04cqh; font-size: .54cqw; }
.action-panel { justify-content: center; }
.action-buttons {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .42cqw;
}
.action-button {
  width: 6.9cqw;
  height: 6.65cqh;
  gap: .42cqh;
  font-size: .56cqw;
}
.action-button span { font-size: .96cqw; }
.action-button.is-locked { opacity: .24; }
.turn-message { margin-top: .8cqh; font-size: .58cqw; }

.last-hand-content { gap: .72cqw; }
.last-hand-cards { min-width: 6.4cqw; }
.last-hand-cards img { width: 2.82cqw; height: 3.85cqw; }
.last-hand-cards img + img { margin-left: -1.82cqw; }
.last-hand-cards img:nth-child(2) { transform: rotate(4deg) translateY(.08cqw); }
.last-hand-cards img:nth-child(3) { transform: rotate(8deg) translateY(.18cqw); }
.last-hand-cards img:nth-child(4) { transform: rotate(11deg) translateY(.26cqw); }
.last-hand-cards img:nth-child(5) { transform: rotate(14deg) translateY(.38cqw); }
.last-hand-result span { font-size: .72cqw; gap: .28cqw; }
.last-hand-result .gil-inline img { width: 1.05cqw; height: 1.05cqw; }

.card-back {
  border: 0;
  background:
    url("./assets/bacl.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, #355d3f, #1c3523);
  box-shadow: 0 .18cqw .4cqw rgba(0,0,0,.55);
}
.shoe {
  top: 42.3cqh;
  width: 9.4cqw;
  height: 12cqw;
  transform: translate(-50%, -50%) scale(1.28);
}
.shoe.is-parked {
  transform: translate(-50%, -50%) scale(.8);
}
.shoe-card {
  width: 4.8cqw;
  height: 6.55cqw;
  box-shadow: 0 .18cqw .35cqw rgba(0,0,0,.55);
}

.modal-card {
  width: min(42cqw, calc(100vw - 34px));
  max-height: min(82cqh, calc(100vh - 36px));
}
.modal-body { padding-bottom: 1.45cqh; }

@media (max-width: 1100px) {
  .bottom-hud { width: 67cqw; grid-template-columns: 14.8cqw 1fr 15.2cqw; }
  .action-button { width: 7.6cqw; }
}
.topbar-dj-button,
.frame-action-button,
.action-button,
.seat-plaque,
.panel-frame { isolation: isolate; }
.topbar-dj-button::before { z-index: -2; }
.topbar-dj-button::after { z-index: -1; }
.frame-action-button::before,
.action-button::before { z-index: -2; }
.frame-action-button::after,
.action-button::after { z-index: -1; }

.hand.is-active .hand-score {
  color: #e8c96a;
  border-color: transparent;
}
.table-live-banner .status-dot {
  margin-right: .15cqw;
}
.table-live-banner > span:nth-child(2) {
  letter-spacing: .01em;
}
.panel-tabledetails::before,
.panel-totalearnings::before,
.panel-blackjacks::before,
.panel-bet::before,
.panel-choices::before,
.panel-lasthand::before {
  backdrop-filter: blur(.8px);
  -webkit-backdrop-filter: blur(.8px);
}
.topbar-dj-button::after {
  background-position: center;
}

/* ===== Round 7 hard overrides (requested corrections) ===== */
.panel-frame {
  overflow: visible !important;
}
.panel-frame::before {
  inset: .18cqh .14cqw .18cqh !important;
  border-radius: .78cqw !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(183,126,44,.12), transparent 30%),
    linear-gradient(180deg, rgba(31,21,12,.72), rgba(12,9,6,.60)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,196,.08),
    inset 0 -10px 16px rgba(0,0,0,.26),
    0 .35cqh .8cqh rgba(0,0,0,.18) !important;
  backdrop-filter: blur(.85px) !important;
  -webkit-backdrop-filter: blur(.85px) !important;
}
.panel-frame::after {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.panel-tabledetails::before,
.panel-totalearnings::before,
.panel-blackjacks::before,
.panel-bet::before,
.panel-choices::before,
.panel-lasthand::before {
  opacity: 1 !important;
}

/* player slot frame only on the small info plaque */
.player-seat {
  width: auto !important;
}
.player-seat.is-self {
  width: auto !important;
}
.seat-plaque {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 7.1cqw !important;
  max-width: 13.2cqw !important;
  padding: .58cqh .72cqw .7cqh !important;
  overflow: visible !important;
}
.player-seat.is-self .seat-plaque {
  min-width: 9.2cqw !important;
  max-width: 15.5cqw !important;
}
.seat-plaque::before,
.seat-plaque::after {
  inset: 0 !important;
}
.seat-plaque::before {
  inset: .44cqh .30cqw .44cqh !important;
  border-radius: .6cqw !important;
  background: linear-gradient(180deg, rgba(21,15,9,.76), rgba(7,5,3,.70)) !important;
  box-shadow: inset 0 1px 0 rgba(255,238,189,.08), inset 0 -.42cqh .7cqh rgba(0,0,0,.42), 0 .24cqh .55cqh rgba(0,0,0,.32) !important;
}
.seat-plaque::after {
  background: url("./assets/frame.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 .16cqh .28cqh rgba(0,0,0,.35)) !important;
}
.seat-hands {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* badge and live text corrections */
.hand-score,
.player-seat .hand-score,
.player-seat.is-self .hand-score,
.hand.is-active .hand-score {
  color: #e6c666 !important;
  border-color: transparent !important;
}
.hand-score {
  right: -0.72cqw !important;
  min-width: 1.72cqw !important;
  height: 1.18cqw !important;
  font-size: .56cqw !important;
  line-height: 1 !important;
}
.player-seat.is-self .hand-score {
  right: -0.78cqw !important;
  min-width: 1.88cqw !important;
  height: 1.26cqw !important;
  font-size: .6cqw !important;
}
.hand-score::before,
.dealer-score-badge::before {
  background-size: 100% 100% !important;
  background-position: center !important;
}
.dealer-zone {
  top: calc(11.8cqh + 100px) !important;
}
.dealer-hand .playing-card,
.dealer-hand .hidden-card {
  width: 3.42cqw !important;
  height: 4.66cqw !important;
}
.dealer-score-badge {
  min-width: 1.7cqw !important;
  height: 1.16cqw !important;
  padding: 0 .14cqw !important;
  font-size: .52cqw !important;
  color: #e6c666 !important;
}
.table-live-banner {
  top: calc(24.8cqh + 100px) !important;
  font-size: .96cqw !important;
}
.round-state {
  gap: .85cqw !important;
}
.round-state strong {
  font-size: .86cqw !important;
}

/* DJ button keep original asset proportions */
.topbar-dj-button {
  width: 83px !important;
  min-width: 83px !important;
  height: 43px !important;
  font-size: 17px !important;
}
.topbar-dj-button::before {
  display: none !important;
}
.topbar-dj-button::after {
  inset: 0 !important;
  background: url("./assets/button.png") center center / 83px 43px no-repeat !important;
}

/* ===== Round 8 requested fixes ===== */
.topbar {
  height: 5.9cqh !important;
  min-height: 48px !important;
}
.site-title-image {
  height: 5.8cqh !important;
}
.topbar-dj-button {
  width: 83px !important;
  min-width: 83px !important;
  height: 43px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.topbar-dj-button::before,
.topbar-dj-button::after {
  display: none !important;
}
.topbar-dj-art {
  position: absolute;
  inset: 0;
  width: 83px;
  height: 43px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.topbar-dj-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  color: #f8e6b7;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  transform: translateY(-1px);
}

.panel-frame::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(183,126,44,.12), transparent 30%),
    linear-gradient(180deg, rgba(31,21,12,.90), rgba(12,9,6,.90)) !important;
  opacity: 1 !important;
}
.panel-tabledetails::before,
.panel-totalearnings::before,
.panel-blackjacks::before,
.panel-bet::before,
.panel-choices::before,
.panel-lasthand::before {
  opacity: 1 !important;
}
.panel-totalearnings,
.panel-blackjacks {
  padding-top: 1.75cqw !important;
}
.leaderboard-no-title {
  height: calc(100% - .4cqh) !important;
  margin-top: 0 !important;
}

.seat-plaque::before {
  inset: .18cqh .14cqw .18cqh !important;
}

/* ===== Round 9 requested fixes ===== */
/* top bar */
.topbar {
  height: 5.45cqh !important;
  min-height: 44px !important;
  padding: 0 1.1cqw !important;
  gap: .7cqw !important;
}
.site-title-image {
  height: 5.35cqh !important;
  max-width: 25.5cqw !important;
}
.topbar-dj-button {
  width: 96px !important;
  min-width: 96px !important;
  height: 43px !important;
}
.topbar-dj-art {
  width: 96px !important;
  height: 43px !important;
  object-fit: contain !important;
}
.topbar-dj-label {
  font-size: 16px !important;
}
.account-block {
  gap: .72cqw !important;
}
.account-label {
  font-size: .47cqw !important;
}
.account-stat strong {
  font-size: .9cqw !important;
  gap: .24cqw !important;
}
.account-divider {
  height: 3.45cqh !important;
}
.account-avatar {
  width: 1.95cqw !important;
  height: 1.95cqw !important;
}
.account-user {
  gap: .48cqw !important;
  min-width: 8.3cqw !important;
}
.account-user strong {
  font-size: .68cqw !important;
}
.account-user span:last-child {
  font-size: .5cqw !important;
  margin-top: .14cqh !important;
}
.gil-inline img,
.gil-number img {
  width: .8cqw !important;
  min-width: 12px !important;
  height: .8cqw !important;
  min-height: 12px !important;
}

/* slightly larger cards */
.playing-card,
.hidden-card {
  width: 3.78cqw !important;
  height: 5.16cqw !important;
}
.player-seat:not(.is-self) .playing-card,
.player-seat:not(.is-self) .hidden-card {
  width: 3.08cqw !important;
  height: 4.2cqw !important;
}
.dealer-hand .playing-card,
.dealer-hand .hidden-card {
  width: 3.58cqw !important;
  height: 4.88cqw !important;
}
.hand-cards > * + * {
  margin-left: -2.46cqw !important;
}
.player-seat:not(.is-self) .hand-cards > * + * {
  margin-left: -2.04cqw !important;
}
.dealer-hand .hand-cards > * + * {
  margin-left: -2.44cqw !important;
}

/* leaderboard records start lower */
.panel-totalearnings,
.panel-blackjacks {
  padding-top: 2.15cqw !important;
}
.leaderboard-no-title {
  margin-top: .75cqh !important;
  height: calc(100% - 1.2cqh) !important;
}

/* turn choice buttons: restore per-button colors, dim when disabled */
.action-button {
  color: #f8e8bf !important;
}
.action-button::before {
  background: linear-gradient(180deg, rgba(var(--btn-rgb), .92), rgba(var(--btn-rgb-dark), .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,238,188,.12), inset 0 -7px 10px rgba(0,0,0,.34), 0 .2cqh .45cqh rgba(0,0,0,.32) !important;
}
.action-hit { --btn-rgb: 64,124,64; --btn-rgb-dark: 28,69,34; }
.action-stand { --btn-rgb: 139,94,36; --btn-rgb-dark: 76,46,17; }
.action-dd { --btn-rgb: 40,92,122; --btn-rgb-dark: 21,53,72; }
.action-split { --btn-rgb: 115,71,139; --btn-rgb-dark: 62,35,80; }
.action-button:disabled,
.action-button.is-locked {
  opacity: .58 !important;
  filter: saturate(.72) brightness(.72) !important;
}
.action-button:hover:not(:disabled):not(.is-locked) {
  filter: brightness(1.08) !important;
}

/* apply bet button without stretched image frame */
.apply-bet-button {
  border: 1px solid rgba(206,168,86,.6) !important;
  background: linear-gradient(180deg, rgba(122,82,31,.98), rgba(60,38,16,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,185,.18), inset 0 -8px 10px rgba(0,0,0,.28), 0 .2cqh .4cqh rgba(0,0,0,.28) !important;
  border-radius: .15cqw !important;
  color: #ffe8b1 !important;
}
.apply-bet-button::before,
.apply-bet-button::after {
  display: none !important;
}

/* ===== Round 10 requested fixes ===== */
/* make score badge use only the image, removing box behind it */
.hand-score,
.dealer-score-badge {
  background: url("./assets/slots.png") center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.hand-score::before,
.dealer-score-badge::before {
  display: none !important;
}

/* hover on player cards */
.player-seat {
  pointer-events: auto !important;
}
.seat-hands-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.player-seat .playing-card,
.player-seat .hidden-card {
  transition: scale .16s ease, filter .16s ease;
}
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  scale: 1.08;
  z-index: 20;
  filter: drop-shadow(0 .28cqw .25cqw rgba(0,0,0,.62)) brightness(1.03);
}
.seat-bet-display {
  margin-top: .5cqh;
  display: inline-flex;
  align-items: center;
  gap: .34cqw;
  color: #e5d0a1;
  font: .6cqw/1 Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.88);
}
.seat-bet-display img {
  width: .88cqw;
  min-width: 13px;
  height: .88cqw;
  min-height: 13px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.player-seat.is-self .seat-bet-display {
  font-size: .66cqw;
}

/* support panel */
.panel-support {
  --frame-image: url("./assets/bframe.png");
  position: absolute;
  right: 1cqw;
  bottom: 1.2cqh;
  z-index: 45;
  width: 16.1cqw;
  height: 16.8cqh;
  padding: .95cqw .9cqw .85cqw;
}
.support-art {
  position: absolute;
  inset: 1.25cqh .85cqw 2.8cqh .85cqw;
  width: calc(100% - 1.7cqw);
  height: calc(100% - 4.05cqh);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 1;
}
.support-actions {
  position: absolute;
  left: 1.35cqw;
  bottom: 1.15cqh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .42cqh;
  z-index: 3;
}
.support-button {
  min-width: 7.9cqw;
  padding: .58cqh .7cqw;
  border: 1px solid rgba(211,171,86,.64);
  background: linear-gradient(180deg, rgba(97,66,27,.96), rgba(46,29,12,.97));
  box-shadow: inset 0 1px 0 rgba(255,236,186,.16), inset 0 -7px 10px rgba(0,0,0,.28), 0 .18cqh .35cqh rgba(0,0,0,.28);
  color: #f6e2ad;
  font: .55cqw/1 Arial, sans-serif;
  letter-spacing: .02em;
  text-align: center;
  border-radius: .22cqw;
}
.support-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* keep action button colors visible even disabled */
.action-button.action-hit::before { background: linear-gradient(180deg, rgba(64,124,64,.92), rgba(28,69,34,.94)) !important; }
.action-button.action-stand::before { background: linear-gradient(180deg, rgba(139,94,36,.92), rgba(76,46,17,.94)) !important; }
.action-button.action-dd::before { background: linear-gradient(180deg, rgba(40,92,122,.92), rgba(21,53,72,.94)) !important; }
.action-button.action-split::before { background: linear-gradient(180deg, rgba(115,71,139,.92), rgba(62,35,80,.94)) !important; }
.action-button:disabled,
.action-button.is-locked {
  opacity: .82 !important;
  filter: saturate(.82) brightness(.72) !important;
}
.action-button:disabled::before,
.action-button.is-locked::before {
  opacity: .9 !important;
}

/* ===== Round 11 requested fixes ===== */
.panel-support {
  height: 28.2cqh !important;
  padding: 1.05cqw .95cqw .95cqw !important;
}
.support-art {
  inset: auto !important;
  top: 1.35cqh !important;
  left: 1.05cqw !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
}
.support-actions {
  left: 1.35cqw !important;
  bottom: 1.35cqh !important;
}

.hand-score,
.dealer-score-badge {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  justify-content: center !important;
  align-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.hand-score {
  padding-top: .03cqh !important;
}
.dealer-score-badge {
  padding-top: .03cqh !important;
}

.seat-bet-display {
  margin-top: .58cqh !important;
  gap: .42cqw !important;
  color: #efd48b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: .72cqw !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-shadow:
    0 1px 0 rgba(255,236,186,.28),
    0 1px 2px rgba(0,0,0,.92),
    0 2px 4px rgba(0,0,0,.55) !important;
}
.player-seat.is-self .seat-bet-display {
  font-size: .78cqw !important;
}
.seat-bet-display img {
  width: 1.05cqw !important;
  min-width: 16px !important;
  height: 1.05cqw !important;
  min-height: 16px !important;
}

/* ===== Round 12 requested fix ===== */
.panel-support {
  overflow: hidden !important;
}
.support-art {
  position: absolute !important;
  left: 50% !important;
  top: 1.2cqh !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 1.7cqw) !important;
  max-height: calc(100% - 6.2cqh) !important;
  object-fit: contain !important;
  object-position: top center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.support-actions {
  z-index: 3 !important;
}

/* ===== Round 13 requested fix ===== */
.support-art {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* ===== Round 14 support widget without panel ===== */
.support-widget {
  position: absolute;
  right: 1cqw;
  bottom: 1.2cqh;
  z-index: 45;
  width: 16.1cqw;
  height: 28.2cqh;
  overflow: hidden;
  background: transparent;
}
.support-widget .support-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}
.support-widget .support-actions {
  position: absolute;
  left: 1.15cqw;
  bottom: 1.05cqh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .42cqh;
  z-index: 3;
}
.support-widget .support-button {
  min-width: 7.9cqw;
  padding: .58cqh .7cqw;
  border: 1px solid rgba(211,171,86,.64);
  background: linear-gradient(180deg, rgba(97,66,27,.96), rgba(46,29,12,.97));
  box-shadow: inset 0 1px 0 rgba(255,236,186,.16), inset 0 -7px 10px rgba(0,0,0,.28), 0 .18cqh .35cqh rgba(0,0,0,.28);
  color: #f6e2ad;
  font: .55cqw/1 Arial, sans-serif;
  letter-spacing: .02em;
  text-align: center;
  border-radius: .22cqw;
}
.support-widget .support-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ===== Round 15 support image original size centered ===== */
.support-widget {
  overflow: visible !important;
}
.support-widget .support-art {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) !important;
}


/* ===== Round 16 support coins + button spacing ===== */
.support-widget {
  overflow: hidden !important;
}
.support-coins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.support-coin {
  position: absolute;
  top: -16%;
  width: 1.05cqw;
  min-width: 14px;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.32));
  animation-name: support-coin-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.coin-1 { left: 6%; animation-duration: 7.4s; animation-delay: 0s; }
.coin-2 { left: 14%; animation-duration: 8.2s; animation-delay: 1.1s; width: .95cqw; }
.coin-3 { left: 23%; animation-duration: 7.8s; animation-delay: 2.7s; width: 1.15cqw; }
.coin-4 { left: 31%; animation-duration: 8.8s; animation-delay: .7s; }
.coin-5 { left: 39%; animation-duration: 7.1s; animation-delay: 3.3s; width: .92cqw; }
.coin-6 { left: 48%; animation-duration: 8.5s; animation-delay: 1.9s; width: 1.18cqw; }
.coin-7 { left: 57%; animation-duration: 7.6s; animation-delay: 4.2s; }
.coin-8 { left: 65%; animation-duration: 8.1s; animation-delay: 2.2s; width: .9cqw; }
.coin-9 { left: 73%; animation-duration: 7.9s; animation-delay: 5.1s; width: 1.12cqw; }
.coin-10 { left: 80%; animation-duration: 8.7s; animation-delay: .3s; }
.coin-11 { left: 87%; animation-duration: 7.3s; animation-delay: 3.8s; width: .98cqw; }
.coin-12 { left: 93%; animation-duration: 8.4s; animation-delay: 1.4s; width: 1.08cqw; }

@keyframes support-coin-fall {
  0% { transform: translate3d(0, -18%, 0) rotate(0deg) scale(.88); opacity: 0; }
  10% { opacity: .85; }
  25% { transform: translate3d(8px, 24%, 0) rotate(70deg) scale(1); }
  50% { transform: translate3d(-6px, 54%, 0) rotate(170deg) scale(.96); opacity: .92; }
  75% { transform: translate3d(10px, 82%, 0) rotate(260deg) scale(1.04); opacity: .78; }
  92% { opacity: .2; }
  100% { transform: translate3d(-4px, 118%, 0) rotate(340deg) scale(.9); opacity: 0; }
}

.support-actions {
  bottom: calc(1.05cqh + 30px) !important;
  gap: .9cqh !important;
}
.support-button {
  position: relative;
  z-index: 4;
}

/* ===== Round 17 support image + falling coins correction ===== */
.support-widget {
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  overflow: visible !important;
}
.support-widget .support-art {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  object-position: center !important;
  transform: none !important;
}
.support-widget .support-coins {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.support-widget .support-coin {
  top: -14% !important;
  opacity: 0;
  will-change: top, transform, opacity;
  animation-name: support-coin-fall-v2 !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
}

@keyframes support-coin-fall-v2 {
  0% {
    top: -14%;
    opacity: 0;
    transform: translateX(0) rotate(0deg) scale(.88);
  }
  10% {
    opacity: .88;
  }
  30% {
    transform: translateX(9px) rotate(95deg) scale(1);
  }
  55% {
    opacity: .94;
    transform: translateX(-7px) rotate(190deg) scale(.96);
  }
  78% {
    opacity: .76;
    transform: translateX(10px) rotate(285deg) scale(1.04);
  }
  92% {
    opacity: .28;
  }
  100% {
    top: 108%;
    opacity: 0;
    transform: translateX(-5px) rotate(380deg) scale(.9);
  }
}

/* ===== Round 18 reliable support coin animation ===== */
.support-widget {
  overflow: visible !important;
}
.support-widget .support-art {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  transform: none !important;
  z-index: 1 !important;
}
.support-widget .support-coins {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.support-widget .support-coin {
  position: absolute !important;
  left: var(--coin-left) !important;
  top: -28px !important;
  width: var(--coin-size) !important;
  min-width: 0 !important;
  height: var(--coin-size) !important;
  opacity: 0;
  object-fit: contain !important;
  will-change: top, transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: support-coin-fall-v3 var(--coin-duration) linear var(--coin-delay) infinite both !important;
}
.support-widget .support-actions {
  z-index: 3 !important;
}

@keyframes support-coin-fall-v3 {
  0% {
    top: -28px;
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.86);
  }
  14% {
    opacity: .9;
  }
  34% {
    transform: translate3d(var(--coin-drift-a), 0, 0) rotate(calc(var(--coin-spin) * .32)) scale(1);
  }
  58% {
    opacity: .92;
    transform: translate3d(var(--coin-drift-b), 0, 0) rotate(calc(var(--coin-spin) * .58)) scale(.96);
  }
  78% {
    opacity: .8;
    transform: translate3d(var(--coin-drift-c), 0, 0) rotate(calc(var(--coin-spin) * .8)) scale(1.03);
  }
  92% {
    opacity: .26;
  }
  100% {
    top: calc(100% + 28px);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--coin-spin)) scale(.9);
  }
}


/* ===== Round 19 canvas coin animation (works with reduced motion) ===== */
.support-widget {
  overflow: visible !important;
}
.support-widget .support-coins-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}
.support-widget .support-actions {
  z-index: 3 !important;
}
@media (prefers-reduced-motion: reduce) {
  .support-widget .support-coins-canvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ===== Round 20 support widget layering and button frame2 ===== */
.support-widget .support-art {
  z-index: 1 !important;
}
.support-widget .support-coins-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.support-widget .support-coins-back {
  z-index: 0 !important;
}
.support-widget .support-coins-front {
  z-index: 2 !important;
}
.support-widget .support-actions {
  z-index: 3 !important;
  bottom: calc(1.05cqh + 60px) !important;
  gap: 1.18cqh !important;
}
.support-widget .support-button {
  position: relative !important;
  min-width: 7.55cqw !important;
  padding: .5cqh .5cqw !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f6e2ad !important;
  font: .53cqw/1 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  border-radius: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.support-widget .support-button::before,
.support-widget .support-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.support-widget .support-button::before {
  inset: .18cqh .16cqw .2cqh !important;
  background: linear-gradient(180deg, rgba(96,65,27,.88), rgba(44,28,12,.92)) !important;
  border-radius: .45cqw !important;
  box-shadow: inset 0 1px 0 rgba(255,236,186,.16), inset 0 -6px 9px rgba(0,0,0,.28), 0 .18cqh .35cqh rgba(0,0,0,.28) !important;
  z-index: -2;
}
.support-widget .support-button::after {
  background: url("./assets/frame2.png") center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 .1cqh .2cqh rgba(0,0,0,.25));
  z-index: -1;
}
.support-widget .support-button:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}


@keyframes access-character-float {
  0% { transform: translate3d(0, 0px, 0) rotate(0deg) scale(1); }
  18% { transform: translate3d(1px, -4px, 0) rotate(0.35deg) scale(1.003); }
  36% { transform: translate3d(3px, -10px, 0) rotate(0.9deg) scale(1.006); }
  52% { transform: translate3d(1px, -15px, 0) rotate(0.25deg) scale(1.008); }
  68% { transform: translate3d(-2px, -11px, 0) rotate(-0.55deg) scale(1.005); }
  84% { transform: translate3d(-1px, -5px, 0) rotate(-0.2deg) scale(1.002); }
  100% { transform: translate3d(0, 0px, 0) rotate(0deg) scale(1); }
}


/* ===== Round 32 topbar links, card hover and ambient glows ===== */
.access-character {
  right: -140px !important;
}

.player-seat .playing-card,
.player-seat .hidden-card {
  transition: translate .18s ease, scale .18s ease, filter .18s ease !important;
}
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  translate: 0 -5px !important;
  scale: 1.035 !important;
  z-index: auto !important;
  filter: drop-shadow(0 .26cqw .23cqw rgba(0,0,0,.58)) brightness(1.025) !important;
}

.topbar-links {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.topbar-links .topbar-dj-button {
  justify-self: auto !important;
  flex: 0 0 auto;
}
.topbar-carrd-button {
  width: 118px !important;
  min-width: 118px !important;
}
.topbar-carrd-button .topbar-dj-art {
  width: 118px !important;
  height: 43px !important;
  object-fit: fill !important;
}
.topbar-carrd-button .topbar-dj-label {
  font-size: 14px !important;
  letter-spacing: .04em !important;
  white-space: nowrap;
}
.account-avatar {
  display: none !important;
}
#account-role {
  display: none !important;
}
.account-user {
  min-width: auto !important;
  gap: 0 !important;
}
.account-user > div {
  display: flex;
  align-items: center;
}

.ambient-glow {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
}
.ambient-glow-blue {
  left: calc(19.1cqw - 115px);
  top: calc(82cqh - 45px);
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(71,145,232,.72) 0%, rgba(71,145,232,.3) 28%, rgba(71,145,232,.1) 48%, transparent 72%);
  filter: blur(9px);
  box-shadow: 0 0 34px rgba(71,145,232,.26), 0 0 68px rgba(71,145,232,.13);
}
.ambient-glow-gold {
  left: calc(17.5cqw - 35px);
  top: calc(8.4cqh - 20px);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(244,205,111,.68) 0%, rgba(214,164,67,.28) 30%, rgba(171,111,29,.09) 50%, transparent 72%);
  filter: blur(9px);
  box-shadow: 0 0 32px rgba(231,185,84,.24), 0 0 64px rgba(197,128,31,.12);
}


/* ===== Round 33 support overlay + glow position adjustments ===== */
.support-widget .support-art {
  will-change: transform;
}
.support-widget .support-art-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  object-position: center center !important;
  transform: none;
  z-index: 2 !important;
  pointer-events: none !important;
}
.support-widget .support-coins-back {
  z-index: 0 !important;
}
.support-widget .support-art:not(.support-art-overlay) {
  z-index: 1 !important;
}
.support-widget .support-coins-front {
  z-index: 3 !important;
}
.support-widget .support-actions {
  z-index: 4 !important;
}
.ambient-glow-blue {
  left: calc(19.1cqw - 165px) !important;
  top: calc(82cqh - 45px) !important;
  width: 136px !important;
  height: 136px !important;
  background: radial-gradient(circle, rgba(71,145,232,.84) 0%, rgba(71,145,232,.42) 30%, rgba(71,145,232,.16) 52%, transparent 74%) !important;
  filter: blur(11px) !important;
  box-shadow: 0 0 40px rgba(71,145,232,.34), 0 0 82px rgba(71,145,232,.18) !important;
}
.ambient-glow-gold {
  left: calc(17.5cqw + 5px) !important;
  top: calc(8.4cqh + 40px) !important;
  width: 126px !important;
  height: 126px !important;
  background: radial-gradient(circle, rgba(244,205,111,.80) 0%, rgba(214,164,67,.38) 32%, rgba(171,111,29,.14) 54%, transparent 74%) !important;
  filter: blur(11px) !important;
  box-shadow: 0 0 38px rgba(231,185,84,.32), 0 0 78px rgba(197,128,31,.18) !important;
}


/* ===== Round 35 support overlay visibility + glow flicker support ===== */
.support-widget .support-art-overlay {
  will-change: transform !important;
  opacity: 1 !important;
}
.ambient-glow {
  transition: opacity .12s linear;
  will-change: opacity, transform;
}


/* ===== Round 36 force support overlay motion and glow flicker visibility ===== */
.support-widget .support-art-overlay {
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ambient-glow-blue,
.ambient-glow-gold {
  opacity: 1;
  transition: opacity .055s linear !important;
  will-change: opacity !important;
}


/* ===== Round 37 sharper main background rendering ===== */
body {
  background: #080604 !important;
}
.game-shell {
  background: #080604 !important;
  isolation: isolate;
}
.game-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.game-stage {
  z-index: 1;
  background: transparent !important;
}


/* ===== Round 38 topbar shine, full-page embers, dealer finance view, action texture ===== */
.topbar-links .topbar-dj-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  transform-origin: center center !important;
  transition: transform .2s ease, filter .2s ease !important;
}
.topbar-links .topbar-dj-button:hover,
.topbar-links .topbar-dj-button:focus-visible {
  transform: scale(1.035) !important;
  filter: brightness(1.08) !important;
}
.topbar-button-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(
    108deg,
    transparent 21%,
    rgba(255,255,255,.04) 36%,
    rgba(255,248,211,.62) 48%,
    rgba(255,255,255,.08) 59%,
    transparent 74%
  ) !important;
  transform: translateX(-145%) skewX(-16deg) !important;
  -webkit-mask: url("./assets/button.png") center / 100% 100% no-repeat;
  mask: url("./assets/button.png") center / 100% 100% no-repeat;
}
.topbar-links .topbar-dj-button:hover .topbar-button-shine,
.topbar-links .topbar-dj-button:focus-visible .topbar-button-shine {
  animation: topbar-button-reflection .82s ease-out both !important;
}
@keyframes topbar-button-reflection {
  0% { opacity: 0; transform: translateX(-145%) skewX(-16deg); }
  16% { opacity: .82; }
  72% { opacity: .58; }
  100% { opacity: 0; transform: translateX(145%) skewX(-16deg); }
}

.page-embers-canvas {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: max(44px, 5.45cqh) !important;
  bottom: 0 !important;
  z-index: 150 !important;
  display: block !important;
  width: 100% !important;
  height: calc(100% - max(44px, 5.45cqh)) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: reduce) {
  .page-embers-canvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

.player-seat.is-dealer-overview .seat-plaque {
  min-width: 8.7cqw !important;
  max-width: 14.6cqw !important;
}
.player-seat.is-dealer-overview .seat-meta {
  display: flex !important;
  margin-top: .22cqh !important;
  font-size: .49cqw !important;
}
.player-seat.is-dealer-overview .seat-bet-display {
  display: inline-flex !important;
  margin-top: .42cqh !important;
  font-size: .61cqw !important;
}
.player-seat.is-dealer-overview .seat-bet-display img {
  width: .88cqw !important;
  height: .88cqw !important;
  min-width: 13px !important;
  min-height: 13px !important;
}

.action-button.action-hit::before {
  background:
    radial-gradient(ellipse at 18% 25%, rgba(255,255,255,.11) 0 4%, transparent 14%),
    radial-gradient(ellipse at 78% 72%, rgba(0,0,0,.13) 0 6%, transparent 18%),
    linear-gradient(116deg, transparent 0 39%, rgba(255,255,255,.045) 44%, transparent 53%),
    linear-gradient(180deg, rgba(64,124,64,.92), rgba(28,69,34,.94)) !important;
}
.action-button.action-stand::before {
  background:
    radial-gradient(ellipse at 21% 24%, rgba(255,244,202,.12) 0 4%, transparent 14%),
    radial-gradient(ellipse at 76% 75%, rgba(0,0,0,.14) 0 6%, transparent 18%),
    linear-gradient(116deg, transparent 0 39%, rgba(255,255,255,.045) 44%, transparent 53%),
    linear-gradient(180deg, rgba(139,94,36,.92), rgba(76,46,17,.94)) !important;
}
.action-button.action-dd::before {
  background:
    radial-gradient(ellipse at 19% 27%, rgba(223,245,255,.11) 0 4%, transparent 14%),
    radial-gradient(ellipse at 79% 70%, rgba(0,0,0,.14) 0 6%, transparent 18%),
    linear-gradient(116deg, transparent 0 39%, rgba(255,255,255,.045) 44%, transparent 53%),
    linear-gradient(180deg, rgba(40,92,122,.92), rgba(21,53,72,.94)) !important;
}
.action-button.action-split::before {
  background:
    radial-gradient(ellipse at 20% 24%, rgba(249,229,255,.11) 0 4%, transparent 14%),
    radial-gradient(ellipse at 77% 73%, rgba(0,0,0,.14) 0 6%, transparent 18%),
    linear-gradient(116deg, transparent 0 39%, rgba(255,255,255,.045) 44%, transparent 53%),
    linear-gradient(180deg, rgba(115,71,139,.92), rgba(62,35,80,.94)) !important;
}


/* ===== Round 42 requested visual and betting corrections ===== */
/* Real left-to-right reflection inside the top-bar buttons. */
.topbar-links .topbar-dj-button {
  overflow: visible !important;
  transform-origin: center center !important;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), filter .22s ease !important;
}
.topbar-links .topbar-dj-button:hover,
.topbar-links .topbar-dj-button:focus-visible {
  transform: scale(1.045) !important;
  filter: brightness(1.08) !important;
}
.topbar-button-shine {
  position: absolute !important;
  inset: 4px 5px !important;
  z-index: 6 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  background: transparent !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}
.topbar-button-shine::before {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -52%;
  width: 34%;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 28%, rgba(255,250,214,.92) 52%, rgba(255,255,255,.24) 75%, transparent);
  filter: blur(.5px);
  mix-blend-mode: screen;
}
.topbar-links .topbar-dj-button:hover .topbar-button-shine::before,
.topbar-links .topbar-dj-button:focus-visible .topbar-button-shine::before {
  animation: topbar-button-reflection-v2 .88s cubic-bezier(.2,.7,.24,1) both !important;
}
@keyframes topbar-button-reflection-v2 {
  0% { left: -52%; opacity: 0; }
  14% { opacity: .9; }
  72% { opacity: .72; }
  100% { left: 122%; opacity: 0; }
}

/* Decorative screw layer above the choices panel frame, below its controls. */
.panel-choices {
  isolation: isolate;
}
.panel-choices .choices-screw-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  pointer-events: none !important;
  filter: drop-shadow(0 .12cqh .18cqh rgba(0,0,0,.28));
}
.panel-choices .action-buttons,
.panel-choices .turn-message {
  position: relative !important;
  z-index: 4 !important;
}

/* Natural-size chains: top 7 px stay anchored while everything below sways. */
.chains-decoration {
  position: absolute;
  top: -4px;
  right: 1cqw;
  z-index: 220;
  display: inline-block;
  width: max-content;
  height: max-content;
  line-height: 0;
  pointer-events: none;
}
.chains-swing-image,
.chains-fixed-top img {
  display: block;
  width: 18px;
  height: auto;
  max-width: 18px;
  max-height: none;
}
.chains-swing-image {
  position: relative;
  clip-path: inset(7px 0 0 0);
  transform-origin: 50% 7px;
  animation: right-panels-chain-wind 7.2s ease-in-out infinite;
  will-change: transform;
}
.chains-fixed-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  overflow: hidden;
  z-index: 2;
}
.right-rail {
  transform-origin: 50% 0;
  animation: right-panels-chain-wind 7.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes right-panels-chain-wind {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  18% { transform: translate3d(-2px,0,0) rotate(-.34deg); }
  42% { transform: translate3d(2.6px,0,0) rotate(.45deg); }
  64% { transform: translate3d(-1.3px,0,0) rotate(-.22deg); }
  82% { transform: translate3d(1.5px,0,0) rotate(.25deg); }
}

/* Ember canvas always remains above the whole interface. */
.page-embers-canvas {
  z-index: 180 !important;
  mix-blend-mode: screen;
}

/* Four additive bet buttons with the dedicated frame image. */
.bet-presets {
  gap: .22cqw !important;
}
.preset-button {
  position: relative !important;
  isolation: isolate !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 2.55cqh !important;
  padding: 0 .08cqw !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ead59f !important;
  font: 700 .46cqw/1 Arial, sans-serif !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}
.preset-button::before,
.preset-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.preset-button::before {
  inset: .12cqh .08cqw !important;
  z-index: -2;
  border-radius: .3cqw;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.06), transparent 35%),
    linear-gradient(180deg, rgba(76,49,20,.94), rgba(33,20,9,.96));
  box-shadow: inset 0 1px 0 rgba(255,235,180,.12), inset 0 -5px 8px rgba(0,0,0,.3);
}
.preset-button::after {
  z-index: -1;
  background: url("./assets/betbutton.png") center / 100% 100% no-repeat;
  filter: saturate(.92) brightness(.88) drop-shadow(0 .08cqh .12cqh rgba(0,0,0,.32));
}
.preset-button > span {
  position: relative;
  z-index: 2;
}
.preset-button:hover:not(:disabled)::before {
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(98,64,26,.98), rgba(43,26,11,.98));
  box-shadow: inset 0 1px 0 rgba(255,240,193,.2), inset 0 -5px 8px rgba(0,0,0,.24), 0 0 .45cqw rgba(221,163,67,.15);
}
.preset-button:hover:not(:disabled)::after {
  filter: saturate(1.85) brightness(1.52) drop-shadow(0 0 .22cqw rgba(237,183,76,.55));
}
.preset-button:hover:not(:disabled) {
  color: #fff0bc !important;
  transform: translateY(-1px);
}
.preset-button:disabled {
  opacity: .38 !important;
}

/* Fill the complete +/- button area under their existing frame. */
.square-button.frame-action-button::before {
  inset: 0 !important;
  border-radius: .36cqw !important;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(180deg, rgba(61,40,19,.97), rgba(22,14,7,.98)) !important;
}
.square-button.frame-action-button::after {
  inset: 0 !important;
  background-size: 100% 100% !important;
}


/* ===== Round 43 requested tuning ===== */
/* Slightly slower top-bar reflection sweep. */
.topbar-links .topbar-dj-button:hover .topbar-button-shine::before,
.topbar-links .topbar-dj-button:focus-visible .topbar-button-shine::before {
  animation-duration: 1.14s !important;
}

/* Move right chains down and add mirrored left-side clone. */
.chains-decoration {
  top: 56px !important;
}
.chains-decoration-left {
  right: auto !important;
  left: 1cqw !important;
}
.chains-decoration-left .chains-swing-image,
.chains-decoration-left .chains-fixed-top img {
  transform: scaleX(-1);
  transform-origin: 50% 7px;
}
.chains-decoration-left .chains-swing-image {
  animation: left-chains-wind 7.2s ease-in-out infinite !important;
}
@keyframes left-chains-wind {
  0%, 100% { transform: scaleX(-1) translate3d(0,0,0) rotate(0deg); }
  18% { transform: scaleX(-1) translate3d(2px,0,0) rotate(.34deg); }
  42% { transform: scaleX(-1) translate3d(-2.6px,0,0) rotate(-.45deg); }
  64% { transform: scaleX(-1) translate3d(1.3px,0,0) rotate(.22deg); }
  82% { transform: scaleX(-1) translate3d(-1.5px,0,0) rotate(-.25deg); }
}

/* Self player cards gently levitate in normal (non-dealer) view. */
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > * {
  animation: self-card-levitate 4.9s ease-in-out infinite;
  will-change: transform;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > *:nth-child(2) { animation-delay: .38s; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > *:nth-child(3) { animation-delay: .76s; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > *:nth-child(4) { animation-delay: 1.14s; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > *:nth-child(5) { animation-delay: 1.52s; }
@keyframes self-card-levitate {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); }
  24% { transform: translate3d(.4px, -2.2px, 0) rotate(.22deg); }
  52% { transform: translate3d(-.3px, -4px, 0) rotate(-.16deg); }
  76% { transform: translate3d(.2px, -2.6px, 0) rotate(.1deg); }
}

/* Tone down preset hover border saturation a bit. */
.preset-button:hover:not(:disabled)::after {
  filter: saturate(1.45) brightness(1.34) drop-shadow(0 0 .18cqw rgba(237,183,76,.42)) !important;
}

/* Apply a similar but softer hover treatment to - / + and Apply Bet. */
.square-button.frame-action-button,
.apply-bet-button {
  transition: transform .16s ease, filter .16s ease, color .16s ease !important;
}
.square-button.frame-action-button:hover:not(:disabled),
.apply-bet-button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  color: #fff0bc !important;
}
.square-button.frame-action-button:hover:not(:disabled)::before {
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.1), transparent 36%),
    linear-gradient(180deg, rgba(82,53,24,.98), rgba(30,18,9,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,240,193,.14), inset 0 -6px 9px rgba(0,0,0,.26), 0 0 .28cqw rgba(221,163,67,.12) !important;
}
.square-button.frame-action-button:hover:not(:disabled)::after {
  filter: saturate(1.22) brightness(1.18) drop-shadow(0 0 .14cqw rgba(237,183,76,.32)) !important;
}
.apply-bet-button:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,185,.22), inset 0 -8px 10px rgba(0,0,0,.24), 0 0 .24cqw rgba(221,163,67,.12) !important;
}

/* Keep card hover subtle and local while levitating. */
.player-seat.is-self:not(.is-dealer-overview) .playing-card:hover,
.player-seat.is-self:not(.is-dealer-overview) .hidden-card:hover {
  translate: 0 -4px !important;
  scale: 1.02 !important;
}

/* ===== Round 44 chains / slot chips refinements ===== */
/* Slightly slower topbar shine sweep */
.topbar-links .topbar-dj-button:hover .topbar-button-shine::before,
.topbar-links .topbar-dj-button:focus-visible .topbar-button-shine::before {
  animation-duration: 1.28s !important;
}

/* Chains lower and swing only below 30px from top */
.chains-decoration {
  top: 66px !important;
}
.chains-swing-image {
  clip-path: inset(30px 0 0 0) !important;
  transform-origin: 50% 30px !important;
}
.chains-fixed-top {
  height: 30px !important;
}
.chains-decoration-left .chains-swing-image,
.chains-decoration-left .chains-fixed-top img {
  transform-origin: 50% 30px !important;
}

/* Player slots: circle background behind everything and content slightly higher */
.player-seat {
  overflow: visible !important;
}
.player-seat > *:not(.seat-circle-backdrop) {
  position: relative;
  z-index: 2;
}
.seat-circle-backdrop {
  position: absolute;
  left: 50%;
  top: calc(50% + 20px);
  transform: translateX(-50%);
  width: max-content;
  height: max-content;
  z-index: 0;
  pointer-events: none;
}
.seat-circle-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 18px;
  height: auto;
  max-width: 18px;
  max-height: none;
}
.player-seat .seat-plaque,
.player-seat .seat-hands-wrap,
.player-seat .hand-score {
  transform: translateY(-35px) !important;
}

/* Chips inside the circle slot */
.seat-chip-zone {
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 96px;
  height: 56px;
  transform: translateX(-50%);
  pointer-events: none;
}
.seat-chip-zone.is-empty {
  width: 0;
  height: 0;
}
.seat-chip {
  position: absolute;
  left: 50%;
  bottom: var(--chip-y, 0px);
  width: 18px;
  height: auto;
  max-width: 18px;
  max-height: none;
  transform: translateX(calc(-50% + var(--chip-x, 0px))) rotate(var(--chip-rot, 0deg));
  transform-origin: center center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.34));
  pointer-events: none;
}
.seat-chip.is-dealing {
  animation: seat-chip-deal-in .8s cubic-bezier(.18,.82,.23,1) both;
  animation-delay: var(--chip-delay, 0ms);
}
@keyframes seat-chip-deal-in {
  0% {
    transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(-220px) scale(.72) rotate(calc(var(--chip-rot, 0deg) - 18deg));
    opacity: 0;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)) blur(.2px);
  }
  38% { opacity: 1; }
  72% {
    transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(8px) scale(1.02) rotate(calc(var(--chip-rot, 0deg) + 4deg));
    opacity: 1;
  }
  100% {
    transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(0) scale(1) rotate(var(--chip-rot, 0deg));
    opacity: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.34));
  }
}

/* Bet value and gil icon just below the chips */
.player-seat > .seat-bet-display {
  position: absolute !important;
  left: 50%;
  top: calc(50% + 110px);
  bottom: auto;
  transform: translateX(-50%);
  margin-top: 0 !important;
  gap: .22cqw !important;
  white-space: nowrap;
  z-index: 6;
}
.player-seat > .seat-bet-display img {
  width: 1cqw !important;
  min-width: 15px !important;
  height: 1cqw !important;
  min-height: 15px !important;
}
.player-seat.is-self > .seat-bet-display {
  font-size: .7cqw !important;
}
.player-seat.is-dealer-overview > .seat-bet-display {
  font-size: .56cqw !important;
}

/* Keep hover boost subtler over levitating cards. */
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  translate: 0 -4px !important;
  scale: 1.018 !important;
}

/* Tone hover saturation slightly lower on bet preset borders. */
.preset-button:hover:not(:disabled)::after {
  filter: saturate(1.28) brightness(1.28) drop-shadow(0 0 .16cqw rgba(237,183,76,.35)) !important;
}
.square-button.frame-action-button:hover:not(:disabled)::after {
  filter: saturate(1.12) brightness(1.12) drop-shadow(0 0 .1cqw rgba(237,183,76,.22)) !important;
}
.apply-bet-button:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.03) !important;
}

.player-seat > .seat-chip-zone { position:absolute; left:50%; top:calc(50% + 52px); transform:translateX(-50%); }
.player-seat > .seat-chip-zone .seat-chip { z-index: 6; }


/* ===== Round 46 restore chains / circleslot visibility and larger chip stacks ===== */
.chains-decoration,
.chains-decoration-left {
  position: absolute !important;
  top: 61px !important;
  z-index: 78 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.chains-decoration { right: 1cqw !important; left: auto !important; }
.chains-decoration-left { left: 1cqw !important; right: auto !important; }
.chains-decoration img,
.chains-decoration-left img {
  display: block !important;
  visibility: visible !important;
}
.chains-fixed-top {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 30px !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
.chains-fixed-top img {
  display: block !important;
  width: auto !important;
  height: auto !important;
}
.chains-swing-image {
  position: relative !important;
  display: block !important;
  clip-path: inset(30px 0 0 0) !important;
  transform-origin: 50% 30px !important;
  z-index: 1 !important;
}

.player-seat {
  overflow: visible !important;
}
.player-seat .seat-circle-backdrop {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 20px) !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.player-seat .seat-circle-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.player-seat > .seat-plaque,
.player-seat > .seat-hands-wrap,
.player-seat .hand-score {
  transform: translateY(-35px) !important;
}
.player-seat > .seat-chip-zone {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 34px) !important;
  width: 112px !important;
  height: 72px !important;
  transform: translateX(-50%) !important;
  z-index: 7 !important;
  pointer-events: none !important;
}
.player-seat > .seat-chip-zone.is-empty {
  width: 0 !important;
  height: 0 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 26px !important;
  max-width: 26px !important;
  height: auto !important;
  z-index: 7 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.32)) !important;
}
.player-seat > .seat-bet-display {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 108px) !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
}
.player-seat.is-self > .seat-bet-display {
  font-size: .7cqw !important;
}
.player-seat.is-dealer-overview > .seat-bet-display {
  font-size: .56cqw !important;
}


/* ===== Round 47 restore full-size chains and larger chips ===== */
.chains-decoration,
.chains-decoration-left {
  top: 61px !important;
  z-index: 220 !important;
  width: max-content !important;
  height: max-content !important;
}
.chains-swing-image,
.chains-fixed-top img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
.chains-fixed-top {
  width: auto !important;
}

.player-seat > .seat-chip-zone {
  width: 138px !important;
  height: 94px !important;
  top: calc(50% + 24px) !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 38px !important;
  max-width: 38px !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 120px) !important;
}


/* ===== Round 48 positioning refinements ===== */
.chains-decoration,
.chains-decoration-left {
  top: 63px !important;
}

/* Make Table Details sway in sync with the hanging chains and right panels. */
.panel-tabledetails {
  transform-origin: 50% 0 !important;
  animation: right-panels-chain-wind 7.2s ease-in-out infinite !important;
  will-change: transform;
}

/* Larger chip stacks, slightly higher. */
.player-seat > .seat-chip-zone {
  width: 148px !important;
  height: 104px !important;
  top: calc(50% + 14px) !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 44px !important;
  max-width: 44px !important;
}

/* Move bet text + gil slightly higher. */
.player-seat > .seat-bet-display {
  top: calc(50% + 115px) !important;
}


/* ===== Round 49 chains and chip stack tuning ===== */
.chains-decoration,
.chains-decoration-left {
  top: 65px !important;
}
.chains-swing-image {
  clip-path: inset(35px 0 0 0) !important;
  transform-origin: 50% 35px !important;
}
.chains-fixed-top {
  height: 35px !important;
}
.chains-decoration-left {
  clip-path: inset(0 0 50% 0) !important;
}
.chains-decoration-left .chains-swing-image,
.chains-decoration-left .chains-fixed-top img {
  transform-origin: 50% 35px !important;
}

.player-seat > .seat-chip-zone {
  width: 168px !important;
  height: 114px !important;
  top: calc(50% + 4px) !important;
  z-index: 9 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 52px !important;
  max-width: 52px !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 110px) !important;
  z-index: 10 !important;
}


/* ===== Round 50 final tuning ===== */
.player-seat .seat-circle-image {
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}
.player-seat > .seat-chip-zone {
  top: calc(50% - 16px) !important;
}
.chains-swing-image {
  clip-path: inset(38px 0 0 0) !important;
  transform-origin: 50% 38px !important;
  animation-duration: 7.6s !important;
}
.chains-decoration-left .chains-swing-image,
.chains-decoration-left .chains-fixed-top img,
.chains-decoration .chains-swing-image,
.chains-decoration .chains-fixed-top img {
  transform-origin: 50% 38px !important;
}
@keyframes right-chains-wind {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  22% { transform: translate3d(1.2px,0,0) rotate(.18deg); }
  48% { transform: translate3d(-1.5px,0,0) rotate(-.24deg); }
  72% { transform: translate3d(.8px,0,0) rotate(.14deg); }
  88% { transform: translate3d(-.7px,0,0) rotate(-.12deg); }
}
@keyframes left-chains-wind {
  0%, 100% { transform: scaleX(-1) translate3d(0,0,0) rotate(0deg); }
  22% { transform: scaleX(-1) translate3d(1.2px,0,0) rotate(.18deg); }
  48% { transform: scaleX(-1) translate3d(-1.5px,0,0) rotate(-.24deg); }
  72% { transform: scaleX(-1) translate3d(.8px,0,0) rotate(.14deg); }
  88% { transform: scaleX(-1) translate3d(-.7px,0,0) rotate(-.12deg); }
}

/* ===== Round 51 precise chains, slot positioning and dealer-to-seat chip flight ===== */
/* Animate only the lower portion of the chains, with a very small sway. */
.chains-swing-image {
  clip-path: inset(42px 0 0 0) !important;
  transform-origin: 50% 42px !important;
}
.chains-fixed-top {
  height: 42px !important;
}
.chains-decoration:not(.chains-decoration-left) .chains-swing-image {
  animation: chains-soft-right 8.4s ease-in-out infinite !important;
}
.chains-decoration-left .chains-swing-image {
  animation: chains-soft-left 8.4s ease-in-out infinite !important;
}
.chains-decoration-left .chains-swing-image,
.chains-decoration-left .chains-fixed-top img,
.chains-decoration .chains-swing-image,
.chains-decoration .chains-fixed-top img {
  transform-origin: 50% 42px !important;
}
@keyframes chains-soft-right {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  22% { transform: translate3d(.45px,0,0) rotate(.08deg); }
  48% { transform: translate3d(-.7px,0,0) rotate(-.11deg); }
  72% { transform: translate3d(.38px,0,0) rotate(.07deg); }
  88% { transform: translate3d(-.3px,0,0) rotate(-.05deg); }
}
@keyframes chains-soft-left {
  0%, 100% { transform: scaleX(-1) translate3d(0,0,0) rotate(0deg); }
  22% { transform: scaleX(-1) translate3d(.45px,0,0) rotate(.08deg); }
  48% { transform: scaleX(-1) translate3d(-.7px,0,0) rotate(-.11deg); }
  72% { transform: scaleX(-1) translate3d(.38px,0,0) rotate(.07deg); }
  88% { transform: scaleX(-1) translate3d(-.3px,0,0) rotate(-.05deg); }
}

/* Slightly larger circle slot. */
.player-seat .seat-circle-image {
  transform: scale(1.15) !important;
  transform-origin: center center !important;
}

/* Force the chips visibly upward instead of relying on inherited positioning. */
.player-seat > .seat-chip-zone {
  top: calc(50% - 36px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 174px !important;
  height: 122px !important;
  z-index: 9 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 54px !important;
  max-width: 54px !important;
  opacity: 1;
  animation: none !important;
}

/* Place the bet label higher and independently from the circle background. */
.player-seat > .seat-bet-display {
  top: calc(50% + 95px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* Global chip-flight layer stays behind the dealer cards during travel. */
.chip-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  overflow: visible;
}
.chip-flight-chip {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  will-change: transform, opacity, filter;
}


/* ===== Round 56 clean slot restoration + requested round/balance effects ===== */
/* background2 sits over background.png but below the complete interface */
.game-background-overlay {
  z-index: 0 !important;
  opacity: .76;
  filter: brightness(1.12);
  pointer-events: none !important;
  will-change: opacity;
}
.game-shell.is-dealer-turn-active .game-background-overlay {
  animation: dealer-background-overlay-pulse 3.4s ease-in-out infinite;
}
@keyframes dealer-background-overlay-pulse {
  0%, 100% { opacity: .72; }
  50% { opacity: .94; }
}
.game-stage {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* Panels keep the same synchronized wind motion, with less horizontal travel. */
@keyframes right-panels-chain-wind {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  18% { transform: translate3d(-.75px,0,0) rotate(-.16deg); }
  42% { transform: translate3d(1.15px,0,0) rotate(.2deg); }
  64% { transform: translate3d(-.55px,0,0) rotate(-.1deg); }
  82% { transform: translate3d(.7px,0,0) rotate(.12deg); }
}

/* Restore the last stable slot geometry. Do not paint-contain or resize the slot itself. */
.table-seats,
.player-seat,
.player-seat > .seat-plaque,
.player-seat > .seat-hands-wrap,
.player-seat .seat-hands,
.player-seat .hand,
.player-seat .hand-cards,
.player-seat > .seat-circle-backdrop,
.player-seat > .seat-chip-zone {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
}

.player-seat,
.player-seat.is-self {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.player-seat > .seat-plaque {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: translateY(-35px) !important;
  min-height: 0 !important;
  z-index: 14 !important;
}
.player-seat > .seat-hands-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-35px) !important;
  z-index: 12 !important;
}
.player-seat .seat-hands {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
.player-seat .hand,
.player-seat .hand-cards {
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Keep the hand-value badge attached to the right side of the cards. */
.player-seat .hand-score,
.player-seat.is-self .hand-score,
.player-seat .hand.is-active .hand-score {
  position: absolute !important;
  left: auto !important;
  right: -.82cqw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 24 !important;
}
.player-seat:not(.is-self) .hand-score {
  right: -.72cqw !important;
}

/* Circle returns directly behind the cards/chips rather than below the HUD. */
.player-seat > .seat-circle-backdrop {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 20px) !important;
  width: max-content !important;
  height: max-content !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.player-seat .seat-circle-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(1.15) !important;
  transform-origin: center center !important;
}

/* Balance chips: four pixels lower than the last stable position and with wider columns. */
.player-seat > .seat-chip-zone {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% - 32px) !important;
  bottom: auto !important;
  width: 196px !important;
  height: 126px !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
.player-seat > .seat-chip-zone.is-empty {
  width: 0 !important;
  height: 0 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 54px !important;
  max-width: 54px !important;
  height: auto !important;
  z-index: 20 !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) !important;
  will-change: transform, opacity;
}

/* Bet text/gil: seven pixels lower than the previous stable placement. */
.player-seat > .seat-bet-display {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + 102px) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 22 !important;
  white-space: nowrap !important;
}

/* Only brightness changes during the player's turn; geometry never changes. */
.player-seat.is-current .seat-circle-image {
  transform: scale(1.15) !important;
  animation: active-circle-slot-brightness 3.2s ease-in-out infinite !important;
}
@keyframes active-circle-slot-brightness {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(96,170,255,.06)); }
  50% { filter: brightness(1.17) drop-shadow(0 0 15px rgba(96,170,255,.24)); }
}

/* Dedicated animation layers may be contained; normal slots must not be. */
.table-pot-layer,
.chip-flight-layer {
  contain: layout style !important;
}
.table-pot-layer {
  position: absolute;
  inset: 0;
  z-index: 155;
  overflow: hidden;
  pointer-events: none;
}
.table-pot-layer .pot-chip {
  position: absolute;
  display: block;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.chip-flight-layer {
  z-index: 154 !important;
}

/* ===== Round 57 focused fixes ===== */
.player-seat > .seat-plaque {
  z-index: 12 !important;
}
.player-seat > .seat-hands-wrap,
.player-seat .seat-hands,
.player-seat .hand,
.player-seat .hand-cards,
.player-seat .playing-card,
.player-seat .hidden-card {
  position: relative;
  z-index: 18 !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 107px) !important;
  z-index: 24 !important;
}
.player-seat.is-current .seat-circle-image {
  animation: active-circle-slot-brightness-strong 2.8s ease-in-out infinite !important;
}
@keyframes active-circle-slot-brightness-strong {
  0%, 100% { filter: brightness(1.02) saturate(1.02) drop-shadow(0 0 8px rgba(96,170,255,.18)); }
  50% { filter: brightness(1.42) saturate(1.12) drop-shadow(0 0 24px rgba(96,170,255,.52)); }
}
.player-seat .hand,
.dealer-hand .hand {
  position: relative !important;
}
.player-seat .hand-score,
.player-seat.is-self .hand-score,
.player-seat .hand.is-active .hand-score {
  right: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#dealer-score,
.dealer-score,
.dealer-zone .hand-score {
  z-index: 40 !important;
}
.game-background-overlay {
  opacity: .84 !important;
  filter: brightness(1.18) saturate(1.04) !important;
}
.game-shell.is-dealer-turn-active .game-background-overlay {
  animation: dealer-background-overlay-pulse-strong 2.8s ease-in-out infinite !important;
}
@keyframes dealer-background-overlay-pulse-strong {
  0%, 100% { opacity: .78; filter: brightness(1.12) saturate(1.02); }
  50% { opacity: .98; filter: brightness(1.38) saturate(1.12); }
}
.playing-card.is-new,
.hidden-card.is-new {
  animation-name: deal-card-compat !important;
}
@keyframes deal-card-compat {
  0% {
    opacity: 0;
    transform: translate3d(var(--deal-x, 0px), var(--deal-y, -18cqh), 0) rotate(var(--deal-rotate, -12deg)) scale(.28);
  }
  62% { opacity: 1; }
  84% {
    transform: translate3d(0, 0, 0) rotate(2deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.chip-flight-chip {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity, filter;
  z-index: 154;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}

/* ===== Round 61 requested gameplay/UI refinements ===== */
/* Chips shifted right, with enough width for separated back/front rows. */
.player-seat > .seat-chip-zone {
  width: 310px !important;
  height: 142px !important;
  transform: translateX(calc(-50% + 10px)) !important;
  overflow: visible !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 52px !important;
  max-width: 52px !important;
  will-change: transform, opacity;
}

/* Bet label sits lower without moving the circle or cards. */
.player-seat > .seat-bet-display {
  top: calc(50% + 115px) !important;
}

/* Cards must render over the player name panel. */
.player-seat > .seat-plaque {
  z-index: 12 !important;
}
.player-seat > .seat-hands-wrap,
.player-seat .seat-hands,
.player-seat .hand,
.player-seat .hand-cards,
.player-seat .playing-card,
.player-seat .hidden-card {
  z-index: 20 !important;
}

/* Stronger circleslot pulse on the active player. */
.player-seat.is-current .seat-circle-image {
  animation: active-circle-slot-brightness-round61 2.7s ease-in-out infinite !important;
}
@keyframes active-circle-slot-brightness-round61 {
  0%, 100% {
    filter: brightness(1.04) saturate(1.04) drop-shadow(0 0 8px rgba(95,173,255,.20));
  }
  50% {
    filter: brightness(1.55) saturate(1.18) drop-shadow(0 0 29px rgba(95,173,255,.62));
  }
}

/* background2 is always above background.png and clearly pulses during dealer turn. */
.game-background:not(.game-background-overlay) {
  z-index: 0 !important;
}
.game-background-overlay {
  z-index: 1 !important;
  opacity: .62 !important;
  filter: brightness(1.16) saturate(1.05) !important;
  mix-blend-mode: screen;
}
.game-shell.is-dealer-turn-active .game-background-overlay,
.game-stage.is-dealer-turn-active ~ .game-background-overlay {
  animation: dealer-background2-pulse-round61 2.65s ease-in-out infinite !important;
}
@keyframes dealer-background2-pulse-round61 {
  0%, 100% {
    opacity: .68;
    filter: brightness(1.18) saturate(1.06);
  }
  50% {
    opacity: 1;
    filter: brightness(1.82) saturate(1.24);
  }
}
.game-stage {
  z-index: 2 !important;
}

/* Stable value badges on both dealer and player hands. */
.player-seat .hand,
.dealer-hand .hand {
  position: relative !important;
}
.player-seat .hand-score,
.player-seat.is-self .hand-score,
.player-seat .hand.is-active .hand-score {
  left: auto !important;
  right: -14px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
}
#dealer-score {
  z-index: 45 !important;
  transition: none !important;
}

/* Deal animation wins over the idle levitation animation. */
.player-seat.is-self:not(.is-dealer-overview) .playing-card.is-new,
.player-seat.is-self:not(.is-dealer-overview) .hidden-card.is-new,
.playing-card.is-new,
.hidden-card.is-new {
  animation: deal-card-round61 .72s cubic-bezier(.12,.72,.25,1) var(--deal-delay, 0ms) both !important;
  animation-play-state: paused !important;
}
.player-seat.is-self:not(.is-dealer-overview) .playing-card.is-new.is-dealing,
.player-seat.is-self:not(.is-dealer-overview) .hidden-card.is-new.is-dealing,
.playing-card.is-new.is-dealing,
.hidden-card.is-new.is-dealing {
  animation-play-state: running !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > *:not(.is-new):not(.is-dealing) {
  animation-name: self-card-levitate !important;
}
@keyframes deal-card-round61 {
  0% {
    opacity: 0;
    transform: translate3d(var(--deal-x, 0px), var(--deal-y, -18cqh), 0) rotate(var(--deal-rotate, -12deg)) scale(.28);
  }
  62% { opacity: 1; }
  84% { transform: translate3d(0,0,0) rotate(2deg) scale(1.04); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* Pause and Auto-Stand controls fit inside the existing choices panel. */
.panel-choices {
  position: relative !important;
}
.panel-choices .action-buttons {
  position: relative !important;
  z-index: 5 !important;
}
.action-utility-controls {
  position: absolute;
  left: 50%;
  bottom: 2.7cqh;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28cqw;
  transform: translateX(-50%);
  white-space: nowrap;
}
.utility-action-button,
.auto-stand-value {
  height: 2.15cqh;
  min-height: 20px;
  border: 1px solid rgba(193,145,66,.58);
  background: linear-gradient(180deg, rgba(62,41,19,.97), rgba(24,15,8,.98));
  color: #dcc795;
  box-shadow: inset 0 1px rgba(255,235,183,.10), inset 0 -4px 7px rgba(0,0,0,.32);
  font: 700 .43cqw/1 Arial, sans-serif;
  letter-spacing: .035em;
}
.utility-action-button {
  min-width: 4.4cqw;
  padding: 0 .42cqw;
}
.auto-stand-toggle {
  min-width: 7.2cqw;
}
.auto-stand-value {
  width: 2.15cqw;
  padding: 0 .18cqw;
  text-align: center;
  outline: none;
}
.utility-action-button:hover:not(:disabled) {
  filter: brightness(1.12) saturate(1.08);
}
.utility-action-button.is-enabled {
  color: #c8f4b1;
  border-color: rgba(119,190,91,.72);
  box-shadow: inset 0 1px rgba(228,255,205,.12), 0 0 .28cqw rgba(104,180,78,.18);
}
.utility-action-button:disabled,
.auto-stand-value:disabled {
  opacity: .42;
  cursor: default;
}
.panel-choices .turn-message {
  position: absolute !important;
  left: .7cqw;
  right: .7cqw;
  bottom: .42cqh;
  margin: 0 !important;
  z-index: 6 !important;
}

/* Animation layers only; keep normal card/slot layout out of containment. */
.table-pot-layer,
.chip-flight-layer {
  contain: layout style !important;
}
.player-seat > .seat-chip-zone {
  width: 370px !important;
}
.panel-totalearnings .leaderboard-value {
  font-size: .43cqw !important;
  letter-spacing: -.015em;
}
/* Static chip stacks use one composite shadow instead of one GPU layer per chip. */
.player-seat > .seat-chip-zone {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.24));
}
.player-seat > .seat-chip-zone .seat-chip {
  filter: none !important;
  will-change: auto !important;
}
/* Hand totals stay hidden while their newest card is travelling from the shoe. */
.player-seat .hand:has(.is-new) .hand-score,
#dealer-zone:has(.is-new) #dealer-score {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ===== Round 62 targeted fixes ===== */
.table-live-banner {
  background: rgba(0, 0, 0, 0.34) !important;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.center-turn-overlay {
  position: absolute;
  left: 50%;
  top: 33.4cqh;
  transform: translateX(-50%);
  z-index: 44;
  pointer-events: none;
  opacity: 0;
  color: #f7e9b1;
  font: 800 1.2cqw/1 Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,223,133,.45), 0 0 20px rgba(255,213,94,.26), 0 2px 3px rgba(0,0,0,.55);
  transition: opacity .24s ease;
}
.center-turn-overlay.is-visible {
  opacity: 1;
  animation: center-turn-glow 1.75s ease-in-out infinite;
}
@keyframes center-turn-glow {
  0%,100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  50% { transform: translateX(-50%) scale(1.03); filter: brightness(1.16); }
}
.seat-turn { display: none !important; }

/* Move utility controls to the top-center of the panel and group auto-stand */
.action-utility-controls {
  top: .52cqh !important;
  bottom: auto !important;
  z-index: 8 !important;
  gap: .38cqw !important;
}
.auto-stand-shell {
  display: inline-flex;
  align-items: center;
  height: 2.15cqh;
  border: 1px solid rgba(193,145,66,.58);
  background: linear-gradient(180deg, rgba(62,41,19,.97), rgba(24,15,8,.98));
  box-shadow: inset 0 1px rgba(255,235,183,.10), inset 0 -4px 7px rgba(0,0,0,.32);
  overflow: hidden;
}
.auto-stand-shell .auto-stand-value,
.auto-stand-shell .auto-stand-toggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
}
.auto-stand-shell .auto-stand-value {
  width: 2.2cqw !important;
  min-width: 32px;
  border-right: 1px solid rgba(193,145,66,.42) !important;
}
.auto-stand-shell .auto-stand-toggle {
  min-width: 7.4cqw !important;
  padding-inline: .5cqw !important;
}
.panel-choices .turn-message {
  bottom: .52cqh !important;
}

/* Chips stay inside the circle, in front of cards, with more spacing and slightly to the right */
.player-seat .seat-circle-image {
  transform: scale(1.16) !important;
}
.player-seat.is-current .seat-circle-image {
  animation: active-circle-slot-round62 2.6s ease-in-out infinite !important;
}
@keyframes active-circle-slot-round62 {
  0%,100% { filter: brightness(1.04) saturate(1.02) drop-shadow(0 0 8px rgba(97,172,255,.18)) drop-shadow(0 0 10px rgba(97,172,255,.06)); }
  50% { filter: brightness(1.34) saturate(1.1) drop-shadow(0 0 16px rgba(97,172,255,.34)) drop-shadow(0 0 28px rgba(97,172,255,.18)); }
}
.player-seat > .seat-chip-zone {
  width: 250px !important;
  height: 112px !important;
  left: calc(50% + 14px) !important;
  top: calc(50% + 22px) !important;
  transform: translateX(-50%) !important;
  z-index: 28 !important;
  overflow: hidden !important;
  filter: none !important;
}
.player-seat > .seat-chip-zone.is-empty {
  overflow: visible !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 40px !important;
  max-width: 40px !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(calc(var(--chip-y, 0px) * -1)) rotate(var(--chip-rot, 0deg)) !important;
  z-index: calc(30 + var(--chip-order, 0)) !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.26)) !important;
}
.player-seat > .seat-hands-wrap,
.player-seat .seat-hands,
.player-seat .hand,
.player-seat .hand-cards,
.player-seat .playing-card,
.player-seat .hidden-card {
  z-index: 18 !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 116px) !important;
  z-index: 29 !important;
}
.player-seat > .seat-bet-display img {
  width: 18px !important;
}

/* Make earnings values larger without moving rows */
.panel-totalearnings .leaderboard-value {
  font-size: .5cqw !important;
  line-height: 1 !important;
}

/* Stronger dealer-turn glow for background2 overlay */
.game-background-overlay {
  opacity: .76 !important;
  filter: brightness(1.16) saturate(1.06) !important;
  mix-blend-mode: screen !important;
}
.game-shell.is-dealer-turn-active .game-background-overlay,
.game-stage.is-dealer-turn-active ~ .game-background-overlay {
  animation: dealer-background2-pulse-round62 2.15s ease-in-out infinite !important;
}
@keyframes dealer-background2-pulse-round62 {
  0%,100% {
    opacity: .72;
    filter: brightness(1.12) saturate(1.02) drop-shadow(0 0 8px rgba(255,222,123,.10));
  }
  50% {
    opacity: 1;
    filter: brightness(1.82) saturate(1.16) drop-shadow(0 0 24px rgba(255,226,136,.24));
  }
}

/* dealer/player total badges stay aligned */
.player-seat .hand-score,
.player-seat.is-self .hand-score,
.player-seat .hand.is-active .hand-score {
  right: -16px !important;
  top: 52% !important;
  transform: translateY(-50%) !important;
  z-index: 31 !important;
}
#dealer-score,
.dealer-score-badge {
  z-index: 45 !important;
}

/* Flying card clones for deal animation */
.flying-card-clone {
  will-change: transform, opacity;
}

/* ===== Round 63 targeted fixes ===== */
/* keep waiting/status text readable */
.table-live-banner {
  background: rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: blur(1.6px);
}

/* Your Turn centered overlay: lower, larger, with fade */
.center-turn-overlay {
  top: calc(33.4cqh + 20px) !important;
  font-size: 1.38cqw !important;
  transition: opacity .32s ease, filter .32s ease !important;
}
.center-turn-overlay.is-visible {
  animation: center-turn-glow-round63 1.75s ease-in-out infinite;
}
@keyframes center-turn-glow-round63 {
  0%,100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  50% { transform: translateX(-50%) scale(1.04); filter: brightness(1.18); }
}

/* background2: visibly pulse/glow during dealer activity and rainbow on dealer blackjack */
.game-background-overlay {
  opacity: .84 !important;
  filter: brightness(1.18) saturate(1.08) !important;
  mix-blend-mode: screen !important;
  transform: translateZ(0);
}
.game-shell.is-dealer-turn-active .game-background-overlay,
.game-stage.is-dealer-turn-active ~ .game-background-overlay {
  animation: dealer-background2-pulse-round63 1.9s ease-in-out infinite !important;
}
@keyframes dealer-background2-pulse-round63 {
  0%,100% {
    opacity: .82;
    filter: brightness(1.14) saturate(1.06) drop-shadow(0 0 8px rgba(255,225,135,.12));
  }
  50% {
    opacity: 1;
    filter: brightness(2.15) saturate(1.28) drop-shadow(0 0 24px rgba(255,225,135,.34));
  }
}
.game-shell.is-dealer-blackjack .game-background-overlay {
  animation: dealer-blackjack-rgb-round63 1.8s linear infinite !important;
}
@keyframes dealer-blackjack-rgb-round63 {
  0% { opacity: 1; filter: brightness(2.1) saturate(1.45) hue-rotate(0deg) drop-shadow(0 0 24px rgba(255,80,80,.32)); }
  33% { opacity: 1; filter: brightness(2.15) saturate(1.5) hue-rotate(120deg) drop-shadow(0 0 24px rgba(80,255,120,.32)); }
  66% { opacity: 1; filter: brightness(2.15) saturate(1.5) hue-rotate(240deg) drop-shadow(0 0 24px rgba(90,140,255,.32)); }
  100% { opacity: 1; filter: brightness(2.1) saturate(1.45) hue-rotate(360deg) drop-shadow(0 0 24px rgba(255,80,80,.32)); }
}

/* dealt cards should only be visible via flying clone until arrival */
.playing-card.is-new,
.hidden-card.is-new {
  opacity: 0 !important;
}
.flying-card-clone {
  will-change: transform, opacity;
}

/* stable hover: move up only, no z-index fighting */
.player-seat .hand-cards {
  isolation: isolate;
}
.player-seat .playing-card,
.player-seat .hidden-card {
  position: relative;
  transition: translate .16s ease, filter .16s ease !important;
}
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  translate: 0 -6px !important;
  scale: 1 !important;
  z-index: auto !important;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.30)) brightness(1.03) !important;
}

/* chips contained inside circleslot and always in front of cards */
.player-seat .seat-circle-image {
  transform: scale(1.2) !important;
}
.player-seat.is-current .seat-circle-image {
  animation: active-circle-slot-round63 2.3s ease-in-out infinite !important;
}
@keyframes active-circle-slot-round63 {
  0%,100% { filter: brightness(1.06) saturate(1.02) drop-shadow(0 0 10px rgba(97,172,255,.20)) drop-shadow(0 0 14px rgba(97,172,255,.08)); }
  50% { filter: brightness(1.44) saturate(1.12) drop-shadow(0 0 18px rgba(97,172,255,.42)) drop-shadow(0 0 34px rgba(97,172,255,.22)); }
}
.player-seat.is-celebrating .seat-circle-image {
  animation: circle-rgb-celebrate 1.6s linear infinite !important;
}
@keyframes circle-rgb-celebrate {
  0% { filter: brightness(1.34) saturate(1.24) hue-rotate(0deg) drop-shadow(0 0 16px rgba(255,82,82,.25)); }
  33% { filter: brightness(1.34) saturate(1.24) hue-rotate(120deg) drop-shadow(0 0 16px rgba(90,255,132,.25)); }
  66% { filter: brightness(1.34) saturate(1.24) hue-rotate(240deg) drop-shadow(0 0 16px rgba(86,155,255,.25)); }
  100% { filter: brightness(1.34) saturate(1.24) hue-rotate(360deg) drop-shadow(0 0 16px rgba(255,82,82,.25)); }
}
.player-seat > .seat-chip-zone {
  width: 214px !important;
  height: 92px !important;
  left: calc(50% + 8px) !important;
  top: calc(50% + 30px) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  z-index: 32 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 34px !important;
  max-width: 34px !important;
  left: 50% !important;
  bottom: 4px !important;
  transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(calc(var(--chip-y, 0px) * -1)) rotate(var(--chip-rot, 0deg)) !important;
  z-index: calc(34 + var(--chip-order, 0)) !important;
}
.player-seat > .seat-hands-wrap,
.player-seat .seat-hands,
.player-seat .hand,
.player-seat .hand-cards,
.player-seat .playing-card,
.player-seat .hidden-card,
.player-seat > .seat-plaque {
  z-index: 18 !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 125px) !important;
  z-index: 34 !important;
}

/* Busted state */
.player-seat .seat-bust-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 8px);
  transform: translateX(-50%);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  color: #ff5a5a;
  font: 800 .88cqw/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,90,90,.38), 0 2px 3px rgba(0,0,0,.55);
  transition: opacity .2s ease;
}
.player-seat.is-busted > :not(.seat-chip-zone) {
  filter: grayscale(1) saturate(0) !important;
}
.player-seat.is-busted .seat-bust-label {
  opacity: 1;
  filter: none !important;
}

/* Confetti celebration layer */
.confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  opacity: 0;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,.22);
}
.confetti-layer.is-active .confetti-piece {
  animation: confetti-burst var(--confetti-dur, 1.7s) ease-in forwards;
  animation-delay: var(--confetti-delay, 0s);
}
@keyframes confetti-burst {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(0deg) scale(.65); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--confetti-x, 25vw), var(--confetti-y, 22vh), 0) rotate(var(--confetti-r, 180deg)) scale(1); }
}

/* Earnings values larger */
.panel-totalearnings .leaderboard-value {
  font-size: .56cqw !important;
}

/* ===== Round 65 — panel-safe player layout and stable card hover ===== */
/* Seats snap directly to their final coordinates so card-deal endpoints match. */
.player-seat {
  transition: none !important;
}

/* Keep every remote slot clear of side panels and prevent content from spilling. */
.player-seat:not(.is-self) {
  width: 10.8cqw !important;
}
.player-seat:not(.is-self) > .seat-circle-backdrop,
.player-seat:not(.is-self) > .seat-chip-zone,
.player-seat:not(.is-self) > .seat-hands-wrap,
.player-seat:not(.is-self) > .seat-plaque {
  max-width: 100% !important;
}

/* Stable card overlap and hover: no positional movement, so adjacent cards do not fight for hover. */
.player-seat .hand-cards {
  position: relative !important;
  isolation: isolate !important;
}
.player-seat .hand-cards > * {
  transition: filter .15s ease !important;
  translate: 0 0 !important;
  scale: 1 !important;
}
.player-seat .hand-cards > *:nth-child(1) { z-index: 1 !important; }
.player-seat .hand-cards > *:nth-child(2) { z-index: 2 !important; }
.player-seat .hand-cards > *:nth-child(3) { z-index: 3 !important; }
.player-seat .hand-cards > *:nth-child(4) { z-index: 4 !important; }
.player-seat .hand-cards > *:nth-child(5) { z-index: 5 !important; }
.player-seat .hand-cards > *:nth-child(6) { z-index: 6 !important; }
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  translate: 0 0 !important;
  scale: 1 !important;
  z-index: 40 !important;
  filter: brightness(1.075) drop-shadow(0 4px 8px rgba(0,0,0,.38)) !important;
}

/* Central bet chips remain readable as separate groups instead of a single pile. */
.table-pot-layer .pot-chip {
  width: 39px !important;
  height: auto !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.30)) !important;
}

/* ===== Round 66 — only requested corrections ===== */
/* Side player slots stay visible above the interface panels without changing their positions. */
.player-seat:not(.is-self) {
  z-index: 72 !important;
}
.panel-tabledetails,
.panel-totalearnings,
.panel-blackjacks {
  z-index: 60 !important;
}

/* The dealer hand-total container must remain visible once the delivered cards arrive. */
#dealer-zone #dealer-score:not(.hidden),
#dealer-zone .dealer-score-badge:not(.hidden) {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 74 !important;
}

/* Card hover only lifts vertically; it never jumps to the front of the hand. */
.player-seat .hand-cards > * {
  transition: translate .16s ease, filter .16s ease !important;
  scale: 1 !important;
}
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  translate: 0 -6px !important;
  scale: 1 !important;
  z-index: auto !important;
  filter: brightness(1.04) drop-shadow(0 4px 7px rgba(0,0,0,.30)) !important;
}

/* Flying card clones are independent from the destination-card hover/deal rules. */
.flying-card-clone {
  display: block !important;
  visibility: visible !important;
  will-change: transform, opacity, filter;
}

/* ===== Round 67 requested-only fixes ===== */
/* Background2: use art-only size, centered and 40px under top bar, with strong dealer-turn glow */
.game-background-overlay {
  position: absolute !important;
  width: auto !important;
  height: min(60cqh, 560px) !important;
  max-width: min(72cqw, 1200px) !important;
  left: 50% !important;
  top: 40px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
  opacity: .92 !important;
  filter: brightness(1.18) saturate(1.04) drop-shadow(0 0 8px rgba(255,225,135,.10)) !important;
  mix-blend-mode: screen !important;
}
.game-shell.is-dealer-turn-active .game-background-overlay,
.game-stage.is-dealer-turn-active ~ .game-background-overlay {
  animation: dealer-overlay-pulse-r67 1.6s ease-in-out infinite !important;
}
@keyframes dealer-overlay-pulse-r67 {
  0%,100% { opacity: .88; filter: brightness(1.16) saturate(1.02) drop-shadow(0 0 8px rgba(255,225,135,.14)); }
  50% { opacity: 1; filter: brightness(2.25) saturate(1.18) drop-shadow(0 0 34px rgba(255,225,135,.42)); }
}

/* Side panels dim again during active rounds */
.game-shell.is-round-active .panel-tabledetails,
.game-shell.is-round-active .panel-totalearnings,
.game-shell.is-round-active .panel-blackjacks {
  opacity: .46 !important;
  filter: saturate(.58) brightness(.72) !important;
  transition: opacity .28s ease, filter .28s ease !important;
}
.game-shell:not(.is-round-active) .panel-tabledetails,
.game-shell:not(.is-round-active) .panel-totalearnings,
.game-shell:not(.is-round-active) .panel-blackjacks {
  transition: opacity .28s ease, filter .28s ease !important;
}

/* Player side slots stay closer to table center and above background table area; panels remain above, but slots are moved inward by JS. */
.player-seat {
  z-index: 22 !important;
}
.player-seat.is-self {
  z-index: 24 !important;
}

/* Center your-turn label lower */
.center-turn-overlay {
  top: calc(33.4cqh + 60px) !important;
}

/* Dealer hand total should be readable, not tiny */
#dealer-score,
.dealer-score-badge {
  min-width: 46px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  font-size: .62cqw !important;
  line-height: 1 !important;
}

/* Busted label centered on the cards with slower fade and gradual desaturation */
.player-seat .seat-bust-label {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: .98cqw !important;
  text-shadow: 0 0 10px rgba(255,80,80,.62), 0 0 22px rgba(255,80,80,.34), 0 2px 4px rgba(0,0,0,.58) !important;
  transition: opacity .45s ease !important;
}
.player-seat > :not(.seat-chip-zone) {
  transition: filter .42s ease, opacity .42s ease !important;
}
.player-seat.is-busted > :not(.seat-chip-zone) {
  filter: grayscale(1) saturate(0) !important;
}
.player-seat.is-busted .seat-bust-label {
  opacity: 1 !important;
}

/* Hovered cards only lift upward, never jump to front */
.player-seat .hand-cards > * {
  position: relative !important;
  transform-origin: bottom center !important;
  transition: transform .16s ease, filter .16s ease !important;
}
.player-seat .hand-cards > *:nth-child(1) { z-index: 1 !important; }
.player-seat .hand-cards > *:nth-child(2) { z-index: 2 !important; }
.player-seat .hand-cards > *:nth-child(3) { z-index: 3 !important; }
.player-seat .hand-cards > *:nth-child(4) { z-index: 4 !important; }
.player-seat .hand-cards > *:nth-child(5) { z-index: 5 !important; }
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  transform: translateY(-6px) !important;
  translate: 0 0 !important;
  z-index: inherit !important;
  filter: brightness(1.04) drop-shadow(0 4px 7px rgba(0,0,0,.28)) !important;
}

/* Center pot chips: bigger and more spaced */
.table-pot-layer .pot-chip {
  width: 42px !important;
  height: auto !important;
}

/* Keep delivered cards visible exactly at landing position */
.flying-card-clone {
  will-change: transform, opacity, filter;
}


/* ===== Round 68 requested-only fixes ===== */
/* background2 much smaller / original-feel, centered and 40px under header */
.game-background-overlay {
  width: auto !important;
  height: auto !important;
  max-width: 44cqw !important;
  max-height: 48cqh !important;
  left: 50% !important;
  top: 40px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
}

/* active-round dimmed side panels */
.game-shell.is-round-active .panel-tabledetails,
.game-shell.is-round-active .panel-totalearnings,
.game-shell.is-round-active .panel-blackjacks {
  opacity: .42 !important;
  filter: saturate(.55) brightness(.68) !important;
}

/* dealer score container larger */
#dealer-score,
.dealer-score-badge {
  min-width: 54px !important;
  min-height: 36px !important;
  padding: 5px 12px !important;
  font-size: .72cqw !important;
}

/* busted label red and centered with fade; desaturation also fades */
.player-seat .seat-bust-label {
  left: 50% !important;
  top: 44% !important;
  transform: translate(-50%, -50%) !important;
  color: #ff4d4d !important;
  opacity: 0 !important;
  text-shadow: 0 0 10px rgba(255,77,77,.75), 0 0 24px rgba(255,77,77,.42), 0 2px 4px rgba(0,0,0,.62) !important;
  transition: opacity .48s ease !important;
  filter: none !important;
}
.player-seat > :not(.seat-chip-zone):not(.seat-bust-label) {
  transition: filter .42s ease, opacity .42s ease !important;
}
.player-seat.is-busted > :not(.seat-chip-zone):not(.seat-bust-label) {
  filter: grayscale(1) saturate(0) !important;
}
.player-seat.is-busted .seat-bust-label {
  opacity: 1 !important;
}

/* cards hover only lift a little, no front-jump/flicker */
.player-seat .hand-cards {
  isolation: isolate !important;
}
.player-seat .hand-cards > * {
  transition: transform .16s ease, filter .16s ease !important;
}
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  transform: translateY(-6px) !important;
  translate: none !important;
  filter: brightness(1.04) drop-shadow(0 4px 7px rgba(0,0,0,.28)) !important;
}

/* center pot chips bigger and spaced apart */
.table-pot-layer .pot-chip {
  width: 46px !important;
}

/* ===== Round 69 requested-only fixes ===== */
/* background2 lower by 60px and smaller/original feel */
.game-background-overlay {
  top: 100px !important;
  max-width: 34cqw !important;
  max-height: 38cqh !important;
}

/* non-self player slot content down 30px */
.player-seat:not(.is-self) > .seat-plaque,
.player-seat:not(.is-self) > .seat-hands-wrap,
.player-seat:not(.is-self) > .seat-bet-display {
  transform: translateY(30px) !important;
}
.player-seat:not(.is-self) .hand-score {
  top: calc(50% + 30px) !important;
}

/* busted fade + red text + progressive desaturation */
@keyframes busted-text-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.player-seat .seat-bust-label {
  color: #ff4747 !important;
  top: 42% !important;
  opacity: 0 !important;
  filter: none !important;
  text-shadow: 0 0 10px rgba(255,71,71,.8), 0 0 22px rgba(255,71,71,.48), 0 2px 4px rgba(0,0,0,.6) !important;
}
.player-seat > :not(.seat-chip-zone):not(.seat-bust-label),
.player-seat > :not(.seat-chip-zone):not(.seat-bust-label) * {
  transition: filter .42s ease, opacity .42s ease !important;
}
.player-seat.is-busted > :not(.seat-chip-zone):not(.seat-bust-label),
.player-seat.is-busted > :not(.seat-chip-zone):not(.seat-bust-label) * {
  filter: grayscale(1) saturate(0) !important;
}
.player-seat.is-busted .seat-bust-label {
  filter: none !important;
  opacity: 1 !important;
  animation: busted-text-fade-in .42s ease forwards;
}

/* active-round dimmed side panels stronger */
.game-shell.is-round-active .panel-tabledetails,
.game-shell.is-round-active .panel-totalearnings,
.game-shell.is-round-active .panel-blackjacks,
.game-stage.is-round-active ~ .left-rail .panel-tabledetails,
.game-stage.is-round-active ~ .right-rail .panel-totalearnings,
.game-stage.is-round-active ~ .right-rail .panel-blackjacks {
  opacity: .35 !important;
  filter: saturate(.48) brightness(.62) !important;
}

/* dealer total badge much larger */
#dealer-score,
.dealer-score-badge {
  min-width: 64px !important;
  min-height: 40px !important;
  padding: 6px 14px !important;
  font-size: .82cqw !important;
}

/* center pot chips more separated */
.table-pot-layer .pot-chip {
  width: 48px !important;
}

/* hover should only lift slightly; no front pop */
.player-seat .playing-card:hover,
.player-seat .hidden-card:hover {
  transform: translateY(-5px) !important;
  z-index: auto !important;
}


/* ===== Round 70 — balanced chips centered inside circleslot ===== */
/* Final override: center the physical stack on circleslot, lift it slightly,
   and enlarge the same real chip nodes used by every wager animation. */
.player-seat > .seat-chip-zone {
  left: 50% !important;
  top: calc(50% + 20px) !important;
  width: 209px !important;
  height: 94px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  z-index: 32 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 38px !important;
  max-width: 38px !important;
  bottom: 5px !important;
  transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(calc(var(--chip-y, 0px) * -1)) rotate(var(--chip-rot, 0deg)) !important;
}

/* Pot and flight animations measure the resized source nodes, so the arriving
   and departing chips keep the same dimensions instead of snapping sizes. */
.chip-flight-chip,
.table-pot-layer .pot-chip {
  object-fit: contain !important;
  transform-origin: center center !important;
}


/* ===== Round 71 — exact wager chips, separated denomination stacks ===== */
/* Each denomination owns its own horizontal group. The wider area keeps the
   groups distinct while the per-tier JS layout builds real vertical piles. */
.player-seat > .seat-chip-zone {
  left: 50% !important;
  top: calc(50% + 14px) !important;
  width: 238px !important;
  height: 104px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  z-index: 32 !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  width: 39px !important;
  max-width: 39px !important;
  bottom: 5px !important;
  transform: translateX(calc(-50% + var(--chip-x, 0px))) translateY(calc(var(--chip-y, 0px) * -1)) rotate(var(--chip-rot, 0deg)) !important;
}
.chip-flight-chip,
.table-pot-layer .pot-chip {
  object-fit: contain !important;
  transform-origin: center center !important;
}


/* ===== Round 72 — denomination-group hover value ===== */
/* Chips remain non-draggable/non-clickable, but can now receive hover so every
   visible chip of the same denomination can be highlighted as one group. */
.player-seat > .seat-chip-zone {
  pointer-events: none !important;
}
.player-seat > .seat-chip-zone .seat-chip {
  pointer-events: auto !important;
  cursor: default;
  transition: filter .16s ease, opacity .16s ease !important;
}
.player-seat > .seat-chip-zone .seat-chip.is-chip-tier-hovered {
  filter:
    brightness(1.16)
    drop-shadow(1px 0 0 rgba(255, 232, 139, .98))
    drop-shadow(-1px 0 0 rgba(255, 232, 139, .98))
    drop-shadow(0 1px 0 rgba(255, 210, 75, .98))
    drop-shadow(0 -1px 0 rgba(255, 210, 75, .98))
    drop-shadow(0 0 5px rgba(255, 206, 70, .94))
    drop-shadow(0 0 12px rgba(255, 183, 42, .72)) !important;
}

.chip-tier-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 188;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.chip-tier-hover-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.chip-tier-hover-value {
  position: absolute;
  min-width: 58px;
  padding: 5px 11px 4px;
  transform: translate(-50%, -100%);
  border: 1px solid rgba(255, 222, 116, .92);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(62, 43, 14, .97), rgba(21, 14, 5, .98));
  color: #fff1b0;
  box-shadow:
    inset 0 1px rgba(255, 248, 201, .22),
    0 0 5px rgba(255, 225, 120, .82),
    0 0 15px rgba(255, 177, 35, .52),
    0 3px 8px rgba(0, 0, 0, .48);
  font: 800 13px/1 Arial, sans-serif;
  letter-spacing: .025em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 5px rgba(255, 230, 137, .48), 0 1px 2px rgba(0, 0, 0, .72);
  animation: chip-tier-value-gold-pulse 1.15s ease-in-out infinite;
}
@keyframes chip-tier-value-gold-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}


/* ===== Round 73 — chip-shaped denomination hover contour ===== */
/* The rectangular group outline was removed. Each transparent chip image now
   receives its own gold silhouette glow, so stacked chips remain visible and
   no filled panel covers the artwork underneath. */
.player-seat > .seat-chip-zone .seat-chip.is-chip-tier-hovered {
  filter:
    brightness(1.055)
    drop-shadow(1px 0 0 rgba(255, 239, 169, .98))
    drop-shadow(-1px 0 0 rgba(255, 239, 169, .98))
    drop-shadow(0 1px 0 rgba(255, 218, 91, .98))
    drop-shadow(0 -1px 0 rgba(255, 218, 91, .98))
    drop-shadow(0 0 4px rgba(255, 218, 83, .9))
    drop-shadow(0 0 9px rgba(255, 180, 35, .58)) !important;
  animation: chip-tier-silhouette-gold-pulse 1.15s ease-in-out infinite;
}
@keyframes chip-tier-silhouette-gold-pulse {
  0%, 100% {
    filter:
      brightness(1.04)
      drop-shadow(1px 0 0 rgba(255, 235, 155, .94))
      drop-shadow(-1px 0 0 rgba(255, 235, 155, .94))
      drop-shadow(0 1px 0 rgba(255, 213, 82, .94))
      drop-shadow(0 -1px 0 rgba(255, 213, 82, .94))
      drop-shadow(0 0 3px rgba(255, 211, 73, .78))
      drop-shadow(0 0 7px rgba(255, 174, 31, .42));
  }
  50% {
    filter:
      brightness(1.09)
      drop-shadow(1px 0 0 rgba(255, 248, 197, 1))
      drop-shadow(-1px 0 0 rgba(255, 248, 197, 1))
      drop-shadow(0 1px 0 rgba(255, 228, 116, 1))
      drop-shadow(0 -1px 0 rgba(255, 228, 116, 1))
      drop-shadow(0 0 5px rgba(255, 225, 102, .96))
      drop-shadow(0 0 11px rgba(255, 184, 38, .64));
  }
}


/* ===== Round 74 — true combined chip-stack contour ===== */
/* The PNG artwork itself is no longer filtered. A canvas draws only the
   outside edge of the visible union of all chips with the hovered value. */
.player-seat > .seat-chip-zone .seat-chip.is-chip-tier-hovered {
  filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
.chip-tier-hover-contour {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: .96;
  animation: chip-tier-combined-contour-pulse 1.25s ease-in-out infinite;
}
.chip-tier-hover-value {
  z-index: 2;
}
@keyframes chip-tier-combined-contour-pulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

/* ===== Round 75 — larger dealer total and subtle gold card contours ===== */
/* Increase the complete dealer hand-total badge without changing its anchor. */
#dealer-score,
.dealer-score-badge {
  min-width: 72px !important;
  min-height: 46px !important;
  padding: 7px 16px !important;
  font-size: .9cqw !important;
  line-height: 1 !important;
  background-size: 100% 100% !important;
  transform-origin: center center !important;
}

/* Apply the contour to each settled dealer card separately. The alpha-aware
   drop shadows follow the individual card artwork and keep the glow subtle. */
#dealer-hand .playing-card:not(.is-new),
#dealer-hand .hidden-card:not(.is-new) {
  filter:
    brightness(1.025)
    drop-shadow(1px 0 0 rgba(246, 207, 105, .82))
    drop-shadow(-1px 0 0 rgba(246, 207, 105, .82))
    drop-shadow(0 1px 0 rgba(225, 173, 60, .78))
    drop-shadow(0 -1px 0 rgba(255, 228, 143, .8))
    drop-shadow(0 0 5px rgba(232, 178, 54, .34)) !important;
  animation: dealer-card-soft-gold-glow 2.45s ease-in-out infinite !important;
}

@keyframes dealer-card-soft-gold-glow {
  0%, 100% {
    filter:
      brightness(1.015)
      drop-shadow(1px 0 0 rgba(242, 202, 99, .72))
      drop-shadow(-1px 0 0 rgba(242, 202, 99, .72))
      drop-shadow(0 1px 0 rgba(218, 164, 54, .68))
      drop-shadow(0 -1px 0 rgba(252, 224, 137, .7))
      drop-shadow(0 0 4px rgba(225, 169, 48, .25));
  }
  50% {
    filter:
      brightness(1.055)
      drop-shadow(1px 0 0 rgba(255, 224, 135, .92))
      drop-shadow(-1px 0 0 rgba(255, 224, 135, .92))
      drop-shadow(0 1px 0 rgba(239, 188, 69, .88))
      drop-shadow(0 -1px 0 rgba(255, 239, 176, .9))
      drop-shadow(0 0 7px rgba(241, 187, 62, .46));
  }
}

/* ===== Round 76 — stable player-card hover without overlap fighting ===== */
/* Settled player cards keep a fixed layer and their original fanned position.
   Hover uses the independent translate property, so it cannot replace the
   card's rotation or promote the card above its neighbours. */
.player-seat .hand-cards > .playing-card:not(.is-new):not(.is-dealing),
.player-seat .hand-cards > .hidden-card:not(.is-new):not(.is-dealing) {
  --player-card-rest-transform: none;
  --player-card-layer: 1;
  position: relative !important;
  transform: var(--player-card-rest-transform) !important;
  translate: 0 0 !important;
  scale: 1 !important;
  z-index: var(--player-card-layer) !important;
  animation: none !important;
  transition: translate .16s ease-out !important;
  transform-origin: bottom center !important;
  will-change: auto !important;

  /* The transparent lower hit area stays in the card's original position
     while the artwork rises, preventing hover enter/leave flicker. */
  box-sizing: content-box !important;
  padding-bottom: 6px !important;
  margin-bottom: -6px !important;
}

.player-seat .hand-cards > .playing-card:nth-child(1),
.player-seat .hand-cards > .hidden-card:nth-child(1) {
  --player-card-rest-transform: rotate(0deg) translateY(0);
  --player-card-layer: 1;
}
.player-seat .hand-cards > .playing-card:nth-child(2),
.player-seat .hand-cards > .hidden-card:nth-child(2) {
  --player-card-rest-transform: rotate(4deg) translateY(.08cqw);
  --player-card-layer: 2;
}
.player-seat .hand-cards > .playing-card:nth-child(3),
.player-seat .hand-cards > .hidden-card:nth-child(3) {
  --player-card-rest-transform: rotate(8deg) translateY(.18cqw);
  --player-card-layer: 3;
}
.player-seat .hand-cards > .playing-card:nth-child(4),
.player-seat .hand-cards > .hidden-card:nth-child(4) {
  --player-card-rest-transform: rotate(12deg) translateY(.3cqw);
  --player-card-layer: 4;
}
.player-seat .hand-cards > .playing-card:nth-child(5),
.player-seat .hand-cards > .hidden-card:nth-child(5) {
  --player-card-rest-transform: rotate(16deg) translateY(.42cqw);
  --player-card-layer: 5;
}
.player-seat .hand-cards > .playing-card:nth-child(6),
.player-seat .hand-cards > .hidden-card:nth-child(6) {
  --player-card-rest-transform: rotate(20deg) translateY(.56cqw);
  --player-card-layer: 6;
}
.player-seat .hand-cards > .playing-card:nth-child(7),
.player-seat .hand-cards > .hidden-card:nth-child(7) {
  --player-card-rest-transform: rotate(24deg) translateY(.7cqw);
  --player-card-layer: 7;
}
.player-seat .hand-cards > .playing-card:nth-child(8),
.player-seat .hand-cards > .hidden-card:nth-child(8) {
  --player-card-rest-transform: rotate(28deg) translateY(.84cqw);
  --player-card-layer: 8;
}

.player-seat .hand-cards > .playing-card:not(.is-new):not(.is-dealing):hover,
.player-seat .hand-cards > .hidden-card:not(.is-new):not(.is-dealing):hover {
  transform: var(--player-card-rest-transform) !important;
  translate: 0 -6px !important;
  scale: 1 !important;
  z-index: var(--player-card-layer) !important;
  filter: none !important;
}

/* ===== Round 77 — levitation plus stable per-card hover ===== */
/* Settled cards in the user's own slot keep their ambient levitation. The
   animation owns only `transform`; hover uses the independent `translate`
   property, so both effects can coexist without changing the fixed z-order. */
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing) {
  animation-name: player-card-stable-levitate !important;
  animation-duration: 4.9s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  translate: 0 0 !important;
  z-index: var(--player-card-layer) !important;
  will-change: transform, translate !important;
}

.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(1),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(1) {
  animation-delay: 0s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(2),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(2) {
  animation-delay: .38s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(3),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(3) {
  animation-delay: .76s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(4),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(4) {
  animation-delay: 1.14s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(5),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(5) {
  animation-delay: 1.52s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(6),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(6) {
  animation-delay: 1.9s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(7),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(7) {
  animation-delay: 2.28s !important;
}
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:nth-child(8),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:nth-child(8) {
  animation-delay: 2.66s !important;
}

@keyframes player-card-stable-levitate {
  0%, 100% {
    transform: var(--player-card-rest-transform) translate3d(0, 0, 0);
  }
  24% {
    transform: var(--player-card-rest-transform) translate3d(.4px, -2.2px, 0);
  }
  52% {
    transform: var(--player-card-rest-transform) translate3d(-.3px, -4px, 0);
  }
  76% {
    transform: var(--player-card-rest-transform) translate3d(.2px, -2.6px, 0);
  }
}

/* Freeze the ambient animation at its current frame while the pointer is on
   the card, then lift it independently. Its original layer never changes. */
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing):hover,
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing):hover {
  animation-play-state: paused !important;
  translate: 0 -6px !important;
  scale: 1 !important;
  z-index: var(--player-card-layer) !important;
  filter: none !important;
}

/* ===== Round 78 — visible levitation with stable hover pause ===== */
/* The fixed fan transform from Round 76 is intentionally kept. Because an
   !important transform cannot be overridden by CSS keyframes, the ambient
   motion now animates the positioned card's `top` offset instead. Hover still
   uses the independent `translate` property, so no z-index or overlap changes. */
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing) {
  animation-name: player-card-position-levitate !important;
  animation-duration: 4.9s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: top, translate !important;
}

@keyframes player-card-position-levitate {
  0%, 100% { top: 0; }
  24% { top: -2.2px; }
  52% { top: -4px; }
  76% { top: -2.6px; }
}

.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing):hover,
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing):hover {
  animation-play-state: paused !important;
  translate: 0 -6px !important;
  z-index: var(--player-card-layer) !important;
}


/* ===== Round 79 — fluid card levitation, synchronized result backdrop ===== */
/* Registered custom properties are interpolated on the compositor. This keeps
   the ambient movement sub-pixel smooth instead of changing the layout `top`
   value in visible pixel steps. Hover has its own offset and pauses the
   ambient frame, so the fixed card order is never touched. */
@property --player-card-float-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --player-card-hover-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing),
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing) {
  --player-card-float-y: 0px;
  --player-card-hover-y: 0px;
  top: 0 !important;
  animation-name: player-card-compositor-levitate !important;
  animation-duration: 5.2s !important;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1) !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  translate: 0 calc(var(--player-card-float-y) + var(--player-card-hover-y)) !important;
  transition: --player-card-hover-y .17s cubic-bezier(.2,.76,.22,1), filter .16s ease !important;
  will-change: translate !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes player-card-compositor-levitate {
  0%, 100% { --player-card-float-y: 0px; }
  18% { --player-card-float-y: -1.55px; }
  50% { --player-card-float-y: -4.15px; }
  82% { --player-card-float-y: -1.55px; }
}

.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .playing-card:not(.is-new):not(.is-dealing):hover,
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > .hidden-card:not(.is-new):not(.is-dealing):hover {
  --player-card-hover-y: -6px;
  animation-play-state: paused !important;
  translate: 0 calc(var(--player-card-float-y) + var(--player-card-hover-y)) !important;
  scale: 1 !important;
  z-index: var(--player-card-layer) !important;
}

/* bgc.png uses the dimensions read directly from the loaded PNG. It is
   inserted immediately before #game-stage, above only the site backgrounds.
   CSS filters and drop-shadows operate on the PNG alpha, never on its
   transparent rectangle. */
.round-result-background-effect {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--round-result-native-width, auto) !important;
  height: var(--round-result-native-height, auto) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  user-select: none !important;
  transition: opacity 1.55s ease, visibility 0s linear 1.55s;
  will-change: opacity, filter;
}
.round-result-background-effect.is-no-transition {
  transition: none !important;
}
.round-result-background-effect.is-visible {
  opacity: .92;
  visibility: visible;
  transition: opacity 1.55s ease, visibility 0s linear 0s;
}
.round-result-background-effect.is-win {
  --round-result-color-filter: brightness(0) saturate(100%) invert(84%) sepia(38%) saturate(1180%) hue-rotate(57deg) brightness(111%) contrast(104%);
  --round-result-glow: rgba(126,255,151,.84);
  animation: round-result-alpha-glow 2.35s ease-in-out infinite;
}
.round-result-background-effect.is-loss {
  --round-result-color-filter: brightness(0) saturate(100%) invert(47%) sepia(97%) saturate(2980%) hue-rotate(337deg) brightness(108%) contrast(108%);
  --round-result-glow: rgba(255,68,68,.88);
  animation: round-result-alpha-glow 2.15s ease-in-out infinite;
}
@keyframes round-result-alpha-glow {
  0%, 100% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 6px var(--round-result-glow))
      drop-shadow(0 0 14px color-mix(in srgb, var(--round-result-glow) 58%, transparent));
  }
  50% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 12px var(--round-result-glow))
      drop-shadow(0 0 30px color-mix(in srgb, var(--round-result-glow) 82%, transparent))
      drop-shadow(0 0 52px color-mix(in srgb, var(--round-result-glow) 48%, transparent));
  }
}

/* Start every settled card inside the levitation cycle immediately while
   preserving a different phase for each position in the fan. */
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(1) { animation-delay: 0s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(2) { animation-delay: -.65s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(3) { animation-delay: -1.3s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(4) { animation-delay: -1.95s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(5) { animation-delay: -2.6s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(6) { animation-delay: -3.25s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(7) { animation-delay: -3.9s !important; }
.player-seat.is-self:not(.is-dealer-overview) .hand-cards > :nth-child(8) { animation-delay: -4.55s !important; }

/* ===== Round 81 — final result feedback, leaderboard scroll, crisp card backs ===== */
.round-result-summary {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 260;
  display: grid;
  place-items: center;
  width: max-content;
  max-width: min(92cqw, 760px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, calc(-50% + 14px), 0) scale(.965);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.76,.22,1), visibility 0s linear .42s;
  will-change: opacity, transform;
}
.round-result-summary.is-no-transition {
  transition: none !important;
}
.round-result-summary.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.76,.22,1), visibility 0s linear 0s;
}
.round-result-summary-card {
  position: relative;
  min-width: clamp(320px, 25cqw, 520px);
  padding: clamp(20px, 1.45cqw, 30px) clamp(28px, 2.1cqw, 44px);
  overflow: hidden;
  border: 1px solid rgba(220,176,89,.78);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0%, rgba(199,151,65,.17), transparent 54%),
    linear-gradient(180deg, rgba(34,23,13,.97), rgba(12,8,5,.985));
  box-shadow:
    inset 0 1px rgba(255,237,190,.14),
    inset 0 -10px 24px rgba(0,0,0,.34),
    0 20px 60px rgba(0,0,0,.58),
    0 0 22px rgba(196,145,57,.16);
  text-align: center;
}
.round-result-summary-card::before,
.round-result-summary-card::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,194,111,.62), transparent);
}
.round-result-summary-card::before { top: 9px; }
.round-result-summary-card::after { bottom: 9px; }
.round-result-summary-title {
  display: block;
  margin-bottom: clamp(10px, .75cqw, 16px);
  font: 800 clamp(30px, 2.1cqw, 46px)/1.05 Georgia, serif;
  letter-spacing: .035em;
}
.round-result-summary.is-win .round-result-summary-title {
  color: #aaffb5;
  text-shadow: 0 0 8px rgba(119,255,143,.66), 0 0 24px rgba(91,231,121,.34);
}
.round-result-summary.is-loss .round-result-summary-title {
  color: #ff9292;
  text-shadow: 0 0 8px rgba(255,91,91,.72), 0 0 24px rgba(235,57,57,.38);
}
.round-result-summary.is-push .round-result-summary-title {
  color: #ffe39a;
  text-shadow: 0 0 8px rgba(255,218,124,.6), 0 0 22px rgba(212,163,64,.28);
}
.round-result-summary-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, .7cqw, 15px);
  color: #e9d7b0;
  font: 600 clamp(17px, .92cqw, 22px)/1.25 Arial, sans-serif;
  white-space: nowrap;
}
.round-result-summary-scores i {
  color: rgba(225,192,123,.58);
  font-style: normal;
}
.round-result-summary-scores b {
  font-size: 1.08em;
  font-weight: 800;
}
.round-result-summary.is-win #round-result-player-score,
.round-result-summary.is-loss #round-result-dealer-score {
  color: #9effad;
  text-shadow: 0 0 8px rgba(104,245,129,.42);
}
.round-result-summary.is-win #round-result-dealer-score,
.round-result-summary.is-loss #round-result-player-score {
  color: #ff8888;
  text-shadow: 0 0 8px rgba(255,87,87,.42);
}
.round-result-summary.is-push #round-result-player-score,
.round-result-summary.is-push #round-result-dealer-score {
  color: #ffe09a;
}
.round-result-summary-bank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .55cqw, 12px);
  margin-top: clamp(12px, .9cqw, 18px);
  padding-top: clamp(10px, .7cqw, 14px);
  border-top: 1px solid rgba(217,174,89,.20);
  color: #bba98a;
  font: 600 clamp(15px, .78cqw, 19px)/1 Arial, sans-serif;
}
.round-result-summary-bank-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f5d981;
  font-size: 1.1em;
}
.round-result-summary-bank-value img {
  width: clamp(20px, 1.05cqw, 25px);
  height: clamp(20px, 1.05cqw, 25px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(241,193,81,.28));
}

/* The panel geometry stays untouched. Scrolling is enabled only after the
   requested visible-row thresholds are exceeded. */
.leaderboard-list.is-scrollable {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: .24cqw !important;
  scrollbar-width: thin;
  scrollbar-color: #76501d transparent;
  overscroll-behavior: contain;
}
.leaderboard-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}
.leaderboard-list.is-scrollable::-webkit-scrollbar-track {
  background: rgba(13,9,6,.32);
  border-radius: 8px;
}
.leaderboard-list.is-scrollable::-webkit-scrollbar-thumb {
  border: 1px solid rgba(238,192,102,.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #9c6a27, #5b3915);
  box-shadow: inset 0 0 3px rgba(255,223,151,.18), 0 0 5px rgba(143,92,28,.18);
}
.leaderboard-list.is-scrollable::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b37b31, #68431a);
}
.panel-totalearnings .leaderboard-value {
  font-size: .62cqw !important;
  line-height: 1 !important;
}
.panel-totalearnings .leaderboard-value.positive { color: #98f3a8 !important; }
.panel-totalearnings .leaderboard-value.negative { color: #ff8d8d !important; }
.panel-totalearnings .leaderboard-value.neutral { color: #e8d39d !important; }
.panel-totalearnings .leaderboard-value .gil-inline {
  display: inline-flex;
  align-items: center;
  gap: .19cqw;
}
.panel-totalearnings .leaderboard-value .gil-inline img {
  width: .78cqw !important;
  min-width: 12px;
  height: .78cqw !important;
  min-height: 12px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Use the existing full-resolution 542x741 artwork directly. The missing
   back.png fallback is intentionally removed, avoiding a failed request and
   letting the browser resample one source consistently. */
.shoe-card.card-back,
span.card-back {
  border: 0 !important;
  background: url('./assets/bacl.png') center center / 100% 100% no-repeat !important;
  image-rendering: auto;
}
img.hidden-card.card-back,
.real-dealt-card img.card-back {
  display: inline-block;
  border: 0 !important;
  background: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ===== Round 82 — contextual audio, finite result VFX, dealer bust and compact slot layout ===== */
.brand-block {
  position: relative !important;
  overflow: visible !important;
}
.topbar-audio-controls {
  position: absolute;
  left: calc(clamp(205px, 24cqw, 455px) + 7px);
  top: 50%;
  z-index: 8;
  display: grid;
  grid-template-rows: repeat(2, 18px);
  gap: 2px;
  width: 174px;
  height: 38px;
  transform: translateY(-50%);
  padding: 2px 6px;
  border: 1px solid rgba(187,145,67,.42);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(28,20,12,.88), rgba(10,7,5,.92));
  box-shadow: inset 0 1px rgba(255,238,191,.08), inset 0 -5px 9px rgba(0,0,0,.26), 0 3px 9px rgba(0,0,0,.30);
  pointer-events: auto;
}
.topbar-audio-row {
  display: grid;
  grid-template-columns: 18px 34px 1fr 24px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 18px;
  margin: 0;
  cursor: default;
  transition: opacity .18s ease, filter .18s ease;
}
.topbar-audio-row.music-audio-row { --audio-accent: #85d8ff; --audio-muted: #db7380; }
.topbar-audio-row.sfx-audio-row { --audio-accent: #f0c66c; --audio-muted: #c86f69; }
.audio-mute-button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 17px;
  min-width: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--audio-accent);
  background: rgba(255,255,255,.035);
  text-shadow: 0 0 6px color-mix(in srgb, var(--audio-accent) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--audio-accent) 25%, transparent);
  font: 700 12px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform .12s ease, color .18s ease, filter .18s ease, background .18s ease;
}
.audio-mute-button:hover { filter: brightness(1.25); }
.audio-mute-button:active { transform: translateY(1px) scale(.94); }
.audio-control-label {
  overflow: hidden;
  color: color-mix(in srgb, var(--audio-accent) 78%, #d9caa8);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar-audio-row output {
  color: #cdbb94;
  font: 700 8px/1 Arial, sans-serif;
  text-align: right;
}
.topbar-audio-row input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.topbar-audio-row input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--audio-accent) 75%, #4b3318), rgba(91,69,40,.58));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 4px color-mix(in srgb, var(--audio-accent) 22%, transparent);
}
.topbar-audio-row input[type="range"]::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  margin-top: -3px;
  appearance: none;
  border: 1px solid rgba(255,241,200,.62);
  border-radius: 50%;
  background: var(--audio-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--audio-accent) 62%, transparent), 0 1px 2px rgba(0,0,0,.7);
}
.topbar-audio-row input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 4px;
  background: rgba(91,69,40,.58);
}
.topbar-audio-row input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 4px;
  background: var(--audio-accent);
}
.topbar-audio-row input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255,241,200,.62);
  border-radius: 50%;
  background: var(--audio-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--audio-accent) 62%, transparent);
}
.topbar-audio-row.is-muted {
  opacity: .68;
  filter: saturate(.52);
}
.topbar-audio-row.is-muted .audio-mute-button {
  color: var(--audio-muted);
  background: rgba(126,38,43,.18);
  text-shadow: 0 0 7px color-mix(in srgb, var(--audio-muted) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--audio-muted) 35%, transparent);
}
.topbar-audio-row.music-audio-row.is-active:not(.is-muted) .audio-mute-button {
  animation: music-control-soft-pulse 2.2s ease-in-out infinite;
}
@keyframes music-control-soft-pulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 3px rgba(111,205,255,.35)); }
}
.youtube-audio-player {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.youtube-audio-player iframe {
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
}

/* Keep the topbar geometry and its other items untouched. */
@media (max-width: 1300px) {
  .topbar-audio-controls {
    left: calc(clamp(180px, 22.5cqw, 330px) + 5px);
    width: 158px;
  }
  .topbar-audio-row { grid-template-columns: 17px 30px 1fr 21px; gap: 3px; }
}

/* Action buttons visibly travel inward like physical table controls. */
.action-button {
  transform-origin: 50% 80% !important;
  transition: transform .10s cubic-bezier(.2,.72,.25,1), filter .10s ease, box-shadow .10s ease !important;
}
.action-button:active:not(:disabled) {
  transform: translateY(3px) scale(.982) !important;
  filter: brightness(.88) saturate(.96) !important;
  box-shadow:
    inset 0 5px 11px rgba(0,0,0,.52),
    inset 0 -1px 2px rgba(255,231,177,.08),
    0 1px 2px rgba(0,0,0,.46) !important;
}
.action-button:active:not(:disabled)::before,
.action-button:active:not(:disabled)::after {
  transform: translateY(1px) !important;
  filter: brightness(.9) !important;
}

/* Dealer bust uses the same desaturation and animated overlay language as players. */
#dealer-bust-label { display: none !important; }
#dealer-zone .dealer-hand {
  transition: filter .42s ease, opacity .42s ease !important;
}
#dealer-zone.is-busted .dealer-hand {
  filter: grayscale(1) saturate(0) !important;
}
.dealer-bust-overlay-label {
  color: #ff4747 !important;
  -webkit-text-fill-color: #ff4747 !important;
}

/* Requested pixel-level placement refinements. */
.game-background-overlay {
  left: calc(50% + 3px) !important;
  top: 130px !important;
}
.player-seat > .seat-bet-display {
  top: calc(50% + 123px) !important;
}

/* Slightly narrower player-name plaques; the frame image follows the same box. */
.player-seat > .seat-plaque {
  min-width: 6.65cqw !important;
  max-width: 12.45cqw !important;
  padding-left: .54cqw !important;
  padding-right: .54cqw !important;
}
.player-seat.is-self > .seat-plaque {
  min-width: 8.55cqw !important;
  max-width: 14.65cqw !important;
}
.player-seat > .seat-plaque::before,
.player-seat > .seat-plaque::after {
  width: auto !important;
  max-width: 100% !important;
}

/* ===== Round 83 — compact audio controls, stronger turn label and true button travel ===== */
/* Keep both volume rows immediately beside titulo.png without a surrounding box. */
.topbar-audio-controls {
  left: calc(100% + 4px) !important;
  top: 50% !important;
  width: 166px !important;
  height: 38px !important;
  padding: 0 !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar-audio-row {
  grid-template-columns: 17px 31px 1fr 22px !important;
  gap: 3px !important;
}
.topbar-audio-row .audio-mute-button {
  background: transparent !important;
  box-shadow: none !important;
}
.topbar-audio-row.is-muted .audio-mute-button {
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 1300px) {
  .topbar-audio-controls {
    left: calc(100% + 2px) !important;
    width: 151px !important;
  }
  .topbar-audio-row {
    grid-template-columns: 16px 28px 1fr 20px !important;
    gap: 2px !important;
  }
}

/* background2 moves another 30px down while preserving its existing X offset. */
.game-background-overlay {
  top: 160px !important;
}

/* Your Turn remains animated, but is larger, outlined and always above the table UI. */
.center-turn-overlay {
  z-index: 260 !important;
  font-size: 1.55cqw !important;
  -webkit-text-stroke: .65px rgba(0,0,0,.96) !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.92),
     1px -1px 0 rgba(0,0,0,.92),
    -1px  1px 0 rgba(0,0,0,.92),
     1px  1px 0 rgba(0,0,0,.92),
     0 0 8px rgba(255,223,133,.45),
     0 0 20px rgba(255,213,94,.26),
     0 2px 3px rgba(0,0,0,.55) !important;
}

/* The class is kept briefly even after the action becomes disabled/pending, so the
   physical press remains visible instead of being replaced by the pending glow. */
.action-button.is-physically-pressed,
.action-button.is-physically-pressed:disabled,
.action-button.is-physically-pressed.is-locked {
  animation: none !important;
  transform: translateY(5px) scale(.974) !important;
  transform-origin: 50% 82% !important;
  opacity: .96 !important;
  filter: brightness(.83) saturate(.92) !important;
  box-shadow: inset 0 5px 13px rgba(0,0,0,.58), 0 1px 1px rgba(0,0,0,.42) !important;
}
.action-button.is-physically-pressed::before,
.action-button.is-physically-pressed:disabled::before,
.action-button.is-physically-pressed.is-locked::before {
  transform: translateY(3px) scaleY(.92) !important;
  transform-origin: 50% 100% !important;
  filter: brightness(.76) saturate(.9) !important;
  box-shadow:
    inset 0 8px 13px rgba(0,0,0,.68),
    inset 0 -1px 1px rgba(255,236,190,.06),
    0 0 0 1px rgba(0,0,0,.24) !important;
}
.action-button.is-physically-pressed::after,
.action-button.is-physically-pressed:disabled::after,
.action-button.is-physically-pressed.is-locked::after {
  transform: translateY(3px) scale(.985,.94) !important;
  transform-origin: 50% 100% !important;
  filter: brightness(.82) drop-shadow(0 1px 1px rgba(0,0,0,.35)) !important;
}
.action-button.is-physically-pressed > * {
  transform: translateY(3px) !important;
}

/* Choice labels must remain above the HUD and inside the stage's right edge. */
.self-choice-display {
  z-index: 245 !important;
  max-width: calc(100% - 16px) !important;
}
.brand-block {
  justify-self: start !important;
  width: max-content !important;
}


/* ===== Round 85 — requested layout, committed action and global audio refinements ===== */
/* background2: 13px lower and slightly smaller than the previous revision. */
.game-background-overlay {
  top: 173px !important;
  max-width: 31.5cqw !important;
  max-height: 35.5cqh !important;
}

/* After the physical travel, the selected action stays seated instead of
   returning to the normal pulsing pending glow. */
.action-button.is-action-committed,
.action-button.is-action-committed:disabled,
.action-button.is-action-committed.is-pending {
  animation: none !important;
  transform: translateY(3px) scale(.982) !important;
  opacity: .78 !important;
  filter: brightness(.72) saturate(.78) !important;
  box-shadow: inset 0 4px 10px rgba(0,0,0,.52), 0 1px 1px rgba(0,0,0,.34) !important;
}
.action-button.is-action-committed::before,
.action-button.is-action-committed:disabled::before,
.action-button.is-action-committed.is-pending::before {
  transform: translateY(2px) scaleY(.95) !important;
  filter: brightness(.78) saturate(.88) !important;
  box-shadow: inset 0 6px 11px rgba(0,0,0,.58), inset 0 -1px 1px rgba(255,236,190,.05) !important;
}
.action-button.is-action-committed::after,
.action-button.is-action-committed:disabled::after,
.action-button.is-action-committed.is-pending::after {
  transform: translateY(2px) scale(.99,.96) !important;
  filter: brightness(.82) !important;
}

/* Give the right-side self choice copy a larger safe rendering area. */
.self-choice-display {
  overflow: visible !important;
  max-width: none !important;
}


/* ===== Round 86 — stable global music resume, requested SFX mapping and pixel fixes ===== */
/* background2: 5px up and 2px right from Round 85. */
.game-background-overlay {
  top: 168px !important;
  left: calc(50% + 5px) !important;
}

/* The script-font T has a right-side overhang. Expand the reveal/paint box rather
   than moving HIT upward or into the player's slot. */
.self-choice-display[data-action="hit"] {
  overflow: visible !important;
}
.self-choice-display[data-action="hit"] .self-choice-text {
  box-sizing: content-box !important;
  padding-right: 34px !important;
  margin-right: -34px !important;
  overflow: visible !important;
}

/* ===== Round 87 — requested final audio and placement refinements ===== */
/* background2: another 2px to the right and a little smaller. */
.game-background-overlay {
  left: calc(50% + 7px) !important;
  max-width: 30.2cqw !important;
  max-height: 34.1cqh !important;
}

/* HIT must use only the free area to the right of the local player's slot. */
.self-choice-display[data-action="hit"] {
  transform-origin: left bottom !important;
  overflow: visible !important;
}
.self-choice-display[data-action="hit"] .self-choice-text {
  box-sizing: content-box !important;
  padding-left: 4px !important;
  padding-right: 34px !important;
  margin-left: 0 !important;
  margin-right: -34px !important;
  overflow: visible !important;
}

/* ===== Round 88 — final background scale and current music label ===== */
.game-background-overlay {
  left: calc(50% + 10px) !important;
  max-width: 28.9cqw !important;
  max-height: 32.6cqh !important;
}

.current-music-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 260;
  max-width: min(58cqw, 900px);
  padding: 3px 12px 4px;
  transform: translateX(-50%) translateY(-3px);
  opacity: 0;
  overflow: hidden;
  color: #e9ddc1;
  font: 600 clamp(10px, .55cqw, 14px)/1.2 Arial, sans-serif;
  letter-spacing: .035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(221,183,105,.18);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.current-music-label.is-visible:not([hidden]) {
  opacity: .92;
  transform: translateX(-50%) translateY(0);
}
.current-music-label::before {
  content: '♫';
  margin-right: 7px;
  color: #8bd6f2;
  text-shadow: 0 0 7px rgba(96,193,231,.38);
}

/* ===== Round 89 — refined music identity, action-deck cue and final placement ===== */
/* background2: 3px right, 2px up and slightly smaller than Round 88. */
.game-background-overlay {
  left: calc(50% + 13px) !important;
  top: 166px !important;
  max-width: 27.7cqw !important;
  max-height: 31.3cqh !important;
}

/* The music label sits below the top bar. Its top/bottom edges fade out instead
   of closing into vertical side borders. */
.current-music-label {
  top: calc(100% + 11px) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 22px;
  max-width: min(62cqw, 960px) !important;
  padding: 5px 34px 6px !important;
  overflow: hidden;
  border: 0 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(197,164,99,.34) 18%, rgba(197,164,99,.34) 82%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(112,89,50,.30) 18%, rgba(112,89,50,.30) 82%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(13,12,10,.34) 12%, rgba(13,12,10,.72) 28%, rgba(13,12,10,.72) 72%, rgba(13,12,10,.34) 88%, transparent 100%) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 12px rgba(0,0,0,.14) !important;
}
.current-music-label::before {
  content: none !important;
}
.current-music-note {
  flex: 0 0 auto;
  min-width: 16px;
  color: #8bd6f2;
  font: 700 16px/1 Georgia, serif;
  text-align: center;
  text-shadow: 0 0 5px rgba(96,193,231,.55), 0 0 12px rgba(96,193,231,.25);
  transform-origin: center;
  animation: current-music-note-float 2.35s ease-in-out infinite;
  will-change: transform, filter, opacity;
}
.current-music-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes current-music-note-float {
  0%, 100% { translate: 0 1px; filter: brightness(1); }
  50% { translate: 0 -2px; filter: brightness(1.2) drop-shadow(0 0 4px rgba(96,193,231,.32)); }
}

/* A card-receiving action lightly riffles the deck where it is currently
   parked. The card flight waits for this short cue before leaving the deck. */
.shoe.is-action-shuffling .shoe-card:nth-child(odd) {
  animation: action-deck-riffle-left .56s cubic-bezier(.2,.72,.22,1) 1 both !important;
}
.shoe.is-action-shuffling .shoe-card:nth-child(even) {
  animation: action-deck-riffle-right .56s cubic-bezier(.2,.72,.22,1) 1 both !important;
}
.shoe.is-action-shuffling .shoe-card:nth-child(3n) { animation-delay: 28ms !important; }
.shoe.is-action-shuffling .shoe-card:nth-child(4n) { animation-delay: 50ms !important; }
@keyframes action-deck-riffle-left {
  0%, 100% {
    transform: translate(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y))) rotate(var(--stack-r));
  }
  32% {
    transform: translate(calc(-50% + var(--stack-x) - 4px), calc(-50% + var(--stack-y) - 2px)) rotate(calc(var(--stack-r) - 2.5deg));
  }
  68% {
    transform: translate(calc(-50% + var(--stack-x) + 2px), calc(-50% + var(--stack-y) + 1px)) rotate(calc(var(--stack-r) + 1.5deg));
  }
}
@keyframes action-deck-riffle-right {
  0%, 100% {
    transform: translate(calc(-50% + var(--stack-x)), calc(-50% + var(--stack-y))) rotate(var(--stack-r));
  }
  32% {
    transform: translate(calc(-50% + var(--stack-x) + 4px), calc(-50% + var(--stack-y) - 2px)) rotate(calc(var(--stack-r) + 2.5deg));
  }
  68% {
    transform: translate(calc(-50% + var(--stack-x) - 2px), calc(-50% + var(--stack-y) + 1px)) rotate(calc(var(--stack-r) - 1.5deg));
  }
}


/* ===== Round 90 — final music label visibility, chains accent, stable deck cue and backdrop tweak ===== */
.game-background-overlay {
  left: calc(50% + 10px) !important;
  top: 166px !important;
  max-width: 27.2cqw !important;
  max-height: 30.9cqh !important;
}

.current-music-label {
  top: calc(100% + 14px) !important;
  z-index: 262 !important;
  min-width: min(46cqw, 760px) !important;
  max-width: min(68cqw, 1040px) !important;
  min-height: 26px !important;
  padding: 6px 38px 7px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(214,182,116,.54) 15%, rgba(214,182,116,.54) 85%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(132,103,56,.48) 15%, rgba(132,103,56,.48) 85%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(10,9,8,.50) 10%, rgba(10,9,8,.88) 28%, rgba(10,9,8,.88) 72%, rgba(10,9,8,.50) 90%, transparent 100%) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 7px 18px rgba(0,0,0,.20) !important;
}
.current-music-label.is-visible:not([hidden]) {
  opacity: .995 !important;
}
.current-music-note {
  color: #e2bc68 !important;
  text-shadow: 0 0 6px rgba(226,188,104,.65), 0 0 14px rgba(226,188,104,.28) !important;
}
@keyframes current-music-note-float {
  0%, 100% { translate: 0 1px; filter: brightness(1) drop-shadow(0 0 2px rgba(226,188,104,.18)); }
  50% { translate: 0 -2px; filter: brightness(1.18) drop-shadow(0 0 5px rgba(226,188,104,.42)); }
}
.current-music-chains {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  z-index: 255;
  width: min(36cqw, 560px);
  height: auto;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.current-music-chains.is-visible {
  opacity: .98;
  transform: translateX(-50%) translateY(0);
}

/* Keep the action-queue text in the free area to the right of the slot only. */
.self-choice-display {
  max-width: calc(100vw - 20px) !important;
  overflow: visible !important;
}
.self-choice-display[data-action="hit"] {
  right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px)) !important;
}

/* The action-deck riffle ends exactly at the stacked card transforms to avoid a final snap. */
.shoe.is-action-shuffling .shoe-card:nth-child(odd) {
  animation: action-deck-riffle-left .56s cubic-bezier(.2,.72,.22,1) 1 !important;
}
.shoe.is-action-shuffling .shoe-card:nth-child(even) {
  animation: action-deck-riffle-right .56s cubic-bezier(.2,.72,.22,1) 1 !important;
}


/* ===== Round 91 — stronger music plate, native chains layer and seamless deck riffle ===== */
/* background2 remains three pixels left of the previous revision. */
.game-background-overlay {
  left: calc(50% + 10px) !important;
}

.current-music-label {
  box-sizing: border-box !important;
  width: max-content !important;
  min-width: min(640px, calc(100vw - 32px)) !important;
  max-width: min(76cqw, 1120px) !important;
  min-height: 28px !important;
  padding: 7px 42px 8px !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(239,204,128,.84) 15%, rgba(239,204,128,.84) 85%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(159,119,55,.78) 15%, rgba(159,119,55,.78) 85%, transparent 100%) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(10,9,8,.74) 10%, rgba(10,9,8,.97) 27%, rgba(10,9,8,.97) 73%, rgba(10,9,8,.74) 90%, transparent 100%) !important;
  -webkit-backdrop-filter: blur(7px) brightness(.78) !important;
  backdrop-filter: blur(7px) brightness(.78) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.42), 0 0 14px rgba(220,174,82,.12) !important;
}
.current-music-label.is-visible:not([hidden]) {
  opacity: 1 !important;
}
.current-music-note {
  color: #f3cb70 !important;
  -webkit-text-fill-color: #f3cb70 !important;
  text-shadow: 0 0 6px rgba(243,203,112,.88), 0 0 15px rgba(221,168,66,.48) !important;
}
@keyframes current-music-note-float {
  0%, 100% { translate: 0 1px; filter: brightness(1) drop-shadow(0 0 2px rgba(221,168,66,.28)); }
  50% { translate: 0 -2px; filter: brightness(1.28) drop-shadow(0 0 6px rgba(243,203,112,.65)); }
}

/* Spatially above the music plate, but in a lower global layer than both the
   top bar (z60) and the plate. The PNG keeps its native dimensions. */
.current-music-chains {
  position: absolute !important;
  left: 50% !important;
  top: calc(max(56px, 6.7cqh) + 14px) !important;
  z-index: 59 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -100%) !important;
  transform-origin: 50% 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.36));
  transition: opacity .4s ease, visibility 0s linear .4s !important;
}
.current-music-chains.is-visible:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .4s ease !important;
}

/* Animate independent translate/rotate properties instead of replacing the
   card's permanent stack transform. This removes the final correction frame. */
.shoe.is-action-shuffling .shoe-card:nth-child(odd) {
  animation: action-deck-riffle-left .56s cubic-bezier(.2,.72,.22,1) 1 !important;
}
.shoe.is-action-shuffling .shoe-card:nth-child(even) {
  animation: action-deck-riffle-right .56s cubic-bezier(.2,.72,.22,1) 1 !important;
}
@keyframes action-deck-riffle-left {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: -4px -2px; rotate: -2.5deg; }
  62% { translate: 2px 1px; rotate: 1.5deg; }
  84% { translate: -.35px -.15px; rotate: -.2deg; }
}
@keyframes action-deck-riffle-right {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 4px -2px; rotate: 2.5deg; }
  62% { translate: -2px 1px; rotate: -1.5deg; }
  84% { translate: .35px -.15px; rotate: .2deg; }
}


/* ===== Round 92 — visible music chains, mirrored notes, persistent deck cue and final backdrop scale ===== */
.game-background-overlay {
  max-width: 26.4cqw !important;
  max-height: 30.0cqh !important;
}

/* Keep the plate above the decorative chains while allowing long titles to
   expand naturally. */
.current-music-label {
  z-index: 262 !important;
}
.current-music-note-right {
  scale: -1 1;
}
.current-music-note-left,
.current-music-note-right {
  animation-delay: 0s !important;
}

/* chains2 is now a child of .topbar, so its bottom edge is anchored directly
   to the upper edge of the music plate instead of being positioned against
   the full game stage. */
.topbar {
  overflow: visible !important;
}
.current-music-chains {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 14px) !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -100%) !important;
  transform-origin: 50% 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.36));
  transition: opacity .4s ease, visibility 0s linear .4s !important;
}
.current-music-chains.is-visible:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .4s ease !important;
}

/* The deck keeps riffing until JavaScript reaches the end of the current
   560ms cycle immediately before the first real card leaves. */
.shoe.is-action-shuffling .shoe-card:nth-child(odd) {
  animation: action-deck-riffle-left .56s cubic-bezier(.2,.72,.22,1) infinite !important;
}
.shoe.is-action-shuffling .shoe-card:nth-child(even) {
  animation: action-deck-riffle-right .56s cubic-bezier(.2,.72,.22,1) infinite !important;
}

/* ===== Round 93 — smaller backdrop, turn-length Blackjack holds and earned-Gil popup ===== */
/* Reduce background2 slightly again without changing its current center/offset. */
.game-background-overlay {
  max-width: 25.7cqw !important;
  max-height: 29.2cqh !important;
}

/* Blackjack effects fire once, then remain in their completed illuminated
   state until JavaScript confirms that the corresponding turn has ended. */
.player-seat.is-celebrating .seat-circle-image {
  animation: blackjack-player-turn-hold 1.7s cubic-bezier(.18,.72,.2,1) 1 forwards !important;
}
@keyframes blackjack-player-turn-hold {
  0% {
    filter: brightness(1.05) saturate(1.04)
      drop-shadow(0 0 8px rgba(255,102,102,.18));
  }
  28% {
    filter: brightness(1.46) saturate(1.28) hue-rotate(115deg)
      drop-shadow(0 0 18px rgba(105,255,145,.46));
  }
  58% {
    filter: brightness(1.52) saturate(1.30) hue-rotate(235deg)
      drop-shadow(0 0 25px rgba(104,157,255,.48));
  }
  82% {
    filter: brightness(1.48) saturate(1.26) hue-rotate(330deg)
      drop-shadow(0 0 22px rgba(255,109,191,.42));
  }
  100% {
    filter: brightness(1.36) saturate(1.18) hue-rotate(0deg)
      drop-shadow(0 0 18px rgba(255,218,112,.42))
      drop-shadow(0 0 30px rgba(255,218,112,.18));
  }
}

.game-shell.is-dealer-blackjack .game-background-overlay {
  animation: blackjack-dealer-turn-hold 1.9s cubic-bezier(.18,.72,.2,1) 1 forwards !important;
}
@keyframes blackjack-dealer-turn-hold {
  0% {
    opacity: .9;
    filter: brightness(1.18) saturate(1.05)
      drop-shadow(0 0 8px rgba(255,225,135,.13));
  }
  28% {
    opacity: 1;
    filter: brightness(1.82) saturate(1.30) hue-rotate(115deg)
      drop-shadow(0 0 24px rgba(104,255,145,.40));
  }
  58% {
    opacity: 1;
    filter: brightness(1.90) saturate(1.34) hue-rotate(235deg)
      drop-shadow(0 0 32px rgba(104,157,255,.42));
  }
  82% {
    opacity: 1;
    filter: brightness(1.82) saturate(1.28) hue-rotate(330deg)
      drop-shadow(0 0 28px rgba(255,109,191,.36));
  }
  100% {
    opacity: 1;
    filter: brightness(1.58) saturate(1.18) hue-rotate(0deg)
      drop-shadow(0 0 24px rgba(255,218,112,.34));
  }
}

.round-result-summary.is-win .round-result-summary-bank-value {
  position: relative;
  text-shadow: 0 0 8px rgba(245,217,129,.22);
}
.round-result-summary.is-win.is-visible .round-result-summary-bank-value img {
  animation: round-result-gil-target-glow 1.3s ease-in-out 1 both;
}
@keyframes round-result-gil-target-glow {
  0% { filter: brightness(1) drop-shadow(0 0 4px rgba(241,193,81,.24)); }
  58% { filter: brightness(1.42) drop-shadow(0 0 13px rgba(255,219,103,.72)); }
  100% { filter: brightness(1.12) drop-shadow(0 0 7px rgba(241,193,81,.38)); }
}

.round-result-gil-flight-layer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
}
.round-result-gil-flight {
  position: fixed;
  display: block;
  object-fit: contain;
  pointer-events: none;
  will-change: transform, opacity, filter;
}


/* ===== Round 94 — full Blackjack/Charlie VFX, smaller background2 ===== */
/* Reduce background2 once more without changing its current center offset. */
.game-background-overlay {
  max-width: 24.9cqw !important;
  max-height: 28.4cqh !important;
}

/* Blackjack and Charlie share the complete special-result treatment. The
   animation runs once and the completed illuminated state is retained until
   JavaScript confirms that the actor's turn has really ended. Filters and
   shadows follow bgc.png's alpha instead of painting its transparent box. */
.game-shell.is-special-celebration .round-result-background-effect {
  --round-result-color-filter: brightness(0) saturate(100%) invert(84%) sepia(38%) saturate(1180%) hue-rotate(57deg) brightness(111%) contrast(104%);
  --round-result-glow: rgba(126,255,151,.84);
  opacity: .92 !important;
  visibility: visible !important;
  transition: opacity .42s ease, visibility 0s linear 0s !important;
  animation: special-result-bgc-turn-hold 1.85s cubic-bezier(.18,.72,.2,1) 1 forwards !important;
}
@keyframes special-result-bgc-turn-hold {
  0% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 4px rgba(126,255,151,.20));
  }
  32% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 13px rgba(126,255,151,.66))
      drop-shadow(0 0 27px rgba(126,255,151,.34));
  }
  68% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 18px rgba(126,255,151,.80))
      drop-shadow(0 0 42px rgba(126,255,151,.48));
  }
  100% {
    filter: var(--round-result-color-filter)
      drop-shadow(0 0 14px rgba(126,255,151,.70))
      drop-shadow(0 0 32px rgba(126,255,151,.38));
  }
}

/* Keep the circleslot's completed glow visible for both Blackjack and Charlie
   until the same persistent class is removed at the real turn transition. */
.player-seat.is-celebrating .seat-circle-image {
  opacity: 1 !important;
  visibility: visible !important;
  animation: blackjack-player-turn-hold 1.7s cubic-bezier(.18,.72,.2,1) 1 forwards !important;
}


/* ===== Round 95 — choice-text cue and full-turn rainbow Blackjack/Charlie VFX ===== */
/* Reduce background2 slightly once more without changing its position. */
.game-background-overlay {
  max-width: 24.2cqw !important;
  max-height: 27.7cqh !important;
}

/* Confetti and audio still fire only once. These alpha-aware color cycles
   continue smoothly only while JavaScript keeps the actor's special-result
   class active, then stop immediately when that turn genuinely ends. */
.player-seat.is-celebrating .seat-circle-image {
  opacity: 1 !important;
  visibility: visible !important;
  animation: special-circle-full-spectrum 3.6s linear infinite !important;
  will-change: filter !important;
}
@keyframes special-circle-full-spectrum {
  0% {
    filter: brightness(1.50) saturate(1.85) hue-rotate(0deg)
      drop-shadow(0 0 13px rgba(255,72,72,.58))
      drop-shadow(0 0 27px rgba(255,72,72,.28));
  }
  16.666% {
    filter: brightness(1.56) saturate(1.92) hue-rotate(60deg)
      drop-shadow(0 0 14px rgba(255,218,76,.62))
      drop-shadow(0 0 29px rgba(255,218,76,.30));
  }
  33.333% {
    filter: brightness(1.52) saturate(1.90) hue-rotate(120deg)
      drop-shadow(0 0 14px rgba(87,255,123,.62))
      drop-shadow(0 0 29px rgba(87,255,123,.30));
  }
  50% {
    filter: brightness(1.54) saturate(1.92) hue-rotate(180deg)
      drop-shadow(0 0 14px rgba(74,236,255,.62))
      drop-shadow(0 0 29px rgba(74,236,255,.30));
  }
  66.666% {
    filter: brightness(1.53) saturate(1.92) hue-rotate(240deg)
      drop-shadow(0 0 14px rgba(89,132,255,.64))
      drop-shadow(0 0 30px rgba(89,132,255,.32));
  }
  83.333% {
    filter: brightness(1.54) saturate(1.94) hue-rotate(300deg)
      drop-shadow(0 0 14px rgba(240,83,255,.62))
      drop-shadow(0 0 29px rgba(240,83,255,.30));
  }
  100% {
    filter: brightness(1.50) saturate(1.85) hue-rotate(360deg)
      drop-shadow(0 0 13px rgba(255,72,72,.58))
      drop-shadow(0 0 27px rgba(255,72,72,.28));
  }
}

/* bgc.png is first colorized through its alpha, then hue-rotated through the
   complete color wheel. No rectangular background is painted. */
.game-shell.is-special-celebration .round-result-background-effect {
  opacity: .94 !important;
  visibility: visible !important;
  transition: opacity .42s ease, visibility 0s linear 0s !important;
  animation: special-bgc-full-spectrum 3.9s linear infinite !important;
  will-change: filter, opacity !important;
}
@keyframes special-bgc-full-spectrum {
  0% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(0deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 13px rgba(255,72,72,.70)) drop-shadow(0 0 34px rgba(255,72,72,.38));
  }
  16.666% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(60deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 14px rgba(255,218,76,.74)) drop-shadow(0 0 36px rgba(255,218,76,.40));
  }
  33.333% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(120deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 14px rgba(87,255,123,.74)) drop-shadow(0 0 36px rgba(87,255,123,.40));
  }
  50% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(180deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 14px rgba(74,236,255,.74)) drop-shadow(0 0 36px rgba(74,236,255,.40));
  }
  66.666% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(240deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 14px rgba(89,132,255,.76)) drop-shadow(0 0 37px rgba(89,132,255,.42));
  }
  83.333% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(300deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 14px rgba(240,83,255,.74)) drop-shadow(0 0 36px rgba(240,83,255,.40));
  }
  100% {
    filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3400%) hue-rotate(360deg) brightness(112%) contrast(108%)
      drop-shadow(0 0 13px rgba(255,72,72,.70)) drop-shadow(0 0 34px rgba(255,72,72,.38));
  }
}

/* Dealer Blackjack/Charlie uses the same full spectrum on background2 and is
   retained until payout/results/waiting, not until a transient feed message. */
.game-shell.is-dealer-blackjack .game-background-overlay {
  opacity: 1 !important;
  animation: special-dealer-full-spectrum 3.8s linear infinite !important;
  will-change: filter, opacity !important;
}
@keyframes special-dealer-full-spectrum {
  0% { filter: brightness(1.82) saturate(1.65) hue-rotate(0deg) drop-shadow(0 0 26px rgba(255,72,72,.48)); }
  16.666% { filter: brightness(1.88) saturate(1.70) hue-rotate(60deg) drop-shadow(0 0 28px rgba(255,218,76,.50)); }
  33.333% { filter: brightness(1.84) saturate(1.68) hue-rotate(120deg) drop-shadow(0 0 28px rgba(87,255,123,.50)); }
  50% { filter: brightness(1.86) saturate(1.70) hue-rotate(180deg) drop-shadow(0 0 28px rgba(74,236,255,.50)); }
  66.666% { filter: brightness(1.85) saturate(1.70) hue-rotate(240deg) drop-shadow(0 0 29px rgba(89,132,255,.52)); }
  83.333% { filter: brightness(1.86) saturate(1.72) hue-rotate(300deg) drop-shadow(0 0 28px rgba(240,83,255,.50)); }
  100% { filter: brightness(1.82) saturate(1.65) hue-rotate(360deg) drop-shadow(0 0 26px rgba(255,72,72,.48)); }
}


/* ===== Round 96 — smaller background2 and expanded Blackjack/Charlie confetti ===== */
.game-background-overlay {
  max-width: 23.5cqw !important;
  max-height: 27cqh !important;
}

/* Keep the larger burst crisp while the particles travel farther. */
.confetti-piece {
  width: 10px;
  height: 14px;
  will-change: transform, opacity;
}


/* ===== Round 97 — corrected Bust/Double audio split and smaller background2 ===== */
.game-background-overlay {
  top: 165px !important;
  max-width: 22.8cqw !important;
  max-height: 26.2cqh !important;
}

/* ===== Round 98 — Double impact VFX, VIP badges and final layout refinements ===== */
/* Reduce background2 slightly once more while preserving its current center. */
.game-background-overlay {
  max-width: 22.1cqw !important;
  max-height: 25.5cqh !important;
}

/* VIP identity is sourced from vip_tier_name. The same badge is visible in
   every player slot and beside the authorized player's top-bar name. */
.player-seat .seat-name {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.player-seat .seat-name-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-vip-badge {
  display: block;
  flex: 0 0 auto;
  width: clamp(16px, .92cqw, 24px);
  height: clamp(16px, .92cqw, 24px);
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,210,91,.48));
  pointer-events: none;
}
.player-seat.is-vip-player .seat-plaque {
  overflow: visible !important;
}
.account-user {
  display: flex !important;
  align-items: center !important;
}
.account-vip-badge {
  display: block;
  flex: 0 0 auto;
  width: clamp(20px, 1.12cqw, 29px);
  height: clamp(20px, 1.12cqw, 29px);
  margin-right: 6px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255,210,91,.52));
  pointer-events: none;
}

/* The My Carrd art keeps its complete transparent edges instead of being
   cropped by the nominal button box. Other top-bar buttons are untouched. */
.topbar-carrd-button {
  overflow: visible !important;
}
.topbar-carrd-button .topbar-dj-art {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: calc(100% + 8px) !important;
  height: 47px !important;
  max-width: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  clip-path: none !important;
}

/* Double Down impact. This layer belongs to each seat, so every connected
   viewer sees the effect on the player who actually selected Double. */
.player-seat > .seat-hands-wrap {
  overflow: visible !important;
}
.seat-double-vfx-label {
  position: absolute;
  z-index: 47;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  color: var(--double-vfx-color, #4791E8);
  -webkit-text-fill-color: var(--double-vfx-color, #4791E8);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 1.18cqw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgba(4,11,22,.72);
  text-shadow:
    0 2px 2px rgba(0,0,0,.72),
    0 0 7px var(--double-vfx-color, #4791E8),
    0 0 16px var(--double-vfx-color, #4791E8),
    0 0 30px color-mix(in srgb, var(--double-vfx-color, #4791E8) 55%, transparent);
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.double-card-outline-layer {
  position: absolute;
  inset: 0;
  z-index: 43;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
}
.double-card-outline {
  position: absolute;
  display: block;
  overflow: visible;
  pointer-events: none;
  will-change: opacity, filter;
}
.player-seat.is-double-choice-vfx .playing-card,
.player-seat.is-double-choice-vfx .hidden-card {
  /* Do not move, scale or reorder the real cards. The SVG outline is a
     separate alpha-safe layer and therefore cannot fight their z-index. */
  z-index: inherit !important;
}

/* ===== Round 99 — card-bound Double outlines, restored Carrd geometry ===== */
/* Reduce background2 again without changing its current position. */
.game-background-overlay {
  max-width: 19.1cqw !important;
  max-height: 22.1cqh !important;
}

/* Keep the original button and artwork dimensions/spacing. The clipping was
   caused by the button's inherited clip-path/paint containment, not its size. */
.topbar-links {
  gap: 8px !important;
  overflow: visible !important;
}
.topbar-carrd-button {
  width: 118px !important;
  min-width: 118px !important;
  height: 43px !important;
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
}
.topbar-carrd-button .topbar-dj-art {
  position: absolute !important;
  inset: 0 !important;
  width: 118px !important;
  height: 43px !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: fill !important;
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
  image-rendering: auto !important;
}

/* Make the Double multiplier clearly larger than the BUSTED label. */
.seat-double-vfx-label {
  font-size: clamp(48px, 1.85cqw, 76px) !important;
  z-index: 48 !important;
}

/* Each hand owns its own non-stacking outline layer. The child SVG receives
   the exact z-index and live transform of its source card, so outlines follow
   levitation/hover and remain underneath every card that is visually in front. */
.player-seat.is-double-choice-vfx .hand-cards {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.double-card-outline-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
  contain: none !important;
}
.double-card-outline {
  position: absolute !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  will-change: transform, translate, opacity !important;
  transform-box: border-box;
}
.player-seat.is-double-choice-vfx .hand-cards > .playing-card,
.player-seat.is-double-choice-vfx .hand-cards > .hidden-card {
  z-index: var(--player-card-layer, 1) !important;
}


/* ===== Round 102 — alpha-bound Double contour and synchronized cleanup ===== */
.game-background-overlay {
  max-width: 18cqw !important;
  max-height: 20.8cqh !important;
}
.double-card-outline-layer,
.double-card-outline {
  display: none !important;
}
@property --double-card-outline-alpha {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
/* The contour is part of the real image filter instead of a rectangular box.
   It therefore follows the card's transform/translate automatically and keeps
   exactly the same stacking order during levitation and hover. */
.player-seat.is-double-choice-vfx .hand-cards > .playing-card.is-double-card-vfx,
.player-seat.is-double-choice-vfx .hand-cards > .hidden-card.is-double-card-vfx,
.player-seat.is-double-choice-vfx .hand-cards > .playing-card.is-double-card-vfx:hover,
.player-seat.is-double-choice-vfx .hand-cards > .hidden-card.is-double-card-vfx:hover {
  box-shadow: none !important;
  filter:
    brightness(1.025)
    drop-shadow(1px 0 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(-1px 0 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 1px 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 -1px 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 0 15px color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent)) !important;
}


/* ===== Round 103 — round-scoped Double VFX, hover-safe contour, sharper VIP art ===== */
/* Reduce background2 once more without changing its current center/offset. */
.game-background-overlay {
  max-width: 16.9cqw !important;
  max-height: 19.5cqh !important;
}

/* One ID in the selector intentionally outranks the older high-specificity
   hover rules that set filter:none. The contour therefore remains attached to
   the real card while hover pauses/lifts it. */
#game-stage .player-seat.is-double-choice-vfx .hand-cards > .playing-card.is-double-card-vfx,
#game-stage .player-seat.is-double-choice-vfx .hand-cards > .hidden-card.is-double-card-vfx,
#game-stage .player-seat.is-double-choice-vfx .hand-cards > .playing-card.is-double-card-vfx:hover,
#game-stage .player-seat.is-double-choice-vfx .hand-cards > .hidden-card.is-double-card-vfx:hover {
  box-shadow: none !important;
  filter:
    brightness(1.025)
    drop-shadow(1px 0 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(-1px 0 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 1px 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 -1px 0 color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent))
    drop-shadow(0 0 15px color-mix(in srgb, var(--double-card-vfx-color, #4791E8) var(--double-card-outline-alpha), transparent)) !important;
}

/* Avoid fractional cqw raster sizes for the VIP artwork. Integer CSS-pixel
   dimensions and browser contrast interpolation keep the source PNG sharper. */
.seat-vip-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: contrast(1.06) saturate(1.04) drop-shadow(0 0 4px rgba(255,210,91,.48)) !important;
}
.account-vip-badge {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: contrast(1.06) saturate(1.04) drop-shadow(0 0 5px rgba(255,210,91,.52)) !important;
}


/* ===== Round 104 — smooth x2 float, visibly smaller background2, natural VIP rendering ===== */
/* Make the requested reduction unmistakable while preserving the current center and offset. */
.game-background-overlay {
  max-width: 15.2cqw !important;
  max-height: 17.5cqh !important;
}

/* The impact stays on the outer node. A dedicated inner node owns the idle
   levitation, so the two transforms never overwrite one another. The label's
   base position is only recalculated when the card count changes. */
.seat-double-vfx-label {
  transition: left .38s cubic-bezier(.2,.74,.22,1), top .38s cubic-bezier(.2,.74,.22,1) !important;
}
.seat-double-vfx-label-text {
  display: block;
  transform: translate3d(0, 0, 0);
  animation: double-x2-smooth-float 3.6s cubic-bezier(.42,0,.58,1) 720ms infinite both;
  will-change: transform;
}
@keyframes double-x2-smooth-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(0, -2.35px, 0); }
  50% { transform: translate3d(0, -5.2px, 0); }
  76% { transform: translate3d(0, -1.65px, 0); }
}

/* Preserve the PNG's intrinsic aspect ratio and normal browser interpolation.
   The previous forced square raster size and contrast filter made the artwork
   unreadable, especially when the source contains transparent padding. */
.seat-vip-badge {
  width: auto !important;
  height: clamp(18px, .98cqw, 25px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 34px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: drop-shadow(0 0 4px rgba(255,210,91,.42)) !important;
}
.account-vip-badge {
  width: auto !important;
  height: clamp(22px, 1.12cqw, 29px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 40px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: drop-shadow(0 0 5px rgba(255,210,91,.46)) !important;
}


/* ===== Round 105 — exact card float for x2, effective background2 sizing, restored VIP geometry ===== */
/* background2.png is only 140px wide, so max-width rules larger than its
   intrinsic size never changed the rendered result. Use an explicit width so
   this reduction is visible and deterministic. */
.game-background-overlay {
  width: 114px !important;
  height: auto !important;
  max-width: 114px !important;
  max-height: none !important;
}

/* Reuse the exact same animation, duration and easing used by the player's
   cards. This avoids a separate keyframe curve that could appear to pause. */
.seat-double-vfx-label-text {
  animation-name: self-card-levitate !important;
  animation-duration: 4.9s !important;
  animation-timing-function: ease-in-out !important;
  animation-delay: 720ms !important;
  animation-iteration-count: infinite !important;
  animation-direction: normal !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
  will-change: transform !important;
}

/* Restore the original badge dimensions exactly. Only remove raster-affecting
   filters/transforms so the source PNG is sampled normally at the same size. */
.seat-vip-badge {
  width: clamp(16px, .92cqw, 24px) !important;
  height: clamp(16px, .92cqw, 24px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
.account-vip-badge {
  width: clamp(20px, 1.12cqw, 29px) !important;
  height: clamp(20px, 1.12cqw, 29px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* ===== Round 106 — final background2 offset and larger Double multiplier ===== */
.game-background-overlay {
  left: calc(50% + 8px) !important;
  top: 167px !important;
  width: 125px !important;
  height: 21.7143px !important;
  max-width: 125px !important;
  max-height: 21.7143px !important;
  transform: translateX(-50%) !important;
  transform-origin: center center !important;
  object-fit: fill !important;
}
.seat-double-vfx-label {
  font-size: clamp(54px, 2.05cqw, 84px) !important;
}

/* ===== Round 107 — slow golden dealer-turn illumination ===== */
/* Keep the current background2 geometry untouched. Only its alpha-aware
   illumination changes, so the glow follows the artwork instead of its box. */
.game-background-overlay {
  filter: brightness(1.18) saturate(1.04)
    drop-shadow(0 0 8px rgba(255,225,135,.10)) !important;
  transition: filter 1.8s cubic-bezier(.4,0,.2,1) !important;
  will-change: filter !important;
}
.game-shell.is-dealer-turn-active:not(.is-dealer-blackjack) .game-background-overlay,
.game-shell:not(.is-dealer-blackjack) .game-stage.is-dealer-turn-active ~ .game-background-overlay {
  animation: dealer-background2-golden-breathe-r107 7.2s cubic-bezier(.45,0,.55,1) infinite both !important;
}
@keyframes dealer-background2-golden-breathe-r107 {
  0% {
    filter: brightness(1.18) saturate(1.04)
      drop-shadow(0 0 8px rgba(255,225,135,.10))
      drop-shadow(0 0 18px rgba(255,204,82,0));
  }
  18% {
    filter: brightness(1.30) saturate(1.08)
      drop-shadow(0 0 8px rgba(255,228,148,.48))
      drop-shadow(0 0 20px rgba(255,202,72,.24));
  }
  50% {
    filter: brightness(1.62) saturate(1.16)
      drop-shadow(0 0 7px rgba(255,239,180,.94))
      drop-shadow(0 0 19px rgba(255,207,87,.68))
      drop-shadow(0 0 38px rgba(255,184,43,.38));
  }
  82% {
    filter: brightness(1.30) saturate(1.08)
      drop-shadow(0 0 8px rgba(255,228,148,.48))
      drop-shadow(0 0 20px rgba(255,202,72,.24));
  }
  100% {
    filter: brightness(1.18) saturate(1.04)
      drop-shadow(0 0 8px rgba(255,225,135,.10))
      drop-shadow(0 0 18px rgba(255,204,82,0));
  }
}

/* ===== Round 108 — independent dealer-turn glow layer ===== */
/* A separate alpha-aware copy of background2 is painted behind the real art.
   This prevents older filter/animation rules on the image from cancelling the
   glow and keeps the current background2 position and dimensions untouched. */
.game-shell::before {
  content: '';
  position: absolute;
  left: calc(50% + 8px);
  top: 167px;
  width: 125px;
  height: 21.7143px;
  z-index: 0;
  pointer-events: none;
  background: url('./assets/background2.png') center / 100% 100% no-repeat;
  opacity: 0;
  transform: translateX(-50%) scale(1.08, 1.42);
  transform-origin: center center;
  filter:
    blur(5px)
    brightness(1.75)
    saturate(1.45)
    sepia(.48)
    drop-shadow(0 0 10px rgba(255, 230, 150, .72))
    drop-shadow(0 0 24px rgba(255, 190, 55, .48));
  mix-blend-mode: screen;
  transition: opacity 2.1s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform, filter;
}

.game-shell.is-dealer-turn-active::before {
  opacity: .92;
  animation: dealer-background2-independent-golden-breathe-r108 7.4s ease-in-out infinite;
}

@keyframes dealer-background2-independent-golden-breathe-r108 {
  0%, 100% {
    transform: translateX(-50%) scale(1.08, 1.42);
    filter:
      blur(5px)
      brightness(1.65)
      saturate(1.38)
      sepia(.42)
      drop-shadow(0 0 8px rgba(255, 232, 165, .60))
      drop-shadow(0 0 20px rgba(255, 190, 55, .34));
  }
  50% {
    transform: translateX(-50%) scale(1.18, 1.76);
    filter:
      blur(7px)
      brightness(2.35)
      saturate(1.68)
      sepia(.62)
      drop-shadow(0 0 13px rgba(255, 244, 198, .96))
      drop-shadow(0 0 34px rgba(255, 195, 55, .76))
      drop-shadow(0 0 52px rgba(255, 164, 20, .42));
  }
}

/* The independent layer owns the normal dealer glow. Preserve the existing
   special Dealer Blackjack animation on the real artwork. */
.game-shell.is-dealer-turn-active:not(.is-dealer-blackjack) .game-background-overlay {
  animation: none !important;
}


/* ===== Round 109 — visible dealer glow layer between both background images ===== */
/* Round 108 used game-shell::before. That pseudo-element was painted before
   background.png at the same stacking level, so the main background covered it.
   The real DOM layer below is inserted after background.png and before
   background2.png, making the golden illumination actually visible. */
.game-shell::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.dealer-background-glow-layer {
  position: absolute !important;
  z-index: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 0;
  transition: opacity 2.15s cubic-bezier(.4, 0, .2, 1) !important;
  will-change: opacity;
}

.dealer-background-glow-layer.is-active {
  opacity: .90;
}

.dealer-background-glow-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  opacity: .70;
  transform: scale(1.03, 1.12);
  transform-origin: center center;
  filter:
    blur(3px)
    brightness(1.42)
    saturate(1.22)
    sepia(.34)
    drop-shadow(0 0 6px rgba(255, 235, 170, .52))
    drop-shadow(0 0 14px rgba(255, 195, 62, .34))
    drop-shadow(0 0 22px rgba(255, 164, 22, .18));
  mix-blend-mode: screen;
  animation: dealer-background2-real-layer-breathe-r109 7.6s ease-in-out infinite both;
  animation-play-state: paused;
  will-change: transform, filter, opacity;
}

.dealer-background-glow-layer.is-active .dealer-background-glow-image {
  animation-play-state: running;
}

@keyframes dealer-background2-real-layer-breathe-r109 {
  0%, 100% {
    opacity: .36;
    transform: scale(1.00, 1.06);
    filter:
      blur(2.5px)
      brightness(1.17)
      saturate(1.08)
      sepia(.24)
      drop-shadow(0 0 5px rgba(255, 235, 174, .32))
      drop-shadow(0 0 11px rgba(255, 193, 60, .16));
  }
  50% {
    opacity: .76;
    transform: scale(1.08, 1.18);
    filter:
      blur(4.5px)
      brightness(1.62)
      saturate(1.24)
      sepia(.38)
      drop-shadow(0 0 9px rgba(255, 247, 211, .56))
      drop-shadow(0 0 21px rgba(255, 202, 70, .36))
      drop-shadow(0 0 31px rgba(255, 158, 18, .20));
  }
}

/* The real artwork keeps its current dimensions, position and dealer-blackjack
   behavior. Normal dealer illumination is provided only by the new layer. */
.game-shell.is-dealer-turn-active:not(.is-dealer-blackjack) .game-background-overlay {
  animation: none !important;
}


.game-shell.is-dealer-busted .dealer-background-glow-layer.is-active .dealer-background-glow-image {
  animation-name: dealer-background2-real-layer-breathe-busted-r110 !important;
}

@keyframes dealer-background2-real-layer-breathe-busted-r110 {
  0%, 100% {
    opacity: .38;
    transform: scale(1.00, 1.06);
    filter:
      blur(2.5px)
      brightness(1.13)
      saturate(1.08)
      sepia(.06)
      hue-rotate(-22deg)
      drop-shadow(0 0 5px rgba(255, 180, 180, .28))
      drop-shadow(0 0 11px rgba(255, 84, 84, .17));
  }
  50% {
    opacity: .78;
    transform: scale(1.08, 1.18);
    filter:
      blur(4.5px)
      brightness(1.58)
      saturate(1.24)
      sepia(.10)
      hue-rotate(-28deg)
      drop-shadow(0 0 9px rgba(255, 210, 210, .50))
      drop-shadow(0 0 21px rgba(255, 88, 88, .38))
      drop-shadow(0 0 31px rgba(255, 50, 50, .21));
  }
}


/* ===== Customize shop, persistent slot colors and refined dealer glow ===== */
.slot-color-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The recolor is applied to the circle wrapper, so every existing child
   animation, glow layer and transform keeps running unchanged underneath it. */
.slot-tone-orange { filter: url(#slot-color-orange); }
.slot-tone-pink { filter: url(#slot-color-pink); }
.slot-tone-cyan { filter: url(#slot-color-cyan); }
.slot-tone-aqua { filter: url(#slot-color-aqua); }
.slot-tone-wine { filter: url(#slot-color-wine); }
.slot-tone-beige { filter: url(#slot-color-beige); }
.slot-tone-brown { filter: url(#slot-color-brown); }
.player-seat.is-celebrating .seat-circle-backdrop[class*="slot-tone-"] {
  filter: none !important;
}

.topbar-customize-button {
  width: 112px !important;
  min-width: 112px !important;
  height: 43px !important;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit;
}
.topbar-customize-button .topbar-dj-art {
  width: 112px !important;
  height: 43px !important;
  object-fit: fill !important;
}
.topbar-customize-button .topbar-dj-label {
  font-size: 14px !important;
  letter-spacing: .025em !important;
  white-space: nowrap;
}
.topbar-customize-button:disabled,
.topbar-customize-button.is-disabled {
  opacity: .42 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.customize-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 3, 2, .35);
  -webkit-backdrop-filter: blur(4px) brightness(.83);
  backdrop-filter: blur(4px) brightness(.83);
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility 0s linear 0s;
}
.customize-modal-overlay.hidden {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.customize-modal-card {
  width: min(850px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 38px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border: 1px solid rgba(226, 179, 82, .42);
  background:
    radial-gradient(circle at 50% 0, rgba(173, 119, 39, .17), transparent 42%),
    linear-gradient(180deg, rgba(31, 21, 12, .985), rgba(10, 7, 5, .99));
  box-shadow: 0 25px 70px rgba(0,0,0,.72), inset 0 0 34px rgba(194,132,43,.08);
  transform: translateY(0) scale(1);
  transition: transform .34s cubic-bezier(.18,.8,.22,1);
}
.customize-modal-overlay.hidden .customize-modal-card {
  transform: translateY(16px) scale(.975);
}
.customize-modal-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(232,185,90,.16);
}
.customize-modal-header > div { text-align: center; }
.customize-modal-kicker {
  display: block;
  color: rgba(227,194,126,.62);
  font: 600 10px/1.2 Arial, sans-serif;
  letter-spacing: .18em;
}
.customize-modal-header h2 {
  margin: 4px 0 0;
  color: #ffe6a4;
  font-size: clamp(24px, 1.55cqw, 34px);
  font-weight: 500;
  text-shadow: 0 0 15px rgba(240,190,78,.24);
}
.customize-back-button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(230,185,91,.34);
  border-radius: 50%;
  background: rgba(18,12,7,.72);
  color: #f4d892;
  font-size: 30px;
  line-height: 28px;
  cursor: pointer;
}
.customize-back-button:hover { filter: brightness(1.25); }
.customize-modal-close { position: static !important; justify-self: end; }
.customize-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 45px;
  color: #ab9a79;
  font: 12px Arial, sans-serif;
}
.customize-balance strong {
  color: #f5d78b;
  font-size: 16px;
}
.customize-modal-content {
  overflow: auto;
  min-height: 260px;
  padding: 8px 5px 4px;
  scrollbar-width: thin;
  scrollbar-color: #785521 transparent;
}
.customize-category-grid {
  min-height: 300px;
  display: grid;
  place-items: center;
}
.customize-category-card,
.customize-item-card {
  border: 1px solid rgba(226,177,77,.25);
  background: linear-gradient(180deg, rgba(46,31,16,.90), rgba(17,11,7,.94));
  color: #ead9b1;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(220,160,54,.035), 0 9px 24px rgba(0,0,0,.28);
  transition: transform .2s ease, border-color .2s ease, filter .2s ease, box-shadow .2s ease;
}
.customize-category-card:hover,
.customize-item-card:not(:disabled):hover {
  transform: translateY(-3px);
  border-color: rgba(244,203,112,.62);
  filter: brightness(1.12);
  box-shadow: inset 0 0 22px rgba(220,160,54,.07), 0 13px 30px rgba(0,0,0,.38);
}
.customize-category-card {
  width: min(330px, 82vw);
  min-height: 220px;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 22px;
}
.customize-category-preview {
  width: 230px;
  max-width: 90%;
}
.customize-category-preview img,
.customize-item-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.customize-category-card strong { color: #ffe5a0; font-size: 25px; font-weight: 500; }
.customize-category-card > span:last-child { color: #a99a7d; font: 12px/1.4 Arial, sans-serif; }
.customize-slot-toolbar { text-align: center; color: #a99a7d; font: 12px/1.5 Arial, sans-serif; }
.customize-slot-toolbar p { margin: 0 0 13px; }
.customize-items-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 13px;
}
.customize-item-card {
  position: relative;
  min-height: 165px;
  border-radius: 13px;
  display: grid;
  grid-template-rows: 78px auto 20px;
  place-items: center;
  gap: 6px;
  padding: 14px 11px 12px;
}
.customize-item-card:disabled { cursor: default; }
.customize-item-card.is-active {
  border-color: rgba(105,224,167,.82);
  box-shadow: inset 0 0 24px rgba(60,203,139,.10), 0 0 22px rgba(60,203,139,.14);
}
.customize-item-card.is-busy { opacity: .58; }
.customize-item-preview { width: 125px; max-width: 96%; }
.customize-item-card strong { color: #f4dfae; font-size: 16px; font-weight: 500; }
.customize-item-state { color: #d9b968; font: 700 10px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.customize-item-card.is-owned .customize-item-state { color: #75d5a9; }
.customize-item-card.is-active .customize-item-state { color: #8bf0bc; }
.customize-color-swatch {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--customize-swatch);
  box-shadow: 0 0 7px var(--customize-swatch), 0 0 0 1px rgba(255,255,255,.28);
}

/* The dealer illumination spends most of each cycle near its bright state and
   never approaches zero opacity. Both gold and busted-red variants share it. */
.dealer-background-glow-layer.is-active { opacity: .88 !important; }
@keyframes dealer-background2-real-layer-breathe-r109 {
  0%, 100% {
    opacity: .58;
    transform: scale(1.00, 1.06);
    filter: blur(2.5px) brightness(1.18) saturate(1.10) sepia(.26)
      drop-shadow(0 0 5px rgba(255,235,174,.31)) drop-shadow(0 0 10px rgba(255,193,60,.16));
  }
  18% {
    opacity: .82;
    transform: scale(1.04, 1.12);
    filter: blur(3.4px) brightness(1.48) saturate(1.20) sepia(.34)
      drop-shadow(0 0 7px rgba(255,241,198,.45)) drop-shadow(0 0 15px rgba(255,198,66,.27));
  }
  42%, 72% {
    opacity: .93;
    transform: scale(1.07, 1.17);
    filter: blur(4px) brightness(1.68) saturate(1.28) sepia(.40)
      drop-shadow(0 0 8px rgba(255,247,211,.55)) drop-shadow(0 0 18px rgba(255,202,70,.34)) drop-shadow(0 0 25px rgba(255,158,18,.17));
  }
  88% {
    opacity: .76;
    transform: scale(1.03, 1.10);
    filter: blur(3.1px) brightness(1.38) saturate(1.17) sepia(.31)
      drop-shadow(0 0 6px rgba(255,239,188,.40)) drop-shadow(0 0 13px rgba(255,195,62,.22));
  }
}
@keyframes dealer-background2-real-layer-breathe-busted-r110 {
  0%, 100% {
    opacity: .58;
    transform: scale(1.00, 1.06);
    filter: blur(2.5px) brightness(1.16) saturate(1.10) sepia(.06) hue-rotate(-24deg)
      drop-shadow(0 0 5px rgba(255,180,180,.29)) drop-shadow(0 0 10px rgba(255,84,84,.17));
  }
  18% {
    opacity: .82;
    transform: scale(1.04, 1.12);
    filter: blur(3.4px) brightness(1.43) saturate(1.20) sepia(.08) hue-rotate(-26deg)
      drop-shadow(0 0 7px rgba(255,204,204,.43)) drop-shadow(0 0 15px rgba(255,84,84,.29));
  }
  42%, 72% {
    opacity: .93;
    transform: scale(1.07, 1.17);
    filter: blur(4px) brightness(1.63) saturate(1.29) sepia(.10) hue-rotate(-28deg)
      drop-shadow(0 0 8px rgba(255,220,220,.54)) drop-shadow(0 0 18px rgba(255,88,88,.36)) drop-shadow(0 0 25px rgba(255,50,50,.18));
  }
  88% {
    opacity: .76;
    transform: scale(1.03, 1.10);
    filter: blur(3.1px) brightness(1.34) saturate(1.17) sepia(.07) hue-rotate(-25deg)
      drop-shadow(0 0 6px rgba(255,194,194,.38)) drop-shadow(0 0 13px rgba(255,80,80,.23));
  }
}

@media (max-width: 900px) {
  .customize-items-grid { grid-template-columns: repeat(2, minmax(135px, 1fr)); }
  .topbar-customize-button { width: 100px !important; min-width: 100px !important; }
  .topbar-customize-button .topbar-dj-art { width: 100px !important; }
}

/* ===== Shop refinement and persistent nameplate backgrounds ===== */
.customize-modal-header {
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
}
.customize-modal-heading {
  min-width: 0;
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 15px;
  text-align: center !important;
  white-space: nowrap;
}
.customize-modal-heading h2 {
  flex: 0 0 auto;
  margin: 0 !important;
}
.customize-modal-heading .customize-modal-kicker {
  display: inline-block !important;
  min-width: 0;
  color: rgba(227, 194, 126, .72);
  font: 600 clamp(9px, .58cqw, 12px)/1.2 Arial, sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
  text-transform: none;
}

.customize-category-grid {
  min-height: 245px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 245px));
  place-content: center;
  place-items: stretch;
  gap: 16px;
}
.customize-category-card {
  width: 100% !important;
  min-height: 170px !important;
  border-radius: 14px !important;
  gap: 9px !important;
  padding: 15px 16px !important;
}
.customize-category-preview {
  width: 170px !important;
  max-width: 88% !important;
  height: 84px;
  display: grid;
  place-items: center;
}
.customize-nameplate-category .customize-category-preview {
  width: 205px !important;
  height: 66px;
}
.customize-category-card strong {
  font-size: 20px !important;
}
.customize-nameplate-category strong {
  font-size: 18px !important;
}

.customize-slot-toolbar h3 {
  margin: 1px 0 4px;
  color: #f8dda0;
  font-size: 20px;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(225, 176, 72, .18);
}
.customize-slot-toolbar p {
  margin: 0 0 13px !important;
}
.customize-item-state {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.customize-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #e7c977;
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .025em;
}
.customize-price img {
  display: block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(231, 190, 76, .35));
}
.customize-acquired-check {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 4;
  font-size: 27px;
  line-height: 1;
  opacity: .30;
  filter: grayscale(1) saturate(0) brightness(.78);
  transform: scale(.92);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
  pointer-events: none;
}
.customize-acquired-check.is-active {
  opacity: 1;
  filter: brightness(1.08) drop-shadow(0 0 5px rgba(91, 255, 164, .86)) drop-shadow(0 0 12px rgba(59, 224, 136, .55));
  transform: scale(1);
}
.customize-item-card.is-owned:not(.is-active) .customize-acquired-check {
  opacity: .34;
}
.customize-item-card.is-active .customize-acquired-check {
  animation: customize-active-check-glow 2.4s ease-in-out infinite;
}
@keyframes customize-active-check-glow {
  0%, 100% {
    filter: brightness(1.06) drop-shadow(0 0 4px rgba(91, 255, 164, .72)) drop-shadow(0 0 10px rgba(59, 224, 136, .44));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.22) drop-shadow(0 0 7px rgba(91, 255, 164, .96)) drop-shadow(0 0 17px rgba(59, 224, 136, .67));
    transform: scale(1.055);
  }
}

.customize-nameplate-option {
  grid-template-rows: 66px auto 20px !important;
  min-height: 154px !important;
}
.customize-nameplate-preview {
  width: 145px !important;
  max-width: 95% !important;
  height: 48px;
  display: grid;
  place-items: center;
}
.customize-nameplate-preview img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
.customize-default-nameplate-preview {
  border: 1px solid rgba(215, 173, 88, .52);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(28, 20, 11, .96), rgba(11, 8, 5, .95));
  box-shadow: inset 0 0 0 2px rgba(80, 52, 22, .40);
  color: #ead8ae;
  font: 700 10px Arial, sans-serif;
  letter-spacing: .08em;
}

/* The selected image replaces only the inner solid fill. The frame remains
   above it and all name/bank text remains on the existing z-index 2 layer. */
.player-seat > .seat-plaque.has-nameplate-background::before {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  border-radius: .6cqw !important;
}
.player-seat > .seat-plaque.nameplate-bg-winter::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/winterslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-florest::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/florestslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-cards::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/cardsslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-autumn::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/autumnslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-coffee-lover::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/coffeeloverslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-caffeine-enjoyer::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/caffeineenjoyerslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-console-user::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/consoleuserslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-bubbles::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/bubblesslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-soccer-fan::before {
  background: linear-gradient(rgba(5,4,3,.10), rgba(5,4,3,.18)), url("./assets/Soccerslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-red-carpet::before {
  background: linear-gradient(rgba(5,4,3,.08), rgba(5,4,3,.16)), url("./assets/redcarpetslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-golden::before {
  background: linear-gradient(rgba(5,4,3,.08), rgba(5,4,3,.16)), url("./assets/goldenslot.png") center / 100% 100% no-repeat !important;
}
.player-seat > .seat-plaque.nameplate-bg-royal-blue::before {
  background: linear-gradient(rgba(5,4,3,.08), rgba(5,4,3,.16)), url("./assets/royalblueslot.png") center / 100% 100% no-repeat !important;
}

@media (max-width: 760px) {
  .customize-modal-heading { gap: 7px; }
  .customize-modal-heading .customize-modal-kicker { font-size: 8px; letter-spacing: 0; }
  .customize-category-grid { grid-template-columns: minmax(0, 245px); }
}

/* ===== Shop header alignment, nameplate contrast and border customizations ===== */
.customize-modal-heading {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.customize-modal-heading h2 {
  width: 100%;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.05 !important;
}
.customize-modal-heading .customize-modal-kicker {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(9px, .58cqw, 12px) !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
}

/* The old in-content heading remains only as an invisible layout spacer so
   moving the title/description into the header does not shift the item grid. */
.customize-slot-toolbar.is-heading-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}

.customize-balance > span,
.customize-balance strong {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Three compact category cards without changing the modal dimensions. */
.customize-category-grid {
  grid-template-columns: repeat(3, minmax(0, 205px)) !important;
  gap: 12px !important;
}
.customize-category-card {
  min-height: 160px !important;
  padding: 13px 12px !important;
}
.customize-category-preview {
  width: 150px !important;
  height: 76px !important;
}
.customize-nameplate-category .customize-category-preview,
.customize-border-category .customize-category-preview {
  width: 170px !important;
  height: 60px !important;
}
.customize-border-category strong {
  font-size: 18px !important;
}

/* Acquired marker: visible when active, but with a softer and tighter glow. */
.customize-acquired-check.is-active {
  opacity: .96 !important;
  filter: brightness(1.03) drop-shadow(0 0 3px rgba(91,255,164,.56)) drop-shadow(0 0 7px rgba(59,224,136,.30)) !important;
}
.customize-item-card.is-active .customize-acquired-check {
  animation: customize-active-check-glow-soft 2.8s ease-in-out infinite !important;
}
@keyframes customize-active-check-glow-soft {
  0%, 100% {
    filter: brightness(1.02) drop-shadow(0 0 2px rgba(91,255,164,.45)) drop-shadow(0 0 6px rgba(59,224,136,.24));
    transform: scale(1);
  }
  50% {
    filter: brightness(1.10) drop-shadow(0 0 4px rgba(91,255,164,.66)) drop-shadow(0 0 9px rgba(59,224,136,.36));
    transform: scale(1.025);
  }
}

/* Background artwork stays behind the text/frame, with slightly reduced
   brightness. Text receives a black contour only while a custom background is active. */
.player-seat > .seat-plaque.has-nameplate-background::before {
  filter: brightness(.80) saturate(.94) !important;
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text,
.player-seat > .seat-plaque.has-nameplate-background .seat-meta,
.player-seat > .seat-plaque.has-nameplate-background .seat-meta span,
.player-seat > .seat-plaque.has-nameplate-background .seat-meta strong {
  paint-order: stroke fill !important;
  -webkit-text-stroke: .55px rgba(0,0,0,.96) !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.96),
     1px -1px 0 rgba(0,0,0,.96),
    -1px  1px 0 rgba(0,0,0,.96),
     1px  1px 0 rgba(0,0,0,.96),
     0 2px 3px rgba(0,0,0,.86) !important;
}

.customize-border-option {
  grid-template-rows: 66px auto 20px !important;
  min-height: 154px !important;
}
.customize-border-preview {
  width: 145px !important;
  max-width: 95% !important;
  height: 48px;
  display: grid;
  place-items: center;
}
.customize-border-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

/* Border customizations replace only the ::after frame layer. The selected
   background and every text element keep their independent layers. */
.player-seat > .seat-plaque.has-nameplate-border::after {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.player-seat > .seat-plaque.nameplate-border-royal-gold::after {
  background-image: url("./assets/royalborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-water::after {
  background-image: url("./assets/waterborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-winter::after {
  background-image: url("./assets/winterborder.png") !important;
}

@media (max-width: 760px) {
  .customize-modal-heading .customize-modal-kicker {
    font-size: 8px !important;
  }
  .customize-category-grid {
    grid-template-columns: minmax(0, 225px) !important;
  }
}


/* ===== Shop image-frame restoration ===== */
/* The modal uses a different artwork frame on the root shop and inside each
   section. The content remains inside the transparent center of each PNG. */
.customize-modal-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 34px 42px 38px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(173,119,39,.12), transparent 38%),
    linear-gradient(180deg, rgba(31,21,12,.985), rgba(10,7,5,.99)) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.68), inset 0 0 28px rgba(194,132,43,.06) !important;
}
.customize-modal-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -24px -30px -28px;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.customize-modal-overlay[data-shop-view="root"] .customize-modal-card::before {
  background-image: url("./assets/shopborder.png");
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::before {
  background-image: url("./assets/shopsectionsborder.png");
}
.customize-modal-card > * {
  position: relative;
  z-index: 2;
}
.customize-exterior-decor {
  display: none !important;
}

/* Keep every title and subtitle mathematically centered, even when the back
   button is hidden on the main Shop view. */
.customize-modal-header {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
}
.customize-back-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.customize-modal-heading,
.customize-modal-header > div {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
}
.customize-modal-close {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.customize-modal-heading h2,
.customize-modal-header h2 {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(24px, 1.55cqw, 34px) !important;
  line-height: 1.05 !important;
}
.customize-modal-heading .customize-modal-kicker,
.customize-modal-kicker {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: rgba(227,194,126,.72) !important;
  font: 600 clamp(9px, .58cqw, 12px)/1.2 Arial, sans-serif !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;
}

/* slotshopborder.png is the only frame used for category cards and all shop
   item cards. The content stays inside its transparent center. */
.customize-category-card,
.customize-item-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(37,25,13,.88), rgba(15,10,6,.94)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;
}
.customize-category-card::before,
.customize-item-card::before {
  content: "";
  position: absolute;
  z-index: 12;
  inset: -7px;
  pointer-events: none;
  background: url("./assets/slotshopborder.png") center / 100% 100% no-repeat;
}
/* Soft green light at the upper center of every slotshopborder frame. */
.customize-category-card::after,
.customize-item-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -2px;
  left: 50%;
  width: 54%;
  height: 30%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(30,187,132,.30), rgba(30,187,132,.12) 36%, transparent 72%);
  filter: blur(4px);
  opacity: .72;
}
.customize-category-card > *,
.customize-item-card > * {
  position: relative;
  z-index: 3;
}
.customize-category-card:hover,
.customize-item-card:not(:disabled):hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 11px 25px rgba(0,0,0,.34) !important;
}
.customize-item-card.is-active {
  box-shadow: inset 0 0 20px rgba(60,203,139,.08), 0 0 14px rgba(60,203,139,.10), 0 8px 20px rgba(0,0,0,.28) !important;
}

/* Keep preview artwork unboxed; slotshopborder.png frames the full card. */
.customize-category-preview,
.customize-item-preview {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: none !important;
}

/* Existing combination corrections and all expanded Nameplate Border items. */
.player-seat > .seat-plaque.has-nameplate-background.nameplate-border-royal-gold::before {
  inset: calc(.44cqh + 2px) .30cqw .44cqh !important;
}
.player-seat > .seat-plaque.has-nameplate-background.nameplate-border-water::before {
  inset: .44cqh calc(.30cqw + 2px) .44cqh !important;
}
.player-seat > .seat-plaque.nameplate-border-florest::after {
  background-image: url("./assets/florestborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-cards::after {
  background-image: url("./assets/cardsborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-autumn::after {
  background-image: url("./assets/autumnborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-coffee::after {
  background-image: url("./assets/coffeeborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-gaming::after {
  background-image: url("./assets/gamingborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-soccer-fan::after {
  background-image: url("./assets/soccerborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-hollywood::after {
  background-image: url("./assets/hollywoodborder.png") !important;
}
.player-seat > .seat-plaque.nameplate-border-royal-blue-fan::after {
  background-image: url("./assets/royalblueborder.png") !important;
}

@media (max-width: 900px) {
  .customize-modal-card {
    padding: 30px 30px 34px !important;
  }
  .customize-modal-card::before {
    inset: -18px -20px -22px;
  }
}


/* ===== Final shop border alignment + spacing + custom checkbox pass ===== */
.customize-modal-card {
  width: min(850px, calc(100vw - 36px)) !important;
  height: min(720px, calc(100vh - 38px)) !important;
  max-height: min(720px, calc(100vh - 38px)) !important;
  padding: 26px 34px 34px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.58) !important;
}
.customize-modal-card::before {
  inset: -22px -24px -24px !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}
.customize-modal-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 12px 15px 18px 15px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(181,127,46,.09), transparent 30%),
    linear-gradient(180deg, rgba(32,22,13,.985), rgba(11,8,5,.992));
}
.customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after {
  inset: 14px 18px 22px 18px;
  border-radius: 30px;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
  inset: 14px 18px 22px 18px;
  border-radius: 28px;
}
.customize-modal-card > * { z-index: 2 !important; }

.customize-modal-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 82px !important;
  padding: 8px 72px 16px !important;
  border-bottom: 1px solid rgba(232,185,90,.12) !important;
}
.customize-modal-heading,
.customize-modal-header > div {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
  white-space: normal !important;
}
.customize-modal-heading h2,
.customize-modal-header h2 {
  margin: 0 !important;
  width: 100% !important;
  font-size: clamp(18px, 1.15cqw, 27px) !important;
  line-height: 1.02 !important;
  text-align: center !important;
}
.customize-modal-heading .customize-modal-kicker,
.customize-modal-kicker {
  width: 100% !important;
  margin: 0 !important;
  color: rgba(227,194,126,.78) !important;
  font: 600 clamp(8px, .52cqw, 11px)/1.24 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-transform: none !important;
}
.customize-back-button,
.customize-modal-close {
  position: absolute !important;
  top: 14px !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.customize-back-button {
  left: 4px !important;
}
.customize-modal-close {
  right: 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #f6d890 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  isolation: isolate;
}
.customize-modal-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("./assets/close.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.customize-modal-close::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border-radius: 10px;
  background: rgba(35,24,12,.84);
  box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}
.customize-modal-close > *, .customize-modal-close { z-index: 2; }
.customize-modal-close:hover { filter: brightness(1.08) !important; }

.customize-balance {
  margin: 2px auto 10px !important;
}

.customize-modal-content {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px 8px 6px !important;
}
.customize-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  padding: 18px 14px 2px !important;
  min-height: 0 !important;
}
.customize-category-card {
  width: auto !important;
  min-height: 212px !important;
  padding: 16px 18px 18px !important;
}
.customize-category-card strong {
  font-size: 17px !important;
  line-height: 1.12 !important;
}
.customize-category-card > span:last-child {
  font-size: 10px !important;
  line-height: 1.45 !important;
  max-width: 92% !important;
}
.customize-category-preview {
  width: 178px !important;
  max-width: 86% !important;
}
.customize-nameplate-category .customize-category-preview,
.customize-border-category .customize-category-preview {
  width: 188px !important;
}

.customize-items-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px 24px !important;
  padding: 10px 12px 14px !important;
  align-content: start !important;
}
.customize-item-card {
  min-height: 154px !important;
  grid-template-rows: 64px auto 18px !important;
  gap: 5px !important;
  padding: 12px 10px 12px !important;
}
.customize-nameplate-option,
.customize-border-option {
  min-height: 166px !important;
  grid-template-rows: 64px auto 18px !important;
}
.customize-item-preview {
  width: 108px !important;
  max-width: 90% !important;
}
.customize-nameplate-preview,
.customize-border-preview {
  width: 130px !important;
  height: 44px !important;
}
.customize-item-card strong {
  font-size: 14px !important;
  line-height: 1.08 !important;
  text-align: center !important;
}
.customize-item-state {
  font-size: 9px !important;
  line-height: 1 !important;
}

.customize-category-card::after,
.customize-item-card::after {
  top: 2px !important;
  width: 36% !important;
  height: 16% !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(30,187,132,.16), rgba(30,187,132,.06) 34%, transparent 72%) !important;
  filter: blur(2.2px) !important;
  opacity: .46 !important;
}

.customize-acquired-check {
  position: absolute !important;
  right: 11px !important;
  bottom: 10px !important;
  z-index: 4 !important;
  width: 19px !important;
  height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  filter: none !important;
}
.customize-acquired-box {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid rgba(217, 197, 146, .58);
  background: linear-gradient(180deg, rgba(24,18,12,.96), rgba(11,8,5,.98));
  box-shadow: inset 0 0 0 1px rgba(255,233,182,.08), 0 1px 4px rgba(0,0,0,.24);
}
.customize-acquired-tick {
  position: relative;
  width: 9px;
  height: 5px;
  border-left: 2px solid rgba(219,224,209,.62);
  border-bottom: 2px solid rgba(219,224,209,.62);
  transform: translateY(-1px) rotate(-45deg);
}
.customize-acquired-check.is-active .customize-acquired-box {
  border-color: rgba(132, 233, 184, .85);
  background: linear-gradient(180deg, rgba(17,43,30,.98), rgba(8,19,14,.99));
  box-shadow: inset 0 0 0 1px rgba(184,255,220,.16), 0 0 6px rgba(70,204,136,.22);
}
.customize-acquired-check.is-active .customize-acquired-tick {
  border-left-color: rgba(172,255,214,.98);
  border-bottom-color: rgba(172,255,214,.98);
}
.customize-item-card.is-owned:not(.is-active) .customize-acquired-box {
  opacity: .62;
}
.customize-item-card.is-owned:not(.is-active) .customize-acquired-tick {
  border-left-color: rgba(214,224,205,.48);
  border-bottom-color: rgba(214,224,205,.48);
}

@media (max-width: 960px) {
  .customize-modal-card {
    width: min(850px, calc(100vw - 20px)) !important;
    height: min(720px, calc(100vh - 18px)) !important;
    max-height: min(720px, calc(100vh - 18px)) !important;
    padding: 22px 24px 26px !important;
  }
  .customize-category-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .customize-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (max-width: 700px) {
  .customize-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .customize-modal-header { padding: 8px 60px 14px !important; }
}

/* ===== Shop frame geometry correction: restore natural height and clip fill to artwork ===== */
.customize-modal-card {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(720px, calc(100vh - 38px)) !important;
  padding: 26px 34px 34px !important;
}

/* The fill uses the same coordinate box as the frame image and follows the
   carved silhouette instead of a plain rectangle. This keeps it below the
   raised top ornament, inside the curved shoulders and above the lower crest. */
.customize-modal-card::after,
.customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
  inset: -22px -24px -24px !important;
  border-radius: 0 !important;
  clip-path: polygon(
    10.0% 7.0%,
    16.8% 7.0%,
    18.2% 10.5%,
    81.8% 10.5%,
    83.2% 7.0%,
    90.0% 7.0%,
    95.7% 12.2%,
    99.0% 17.5%,
    99.0% 22.3%,
    96.1% 27.5%,
    94.3% 30.5%,
    94.3% 90.8%,
    91.5% 94.5%,
    64.0% 94.5%,
    62.0% 98.6%,
    38.0% 98.6%,
    36.0% 94.5%,
    7.0% 94.5%,
    5.4% 90.8%,
    5.4% 30.5%,
    3.7% 27.5%,
    1.0% 22.3%,
    1.0% 17.5%,
    4.3% 12.2%
  ) !important;
  background:
    radial-gradient(circle at 50% 11%, rgba(181,127,46,.09), transparent 32%),
    linear-gradient(180deg, rgba(32,22,13,.985), rgba(11,8,5,.992)) !important;
}

/* Restore the non-stretched responsive behavior on smaller screens too. */
@media (max-width: 960px) {
  .customize-modal-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100vh - 18px)) !important;
  }
}

/* Stronger than the previous revision, but still kept close to the upper gem
   instead of spreading across the entire slot frame. */
.customize-category-card::after,
.customize-item-card::after {
  top: 0 !important;
  width: 43% !important;
  height: 20% !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(30,187,132,.24), rgba(30,187,132,.10) 35%, transparent 72%) !important;
  filter: blur(2.6px) !important;
  opacity: .62 !important;
}


/* ===== Match section windows to the unchanged root Shop size ===== */
.customize-modal-overlay[data-shop-view="root"] .customize-category-grid {
  padding-top: 9px !important;
}

.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card {
  width: min(var(--customize-root-card-width, 850px), calc(100vw - 36px)) !important;
  height: min(var(--customize-root-card-height, 720px), calc(100vh - 38px)) !important;
  min-height: min(var(--customize-root-card-height, 720px), calc(100vh - 38px)) !important;
  max-height: min(var(--customize-root-card-height, 720px), calc(100vh - 38px)) !important;
}

@media (max-width: 960px) {
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card {
    width: min(var(--customize-root-card-width, 850px), calc(100vw - 20px)) !important;
    height: min(var(--customize-root-card-height, 720px), calc(100vh - 18px)) !important;
    min-height: min(var(--customize-root-card-height, 720px), calc(100vh - 18px)) !important;
    max-height: min(var(--customize-root-card-height, 720px), calc(100vh - 18px)) !important;
  }
}

/* ===== Preserve the exact Shop positioning from section_same_size_spacing_fix =====
   Only styles for the later carousel/filter/confirmation features are added here.
   No rule below changes the window, header, balance, root cards or frame geometry. */
.customize-section-shop {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.customize-carousel-filter-row {
  flex: 0 0 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 5px;
  box-sizing: border-box;
}
.customize-only-acquired-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9bf86;
  font: 600 10px/1 Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
}
.customize-only-acquired-control > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.customize-filter-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,185,96,.62);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(37,25,13,.98), rgba(12,8,5,.99));
  box-shadow: inset 0 0 0 1px rgba(255,230,168,.08), 0 2px 5px rgba(0,0,0,.28);
}
.customize-filter-checkbox > span {
  width: 8px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: translateY(-1px) rotate(-45deg);
}
.customize-only-acquired-control input:checked + .customize-filter-checkbox {
  border-color: rgba(102,228,167,.82);
  background: linear-gradient(180deg, rgba(20,55,38,.98), rgba(8,23,16,.99));
  box-shadow: inset 0 0 0 1px rgba(179,255,217,.12), 0 0 7px rgba(51,199,126,.18);
}
.customize-only-acquired-control input:checked + .customize-filter-checkbox > span {
  border-left-color: #a9f7ce;
  border-bottom-color: #a9f7ce;
}

.customize-carousel {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.customize-carousel-viewport {
  position: relative;
  width: 100%;
  height: 206px;
  flex: 0 0 206px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 11px 3px 18px;
  touch-action: pan-y;
}
.customize-carousel-track,
.customize-carousel-track.is-looping,
.customize-carousel-track.is-looping.is-moving-next,
.customize-carousel-track.is-looping.is-moving-prev {
  width: var(--customize-carousel-track-width, 100%);
  height: 100%;
  display: flex;
  align-items: flex-start;
  transform: translate3d(var(--customize-carousel-offset, 0%), 0, 0);
  transition: transform .62s cubic-bezier(.22,.72,.24,1);
  will-change: transform;
  backface-visibility: hidden;
}
.customize-carousel-track.is-snapping,
.customize-carousel-track.is-looping.is-snapping {
  transition: none !important;
}
.customize-carousel-slide {
  flex: 0 0 var(--customize-carousel-slide-width, 25%);
  width: var(--customize-carousel-slide-width, 25%);
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 9px 9px;
  box-sizing: border-box;
  backface-visibility: hidden;
}
.customize-carousel-slide.is-empty {
  visibility: hidden;
  pointer-events: none;
}
.customize-carousel-slide > .customize-item-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 166px !important;
  max-height: 166px !important;
  margin: 0 !important;
  align-self: flex-start !important;
  grid-template-rows: 66px auto 20px !important;
  padding: 12px 10px 12px !important;
}
.customize-carousel-slide > .customize-nameplate-option,
.customize-carousel-slide > .customize-border-option {
  min-height: 166px !important;
  max-height: 166px !important;
}
.customize-carousel-navigation {
  flex: 0 0 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 1px 0 0;
  box-sizing: border-box;
}
.customize-carousel-arrow {
  width: 42px;
  height: 33px;
  border: 1px solid rgba(225,180,87,.48);
  border-radius: 14px 6px 14px 6px;
  background: linear-gradient(180deg, rgba(48,32,16,.95), rgba(15,10,6,.98));
  color: #f4d58a;
  font: 500 28px/27px Georgia, serif;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,227,157,.06), 0 4px 9px rgba(0,0,0,.26);
}
.customize-carousel-arrow:not(:disabled):hover {
  filter: brightness(1.12);
}
.customize-carousel-arrow:disabled {
  opacity: .32;
  cursor: default;
}
.customize-carousel-position {
  display: none !important;
}

/* Carousel movement is strictly horizontal. */
.customize-carousel-track.is-moving-next .customize-item-card,
.customize-carousel-track.is-moving-prev .customize-item-card {
  animation: none !important;
  translate: none !important;
  rotate: none !important;
}

/* Keep the original circleslot artwork for the seven color variants. */
.customize-slot-preview.slot-tone-orange { filter: url(#slot-color-orange) !important; }
.customize-slot-preview.slot-tone-pink { filter: url(#slot-color-pink) !important; }
.customize-slot-preview.slot-tone-cyan { filter: url(#slot-color-cyan) !important; }
.customize-slot-preview.slot-tone-aqua { filter: url(#slot-color-aqua) !important; }
.customize-slot-preview.slot-tone-wine { filter: url(#slot-color-wine) !important; }
.customize-slot-preview.slot-tone-beige { filter: url(#slot-color-beige) !important; }
.customize-slot-preview.slot-tone-brown { filter: url(#slot-color-brown) !important; }
.customize-slot-preview img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.customize-slot-option .customize-color-swatch {
  position: absolute !important;
  top: 12px !important;
  right: 13px !important;
  left: auto !important;
  bottom: auto !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  z-index: 18 !important;
}

/* Purchase confirmation stays above the existing layout without changing it. */
.customize-purchase-dialog {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at center, rgba(4,3,2,.22), transparent 68%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.customize-purchase-dialog.hidden {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.customize-purchase-panel {
  width: min(370px, calc(100% - 48px));
  padding: 22px 25px 20px;
  border: 1px solid rgba(229,185,91,.62);
  border-radius: 22px 8px 22px 8px;
  background: linear-gradient(180deg, rgba(38,25,13,.995), rgba(12,8,5,.998));
  box-shadow: 0 18px 44px rgba(0,0,0,.60), inset 0 0 0 2px rgba(86,52,19,.62);
  text-align: center;
}
.customize-purchase-title {
  display: block;
  margin-bottom: 10px;
  color: #f7dea0;
  font: 500 21px/1.1 Georgia, serif;
}
.customize-purchase-message {
  margin: 0 0 17px;
  color: #d9c39a;
  font: 13px/1.45 Arial, sans-serif;
}
.customize-confirm-item { color: #83dbb2; font-weight: 700; }
.customize-confirm-price { color: #f1c96f; font-weight: 700; }
.customize-confirm-price .customize-price { display: inline-flex; }
.customize-confirm-gil-word { margin-left: 4px; }
.customize-purchase-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.customize-purchase-actions button {
  min-width: 112px;
  height: 36px;
  border-radius: 12px 5px 12px 5px;
  color: #fff3d0;
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
}
.customize-purchase-confirm {
  border: 1px solid rgba(91,220,151,.66);
  background: linear-gradient(180deg, rgba(34,116,77,.96), rgba(12,51,33,.98));
}
.customize-purchase-cancel {
  border: 1px solid rgba(214,128,105,.58);
  background: linear-gradient(180deg, rgba(111,50,36,.96), rgba(48,20,15,.98));
}

.account-user.is-shop-trigger { cursor: pointer; }
.account-user.is-shop-trigger:focus-visible {
  outline: 1px solid rgba(229,187,98,.62);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .customize-carousel-viewport {
    height: 200px;
    flex-basis: 200px;
  }
}


/* ===== Section carousel vertical alignment and faster navigation ===== */
/* Move the filter and the complete carousel together into the visual center of
   the section artwork. The root Shop screen and every other element keep the
   exact positioning from the approved revision. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
  position: relative !important;
  top: -22px !important;
}

/* Shorten only the carousel's internal viewport so the navigation controls
   remain fully visible inside the existing, unchanged window. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
  height: 190px !important;
  flex-basis: 190px !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
  flex-basis: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
}

/* Keep the same smooth physical slide, but remove the long wait between
   navigation inputs. */
.customize-carousel-track,
.customize-carousel-track.is-looping,
.customize-carousel-track.is-looping.is-moving-next,
.customize-carousel-track.is-looping.is-moving-prev {
  transition-duration: .36s !important;
  transition-timing-function: cubic-bezier(.22,.72,.24,1) !important;
}


/* ===== Final section carousel lift and content-driven vertical area ===== */
/* Move only the filter, carousel and arrows farther upward. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
  top: -36px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Let the filter size itself from its own content instead of reserving a fixed row. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-filter-row {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 0 0 4px !important;
}

/* The carousel now derives its height from the actual cards. Horizontal content
   remains clipped, while extra vertical artwork is allowed to remain visible. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px 3px 8px !important;
  overflow: visible !important;
  clip-path: inset(-28px 0 -72px 0) !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping.is-moving-next,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping.is-moving-prev {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-nameplate-option,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-border-option {
  height: auto !important;
  max-height: none !important;
}

/* Navigation also uses its natural height, so it cannot be cut by a fixed row. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin-top: 7px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ===== Shop carousel visibility, uniform blur and purchase preview refinement ===== */
/* A single dedicated backdrop layer replaces the modal's own fragmented blur.
   This keeps the complete game background equally blurred while avoiding
   multiple backdrop-filter surfaces during carousel movement. */
.customize-page-blur {
  position: fixed;
  inset: 0;
  z-index: 10030;
  pointer-events: none;
  background: rgba(5, 3, 2, .24);
  -webkit-backdrop-filter: blur(2.8px) brightness(.84);
  backdrop-filter: blur(2.8px) brightness(.84);
  transform: translateZ(0);
  contain: strict;
}
.customize-page-blur.hidden {
  display: none !important;
}
.customize-modal-overlay {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Shop content never creates browser scrollbars. The carousel viewport alone
   clips its moving row, while the frame and the remaining content stay free. */
.customize-modal-content,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-content,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel {
  overflow: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.customize-modal-content::-webkit-scrollbar,
.customize-section-shop::-webkit-scrollbar,
.customize-carousel::-webkit-scrollbar,
.customize-carousel-viewport::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Lower only the heading copy and remove the artificial separator. */
.customize-modal-header {
  border-bottom: 0 !important;
}
.customize-modal-header > div,
.customize-modal-heading {
  transform: translateY(7px) !important;
}

/* Restore the filter even while the whole section remains lifted. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-filter-row {
  display: flex !important;
  position: relative !important;
  z-index: 45 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-only-acquired-control,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-filter-label,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-filter-checkbox {
  visibility: visible !important;
  opacity: 1 !important;
}

/* No fixed carousel ceiling or floor: the row follows the real card artwork.
   Horizontal overflow is clipped and dark gradients conceal adjacent copies. */
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 13px 18px 17px !important;
  overflow: hidden !important;
  clip-path: none !important;
  isolation: isolate !important;
}
.customize-carousel-viewport::before,
.customize-carousel-viewport::after {
  content: "";
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  width: 38px;
  pointer-events: none;
}
.customize-carousel-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 7, 4, .98) 0%, rgba(10, 7, 4, .76) 30%, rgba(10, 7, 4, .28) 68%, transparent 100%);
}
.customize-carousel-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 7, 4, .98) 0%, rgba(10, 7, 4, .76) 30%, rgba(10, 7, 4, .28) 68%, transparent 100%);
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping.is-moving-next,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-track.is-looping.is-moving-prev {
  position: relative !important;
  z-index: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-nameplate-option,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-border-option {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Active/acquired marker is larger but remains absolutely anchored in the
   exact same lower-right corner, so it cannot affect card measurements. */
.customize-acquired-check {
  width: 24px !important;
  height: 24px !important;
  right: 11px !important;
  bottom: 10px !important;
}
.customize-acquired-box {
  border-radius: 5px !important;
}
.customize-acquired-tick {
  width: 11px !important;
  height: 6px !important;
  border-left-width: 2.5px !important;
  border-bottom-width: 2.5px !important;
}

/* Purchase confirmation: blur only the complete Shop window behind the
   dialog, keep the overlay transparent, and provide a real player-slot preview. */
.customize-purchase-dialog {
  inset: -22px -24px -24px !important;
  padding: 26px !important;
  background: rgba(4, 3, 2, .10) !important;
  -webkit-backdrop-filter: blur(2.4px) brightness(.88) !important;
  backdrop-filter: blur(2.4px) brightness(.88) !important;
  border-radius: 30px !important;
}
.customize-purchase-dialog.hidden {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.customize-purchase-panel {
  width: min(430px, calc(100% - 42px)) !important;
  padding: 26px 28px 24px !important;
  border-radius: 24px 9px 24px 9px !important;
}
.customize-purchase-title {
  margin-bottom: 12px !important;
}
.customize-purchase-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 0 12px !important;
  color: #d9c39a !important;
  font: 600 13px/1.35 Arial, sans-serif !important;
  text-align: center !important;
}
.customize-confirm-item,
.customize-confirm-price,
.customize-confirm-price .customize-price,
.customize-confirm-price .customize-price > span {
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-align: center !important;
}
.customize-confirm-item {
  color: #83dbb2 !important;
  font-weight: 700 !important;
}
.customize-confirm-price {
  color: #f1c96f !important;
  font-weight: 600 !important;
}
.customize-confirm-price .customize-price {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.customize-confirm-price .customize-price img {
  width: 15px !important;
  height: 15px !important;
}
.customize-purchase-preview {
  width: 100%;
  margin: 2px 0 16px;
}
.customize-purchase-preview-stage {
  position: relative;
  width: min(320px, 100%);
  height: 154px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(218, 176, 89, .24);
  border-radius: 18px 7px 18px 7px;
  background:
    radial-gradient(circle at 50% 38%, rgba(67, 46, 24, .40), transparent 55%),
    linear-gradient(180deg, rgba(15, 10, 6, .72), rgba(7, 5, 3, .82));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .46);
}
.customize-purchase-seat-preview.player-seat {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.customize-purchase-seat-preview.player-seat > .seat-circle-backdrop {
  position: absolute !important;
  left: 50% !important;
  top: 3px !important;
  width: 226px !important;
  height: 126px !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  overflow: visible !important;
}
.customize-purchase-seat-preview .seat-circle-image,
.customize-purchase-seat-preview .seat-circle-effect {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  display: block !important;
  width: 226px !important;
  height: 126px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}
.customize-purchase-seat-preview .seat-circle-image {
  z-index: 1 !important;
}
.customize-purchase-seat-preview .seat-circle-effect {
  z-index: 2 !important;
}
.customize-purchase-seat-preview.player-seat > .seat-plaque {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: 9px !important;
  top: auto !important;
  width: 236px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 8px 13px 9px !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}
.customize-purchase-seat-preview .seat-name {
  font-size: 14px !important;
  line-height: 1.05 !important;
}
.customize-purchase-seat-preview .seat-meta,
.customize-purchase-seat-preview .seat-meta > span,
.customize-purchase-seat-preview .seat-meta strong {
  margin-top: 3px !important;
  font: 600 10px/1 Arial, sans-serif !important;
}
.customize-purchase-seat-preview .seat-vip-badge {
  width: 24px !important;
  height: 24px !important;
}
.customize-purchase-actions {
  margin-top: 2px !important;
}

/* Preserve the native proportions of the slot and nameplate artwork inside the
   confirmation preview. */
.customize-purchase-seat-preview.player-seat > .seat-circle-backdrop {
  top: 8px !important;
  width: 226px !important;
  height: auto !important;
}
.customize-purchase-seat-preview .seat-circle-image,
.customize-purchase-seat-preview .seat-circle-effect {
  width: 226px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.customize-purchase-seat-preview.player-seat > .seat-plaque {
  bottom: 7px !important;
  width: 236px !important;
  min-height: 60px !important;
}

/* ===== Shop balance and type-specific owned-item previews ===== */
/* Move only the balance row upward without changing the layout occupied by it. */
.customize-balance {
  transform: translateY(-15px) !important;
}

/* The purchase preview now shows only the part affected by the selected item. */
.customize-purchase-preview-stage[data-preview-type="slot"] {
  height: 154px !important;
}
.customize-purchase-preview-stage[data-preview-type="slot"]
  .customize-purchase-seat-preview.player-seat > .seat-circle-backdrop {
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
.customize-purchase-preview-stage[data-preview-type="nameplate"],
.customize-purchase-preview-stage[data-preview-type="border"] {
  height: 112px !important;
}
.customize-purchase-preview-stage[data-preview-type="nameplate"]
  .customize-purchase-seat-preview.player-seat > .seat-plaque,
.customize-purchase-preview-stage[data-preview-type="border"]
  .customize-purchase-seat-preview.player-seat > .seat-plaque {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Right-click menu for customizations already acquired. */
.customize-context-menu {
  position: fixed !important;
  z-index: 13000 !important;
  width: 142px;
  padding: 5px;
  border: 1px solid rgba(225, 182, 91, .58);
  border-radius: 10px 4px 10px 4px;
  background: linear-gradient(180deg, rgba(38, 25, 13, .995), rgba(11, 7, 4, .998));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .58), inset 0 0 0 1px rgba(91, 58, 24, .55);
}
.customize-context-menu.hidden {
  display: none !important;
}
.customize-context-menu button {
  display: block;
  width: 100%;
  min-height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px 3px 7px 3px;
  background: transparent;
  color: #f3dba0;
  font: 600 12px/1 Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
.customize-context-menu button:hover,
.customize-context-menu button:focus-visible {
  background: rgba(104, 72, 31, .52);
  outline: none;
}
.customize-carousel-slide[data-customize-preview-acquired="true"] {
  cursor: context-menu;
}
/* Let the carousel slide receive right-clicks even when its active button is disabled. */
.customize-carousel-slide[data-customize-preview-acquired="true"] > .customize-item-card:disabled {
  pointer-events: none !important;
}

/* Separate preview-only window opened from the acquired-item context menu. */
.customize-owned-preview-dialog {
  position: absolute !important;
  inset: -22px -24px -24px !important;
  z-index: 1150 !important;
  display: grid !important;
  place-items: center;
  padding: 26px;
  border-radius: 30px;
  background: rgba(4, 3, 2, .10);
  -webkit-backdrop-filter: blur(2.4px) brightness(.88);
  backdrop-filter: blur(2.4px) brightness(.88);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.customize-owned-preview-dialog.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.customize-owned-preview-panel {
  position: relative;
  width: min(380px, calc(100% - 42px));
  padding: 25px 24px 23px;
  border: 1px solid rgba(229, 185, 91, .62);
  border-radius: 22px 8px 22px 8px;
  background: linear-gradient(180deg, rgba(38, 25, 13, .995), rgba(12, 8, 5, .998));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .60), inset 0 0 0 2px rgba(86, 52, 19, .62);
  box-sizing: border-box;
}
.customize-owned-preview-close {
  position: absolute;
  z-index: 10;
  top: 8px;
  right: 9px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(224, 181, 89, .46);
  border-radius: 9px 3px 9px 3px;
  background: rgba(29, 18, 9, .94);
  color: #f0d58f;
  font: 500 22px/27px Georgia, serif;
  cursor: pointer;
}
.customize-owned-preview-close:hover {
  filter: brightness(1.18);
}
.customize-owned-preview-content,
.customize-owned-preview-content .customize-purchase-preview-stage {
  width: 100%;
}
.customize-owned-preview-content .customize-purchase-preview-stage {
  margin: 0 auto;
}


/* ===== Final Shop preview alignment refinement ===== */
/* Keep the Slot artwork itself centered inside the preview stage. The backdrop
   needs a real height because all of its artwork layers are absolutely positioned. */
.customize-purchase-preview-stage[data-preview-type="slot"]
  .customize-purchase-seat-preview.player-seat > .seat-circle-backdrop {
  width: 226px !important;
  height: 97px !important;
  aspect-ratio: 209 / 90 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.customize-purchase-preview-stage[data-preview-type="slot"]
  .customize-purchase-seat-preview .seat-circle-image,
.customize-purchase-preview-stage[data-preview-type="slot"]
  .customize-purchase-seat-preview .seat-circle-effect {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: contain !important;
}

/* ===== Shop root section carousel + purchasable player badges ===== */
/* The root Shop keeps the original three-card geometry. The fourth and future
   categories move through the same physical infinite carousel used by items. */
.customize-modal-overlay[data-shop-view="root"] .customize-root-category {
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-viewport {
  position: relative !important;
  width: 100% !important;
  height: 239px !important;
  min-height: 239px !important;
  max-height: 239px !important;
  flex: 0 0 239px !important;
  padding: 9px 0 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-next,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-prev {
  height: 212px !important;
  min-height: 212px !important;
  align-items: stretch !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-slide {
  height: 212px !important;
  min-height: 212px !important;
  max-height: 212px !important;
  padding: 0 14px !important;
  align-items: stretch !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-card {
  width: 100% !important;
  height: 212px !important;
  min-height: 212px !important;
  max-height: 212px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-navigation {
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  margin-top: -5px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 55 !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-viewport::before,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-viewport::after {
  width: 42px !important;
}
.customize-badge-category .customize-category-preview {
  width: 178px !important;
  height: 84px !important;
}
.customize-badge-category .customize-category-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Badge shop cards use the dedicated 185x167 item artwork, while the tiny
   *badge.png files are reserved for the live player nameplate. */
.customize-badge-option {
  grid-template-rows: 78px auto 20px !important;
}
.customize-badge-preview {
  width: 118px !important;
  height: 78px !important;
  max-width: 94% !important;
  display: grid !important;
  place-items: center !important;
}
.customize-badge-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.customize-default-badge-preview {
  border: 1px solid rgba(221, 183, 102, .34);
  border-radius: 11px 4px 11px 4px;
  background: rgba(19, 13, 8, .64);
  color: rgba(225, 202, 151, .68);
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .12em;
}

/* Purchasable badges share the VIP badge visual size. The custom badge is
   emitted first in the name row, so VIP users see custom badge -> VIP badge. */
.seat-custom-badge {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(16px, .92cqw, 24px) !important;
  height: clamp(16px, .92cqw, 24px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  pointer-events: none !important;
  filter: none !important;
}
.customize-purchase-seat-preview .seat-custom-badge {
  width: 24px !important;
  height: 24px !important;
}

/* Badge previews affect the nameplate area, just like background/border items. */
.customize-purchase-preview-stage[data-preview-type="badge"] {
  height: 112px !important;
}
.customize-purchase-preview-stage[data-preview-type="badge"]
  .customize-purchase-seat-preview.player-seat > .seat-plaque {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 700px) {
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-slide {
    padding-inline: 9px !important;
  }
}
.account-custom-badge {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(20px, 1.12cqw, 29px) !important;
  height: clamp(20px, 1.12cqw, 29px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin-right: 6px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  pointer-events: none !important;
  filter: none !important;
}
.account-user.has-custom-badge.has-vip-badge .account-custom-badge {
  margin-right: 3px !important;
}


/* ===== Shop item artwork containment + exact VIP badge geometry ===== */
/* Keep every item artwork inside the already existing first grid row. This
   only scales the image down; it does not add a panel, crop the artwork, or
   move the title/price rows. */
.customize-carousel-slide > .customize-item-card > .customize-item-preview {
  align-self: stretch !important;
  justify-self: stretch !important;
  width: calc(100% - 18px) !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100% - 18px) !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.customize-carousel-slide > .customize-item-card > .customize-item-preview > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Purchased badges use exactly the same render box as the existing VIP
   badge. Intrinsic image proportions remain intact through object-fit. */
.seat-name > .seat-custom-badge {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(16px, .92cqw, 24px) !important;
  height: clamp(16px, .92cqw, 24px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
.account-user > .account-custom-badge {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(20px, 1.12cqw, 29px) !important;
  height: clamp(20px, 1.12cqw, 29px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.customize-purchase-seat-preview .seat-name > .seat-custom-badge {
  width: 24px !important;
  height: 24px !important;
}

/* ===== Final Shop rendering polish: crisp section art, active frame, shaped fill and button feedback ===== */
/* Keep the category artwork out of a permanent GPU texture while the root
   carousel is resting. This preserves the source PNG sharpness after a move. */
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping {
  transform: translateX(var(--customize-carousel-offset, 0%)) !important;
  will-change: auto !important;
  backface-visibility: visible !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-moving-next,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-moving-prev {
  will-change: transform !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-category-preview img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  backface-visibility: visible !important;
  image-rendering: -webkit-optimize-contrast !important;
}

/* Trace the real alpha silhouette of slotshopborder.png instead of drawing a
   generic rectangle. The glow is visible only on the currently active item. */
.customize-item-card.is-active::before {
  filter:
    drop-shadow(1px 0 0 rgba(132, 233, 184, .92))
    drop-shadow(-1px 0 0 rgba(132, 233, 184, .92))
    drop-shadow(0 1px 0 rgba(132, 233, 184, .92))
    drop-shadow(0 -1px 0 rgba(132, 233, 184, .92))
    drop-shadow(0 0 4px rgba(70, 204, 136, .38)) !important;
}

/* Use the dedicated alpha-shaped fill artwork instead of the former clipped
   rectangle, and move the shadow to the PNG frame so no square is visible. */
.customize-modal-card {
  background: transparent !important;
  box-shadow: none !important;
}
.customize-modal-card::before {
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, .54))
    drop-shadow(0 0 7px rgba(222, 169, 69, .16)) !important;
}
.customize-modal-card::after,
.customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after,
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
  inset: -22px -24px -24px !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after {
  background-image: url("./assets/shopfill.png") !important;
}
.customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
  background-image: url("./assets/shopsectionsfill.png") !important;
}

/* close.png is only the frame. Render a separate, fully opaque glyph above it. */
.customize-modal-close {
  font-size: 0 !important;
  color: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.customize-modal-close::before {
  z-index: 1 !important;
  filter: none !important;
  opacity: 1 !important;
}
.customize-modal-close::after {
  content: "×" !important;
  z-index: 2 !important;
  inset: 6px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(35, 24, 12, .84) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .35) !important;
  color: #ffd978 !important;
  font: 700 25px/1 Arial, sans-serif !important;
  text-shadow: 0 0 1px rgba(255, 247, 201, .95), 0 0 6px rgba(239, 187, 72, .38) !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Consistent visual feedback for every interactive Shop button without
   changing its measurements or document position. */
.customize-modal-overlay button,
.topbar-customize-button {
  cursor: pointer;
  transition: filter .14s ease, opacity .14s ease, scale .10s ease !important;
}
.customize-modal-overlay button:not(:disabled):hover,
.customize-modal-overlay button:not(:disabled):focus-visible,
.topbar-customize-button:not(:disabled):hover,
.topbar-customize-button:not(:disabled):focus-visible {
  filter: brightness(1.13) saturate(1.06) !important;
}
.customize-modal-overlay button:not(:disabled):active,
.topbar-customize-button:not(:disabled):active {
  scale: .97;
  filter: brightness(.91) saturate(1.02) !important;
}
.customize-modal-overlay button:disabled {
  cursor: default !important;
}

/* Keep the SHOP artwork at its native 83x43 proportion so its sides are not
   stretched or clipped by the wider customization button rules. */
.topbar-customize-button {
  width: 83px !important;
  min-width: 83px !important;
  height: 43px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.topbar-customize-button .topbar-dj-art {
  left: 50% !important;
  right: auto !important;
  width: 83px !important;
  height: 43px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translateX(-50%) !important;
}

/* ===== Final Shop responsiveness + uncropped SHOP artwork ===== */
/* Blur the complete frozen game as one layer. The Shop itself is moved to
   <body> by app.js, so it remains sharp and no full-screen backdrop-filter is
   recomputed during hover, click or carousel movement. */
.customize-page-blur {
  background: rgba(5, 3, 2, .27) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  contain: none !important;
}
body.is-customize-shop-open #game-shell {
  filter: blur(2.2px) brightness(.84) !important;
  scale: 1.006 !important;
  transform-origin: center center !important;
  transition: none !important;
}
body.is-customize-shop-open #game-shell * {
  animation-play-state: paused !important;
}

/* Avoid filter-based repaints on every pointer movement. Feedback remains
   immediate through opacity and transform, which stay on the compositor. */
.customize-modal-overlay button,
.topbar-customize-button {
  filter: none !important;
  transition: transform .08s ease-out, opacity .08s ease-out !important;
  will-change: auto !important;
}
.customize-modal-overlay button:not(:disabled):hover,
.customize-modal-overlay button:not(:disabled):focus-visible {
  filter: none !important;
  opacity: .92 !important;
  transform: translateY(-1px) !important;
}
.customize-modal-overlay button:not(:disabled):active {
  filter: none !important;
  opacity: .84 !important;
  transform: translateY(0) scale(.985) !important;
}
.topbar-customize-button:not(:disabled):hover,
.topbar-customize-button:not(:disabled):focus-visible {
  filter: none !important;
  opacity: .94 !important;
  transform: translateY(-1px) !important;
}
.topbar-customize-button:not(:disabled):active {
  filter: none !important;
  opacity: .86 !important;
  transform: translateY(0) scale(.985) !important;
}

/* Shorter physical travel time and no permanent promoted texture while idle. */
.customize-carousel-track,
.customize-carousel-track.is-looping,
.customize-carousel-track.is-looping.is-moving-next,
.customize-carousel-track.is-looping.is-moving-prev,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-next,
.customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-prev {
  transition-duration: .24s !important;
  transition-timing-function: cubic-bezier(.22,.72,.24,1) !important;
}
.customize-carousel-track:not(.is-moving-next):not(.is-moving-prev) {
  will-change: auto !important;
}
.customize-carousel-track.is-moving-next,
.customize-carousel-track.is-moving-prev {
  will-change: transform !important;
}

/* button.png is 83x43. Keep the button footprint unchanged, but render the
   artwork a few pixels inside it so neither transparent edge lands on a
   fractional/clipped boundary. */
.topbar-customize-button {
  width: 83px !important;
  min-width: 83px !important;
  height: 43px !important;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
}
.topbar-customize-button .topbar-dj-art {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 79px !important;
  height: 41px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
}

/* Neutralize the older independent scale property and the more-specific
   topbar hover transform so feedback never compounds into a slow double scale. */
.customize-modal-overlay button,
.topbar-customize-button {
  scale: 1 !important;
}
.topbar-links .topbar-customize-button:not(:disabled):hover,
.topbar-links .topbar-customize-button:not(:disabled):focus-visible {
  filter: none !important;
  opacity: .94 !important;
  scale: 1 !important;
  transform: translateY(-1px) !important;
}
.topbar-links .topbar-customize-button:not(:disabled):active {
  filter: none !important;
  opacity: .86 !important;
  scale: 1 !important;
  transform: translateY(0) scale(.985) !important;
}

/* ===== Player-slot Shop trigger, dealer 4+4 view and table label refinements ===== */
/* Restore the same zoom-in feedback used by the other top-bar buttons while
   keeping the corrected uncropped SHOP artwork dimensions. */
.topbar-links .topbar-customize-button:not(:disabled):hover,
.topbar-links .topbar-customize-button:not(:disabled):focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) scale(1.06) !important;
}
.topbar-links .topbar-customize-button:not(:disabled):active {
  opacity: .9 !important;
  transform: translateY(0) scale(.98) !important;
}

/* The top-bar account block is display-only. The player's own nameplate on the
   table is the clickable Shop entry point. */
.account-user,
.account-user.is-shop-trigger {
  cursor: default !important;
}
.player-seat.is-self > .seat-plaque.is-shop-trigger {
  cursor: pointer !important;
  pointer-events: auto !important;
  outline: none !important;
}
.player-seat.is-self > .seat-plaque.is-shop-trigger:hover,
.player-seat.is-self > .seat-plaque.is-shop-trigger:focus-visible {
  filter: brightness(1.08) !important;
}
.player-seat.is-self > .seat-plaque.is-shop-trigger:active {
  filter: brightness(.94) !important;
}

/* Keep the current bet inside the physical player slot instead of beneath it.
   Override the older remote-seat +30px translation only for this label. */
.player-seat > .seat-bet-display,
.player-seat:not(.is-self) > .seat-bet-display,
.player-seat.is-dealer-overview > .seat-bet-display {
  left: 50% !important;
  top: calc(50% + 94px) !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
}

/* ===== Hanging Shop entrance, side characters and final bet-label spacing ===== */
/* Keep the current-bet label clear of the chip stack in both player and dealer views. */
.player-seat > .seat-bet-display,
.player-seat:not(.is-self) > .seat-bet-display,
.player-seat.is-dealer-overview > .seat-bet-display {
  top: calc(50% + 121px) !important;
}

/* The Shop is mounted directly under <body>. Its background layer begins below
   the top bar, so the table is softened without blurring the navigation itself. */
body.is-customize-shop-open #game-shell {
  filter: none !important;
  scale: 1 !important;
  transform: none !important;
}
.customize-page-blur {
  inset: auto 0 0 0 !important;
  top: var(--shop-topbar-bottom, 78px) !important;
  background: rgba(5, 3, 2, .28) !important;
  -webkit-backdrop-filter: blur(2.8px) brightness(.84) !important;
  backdrop-filter: blur(2.8px) brightness(.84) !important;
  transform: translateZ(0) !important;
  contain: strict !important;
}

.customize-modal-overlay {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  --shop-topbar-bottom: 78px;
  --shop-card-width: 850px;
  --shop-card-half-width: 425px;
  --shop-card-height: 500px;
  --shop-frame-height: 546px;
  --shop-side-art-width: 364px;
  --shop-chain-width: 884px;
  --shop-chain-height: 375px;
  --shop-panel-top: 397px;
  --shop-chain-duration: 1.15s;
  --shop-window-duration: 1.2s;
}
.customize-modal-overlay.hidden {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

.customize-drop-assembly {
  position: fixed;
  z-index: 10050;
  top: var(--shop-topbar-bottom);
  left: 0;
  right: 0;
  height: calc(var(--shop-panel-top) + var(--shop-frame-height));
  overflow: visible;
  pointer-events: none;
}

/* chains3.png always renders at the PNG's real intrinsic pixel dimensions.
   Its top edge is anchored directly below the top bar and is completely
   independent from the Shop window position. A taller replacement therefore
   grows downward and may overlap the Shop instead of being pushed upward. */
.customize-shop-chains {
  position: absolute;
  z-index: 8;
  top: -9px;
  left: 50%;
  width: var(--shop-chain-width);
  height: var(--shop-chain-height);
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center top;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  pointer-events: none;
  will-change: clip-path, opacity, transform;
}

/* Keep the complete Shop window at the same approved vertical position.
   The window no longer anchors or repositions chains3.png; both elements have
   independent coordinates and may overlap freely. */
.customize-shop-panel-group {
  position: absolute;
  z-index: 5;
  top: var(--shop-panel-top);
  left: 0;
  right: 0;
  height: var(--shop-card-height);
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}
.customize-modal-card,
.customize-modal-overlay.hidden .customize-modal-card,
.customize-modal-overlay:not(.hidden) .customize-modal-card {
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  transition: none !important;
  pointer-events: auto;
}

/* charcoin.png and char.png stay immediately outside the frame and share its
   complete vertical artwork height without stretching their 2:3 ratio. */
.customize-shop-side-art {
  position: absolute;
  z-index: 3;
  top: -22px;
  width: var(--shop-side-art-width);
  height: var(--shop-frame-height);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}
.customize-shop-side-art-left {
  left: calc(50% - var(--shop-card-half-width) - 24px - var(--shop-side-art-width));
}
.customize-shop-side-art-right {
  left: calc(50% + var(--shop-card-half-width) + 24px);
}

.customize-modal-overlay.hidden .customize-shop-chains {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}
.customize-modal-overlay.hidden .customize-shop-panel-group {
  transform: translate3d(0, calc(0px - var(--shop-panel-top) - var(--shop-frame-height)), 0);
  opacity: 0;
}
.customize-modal-overlay.is-opening .customize-shop-chains {
  animation: shop-chain-unfurl var(--shop-chain-duration) cubic-bezier(.20, .72, .18, 1) both;
}
.customize-modal-overlay.is-opening .customize-shop-panel-group {
  animation: shop-window-drop var(--shop-window-duration) cubic-bezier(.16, .78, .18, 1) both;
}

@keyframes shop-chain-unfurl {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateX(-50%) scaleY(.985);
  }
  9% { opacity: 1; }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes shop-window-drop {
  0% {
    transform: translate3d(0, calc(0px - var(--shop-panel-top) - var(--shop-frame-height)), 0);
    opacity: 0;
  }
  10% { opacity: 1; }
  76% { transform: translate3d(0, 12px, 0); }
  89% { transform: translate3d(0, -5px, 0); }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customize-modal-overlay.is-opening .customize-shop-chains,
  .customize-modal-overlay.is-opening .customize-shop-panel-group {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== Final Shop top-bar artwork depth alignment ===== */
/* The Shop button was the only top-bar artwork rendered 2px inset on every
   horizontal side and 1px vertically, which made it look slightly farther
   behind the bar. Use the complete native 83x43 artwork like the base button. */
.topbar-customize-button .topbar-dj-art {
  width: 83px !important;
  height: 43px !important;
  z-index: 1 !important;
}


/* Player chip-stack privacy: only the viewer's own seat accepts denomination hover.
   Dealer overview intentionally keeps hover enabled for every table seat. */
.player-seat:not(.is-self):not(.is-dealer-overview) > .seat-chip-zone .seat-chip {
  pointer-events: none !important;
}


/* ===== Own nameplate customization hover ===== */
/* Only the authorized player's clickable nameplate receives this feedback.
   Scaling the plaque itself keeps its current background, border, name, badge
   and bank value moving together as one element. */
.player-seat.is-self > .seat-plaque.is-shop-trigger {
  transform-origin: 50% 50% !important;
  transition:
    transform .18s cubic-bezier(.2, .76, .24, 1),
    filter .18s ease !important;
}

.player-seat.is-self > .seat-plaque.is-shop-trigger:hover,
.player-seat.is-self > .seat-plaque.is-shop-trigger:focus-visible {
  transform: translateY(-35px) scale(1.035) !important;
  filter: brightness(1.07) !important;
}

.player-seat.is-self > .seat-plaque.is-shop-trigger:active {
  transform: translateY(-35px) scale(1.012) !important;
  filter: brightness(.98) !important;
}

/* Trace the currently selected frame artwork rather than drawing a separate
   rectangular layer over the nameplate. */
.player-seat.is-self > .seat-plaque.is-shop-trigger::after {
  transition: filter .18s ease !important;
}
.player-seat.is-self > .seat-plaque.is-shop-trigger:hover::after,
.player-seat.is-self > .seat-plaque.is-shop-trigger:focus-visible::after {
  filter:
    drop-shadow(0 0 .55px rgba(255, 236, 177, 1))
    drop-shadow(0 0 1.25px rgba(238, 188, 70, .96))
    drop-shadow(0 0 3px rgba(220, 166, 52, .58))
    drop-shadow(0 0 6px rgba(199, 137, 30, .28))
    drop-shadow(0 .16cqh .28cqh rgba(0, 0, 0, .35)) !important;
}

.seat-customize-hover-label {
  position: absolute !important;
  z-index: 6 !important;
  left: 50% !important;
  bottom: calc(100% + 7px) !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  transform: translate(-50%, 4px) scale(.98) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  color: #f1ce72 !important;
  -webkit-text-fill-color: #f1ce72 !important;
  font: 700 12px/1.15 Arial, sans-serif !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 5px rgba(0, 0, 0, .84),
    0 0 7px rgba(207, 151, 44, .32) !important;
  transition:
    opacity .16s ease,
    visibility 0s linear .16s,
    transform .18s cubic-bezier(.2, .76, .24, 1) !important;
}

.player-seat.is-self > .seat-plaque.is-shop-trigger:hover > .seat-customize-hover-label,
.player-seat.is-self > .seat-plaque.is-shop-trigger:focus-visible > .seat-customize-hover-label {
  transform: translate(-50%, 0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .player-seat.is-self > .seat-plaque.is-shop-trigger,
  .player-seat.is-self > .seat-plaque.is-shop-trigger::after,
  .seat-customize-hover-label {
    transition-duration: .01ms !important;
  }
}

/* ===== Real site loading screen ===== */
body.is-real-loading {
  overflow: hidden !important;
}

.real-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(72, 102, 54, .24), transparent 32%),
    radial-gradient(circle at 17% 18%, rgba(177, 123, 37, .11), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(42, 83, 57, .17), transparent 26%),
    linear-gradient(148deg, #080805 0%, #111009 48%, #070806 100%);
  color: #f7e7bc;
  opacity: 1;
  visibility: visible;
  transition: opacity .48s ease, visibility .48s ease;
}

.real-loading-screen::before,
.real-loading-screen::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.real-loading-screen::before {
  z-index: -3;
  opacity: .33;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(212, 170, 77, .045) 39px 40px),
    repeating-linear-gradient(118deg, transparent 0 62px, rgba(255, 231, 164, .022) 63px 64px);
  animation: real-loading-pattern-drift 18s linear infinite;
}

.real-loading-screen::after {
  z-index: 20;
  inset: 0;
  box-shadow: inset 0 0 150px 46px rgba(0, 0, 0, .82);
}

.real-loading-screen.is-complete .real-loading-panel {
  animation: real-loading-ready-pulse .48s ease both;
}

.real-loading-screen.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.real-loading-screen.is-leaving .real-loading-panel {
  transform: translateY(-10px) scale(.985);
  filter: blur(2px);
}

.real-loading-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.real-loading-orb {
  position: absolute;
  width: clamp(240px, 34vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .19;
  mix-blend-mode: screen;
  animation: real-loading-orb-float 9s ease-in-out infinite alternate;
}

.real-loading-orb-one {
  left: -10%;
  top: -12%;
  background: rgba(114, 150, 78, .72);
}

.real-loading-orb-two {
  right: -12%;
  bottom: -18%;
  background: rgba(197, 139, 42, .58);
  animation-delay: -3.4s;
}

.real-loading-orb-three {
  left: 42%;
  top: 48%;
  width: clamp(160px, 23vw, 380px);
  background: rgba(39, 92, 69, .62);
  animation-delay: -6.1s;
}

.real-loading-spark {
  position: absolute;
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(255, 224, 143, .96), transparent);
  box-shadow: 0 0 10px rgba(255, 193, 78, .72);
  opacity: 0;
  animation: real-loading-spark-rise 3.8s linear infinite;
}

.real-loading-spark-one { left: 16%; top: 88%; animation-delay: -.4s; }
.real-loading-spark-two { left: 31%; top: 96%; animation-delay: -2.2s; animation-duration: 4.4s; }
.real-loading-spark-three { left: 61%; top: 93%; animation-delay: -1.1s; animation-duration: 3.5s; }
.real-loading-spark-four { left: 78%; top: 90%; animation-delay: -3.1s; animation-duration: 4.8s; }
.real-loading-spark-five { left: 49%; top: 100%; animation-delay: -2.8s; animation-duration: 4.1s; }

.real-loading-panel {
  position: relative;
  z-index: 2;
  width: min(580px, 92vw);
  min-height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(42px, 6vw, 68px) clamp(28px, 6vw, 66px) clamp(34px, 5vw, 52px);
  border: 1px solid rgba(230, 190, 92, .58);
  border-radius: 28px 12px 28px 12px;
  background:
    linear-gradient(145deg, rgba(34, 31, 21, .98), rgba(13, 17, 13, .985)),
    radial-gradient(circle at 50% 0, rgba(214, 163, 57, .14), transparent 45%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .68),
    0 0 0 5px rgba(82, 63, 27, .28),
    0 0 34px rgba(194, 145, 47, .15),
    inset 0 0 0 1px rgba(255, 238, 181, .08),
    inset 0 0 60px rgba(0, 0, 0, .34);
  transform: translateY(0) scale(1);
  transition: transform .45s ease, filter .45s ease;
}

.real-loading-panel::before,
.real-loading-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.real-loading-panel::before {
  inset: 10px;
  border: 1px solid rgba(199, 149, 56, .23);
  border-radius: 20px 8px 20px 8px;
  clip-path: polygon(0 0, 34% 0, 39% 8px, 61% 8px, 66% 0, 100% 0, 100% 100%, 66% 100%, 61% calc(100% - 8px), 39% calc(100% - 8px), 34% 100%, 0 100%);
}

.real-loading-panel::after {
  left: 14%;
  right: 14%;
  bottom: 17px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 192, 94, .58), transparent);
  box-shadow: 0 -1px rgba(0, 0, 0, .6);
}

.real-loading-chain {
  position: absolute;
  top: -78px;
  width: 18px;
  height: 104px;
  opacity: .82;
  background:
    radial-gradient(ellipse at center, transparent 35%, #b48637 38% 50%, #493218 53% 62%, transparent 65%) center top / 18px 25px repeat-y;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .8));
  transform-origin: 50% 0;
  animation: real-loading-chain-sway 3.1s ease-in-out infinite alternate;
}

.real-loading-chain-left { left: 20%; }
.real-loading-chain-right { right: 20%; animation-delay: -1.55s; }

.real-loading-kicker {
  margin: 0 0 14px;
  color: #cfa953;
  font-size: clamp(10px, 1.6vw, 12px);
  font-weight: 800;
  letter-spacing: .34em;
  text-indent: .34em;
  text-shadow: 0 0 16px rgba(213, 166, 69, .35);
}

.real-loading-emblem {
  position: relative;
  width: 176px;
  height: 114px;
  margin: 0 auto 19px;
  perspective: 700px;
}

.real-loading-card {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 68px;
  height: 96px;
  border: 2px solid #caa04b;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(250, 235, 195, .98), rgba(203, 182, 128, .96)),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(73, 53, 23, .06) 6px 7px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .42),
    inset 0 0 0 3px rgba(82, 58, 24, .13);
  transform-origin: 50% 88%;
  animation: real-loading-card-breathe 2.35s ease-in-out infinite;
}

.real-loading-card::before,
.real-loading-card::after {
  content: "✦";
  position: absolute;
  color: rgba(84, 58, 24, .52);
  font-size: 8px;
}
.real-loading-card::before { top: 7px; left: 7px; }
.real-loading-card::after { right: 7px; bottom: 7px; transform: rotate(180deg); }

.real-loading-card i {
  font-style: normal;
  font-size: 37px;
  color: #1d2119;
  text-shadow: 0 1px rgba(255, 255, 255, .48);
}

.real-loading-card-left {
  margin-left: -58px;
  transform: rotate(-18deg) translateY(8px);
  animation-name: real-loading-card-left;
}

.real-loading-card-center {
  z-index: 2;
  margin-left: -34px;
  transform: translateY(-2px);
  animation-name: real-loading-card-center;
}

.real-loading-card-right {
  margin-left: -10px;
  transform: rotate(18deg) translateY(8px);
  animation-name: real-loading-card-right;
}

.real-loading-card-right i { color: #8a2d24; }

.real-loading-chip {
  position: absolute;
  z-index: 4;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(255, 236, 166, .88);
  outline: 2px solid #815a1b;
  background: radial-gradient(circle, #d4a43c 0 44%, #82561b 46% 63%, #d9ad49 65% 100%);
  color: #281c0b;
  font: 900 10px/1 Georgia, serif;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .42), 0 0 13px rgba(214, 163, 61, .28);
  animation: real-loading-chip-orbit 3s ease-in-out infinite alternate;
}

.real-loading-chip-one { left: 8px; bottom: 2px; }
.real-loading-chip-two { right: 4px; top: 8px; animation-delay: -1.5s; }

.real-loading-panel h1 {
  margin: 0;
  color: #f5dfaa;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 5vw, 39px);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  letter-spacing: .015em;
  text-shadow: 0 2px 0 #4a3212, 0 0 24px rgba(212, 165, 65, .24);
}

.real-loading-status {
  min-height: 1.5em;
  margin: 12px 0 23px;
  color: rgba(236, 226, 196, .72);
  font-size: clamp(12px, 2vw, 14px);
  line-height: 1.45;
  text-align: center;
}

.real-loading-progress-shell {
  width: 100%;
}

.real-loading-progress-track {
  position: relative;
  width: 100%;
  height: 15px;
  padding: 3px;
  overflow: visible;
  border: 1px solid rgba(214, 168, 69, .56);
  border-radius: 999px;
  background: rgba(4, 6, 4, .72);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .88),
    0 0 0 2px rgba(69, 50, 20, .35),
    0 0 16px rgba(193, 145, 50, .08);
}

.real-loading-progress-fill {
  position: relative;
  width: 0%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #49633b 0%, #77934a 32%, #c28b31 73%, #f0c65c 100%);
  box-shadow: 0 0 13px rgba(222, 177, 73, .38), inset 0 1px rgba(255, 247, 198, .45);
  transition: width .16s linear;
}

.real-loading-progress-fill::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 48px;
  right: -12px;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 219, .72), transparent);
  animation: real-loading-bar-glint 1.25s ease-in-out infinite;
}

.real-loading-progress-marker {
  position: absolute;
  z-index: 3;
  left: 0%;
  top: 50%;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #f3d47d;
  background: radial-gradient(circle, #fff1a7 0 17%, #c6912e 20% 56%, #59401d 59% 100%);
  box-shadow: 0 0 12px rgba(244, 201, 91, .72), 0 2px 4px rgba(0, 0, 0, .75);
  transition: left .16s linear;
}

.real-loading-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-top: 12px;
  color: rgba(222, 212, 181, .56);
  font-size: 11px;
  letter-spacing: .055em;
}

.real-loading-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-loading-meta strong {
  flex: 0 0 auto;
  color: #e5bd5e;
  font: 800 15px/1 Georgia, serif;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(229, 181, 71, .3);
}

@keyframes real-loading-pattern-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(3deg); }
}

@keyframes real-loading-orb-float {
  0% { transform: translate3d(-3%, -2%, 0) scale(.92); }
  100% { transform: translate3d(5%, 6%, 0) scale(1.08); }
}

@keyframes real-loading-spark-rise {
  0% { transform: translate3d(0, 20px, 0) rotate(7deg); opacity: 0; }
  16% { opacity: .78; }
  76% { opacity: .42; }
  100% { transform: translate3d(28px, -76vh, 0) rotate(-13deg); opacity: 0; }
}

@keyframes real-loading-chain-sway {
  0% { transform: rotate(-2.6deg); }
  100% { transform: rotate(2.6deg); }
}

@keyframes real-loading-card-left {
  0%, 100% { transform: rotate(-18deg) translateY(8px); }
  50% { transform: rotate(-22deg) translate(-3px, 2px); }
}

@keyframes real-loading-card-center {
  0%, 100% { transform: translateY(-2px) rotateY(0deg); }
  48% { transform: translateY(-10px) rotateY(0deg); }
  55% { transform: translateY(-10px) rotateY(12deg); }
}

@keyframes real-loading-card-right {
  0%, 100% { transform: rotate(18deg) translateY(8px); }
  50% { transform: rotate(22deg) translate(3px, 2px); }
}

@keyframes real-loading-chip-orbit {
  0% { transform: translate3d(0, 1px, 0) rotate(-8deg); }
  100% { transform: translate3d(6px, -7px, 0) rotate(15deg); }
}

@keyframes real-loading-bar-glint {
  0% { transform: translateX(-190%) skewX(-24deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(130%) skewX(-24deg); opacity: 0; }
}

@keyframes real-loading-ready-pulse {
  0% { box-shadow: 0 30px 80px rgba(0, 0, 0, .68), 0 0 0 5px rgba(82, 63, 27, .28), 0 0 34px rgba(194, 145, 47, .15), inset 0 0 0 1px rgba(255, 238, 181, .08), inset 0 0 60px rgba(0, 0, 0, .34); }
  50% { box-shadow: 0 30px 80px rgba(0, 0, 0, .68), 0 0 0 5px rgba(127, 98, 37, .34), 0 0 48px rgba(228, 184, 83, .34), inset 0 0 0 1px rgba(255, 238, 181, .17), inset 0 0 60px rgba(0, 0, 0, .28); }
  100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .68), 0 0 0 5px rgba(82, 63, 27, .28), 0 0 34px rgba(194, 145, 47, .15), inset 0 0 0 1px rgba(255, 238, 181, .08), inset 0 0 60px rgba(0, 0, 0, .34); }
}

@media (max-width: 620px) {
  .real-loading-panel {
    min-height: 380px;
    border-radius: 22px 9px 22px 9px;
  }
  .real-loading-chain { top: -61px; height: 84px; }
  .real-loading-chain-left { left: 17%; }
  .real-loading-chain-right { right: 17%; }
  .real-loading-emblem { transform: scale(.9); margin-bottom: 10px; }
  .real-loading-meta { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .real-loading-screen::before,
  .real-loading-orb,
  .real-loading-spark,
  .real-loading-chain,
  .real-loading-card,
  .real-loading-chip,
  .real-loading-progress-fill::after {
    animation: none !important;
  }
  .real-loading-progress-fill,
  .real-loading-progress-marker,
  .real-loading-screen,
  .real-loading-panel {
    transition-duration: .01ms !important;
  }
}

/* Immediate access termination / cash-out confirmation */
.access-ended-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(142, 99, 28, .2), transparent 34%),
    rgba(5, 4, 3, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: access-ended-overlay-in .22s ease both;
}

.access-ended-modal.hidden {
  display: none !important;
}

.access-ended-card {
  position: relative;
  width: min(520px, calc(100vw - 34px));
  padding: 34px 34px 28px;
  overflow: visible;
  border: 1px solid rgba(236, 194, 94, .72);
  border-radius: 18px 7px 18px 7px;
  background:
    linear-gradient(145deg, rgba(58, 39, 18, .98), rgba(18, 13, 8, .99) 58%, rgba(42, 27, 12, .98));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .72),
    0 0 30px rgba(219, 166, 58, .22),
    inset 0 0 0 1px rgba(255, 238, 180, .08);
  text-align: center;
  animation: access-ended-card-in .34s cubic-bezier(.2, .86, .28, 1.12) both;
}

.access-ended-card::before,
.access-ended-card::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(transparent, rgba(236, 194, 94, .58), transparent);
}

.access-ended-card::before { left: 14px; }
.access-ended-card::after { right: 14px; }

.access-ended-ornament {
  position: absolute;
  top: -15px;
  left: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(244, 207, 112, .82);
  background: #2d1d0c;
  color: #f2ce72;
  box-shadow: 0 0 18px rgba(230, 177, 62, .42);
  font-size: 11px;
}

.access-ended-ornament::first-letter {
  transform: rotate(-45deg);
}

.access-ended-card h2 {
  margin: 0 0 14px;
  color: #f3d684;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 500;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(225, 166, 49, .22);
}

.access-ended-card p {
  margin: 0 auto;
  max-width: 420px;
  color: #eadab7;
  font: clamp(14px, 1vw, 17px)/1.55 Arial, sans-serif;
}

.access-ended-card button {
  min-width: 124px;
  margin-top: 24px;
  padding: 10px 24px;
  border: 1px solid rgba(242, 205, 111, .7);
  border-radius: 8px 3px 8px 3px;
  background: linear-gradient(#72501e, #38230d);
  color: #fff0bd;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 244, 198, .15);
  font: 700 13px/1 Arial, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.access-ended-card button:hover,
.access-ended-card button:focus-visible {
  filter: brightness(1.16);
  transform: translateY(-1px) scale(1.025);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .42), 0 0 16px rgba(225, 171, 55, .24);
  outline: none;
}

@keyframes access-ended-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes access-ended-card-in {
  from { opacity: 0; transform: translateY(-18px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Nameplate Effects shop + global Supporter cosmetics ===== */
.customize-supporter-footer {
  position: absolute;
  z-index: 7;
  top: calc(var(--shop-card-height) + 28px);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: max-content;
  max-width: min(92vw, 760px);
  padding: 8px 10px 8px 17px;
  transform: translateX(-50%);
  border: 1px solid rgba(218, 174, 78, .42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(54, 35, 17, .94), rgba(22, 15, 9, .96)),
    radial-gradient(circle at 50% 0, rgba(232, 188, 92, .14), transparent 68%);
  box-shadow:
    0 9px 28px rgba(0, 0, 0, .48),
    0 0 16px rgba(202, 151, 47, .10),
    inset 0 0 0 1px rgba(255, 240, 188, .06);
  color: #eadbb9;
  font: 700 14px/1.2 Arial, sans-serif;
  letter-spacing: .015em;
  white-space: nowrap;
  pointer-events: auto;
}

.customize-supporter-footer::before,
.customize-supporter-footer::after {
  content: '✦';
  color: #d9ae58;
  font-size: 9px;
  text-shadow: 0 0 7px rgba(224, 174, 66, .48);
}

.customize-supporter-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 14px;
  border: 1px solid rgba(245, 172, 210, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(129, 61, 91, .94), rgba(70, 31, 50, .98));
  color: #ffd9ec;
  box-shadow:
    0 5px 13px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 225, 240, .15),
    0 0 11px rgba(236, 132, 185, .10);
  text-decoration: none;
  font-size: 12px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.customize-supporter-footer a:hover,
.customize-supporter-footer a:focus-visible {
  transform: translateY(-1px) scale(1.025);
  filter: brightness(1.13);
  box-shadow:
    0 7px 17px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 235, 245, .20),
    0 0 16px rgba(240, 143, 193, .24);
  outline: none;
}

.customize-supporter-free {
  color: #f6acd2 !important;
  -webkit-text-fill-color: #f6acd2 !important;
  font-weight: 800;
  letter-spacing: .035em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .82), 0 0 8px rgba(239, 130, 186, .25);
}

.customize-item-card.is-supporter-free:not(.is-active) .customize-item-state {
  color: #f6acd2 !important;
  -webkit-text-fill-color: #f6acd2 !important;
}

/* Supporter badge uses the exact effective VIP badge geometry. */
.seat-supporter-badge {
  width: clamp(16px, .92cqw, 24px) !important;
  height: clamp(16px, .92cqw, 24px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: none !important;
}

.account-supporter-badge {
  width: clamp(20px, 1.12cqw, 29px) !important;
  height: clamp(20px, 1.12cqw, 29px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: none !important;
}

.seat-name {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: clamp(2px, .16cqw, 5px);
}

.seat-name > .seat-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The effect item shows the actual live nameplate composition rather than a
   separate mock image: current background, border, badges, name and bank. */
.customize-item-preview.customize-effect-preview {
  width: min(100%, 184px) !important;
  height: 112px !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.customize-effect-nameplate-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  container-type: inline-size;
}

.customize-effect-preview-seat.player-seat {
  position: relative !important;
  inset: auto !important;
  width: 174px !important;
  height: 76px !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.customize-effect-preview-seat.player-seat > .seat-plaque {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 168px !important;
  min-width: 168px !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 10px 22px 9px !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
}

.customize-effect-preview-seat .seat-name {
  font-size: 11px !important;
}

.customize-effect-preview-seat .seat-meta,
.customize-effect-preview-seat .seat-meta span,
.customize-effect-preview-seat .seat-meta strong {
  font-size: 9px !important;
}

.customize-effect-preview-seat .seat-vip-badge,
.customize-effect-preview-seat .seat-supporter-badge,
.customize-effect-preview-seat .seat-custom-badge {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
}

.customize-purchase-seat-preview .seat-supporter-badge {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

/* Nameplate VFX are isolated to a small composited layer. They never receive
   input and sit beneath the readable name/bank content. */
.player-seat > .seat-plaque,
.customize-effect-preview-seat.player-seat > .seat-plaque,
.customize-purchase-seat-preview.player-seat > .seat-plaque {
  overflow: visible !important;
  isolation: isolate;
}

.seat-plaque > .nameplate-effect-layer {
  position: absolute !important;
  z-index: 3 !important;
  inset: -18% -8% !important;
  display: block;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
  transform: translateZ(0);
}

.seat-plaque > .seat-name,
.seat-plaque > .seat-meta,
.seat-plaque > .seat-customize-hover-label {
  position: relative !important;
  z-index: 4 !important;
}

.nameplate-effect-layer > b,
.nameplate-effect-layer > i,
.nameplate-effect-layer > b::before,
.nameplate-effect-layer > b::after,
.nameplate-effect-layer > i::before,
.nameplate-effect-layer > i::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}

.nameplate-effect-layer > b,
.nameplate-effect-layer > i {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: 400;
}

/* 1 — Lucky Spark: corner glints that blink in a non-looping-looking rhythm. */
.nameplate-effect-lucky-spark > i {
  width: 7px;
  height: 7px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 42%, #ffe9a7 43% 57%, transparent 58%),
              linear-gradient(transparent 42%, #fff5c9 43% 57%, transparent 58%);
  filter: drop-shadow(0 0 3px rgba(255, 205, 87, .75));
  animation: np-lucky-spark 3.8s ease-in-out infinite;
  animation-delay: calc(var(--effect-i) * -.41s);
}
.nameplate-effect-lucky-spark > i:nth-of-type(1),
.nameplate-effect-lucky-spark > i:nth-of-type(5) { top: 8%; left: 3%; }
.nameplate-effect-lucky-spark > i:nth-of-type(2),
.nameplate-effect-lucky-spark > i:nth-of-type(6) { top: 4%; right: 5%; }
.nameplate-effect-lucky-spark > i:nth-of-type(3),
.nameplate-effect-lucky-spark > i:nth-of-type(7) { bottom: 6%; left: 8%; }
.nameplate-effect-lucky-spark > i:nth-of-type(4),
.nameplate-effect-lucky-spark > i:nth-of-type(8) { right: 3%; bottom: 10%; }
.nameplate-effect-lucky-spark > i:nth-of-type(n+5) { width: 4px; height: 4px; }
@keyframes np-lucky-spark {
  0%, 68%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); }
  74% { opacity: .92; transform: scale(1.2) rotate(45deg); }
  82% { opacity: .22; transform: scale(.7) rotate(90deg); }
}

/* 2 — Card Whisper: four suits softly travel along separate edge paths. */
.nameplate-effect-card-whisper > i {
  opacity: 0;
  color: #ead8ba;
  font: 700 9px/1 Georgia, serif;
  text-shadow: 0 1px 2px #000, 0 0 4px currentColor;
  animation: np-card-whisper 7.2s linear infinite;
  animation-delay: calc(var(--effect-i) * -.72s);
}
.nameplate-effect-card-whisper > i::before { position: static; }
.nameplate-effect-card-whisper > i:nth-of-type(4n+1)::before { content: '♠'; color: #d8e6ee; }
.nameplate-effect-card-whisper > i:nth-of-type(4n+2)::before { content: '♥'; color: #e88b99; }
.nameplate-effect-card-whisper > i:nth-of-type(4n+3)::before { content: '♦'; color: #e6a071; }
.nameplate-effect-card-whisper > i:nth-of-type(4n)::before { content: '♣'; color: #b7d1bd; }
.nameplate-effect-card-whisper > i:nth-of-type(odd) { top: -1%; left: calc(8% + var(--effect-i) * 8%); }
.nameplate-effect-card-whisper > i:nth-of-type(even) { right: calc(5% + var(--effect-i) * 5%); bottom: -1%; }
@keyframes np-card-whisper {
  0% { opacity: 0; transform: translate3d(-7px, 2px, 0) rotate(-12deg); }
  18%, 72% { opacity: .50; }
  100% { opacity: 0; transform: translate3d(18px, -3px, 0) rotate(14deg); }
}

/* 3 — Coin Trail: miniature elliptical coins rise from alternating lower edges. */
.nameplate-effect-coin-trail > i {
  bottom: 2%;
  left: calc(5% + var(--effect-i) * 11%);
  width: 7px;
  height: 5px;
  border: 1px solid rgba(255, 224, 126, .86);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 36% 32%, #fff0a8 0 16%, #d99b2e 42%, #815113 78%);
  box-shadow: 0 0 4px rgba(239, 178, 55, .34);
  animation: np-coin-trail 5.6s ease-out infinite;
  animation-delay: calc(var(--effect-i) * -.61s);
}
@keyframes np-coin-trail {
  0% { opacity: 0; transform: translate3d(0, 5px, 0) rotateY(0deg) scale(.72); }
  17% { opacity: .72; }
  76% { opacity: .38; }
  100% { opacity: 0; transform: translate3d(calc((var(--effect-i) - 4) * 2px), -27px, 0) rotateY(180deg) scale(.92); }
}

/* 4 — Moonlit Motes: crescent at one corner plus a slow field of cool motes. */
.nameplate-effect-moonlit-motes > b {
  top: -1px;
  right: 2%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: -4px 1px 0 0 rgba(206, 221, 255, .82), -4px 1px 7px rgba(143, 170, 237, .40);
  opacity: .60;
  animation: np-moon-crescent 5.8s ease-in-out infinite;
}
.nameplate-effect-moonlit-motes > i {
  top: 14%;
  left: calc(5% + var(--effect-i) * 12%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd9ff;
  box-shadow: 0 0 5px rgba(154, 183, 255, .85);
  opacity: .18;
  animation: np-moon-mote 6.4s ease-in-out infinite;
  animation-delay: calc(var(--effect-i) * -.53s);
}
.nameplate-effect-moonlit-motes > i:nth-of-type(3n+2) { top: 44%; }
.nameplate-effect-moonlit-motes > i:nth-of-type(3n) { top: 72%; }
@keyframes np-moon-crescent { 0%,100% { transform: rotate(-8deg); opacity:.42; } 50% { transform: rotate(8deg); opacity:.72; } }
@keyframes np-moon-mote { 0%,100% { transform: translate(0,2px) scale(.7); opacity:.08; } 50% { transform: translate(4px,-6px) scale(1.25); opacity:.62; } }

/* 5 — Ember Crown: a tiny crown crest and sparse sparks rising above it. */
.nameplate-effect-ember-crown > b {
  top: -5px;
  left: 50%;
  width: 23px;
  height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f6ba45, #a64f16);
  clip-path: polygon(0 100%, 4% 34%, 27% 70%, 40% 5%, 54% 70%, 73% 22%, 96% 68%, 100% 100%);
  opacity: .50;
  filter: drop-shadow(0 0 4px rgba(244, 115, 30, .42));
  animation: np-ember-crown 4.7s ease-in-out infinite;
}
.nameplate-effect-ember-crown > i {
  top: 4%;
  left: calc(27% + var(--effect-i) * 6.5%);
  width: 3px;
  height: 5px;
  border-radius: 60% 40% 70% 30%;
  background: linear-gradient(#ffe376, #ef6a1f 70%, transparent);
  opacity: 0;
  animation: np-ember-rise 3.3s ease-out infinite;
  animation-delay: calc(var(--effect-i) * -.38s);
}
@keyframes np-ember-crown { 0%,100% { opacity:.38; transform:translateX(-50%) scale(.96); } 50% { opacity:.68; transform:translateX(-50%) scale(1.03); } }
@keyframes np-ember-rise { 0% { opacity:0; transform:translate(0,5px) scale(.5); } 20% { opacity:.62; } 100% { opacity:0; transform:translate(calc((var(--effect-i) - 4) * 1px),-18px) rotate(80deg) scale(.15); } }

/* 6 — Frost Runes: angular rune strokes flash one at a time around the frame. */
.nameplate-effect-frost-runes > b {
  inset: 5% 1%;
  border: 1px solid rgba(169, 227, 255, .14);
  border-radius: 9px;
  box-shadow: inset 0 0 7px rgba(111, 202, 246, .07), 0 0 5px rgba(135, 219, 255, .08);
}
.nameplate-effect-frost-runes > i {
  width: 8px;
  height: 8px;
  opacity: .10;
  border-top: 1px solid #bcecff;
  border-left: 1px solid #7cc9ed;
  filter: drop-shadow(0 0 3px rgba(105, 207, 255, .72));
  animation: np-frost-rune 5.2s steps(2, end) infinite;
  animation-delay: calc(var(--effect-i) * -.53s);
}
.nameplate-effect-frost-runes > i:nth-of-type(1) { top:3%; left:5%; transform:rotate(0); }
.nameplate-effect-frost-runes > i:nth-of-type(2) { top:0; left:29%; transform:rotate(45deg); }
.nameplate-effect-frost-runes > i:nth-of-type(3) { top:1%; right:29%; transform:rotate(90deg); }
.nameplate-effect-frost-runes > i:nth-of-type(4) { top:4%; right:4%; transform:rotate(135deg); }
.nameplate-effect-frost-runes > i:nth-of-type(5) { bottom:3%; right:5%; transform:rotate(180deg); }
.nameplate-effect-frost-runes > i:nth-of-type(6) { bottom:0; right:29%; transform:rotate(225deg); }
.nameplate-effect-frost-runes > i:nth-of-type(7) { bottom:1%; left:29%; transform:rotate(270deg); }
.nameplate-effect-frost-runes > i:nth-of-type(8) { bottom:4%; left:4%; transform:rotate(315deg); }
@keyframes np-frost-rune { 0%,74%,100% { opacity:.08; } 78%,86% { opacity:.70; } }

/* 7 — Garden Breeze: leaf silhouettes sweep between opposite corners. */
.nameplate-effect-garden-breeze > i {
  width: 8px;
  height: 4px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #d5e7a0, #56834c);
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(20, 50, 23, .45));
  animation: np-garden-leaf 7.6s cubic-bezier(.25,.48,.35,.92) infinite;
  animation-delay: calc(var(--effect-i) * -.82s);
}
.nameplate-effect-garden-breeze > i:nth-of-type(odd) { top: -3%; left: 1%; }
.nameplate-effect-garden-breeze > i:nth-of-type(even) { right: 1%; bottom: -2%; animation-direction: reverse; }
@keyframes np-garden-leaf {
  0% { opacity:0; transform:translate3d(-4px,0,0) rotate(-35deg); }
  15%,70% { opacity:.48; }
  100% { opacity:0; transform:translate3d(58px,18px,0) rotate(220deg); }
}

/* 8 — Bubble Charm: translucent rings rise without covering the center. */
.nameplate-effect-bubble-charm > i {
  bottom: 0;
  left: calc(2% + var(--effect-i) * 13%);
  width: 5px;
  height: 5px;
  border: 1px solid rgba(186, 232, 244, .58);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.52) 0 10%, transparent 34%);
  box-shadow: inset 0 0 3px rgba(129, 211, 231, .22), 0 0 3px rgba(124, 214, 235, .18);
  animation: np-bubble-rise 6.2s ease-in infinite;
  animation-delay: calc(var(--effect-i) * -.69s);
}
.nameplate-effect-bubble-charm > i:nth-of-type(3n+2) { width: 7px; height: 7px; }
.nameplate-effect-bubble-charm > i:nth-of-type(3n) { width: 9px; height: 9px; }
@keyframes np-bubble-rise { 0% { opacity:0; transform:translateY(5px) scale(.72); } 20%,70% { opacity:.48; } 100% { opacity:0; transform:translateY(-31px) translateX(5px) scale(1.08); } }

/* 9 — Electric Pulse: a border trace and tiny lightning ticks. */
.nameplate-effect-electric-pulse > b {
  inset: 5% 1%;
  border-radius: 9px;
  padding: 1px;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 72%, #a8f1ff 78%, #5f9dff 83%, transparent 90% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: np-electric-trace 4.4s linear infinite;
}
.nameplate-effect-electric-pulse > i {
  width: 7px;
  height: 9px;
  opacity: 0;
  background: #b7f4ff;
  clip-path: polygon(52% 0, 100% 0, 64% 42%, 100% 42%, 26% 100%, 45% 54%, 8% 54%);
  filter: drop-shadow(0 0 3px rgba(82, 176, 255, .72));
  animation: np-electric-tick 4.4s ease-out infinite;
  animation-delay: calc(var(--effect-i) * -.51s);
}
.nameplate-effect-electric-pulse > i:nth-of-type(odd) { top: -1px; left: calc(8% + var(--effect-i) * 9%); }
.nameplate-effect-electric-pulse > i:nth-of-type(even) { right: calc(5% + var(--effect-i) * 7%); bottom: -1px; transform:rotate(180deg); }
@keyframes np-electric-trace { 0%,66%,100% { opacity:0; transform:rotate(0deg); } 70% { opacity:.62; } 90% { opacity:.12; transform:rotate(360deg); } }
@keyframes np-electric-tick { 0%,76%,100% { opacity:0; } 79% { opacity:.68; } 83% { opacity:.12; } 87% { opacity:.52; } 91% { opacity:0; } }

/* 10 — Starfall Ribbon: short diagonal shooting-star streaks. */
.nameplate-effect-starfall-ribbon > i {
  top: -2%;
  left: calc(5% + var(--effect-i) * 12%);
  width: 14px;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 220, 255, .72));
  transform: rotate(-24deg);
  filter: drop-shadow(0 0 2px rgba(156, 187, 255, .55));
  animation: np-starfall 6.8s ease-in infinite;
  animation-delay: calc(var(--effect-i) * -.76s);
}
.nameplate-effect-starfall-ribbon > i:nth-of-type(3n+2) { top: 23%; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(3n) { top: 48%; }
.nameplate-effect-starfall-ribbon > i::after {
  content: '';
  right: -1px;
  top: -2px;
  width: 4px;
  height: 4px;
  background: #eff4ff;
  clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
@keyframes np-starfall { 0% { opacity:0; transform:translate(-13px,-5px) rotate(-24deg); } 14% { opacity:.65; } 39% { opacity:0; transform:translate(15px,10px) rotate(-24deg); } 100% { opacity:0; } }

/* 11 — Dice Echo: two pairs of tiny dice roll near the lower corners. */
.nameplate-effect-dice-echo > i {
  bottom: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(235, 229, 210, .68);
  border-radius: 2px;
  opacity: 0;
  background: rgba(42, 34, 28, .82);
  box-shadow: 0 0 4px rgba(255, 221, 147, .16);
  animation: np-dice-echo 6.2s ease-in-out infinite;
  animation-delay: calc(var(--effect-i) * -.67s);
}
.nameplate-effect-dice-echo > i::before {
  content: '';
  top: 3px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f5ddaa;
  box-shadow: -2px -2px 0 #f5ddaa, 2px 2px 0 #f5ddaa;
}
.nameplate-effect-dice-echo > i:nth-of-type(odd) { left: calc(2% + var(--effect-i) * 1.3%); }
.nameplate-effect-dice-echo > i:nth-of-type(even) { right: calc(2% + var(--effect-i) * 1.3%); }
.nameplate-effect-dice-echo > i:nth-of-type(n+5) { display:none; }
@keyframes np-dice-echo { 0%,60%,100% { opacity:0; transform:translateY(4px) rotate(-25deg) scale(.8); } 68% { opacity:.62; transform:translateY(-2px) rotate(18deg) scale(1); } 82% { opacity:.28; transform:translateY(0) rotate(0) scale(.9); } }

/* 12 — Heartbeat Aura: one soft heart pulse behind the plate, not over text. */
.nameplate-effect-heartbeat-aura > b {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  opacity: .08;
  background: rgba(246, 112, 146, .72);
  transform: translate(-50%, -38%) rotate(45deg) scale(.7);
  filter: blur(.4px) drop-shadow(0 0 8px rgba(235, 88, 132, .42));
  animation: np-heartbeat 3.4s ease-in-out infinite;
}
.nameplate-effect-heartbeat-aura > b::before,
.nameplate-effect-heartbeat-aura > b::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
}
.nameplate-effect-heartbeat-aura > b::before { left:-9px; top:0; }
.nameplate-effect-heartbeat-aura > b::after { left:0; top:-9px; }
.nameplate-effect-heartbeat-aura > i { display:none; }
@keyframes np-heartbeat { 0%,62%,100% { opacity:.05; transform:translate(-50%,-38%) rotate(45deg) scale(.66); } 68% { opacity:.25; transform:translate(-50%,-38%) rotate(45deg) scale(.88); } 74% { opacity:.10; transform:translate(-50%,-38%) rotate(45deg) scale(.72); } 80% { opacity:.20; transform:translate(-50%,-38%) rotate(45deg) scale(.82); } }

/* 13 — Mystic Orbit: two separately timed orbs orbit an elliptical sigil. */
.nameplate-effect-mystic-orbit > b {
  inset: 2% 4%;
  border: 1px solid rgba(181, 138, 246, .24);
  border-radius: 50%;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 8px rgba(126, 88, 204, .06), 0 0 7px rgba(150, 105, 228, .08);
}
.nameplate-effect-mystic-orbit > i {
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #d8bcff;
  box-shadow: 0 0 5px #a878f0;
  opacity: .68;
  animation: np-mystic-orbit 6.8s linear infinite;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(2) { animation-duration:8.9s; animation-direction:reverse; background:#9edcff; box-shadow:0 0 5px #5dbce8; }
.nameplate-effect-mystic-orbit > i:nth-of-type(n+3) { display:none; }
@keyframes np-mystic-orbit { from { transform:rotate(0deg) translateX(54px) rotate(0deg) scale(.8); } to { transform:rotate(360deg) translateX(54px) rotate(-360deg) scale(1.15); } }

/* 14 — Royal Confetti: sparse diamonds/crowns descend only near the sides. */
.nameplate-effect-royal-confetti > i {
  top: -4%;
  width: 5px;
  height: 7px;
  opacity: 0;
  background: linear-gradient(145deg, #f5d67d, #9c6722);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation: np-royal-confetti 7.2s ease-in infinite;
  animation-delay: calc(var(--effect-i) * -.81s);
}
.nameplate-effect-royal-confetti > i:nth-of-type(odd) { left: calc(1% + var(--effect-i) * 1.2%); }
.nameplate-effect-royal-confetti > i:nth-of-type(even) { right: calc(1% + var(--effect-i) * 1.2%); }
.nameplate-effect-royal-confetti > i:nth-of-type(3n) {
  width:8px; height:6px;
  clip-path:polygon(0 100%,5% 25%,29% 68%,43% 0,58% 68%,80% 20%,100% 65%,100% 100%);
}
@keyframes np-royal-confetti { 0% { opacity:0; transform:translateY(-4px) rotate(0); } 15%,56% { opacity:.46; } 100% { opacity:0; transform:translateY(33px) rotate(190deg); } }

/* 15 — Void Wisps: two blurred tendrils curl from the lower edge. */
.nameplate-effect-void-wisps > b,
.nameplate-effect-void-wisps > i {
  bottom: -4%;
  width: 18px;
  height: 28px;
  border: 2px solid transparent;
  border-left-color: rgba(166, 103, 221, .43);
  border-radius: 50%;
  opacity: .18;
  filter: blur(.35px) drop-shadow(0 0 5px rgba(99, 48, 157, .44));
  animation: np-void-wisp 5.8s ease-in-out infinite;
}
.nameplate-effect-void-wisps > b { left: 16%; }
.nameplate-effect-void-wisps > i { right: calc(5% + var(--effect-i) * 4%); animation-delay:calc(var(--effect-i) * -.72s); }
.nameplate-effect-void-wisps > i:nth-of-type(n+3) { display:none; }
.nameplate-effect-void-wisps > i:nth-of-type(2) { border-left-color:transparent; border-right-color:rgba(78, 165, 190, .36); animation-direction:reverse; }
@keyframes np-void-wisp { 0%,100% { opacity:.08; transform:translate(0,4px) rotate(-8deg) scale(.8); } 50% { opacity:.42; transform:translate(6px,-8px) rotate(20deg) scale(1.1); } }

@media (max-width: 900px) {
  .customize-supporter-footer {
    top: calc(var(--shop-card-height) + 18px);
    gap: 8px;
    padding-left: 12px;
    font-size: 11px;
  }
  .customize-supporter-footer::before,
  .customize-supporter-footer::after { display: none; }
  .customize-supporter-footer a { padding: 0 10px; font-size: 10px; }
}

@media (max-width: 620px) {
  .customize-supporter-footer {
    flex-wrap: wrap;
    width: min(92vw, 420px);
    border-radius: 14px;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nameplate-effect-layer > b,
  .nameplate-effect-layer > i {
    animation: none !important;
    opacity: .22 !important;
  }
  .customize-supporter-footer a { transition-duration: .01ms !important; }
}

/* Give effect cards enough real layout height for the live nameplate preview.
   The ordinary cosmetic cards keep their existing compact rows. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card.customize-effect-option {
  min-height: 205px !important;
  grid-template-rows: 116px auto 20px !important;
  gap: 6px !important;
}

.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card.customize-effect-option
  > .customize-item-preview.customize-effect-preview {
  width: calc(100% - 8px) !important;
  height: 112px !important;
  min-height: 112px !important;
  max-width: calc(100% - 8px) !important;
  max-height: 112px !important;
}

@media (max-width: 820px) {
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card.customize-effect-option {
    min-height: 194px !important;
    grid-template-rows: 106px auto 20px !important;
  }

  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card.customize-effect-option
    > .customize-item-preview.customize-effect-preview {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }
}

/* ===== Nameplate Effects refinement + reversible Shop close ===== */
/* Keep the live player nameplate on the exact geometry that existed before the
   Supporter/effect catalog was added. New badges and VFX are overlays/content
   only and must not redefine the plaque's box or move its name/bank rows. */
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
  width: auto !important;
  min-width: 6.65cqw !important;
  max-width: 12.45cqw !important;
  min-height: 0 !important;
  padding: .58cqh .54cqw .7cqh !important;
  transform: translateY(-35px) !important;
}
.player-seat.is-self:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
  min-width: 8.55cqw !important;
  max-width: 14.65cqw !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) .seat-name {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque::before,
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque::after {
  width: auto !important;
  max-width: 100% !important;
}
.seat-name > .seat-supporter-badge {
  display: block !important;
  flex: 0 0 auto !important;
  margin-block: calc((1em - clamp(16px, .92cqw, 24px)) / 2) !important;
  pointer-events: none !important;
}

/* Effect catalog cards show only their animated layer. No player nameplate,
   background, border, badges, name or bank is duplicated inside item cards. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card.customize-effect-option {
  min-height: 166px !important;
  max-height: 166px !important;
  grid-template-rows: 66px auto 20px !important;
  gap: 5px !important;
}
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card.customize-effect-option
  > .customize-item-preview.customize-effect-preview {
  width: calc(100% - 18px) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: calc(100% - 18px) !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.customize-effect-only-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(154px, 100%);
  height: 58px;
  overflow: visible;
  isolation: isolate;
  pointer-events: none;
}
.customize-effect-only-stage > .customize-effect-only-layer {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
  contain: layout style;
  transform: translateZ(0);
}
.customize-effect-only-stage-empty {
  border: 1px dashed rgba(220, 184, 107, .30);
  border-radius: 10px 4px 10px 4px;
  color: rgba(227, 204, 155, .56);
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .13em;
}

/* Both the purchase preview and the acquired-item preview use the same stage.
   Center the complete nameplate and its effect layer together for effects. */
.customize-purchase-preview-stage[data-preview-type="effect"] {
  height: 112px !important;
  display: grid !important;
  place-items: center !important;
}
.customize-purchase-preview-stage[data-preview-type="effect"]
  .customize-purchase-seat-preview.player-seat {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.customize-purchase-preview-stage[data-preview-type="effect"]
  .customize-purchase-seat-preview.player-seat > .seat-plaque {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 236px !important;
  min-width: 0 !important;
  max-width: calc(100% - 28px) !important;
  min-height: 60px !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.customize-purchase-preview-stage[data-preview-type="effect"]
  .seat-plaque > .nameplate-effect-layer {
  inset: -18% -8% !important;
}

/* Supporter ownership copy is intentionally compact, with a soft pink halo. */
.customize-supporter-free {
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .84),
    0 0 5px rgba(246, 151, 202, .48),
    0 0 9px rgba(239, 130, 186, .20) !important;
}

/* Purchase confirmation hierarchy. */
.customize-purchase-supporter-note {
  display: block;
  margin-bottom: 3px;
  color: #f5b2d5;
  font: 700 12px/1.25 Arial, sans-serif !important;
  letter-spacing: .015em;
  text-shadow: 0 0 7px rgba(239, 136, 191, .24);
}
.customize-purchase-buy-copy {
  display: block;
  color: #dfcaa2;
  font: 700 15px/1.32 Arial, sans-serif !important;
}
.customize-purchase-buy-copy .customize-confirm-item {
  font-size: inherit !important;
  line-height: inherit !important;
}
.customize-purchase-message > .customize-confirm-price {
  font: 800 17px/1.2 Arial, sans-serif !important;
  letter-spacing: .01em !important;
}
.customize-purchase-message > .customize-confirm-price .customize-price,
.customize-purchase-message > .customize-confirm-price .customize-price > span {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}
.customize-purchase-message > .customize-confirm-price .customize-price img {
  width: 19px !important;
  height: 19px !important;
}

/* Closing the Shop from X, backdrop, Escape, access reset, or any other path
   runs the opening drop in the exact opposite direction while replaying the
   normal chain recording. The blur remains until the reverse motion ends. */
.customize-modal-overlay.is-closing {
  pointer-events: none !important;
}
.customize-modal-overlay.is-closing .customize-shop-chains {
  animation: shop-chain-unfurl var(--shop-chain-duration) cubic-bezier(.20, .72, .18, 1) reverse both !important;
}
.customize-modal-overlay.is-closing .customize-shop-panel-group {
  animation: shop-window-drop var(--shop-window-duration) cubic-bezier(.16, .78, .18, 1) reverse both !important;
}

@media (prefers-reduced-motion: reduce) {
  .customize-modal-overlay.is-closing .customize-shop-chains,
  .customize-modal-overlay.is-closing .customize-shop-panel-group {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== Nameplate VFX motion pass + Name Effect catalog ===== */
/* These overrides keep the player nameplate as the visual center of every VFX.
   Paths cross or occupy the full plate instead of ending before its midpoint. */

/* Garden Breeze: leaves now cross the complete nameplate from left to right.
   Movement is transform-based so the fixed particle anchors can never pin the
   leaves outside one side of the plaque. */
.nameplate-effect-garden-breeze > i {
  left: 50% !important;
  right: auto !important;
  top: var(--leaf-y, 20%) !important;
  bottom: auto !important;
  width: 8px !important;
  height: 5px !important;
  border-radius: 90% 12% 90% 12% !important;
  background: linear-gradient(145deg, #e2f5ad 0 18%, #79b653 45%, #315f36 100%) !important;
  box-shadow: inset -1px -1px 0 rgba(20,58,30,.42), 0 0 4px rgba(122,194,100,.30) !important;
  opacity: 0;
  transform-origin: 20% 80%;
  animation: np3-garden-cross var(--leaf-duration, 6.9s) cubic-bezier(.28,.08,.68,.96) infinite !important;
  animation-delay: var(--leaf-delay, 0s) !important;
  animation-direction: normal !important;
}
.nameplate-effect-garden-breeze > i:nth-of-type(1) { --leaf-y:8%;  --leaf-duration:6.4s; --leaf-delay:-1.1s; --leaf-arc:18px; }
.nameplate-effect-garden-breeze > i:nth-of-type(2) { --leaf-y:67%; --leaf-duration:7.4s; --leaf-delay:-4.8s; --leaf-arc:-17px; }
.nameplate-effect-garden-breeze > i:nth-of-type(3) { --leaf-y:31%; --leaf-duration:6.8s; --leaf-delay:-3.0s; --leaf-arc:12px; }
.nameplate-effect-garden-breeze > i:nth-of-type(4) { --leaf-y:79%; --leaf-duration:7.8s; --leaf-delay:-6.2s; --leaf-arc:-14px; }
.nameplate-effect-garden-breeze > i:nth-of-type(5) { --leaf-y:18%; --leaf-duration:7.1s; --leaf-delay:-5.5s; --leaf-arc:22px; }
.nameplate-effect-garden-breeze > i:nth-of-type(6) { --leaf-y:54%; --leaf-duration:6.6s; --leaf-delay:-2.2s; --leaf-arc:-10px; }
.nameplate-effect-garden-breeze > i:nth-of-type(7) { --leaf-y:42%; --leaf-duration:8.0s; --leaf-delay:-7.1s; --leaf-arc:16px; }
.nameplate-effect-garden-breeze > i:nth-of-type(8) { --leaf-y:72%; --leaf-duration:7.5s; --leaf-delay:-.4s; --leaf-arc:-19px; }
@keyframes np3-garden-cross {
  0%   { opacity:0;   transform:translate3d(-116px,0,0) rotate(-38deg) scale(.68); }
  10%  { opacity:.82; }
  34%  { transform:translate3d(-42px,var(--leaf-arc),0) rotate(68deg) scale(.98); }
  62%  { opacity:.78; transform:translate3d(28px,0,0) rotate(166deg) scale(.88); }
  88%  { opacity:.64; }
  100% { opacity:0;   transform:translate3d(116px,4px,0) rotate(292deg) scale(.64); }
}

/* Starfall Ribbon: each shooting star crosses the complete plaque on a
   different diagonal instead of getting pinned at the right edge. */
.nameplate-effect-starfall-ribbon > i {
  left: 50% !important;
  right: auto !important;
  top: var(--star-y, 8%) !important;
  bottom: auto !important;
  width: 22px !important;
  height: 2px !important;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0, rgba(170,198,255,.20) 18%, rgba(222,234,255,.90) 78%, #fff 100%) !important;
  filter: drop-shadow(0 0 3px rgba(152,185,255,.80)) !important;
  animation: np3-starfall-cross var(--star-duration, 5.9s) cubic-bezier(.2,.65,.56,1) infinite !important;
  animation-delay: var(--star-delay, 0s) !important;
  animation-direction: normal !important;
}
.nameplate-effect-starfall-ribbon > i:nth-of-type(1) { --star-y:2%;  --star-drop:39px; --star-duration:5.5s; --star-delay:-1.0s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(2) { --star-y:21%; --star-drop:29px; --star-duration:6.4s; --star-delay:-4.1s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(3) { --star-y:44%; --star-drop:18px; --star-duration:5.9s; --star-delay:-2.8s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(4) { --star-y:9%;  --star-drop:45px; --star-duration:6.7s; --star-delay:-5.7s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(5) { --star-y:60%; --star-drop:13px; --star-duration:5.6s; --star-delay:-.2s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(6) { --star-y:31%; --star-drop:32px; --star-duration:6.2s; --star-delay:-3.5s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(7) { --star-y:72%; --star-drop:9px;  --star-duration:6.9s; --star-delay:-6.0s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(8) { --star-y:15%; --star-drop:37px; --star-duration:5.7s; --star-delay:-2.0s; }
@keyframes np3-starfall-cross {
  0%   { opacity:0; transform:translate3d(122px,-12px,0) rotate(153deg) scaleX(.55); }
  9%   { opacity:.92; }
  72%  { opacity:.76; }
  100% { opacity:0; transform:translate3d(-122px,var(--star-drop),0) rotate(153deg) scaleX(1.08); }
}

/* Dice Echo: eight dice cross the whole nameplate with independent bounce
   heights. The x travel lives in transform, so no fixed left declaration can
   freeze them outside the plaque. */
.nameplate-effect-dice-echo > i,
.nameplate-effect-dice-echo > i:nth-of-type(n+5) {
  display:block !important;
  left:50% !important;
  right:auto !important;
  top:var(--dice-y, 62%) !important;
  bottom:auto !important;
  width:10px !important;
  height:10px !important;
  border:1px solid rgba(247,235,205,.84) !important;
  border-radius:2px !important;
  background:linear-gradient(145deg, rgba(79,60,43,.98), rgba(28,21,17,.96)) !important;
  box-shadow:0 0 5px rgba(244,205,119,.24), inset 1px 1px 0 rgba(255,255,255,.12) !important;
  opacity:0;
  animation:np3-dice-cross var(--dice-duration,7.2s) cubic-bezier(.18,.55,.44,1) infinite !important;
  animation-delay:var(--dice-delay,0s) !important;
  animation-direction:normal !important;
}
.nameplate-effect-dice-echo > i:nth-of-type(1) { --dice-y:66%; --dice-hop:-31px; --dice-duration:6.8s; --dice-delay:-1.0s; }
.nameplate-effect-dice-echo > i:nth-of-type(2) { --dice-y:51%; --dice-hop:-22px; --dice-duration:7.8s; --dice-delay:-5.2s; }
.nameplate-effect-dice-echo > i:nth-of-type(3) { --dice-y:73%; --dice-hop:-38px; --dice-duration:7.1s; --dice-delay:-3.6s; }
.nameplate-effect-dice-echo > i:nth-of-type(4) { --dice-y:40%; --dice-hop:-18px; --dice-duration:8.2s; --dice-delay:-7.1s; }
.nameplate-effect-dice-echo > i:nth-of-type(5) { --dice-y:61%; --dice-hop:-26px; --dice-duration:7.5s; --dice-delay:-2.4s; }
.nameplate-effect-dice-echo > i:nth-of-type(6) { --dice-y:76%; --dice-hop:-34px; --dice-duration:8.0s; --dice-delay:-6.0s; }
.nameplate-effect-dice-echo > i:nth-of-type(7) { --dice-y:48%; --dice-hop:-20px; --dice-duration:7.0s; --dice-delay:-4.5s; }
.nameplate-effect-dice-echo > i:nth-of-type(8) { --dice-y:69%; --dice-hop:-29px; --dice-duration:8.4s; --dice-delay:-.3s; }
@keyframes np3-dice-cross {
  0%   { opacity:0;   transform:translate3d(-116px,0,0) rotate(-70deg) scale(.72); }
  8%   { opacity:.84; }
  29%  { transform:translate3d(-52px,var(--dice-hop),0) rotate(92deg) scale(1); }
  48%  { transform:translate3d(0,1px,0) rotate(198deg) scale(.88); }
  69%  { transform:translate3d(54px,var(--dice-hop),0) rotate(342deg) scale(.96); }
  88%  { opacity:.78; transform:translate3d(94px,0,0) rotate(470deg) scale(.86); }
  100% { opacity:0;   transform:translate3d(116px,-5px,0) rotate(610deg) scale(.66); }
}

/* Coin Trail: the coins form an S-shaped trail through the full nameplate.
   Each coin flips on its own local arc, so the effect is distributed vertically
   and horizontally instead of living on one bottom line. */
.nameplate-effect-coin-trail > i {
  left:var(--coin-x, 50%) !important;
  right:auto !important;
  top:var(--coin-y, 50%) !important;
  bottom:auto !important;
  width:8px !important;
  height:6px !important;
  opacity:0;
  transform-origin:center;
  animation:np3-coin-trail var(--coin-duration,5.8s) cubic-bezier(.34,.08,.25,1) infinite !important;
  animation-delay:var(--coin-delay,0s) !important;
}
.nameplate-effect-coin-trail > i:nth-of-type(1) { --coin-x:5%;  --coin-y:73%; --coin-dx:12px;  --coin-dy:-14px; --coin-delay:-.3s;  --coin-duration:5.6s; }
.nameplate-effect-coin-trail > i:nth-of-type(2) { --coin-x:18%; --coin-y:47%; --coin-dx:10px;  --coin-dy:-18px; --coin-delay:-1.0s; --coin-duration:6.0s; }
.nameplate-effect-coin-trail > i:nth-of-type(3) { --coin-x:32%; --coin-y:19%; --coin-dx:13px;  --coin-dy:13px;  --coin-delay:-1.7s; --coin-duration:5.7s; }
.nameplate-effect-coin-trail > i:nth-of-type(4) { --coin-x:45%; --coin-y:58%; --coin-dx:11px;  --coin-dy:-16px; --coin-delay:-2.4s; --coin-duration:6.1s; }
.nameplate-effect-coin-trail > i:nth-of-type(5) { --coin-x:58%; --coin-y:81%; --coin-dx:12px;  --coin-dy:-19px; --coin-delay:-3.1s; --coin-duration:5.8s; }
.nameplate-effect-coin-trail > i:nth-of-type(6) { --coin-x:72%; --coin-y:42%; --coin-dx:10px;  --coin-dy:15px;  --coin-delay:-3.8s; --coin-duration:6.2s; }
.nameplate-effect-coin-trail > i:nth-of-type(7) { --coin-x:85%; --coin-y:15%; --coin-dx:11px;  --coin-dy:14px;  --coin-delay:-4.5s; --coin-duration:5.9s; }
.nameplate-effect-coin-trail > i:nth-of-type(8) { --coin-x:94%; --coin-y:60%; --coin-dx:-12px; --coin-dy:-17px; --coin-delay:-5.2s; --coin-duration:6.3s; }
@keyframes np3-coin-trail {
  0%,46%,100% { opacity:0; transform:translate3d(0,0,0) rotateY(0deg) rotateZ(-8deg) scale(.45); }
  53% { opacity:.86; transform:translate3d(2px,-2px,0) rotateY(70deg) rotateZ(4deg) scale(.88); }
  64% { opacity:.96; transform:translate3d(var(--coin-dx),var(--coin-dy),0) rotateY(190deg) rotateZ(-6deg) scale(1.08); }
  77% { opacity:.76; transform:translate3d(0,-4px,0) rotateY(330deg) rotateZ(8deg) scale(.92); }
  86% { opacity:0; transform:translate3d(var(--coin-dx),var(--coin-dy),0) rotateY(430deg) rotateZ(0deg) scale(.56); }
}

/* Bubble Charm: bubbles materialize throughout the nameplate, wobble locally,
   expand and pop. They do not share the coin/confetti travel path. */
.nameplate-effect-bubble-charm > i {
  left:var(--bubble-x, 10%) !important;
  top:var(--bubble-y, 20%) !important;
  bottom:auto !important;
  opacity:0;
  animation:np-bubble-wobble-pop var(--bubble-duration,5.2s) ease-in-out infinite !important;
  animation-delay:var(--bubble-delay,0s) !important;
}
.nameplate-effect-bubble-charm > i:nth-of-type(1) { --bubble-x:7%; --bubble-y:23%; --bubble-duration:5.1s; --bubble-delay:-1.2s; --bubble-drift:7px; }
.nameplate-effect-bubble-charm > i:nth-of-type(2) { --bubble-x:20%; --bubble-y:64%; --bubble-duration:6.2s; --bubble-delay:-4.0s; --bubble-drift:-6px; }
.nameplate-effect-bubble-charm > i:nth-of-type(3) { --bubble-x:36%; --bubble-y:34%; --bubble-duration:5.7s; --bubble-delay:-2.5s; --bubble-drift:5px; }
.nameplate-effect-bubble-charm > i:nth-of-type(4) { --bubble-x:48%; --bubble-y:72%; --bubble-duration:6.6s; --bubble-delay:-5.8s; --bubble-drift:-8px; }
.nameplate-effect-bubble-charm > i:nth-of-type(5) { --bubble-x:61%; --bubble-y:18%; --bubble-duration:5.4s; --bubble-delay:-3.2s; --bubble-drift:7px; }
.nameplate-effect-bubble-charm > i:nth-of-type(6) { --bubble-x:72%; --bubble-y:53%; --bubble-duration:6.0s; --bubble-delay:-.5s; --bubble-drift:-5px; }
.nameplate-effect-bubble-charm > i:nth-of-type(7) { --bubble-x:84%; --bubble-y:30%; --bubble-duration:5.8s; --bubble-delay:-4.9s; --bubble-drift:6px; }
.nameplate-effect-bubble-charm > i:nth-of-type(8) { --bubble-x:91%; --bubble-y:70%; --bubble-duration:6.4s; --bubble-delay:-2.0s; --bubble-drift:-7px; }
@keyframes np-bubble-wobble-pop {
  0%,52%,100% { opacity:0; transform:translate(0,4px) scale(.12); }
  60% { opacity:.42; transform:translate(0,0) scale(.62); }
  72% { opacity:.72; transform:translate(var(--bubble-drift),-5px) scale(1); }
  82% { opacity:.36; transform:translate(0,-8px) scale(1.28); }
  88% { opacity:0; transform:translate(0,-10px) scale(1.65); }
}

/* Ember Crown: restored as the wider fire field version. Flames occupy the
   whole plaque at staggered heights and rise through the nameplate instead of
   forming one narrow central line. */
.nameplate-effect-ember-crown > b {
  left:8% !important;
  right:8% !important;
  top:4% !important;
  width:auto !important;
  height:54% !important;
  transform:none !important;
  clip-path:none !important;
  opacity:.54 !important;
  border:0 !important;
  border-radius:50% 50% 34% 34% !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,112,28,.30), transparent 70%),
    linear-gradient(90deg, transparent 0 12%, rgba(255,198,78,.08) 24%, rgba(255,113,29,.18) 48%, rgba(255,208,91,.10) 72%, transparent 88% 100%) !important;
  background-size:100% 100%, 190% 100% !important;
  animation:np3-ember-bed 3.6s linear infinite !important;
}
.nameplate-effect-ember-crown > i {
  left:calc(4% + var(--effect-i) * 12.5%) !important;
  right:auto !important;
  top:auto !important;
  bottom:var(--ember-bottom, 9%) !important;
  width:7px !important;
  height:var(--ember-height, 15px) !important;
  border-radius:70% 30% 65% 35% !important;
  background:radial-gradient(ellipse at 50% 78%,#fff09b 0 13%,#ff9c2f 35%,#e24618 67%,transparent 72%) !important;
  transform-origin:50% 100%;
  filter:drop-shadow(0 0 4px rgba(255,90,22,.78)) !important;
  opacity:0;
  animation:np3-ember-flame var(--ember-duration,3.1s) ease-out infinite !important;
  animation-delay:var(--ember-delay,0s) !important;
}
.nameplate-effect-ember-crown > i:nth-of-type(1) { --ember-bottom:5%;  --ember-height:14px; --ember-duration:3.0s; --ember-delay:-.2s; }
.nameplate-effect-ember-crown > i:nth-of-type(2) { --ember-bottom:18%; --ember-height:19px; --ember-duration:3.4s; --ember-delay:-1.3s; }
.nameplate-effect-ember-crown > i:nth-of-type(3) { --ember-bottom:8%;  --ember-height:12px; --ember-duration:2.8s; --ember-delay:-2.1s; }
.nameplate-effect-ember-crown > i:nth-of-type(4) { --ember-bottom:23%; --ember-height:17px; --ember-duration:3.3s; --ember-delay:-.9s; }
.nameplate-effect-ember-crown > i:nth-of-type(5) { --ember-bottom:4%;  --ember-height:20px; --ember-duration:3.6s; --ember-delay:-2.8s; }
.nameplate-effect-ember-crown > i:nth-of-type(6) { --ember-bottom:16%; --ember-height:13px; --ember-duration:2.9s; --ember-delay:-1.8s; }
.nameplate-effect-ember-crown > i:nth-of-type(7) { --ember-bottom:9%;  --ember-height:18px; --ember-duration:3.5s; --ember-delay:-3.2s; }
.nameplate-effect-ember-crown > i:nth-of-type(8) { --ember-bottom:21%; --ember-height:11px; --ember-duration:3.0s; --ember-delay:-.5s; }
@keyframes np3-ember-bed {
  from { background-position:50% 50%, 0 50%; }
  to   { background-position:50% 50%, 190% 50%; }
}
@keyframes np3-ember-flame {
  0%   { opacity:0; transform:translate3d(0,8px,0) rotate(-8deg) scale(.55); }
  18%  { opacity:.88; }
  56%  { opacity:.76; transform:translate3d(2px,-12px,0) rotate(9deg) scale(1); }
  82%  { opacity:.48; transform:translate3d(-2px,-24px,0) rotate(-5deg) scale(.70); }
  100% { opacity:0; transform:translate3d(-3px,-34px,0) rotate(-18deg) scale(.28); }
}

/* Heartbeat Aura: the ECG reveal animates its clipping rather than a fixed
   transform, preventing the line from being stuck outside one side. */
.nameplate-effect-heartbeat-aura > b {
  left:4% !important;
  right:auto !important;
  top:50% !important;
  width:92% !important;
  height:19px !important;
  background:linear-gradient(90deg,transparent,rgba(255,115,160,.94) 8% 92%,transparent) !important;
  clip-path:polygon(0 52%,24% 52%,29% 37%,34% 72%,40% 4%,47% 92%,53% 45%,59% 52%,100% 52%);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center !important;
  border-radius:0 !important;
  filter:drop-shadow(0 0 5px rgba(241,83,137,.68)) !important;
  opacity:0;
  animation:np3-heart-ecg 4.2s linear infinite !important;
}
.nameplate-effect-heartbeat-aura > b::before,
.nameplate-effect-heartbeat-aura > b::after,
.nameplate-effect-heartbeat-aura > i { display:none !important; }
@keyframes np3-heart-ecg {
  0%,50%,100% { opacity:0; transform:translateY(-50%) scaleX(0); }
  55% { opacity:.78; transform:translateY(-50%) scaleX(.46); }
  61% { opacity:.24; transform:translateY(-50%) scaleX(.58); }
  65% { opacity:.88; transform:translateY(-50%) scaleX(.80); }
  74% { opacity:.62; transform:translateY(-50%) scaleX(1); }
  85% { opacity:0; transform:translateY(-50%) scaleX(1); }
}

/* Royal Confetti: a restrained royal fanfare. A small crown crest shimmers
   while mixed crown/diamond/ribbon pieces descend across the entire plaque in
   grouped waves, rather than isolated random flecks. */
.nameplate-effect-royal-confetti > b {
  left:50% !important;
  top:3% !important;
  width:30px !important;
  height:11px !important;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#fff0a5,#e4b846 52%,#8c5b17) !important;
  clip-path:polygon(0 100%,4% 24%,27% 67%,41% 0,56% 68%,77% 18%,97% 65%,100% 100%) !important;
  filter:drop-shadow(0 0 5px rgba(244,192,79,.52)) !important;
  opacity:.54;
  animation:np3-royal-crown 4.8s ease-in-out infinite !important;
}
.nameplate-effect-royal-confetti > i {
  left:var(--royal-x, 50%) !important;
  right:auto !important;
  top:-8% !important;
  bottom:auto !important;
  width:6px !important;
  height:8px !important;
  opacity:0;
  background:linear-gradient(145deg,#ffe89b,#d39a2b 62%,#7f4f12) !important;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) !important;
  filter:drop-shadow(0 0 3px rgba(236,183,69,.42)) !important;
  transform-origin:center;
  animation:np3-royal-fall var(--royal-duration,5.8s) cubic-bezier(.18,.48,.44,1) infinite !important;
  animation-delay:var(--royal-delay,0s) !important;
}
.nameplate-effect-royal-confetti > i:nth-of-type(3n) {
  width:10px !important;
  height:7px !important;
  clip-path:polygon(0 100%,5% 25%,29% 68%,43% 0,58% 68%,80% 20%,100% 65%,100% 100%) !important;
  background:linear-gradient(180deg,#fff0a6,#d39c2f 58%,#8c5916) !important;
}
.nameplate-effect-royal-confetti > i:nth-of-type(4n+2) {
  width:3px !important;
  height:10px !important;
  clip-path:none !important;
  border-radius:1px !important;
  background:linear-gradient(180deg,#d98a9f,#f0c871) !important;
}
.nameplate-effect-royal-confetti > i:nth-of-type(1) { --royal-x:7%;  --royal-drift:20px;  --royal-delay:-.4s; --royal-duration:5.6s; }
.nameplate-effect-royal-confetti > i:nth-of-type(2) { --royal-x:19%; --royal-drift:-13px; --royal-delay:-1.1s; --royal-duration:6.0s; }
.nameplate-effect-royal-confetti > i:nth-of-type(3) { --royal-x:34%; --royal-drift:15px;  --royal-delay:-1.8s; --royal-duration:5.7s; }
.nameplate-effect-royal-confetti > i:nth-of-type(4) { --royal-x:47%; --royal-drift:-10px; --royal-delay:-2.5s; --royal-duration:6.1s; }
.nameplate-effect-royal-confetti > i:nth-of-type(5) { --royal-x:59%; --royal-drift:11px;  --royal-delay:-3.2s; --royal-duration:5.9s; }
.nameplate-effect-royal-confetti > i:nth-of-type(6) { --royal-x:72%; --royal-drift:-17px; --royal-delay:-3.9s; --royal-duration:6.2s; }
.nameplate-effect-royal-confetti > i:nth-of-type(7) { --royal-x:85%; --royal-drift:14px;  --royal-delay:-4.6s; --royal-duration:5.8s; }
.nameplate-effect-royal-confetti > i:nth-of-type(8) { --royal-x:94%; --royal-drift:-18px; --royal-delay:-5.3s; --royal-duration:6.3s; }
@keyframes np3-royal-crown {
  0%,100% { opacity:.38; transform:translateX(-50%) translateY(0) scale(.96); }
  50% { opacity:.74; transform:translateX(-50%) translateY(1px) scale(1.04); }
}
@keyframes np3-royal-fall {
  0%   { opacity:0; transform:translate3d(0,-7px,0) rotate(0deg) scale(.58); }
  10%  { opacity:.86; }
  38%  { transform:translate3d(var(--royal-drift),23px,0) rotate(94deg) scale(1); }
  68%  { opacity:.76; transform:translate3d(0,46px,0) rotate(208deg) scale(.90); }
  90%  { opacity:.42; transform:translate3d(var(--royal-drift),67px,0) rotate(326deg) scale(.74); }
  100% { opacity:0; transform:translate3d(0,76px,0) rotate(390deg) scale(.52); }
}

/* Mystic Orbit: medium-size ellipse restored. The central side sections of
   the rear ring are visually interrupted and the lower arc is brighter, making
   the plaque read as if it passes through the orbit instead of sitting behind a
   tiny circle. */
.nameplate-effect-mystic-orbit > b {
  inset:-4% 9% !important;
  border:1px solid rgba(188,145,250,.40) !important;
  border-radius:50% !important;
  box-shadow:inset 0 0 8px rgba(126,88,204,.08),0 0 8px rgba(150,105,228,.18) !important;
  opacity:.68;
  clip-path:polygon(0 0,100% 0,100% 39%,84% 39%,84% 61%,100% 61%,100% 100%,0 100%,0 61%,16% 61%,16% 39%,0 39%);
}
.nameplate-effect-mystic-orbit > b::after {
  content:"";
  inset:-1px !important;
  border:1.4px solid rgba(207,177,255,.62) !important;
  border-radius:50% !important;
  clip-path:inset(52% 0 0 0);
  filter:drop-shadow(0 0 4px rgba(149,105,229,.44));
}
.nameplate-effect-mystic-orbit > i {
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:4px !important;
  height:4px !important;
  margin:-2px !important;
  border-radius:50% !important;
  background:#d8bcff !important;
  box-shadow:0 0 6px #a878f0 !important;
  animation:np3-mystic-orbit 7.2s linear infinite !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(2) {
  animation-duration:9.1s !important;
  animation-direction:reverse !important;
  background:#9edcff !important;
  box-shadow:0 0 6px #5dbce8 !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(n+3) { display:none !important; }
@keyframes np3-mystic-orbit {
  0%   { opacity:.92; transform:rotate(0deg) translateX(48px) rotate(0deg) scale(.82); }
  25%  { opacity:.36; }
  48%  { opacity:.22; transform:rotate(172deg) translateX(48px) rotate(-172deg) scale(.94); }
  72%  { opacity:.88; }
  100% { opacity:.92; transform:rotate(360deg) translateX(48px) rotate(-360deg) scale(1.08); }
}

/* Void Wisps: visible wisps now occupy the whole plaque at multiple heights.
   Their local curls remain subtle, but no longer live only along the bottom. */
.nameplate-effect-void-wisps > b,
.nameplate-effect-void-wisps > i,
.nameplate-effect-void-wisps > i:nth-of-type(n+3) {
  display:block !important;
  left:var(--wisp-x, 50%) !important;
  right:auto !important;
  top:var(--wisp-y, 38%) !important;
  bottom:auto !important;
  width:var(--wisp-w, 20px) !important;
  height:var(--wisp-h, 30px) !important;
  border:2.5px solid transparent !important;
  border-left-color:var(--wisp-color, rgba(197,128,247,.82)) !important;
  border-radius:50% !important;
  opacity:.46;
  filter:blur(.08px) drop-shadow(0 0 7px var(--wisp-glow, rgba(137,72,205,.76))) !important;
  animation:np3-void-wisp var(--wisp-duration,6.0s) ease-in-out infinite !important;
  animation-delay:var(--wisp-delay,0s) !important;
}
.nameplate-effect-void-wisps > b { --wisp-x:46%; --wisp-y:24%; --wisp-w:27px; --wisp-h:38px; --wisp-duration:6.6s; --wisp-delay:-1.2s; }
.nameplate-effect-void-wisps > i:nth-of-type(1) { --wisp-x:7%;  --wisp-y:15%; --wisp-color:rgba(196,125,247,.82); --wisp-glow:rgba(138,74,207,.74); --wisp-delay:-.3s; }
.nameplate-effect-void-wisps > i:nth-of-type(2) { --wisp-x:18%; --wisp-y:58%; --wisp-color:rgba(96,212,230,.82);  --wisp-glow:rgba(74,169,192,.72);  --wisp-delay:-2.0s; }
.nameplate-effect-void-wisps > i:nth-of-type(3) { --wisp-x:31%; --wisp-y:34%; --wisp-color:rgba(214,143,250,.76); --wisp-glow:rgba(151,83,210,.68);  --wisp-delay:-3.7s; }
.nameplate-effect-void-wisps > i:nth-of-type(4) { --wisp-x:53%; --wisp-y:66%; --wisp-color:rgba(92,205,225,.80);  --wisp-glow:rgba(72,165,190,.70);  --wisp-delay:-5.1s; }
.nameplate-effect-void-wisps > i:nth-of-type(5) { --wisp-x:64%; --wisp-y:17%; --wisp-color:rgba(193,122,244,.80); --wisp-glow:rgba(133,70,202,.72);  --wisp-delay:-1.1s; }
.nameplate-effect-void-wisps > i:nth-of-type(6) { --wisp-x:75%; --wisp-y:47%; --wisp-color:rgba(103,217,232,.80); --wisp-glow:rgba(75,174,195,.70);  --wisp-delay:-2.9s; }
.nameplate-effect-void-wisps > i:nth-of-type(7) { --wisp-x:85%; --wisp-y:27%; --wisp-color:rgba(207,132,250,.78); --wisp-glow:rgba(145,77,208,.70);  --wisp-delay:-4.4s; }
.nameplate-effect-void-wisps > i:nth-of-type(8) { --wisp-x:93%; --wisp-y:61%; --wisp-color:rgba(91,201,223,.76);  --wisp-glow:rgba(69,159,185,.68);  --wisp-delay:-5.7s; }
@keyframes np3-void-wisp {
  0%,100% { opacity:.34; transform:translate3d(-4px,5px,0) rotate(-14deg) scale(.80); }
  28% { opacity:.72; transform:translate3d(3px,-4px,0) rotate(7deg) scale(1.02); }
  55% { opacity:.86; transform:translate3d(8px,-11px,0) rotate(25deg) scale(1.16); }
  78% { opacity:.58; transform:translate3d(1px,-5px,0) rotate(10deg) scale(.96); }
}

/* ----- Name Effect shop cards ----- */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card.customize-name-effect-option {
  min-height:166px !important;
  max-height:166px !important;
  grid-template-rows:66px auto 20px !important;
  gap:5px !important;
}
.customize-item-preview.customize-name-effect-preview {
  width:calc(100% - 18px) !important;
  height:66px !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}
.customize-name-effect-stage {
  position:relative;
  display:grid;
  place-items:center;
  width:min(168px,100%);
  height:56px;
  padding:0 8px;
  overflow:visible;
  isolation:isolate;
}
.customize-name-effect-name {
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  color:#f1dfb4 !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.18 !important;
}
.customize-name-effect-text {
  display:inline-block !important;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f1dfb4;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:1.18 !important;
  letter-spacing:.015em;
  text-align:center;
}
.customize-purchase-preview-stage[data-preview-type="name-effect"] {
  height:112px !important;
  display:grid !important;
  place-items:center !important;
}
.customize-purchase-preview-stage[data-preview-type="name-effect"]
  .customize-purchase-seat-preview.player-seat {
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}
.customize-purchase-preview-stage[data-preview-type="name-effect"]
  .customize-purchase-seat-preview.player-seat > .seat-plaque {
  position:relative !important;
  inset:auto !important;
  width:236px !important;
  min-width:0 !important;
  max-width:calc(100% - 28px) !important;
  min-height:60px !important;
  margin:0 !important;
  transform:none !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* ----- Direct animated player-name styles ----- */
.seat-name-text.name-text-effect {
  position:relative;
  display:inline-block;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background-repeat:no-repeat;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  transform-origin:center;
  will-change:background-position,filter,text-shadow,transform,opacity;
}

.name-text-effect-verdant-wave {
  background-image:linear-gradient(100deg,#061008 0%,#153820 14%,#2dc761 31%,#a7f5af 42%,#23964b 55%,#07130a 68%,#40dc75 83%,#102b18 100%);
  background-size:280% 100%;
  text-shadow:0 1px 1px rgba(0,0,0,.9),0 0 4px rgba(45,196,91,.32);
  animation:nt-verdant-wave 5.8s cubic-bezier(.42,0,.28,1) infinite;
}
@keyframes nt-verdant-wave { 0%{background-position:100% 50%;filter:brightness(.92)} 48%{filter:brightness(1.13)} 100%{background-position:0 50%;filter:brightness(.96)} }

.name-text-effect-golden-tell {
  background-image:linear-gradient(108deg,#8a5a16 0 25%,#d7a83c 34%,#fff0a8 45%,#d79e2f 56%,#70430d 73%,#d9aa42 100%);
  background-size:260% 100%;
  text-shadow:0 1px 2px #241405,0 0 4px rgba(239,184,66,.34);
  animation:nt-golden-tell 6.4s linear infinite;
}
@keyframes nt-golden-tell { 0%,18%{background-position:120% 50%} 74%,100%{background-position:-40% 50%} }

.name-text-effect-neon-split {
  background-image:linear-gradient(180deg,#f3f8ef,#cce7dd);
  text-shadow:-1px 0 rgba(36,210,225,.62),1px 0 rgba(232,78,174,.58),0 1px 2px #000;
  animation:nt-neon-split 4.9s ease-in-out infinite;
}
@keyframes nt-neon-split { 0%,72%,100%{text-shadow:-1px 0 rgba(36,210,225,.48),1px 0 rgba(232,78,174,.44),0 1px 2px #000;transform:translateX(0)} 79%{text-shadow:-2px 0 rgba(36,210,225,.72),2px 0 rgba(232,78,174,.68),0 1px 2px #000;transform:translateX(.35px)} 84%{text-shadow:1px 0 rgba(36,210,225,.58),-1px 0 rgba(232,78,174,.54),0 1px 2px #000;transform:translateX(-.35px)} }

.name-text-effect-velvet-ember {
  background-image:linear-gradient(180deg,#ffd27b 0%,#c95728 42%,#6f1715 72%,#f08a3b 100%);
  background-size:100% 180%;
  text-shadow:0 1px 2px #1b0703,0 0 5px rgba(215,70,24,.44);
  animation:nt-velvet-ember 4.7s ease-in-out infinite;
}
@keyframes nt-velvet-ember { 0%,100%{background-position:50% 10%;filter:brightness(.92) saturate(.92)} 22%{filter:brightness(1.11) saturate(1.08)} 51%{background-position:50% 88%;filter:brightness(.98)} 76%{filter:brightness(1.16) saturate(1.12)} }

.name-text-effect-frost-script {
  background-image:linear-gradient(112deg,#7fa8bd 0%,#d6f5ff 28%,#fff 42%,#96d5ef 57%,#5d829d 75%,#d6f7ff 100%);
  background-size:230% 100%;
  text-shadow:0 1px 2px #0b2635,0 0 5px rgba(143,221,255,.42);
  animation:nt-frost-script 7.1s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes nt-frost-script { 0%,12%{background-position:110% 50%;filter:blur(0) brightness(.94)} 50%{filter:blur(.18px) brightness(1.12)} 82%,100%{background-position:-20% 50%;filter:blur(0) brightness(.96)} }

.name-text-effect-royal-ink {
  background-image:linear-gradient(180deg,#e4c8ff 0%,#8a56c5 48%,#382050 100%);
  -webkit-text-stroke:.25px rgba(236,199,98,.55);
  text-shadow:0 1px 2px #160c21,0 0 3px rgba(160,104,215,.36);
  animation:nt-royal-ink 5.9s ease-in-out infinite;
}
@keyframes nt-royal-ink { 0%,100%{filter:brightness(.92);text-shadow:0 1px 2px #160c21,0 0 3px rgba(160,104,215,.30)} 50%{filter:brightness(1.12);text-shadow:0 1px 2px #160c21,0 0 6px rgba(221,177,85,.47)} }

.name-text-effect-lucky-pulse {
  background-image:radial-gradient(ellipse at center,#baffb7 0%,#36c966 34%,#126a35 70%,#0a2b18 100%);
  background-size:170% 160%;
  text-shadow:0 1px 2px #05170c,0 0 4px rgba(43,201,97,.38);
  animation:nt-lucky-pulse 3.8s ease-in-out infinite;
}
@keyframes nt-lucky-pulse { 0%,62%,100%{background-size:170% 160%;transform:scaleX(1);filter:brightness(.94)} 70%{background-size:115% 120%;transform:scaleX(1.025);filter:brightness(1.16)} 78%{transform:scaleX(.995);filter:brightness(1)} }

.name-text-effect-moonlit-silver {
  background-image:linear-gradient(105deg,#596777 0%,#b8c8dc 24%,#f2f7ff 43%,#9eb7d3 58%,#485767 76%,#d9e7f7 100%);
  background-size:245% 100%;
  text-shadow:0 1px 2px #101820,0 0 5px rgba(157,190,230,.32);
  animation:nt-moonlit-silver 8.2s ease-in-out infinite;
}
@keyframes nt-moonlit-silver { 0%{background-position:110% 50%;text-shadow:0 1px 2px #101820,0 0 2px rgba(157,190,230,.18)} 50%{text-shadow:0 1px 2px #101820,0 0 7px rgba(188,216,250,.48)} 100%{background-position:-25% 50%;text-shadow:0 1px 2px #101820,0 0 3px rgba(157,190,230,.24)} }

.name-text-effect-scarlet-deal {
  background-image:linear-gradient(90deg,#2b0709 0 36%,#e15955 48%,#8c171e 61%,#230608 72% 100%);
  background-size:220% 100%;
  text-shadow:0 1px 2px #1d0406,0 0 4px rgba(197,40,48,.36);
  animation:nt-scarlet-deal 5.4s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes nt-scarlet-deal { 0%,20%{background-position:100% 50%} 47%{background-position:48% 50%} 72%,100%{background-position:0 50%} }

.name-text-effect-ocean-current {
  background-image:linear-gradient(105deg,#071b2a 0%,#0b6e91 24%,#7ee3e7 41%,#125f88 57%,#07192b 72%,#40bfcf 100%),linear-gradient(75deg,transparent,#b7fbff,transparent);
  background-size:250% 100%,180% 100%;
  text-shadow:0 1px 2px #021018,0 0 5px rgba(39,167,196,.36);
  animation:nt-ocean-current 6.8s ease-in-out infinite;
}
@keyframes nt-ocean-current { 0%{background-position:100% 50%,-50% 50%} 50%{background-position:42% 50%,85% 50%} 100%{background-position:0 50%,190% 50%} }

.name-text-effect-arcane-glyph {
  background-image:linear-gradient(115deg,#4e2b77,#b67ee7 28%,#52d1c9 48%,#7951b5 67%,#2e2144);
  background-size:220% 100%;
  text-shadow:0 1px 2px #170f24,0 0 4px rgba(156,100,219,.35);
  animation:nt-arcane-glyph 7.4s ease-in-out infinite;
}
@keyframes nt-arcane-glyph { 0%,100%{background-position:100% 50%;filter:hue-rotate(0deg) brightness(.96)} 50%{background-position:0 50%;filter:hue-rotate(18deg) brightness(1.10)} }

.name-text-effect-diamond-facet {
  background-image:repeating-linear-gradient(122deg,#708695 0 8px,#edfaff 8px 14px,#a9c8dc 14px 22px,#fff 22px 26px,#6d8494 26px 34px);
  background-size:136px 100%;
  text-shadow:0 1px 2px #15232b,0 0 4px rgba(205,239,255,.32);
  animation:nt-diamond-facet 8.6s steps(18,end) infinite;
}
@keyframes nt-diamond-facet { from{background-position:0 50%;filter:contrast(1.03)} 50%{filter:contrast(1.18) brightness(1.08)} to{background-position:136px 50%;filter:contrast(1.03)} }

.name-text-effect-coffee-steam {
  background-image:linear-gradient(180deg,#fff0d0 0%,#d79a5c 31%,#754426 64%,#e7b873 100%);
  background-size:100% 230%;
  text-shadow:0 1px 2px #241207,0 0 4px rgba(180,113,58,.30);
  animation:nt-coffee-steam 6.3s ease-in-out infinite;
}
@keyframes nt-coffee-steam { 0%,100%{background-position:50% 92%;filter:brightness(.95)} 47%{background-position:50% 8%;filter:brightness(1.12)} 67%{background-position:50% 30%;filter:brightness(1.04)} }

.name-text-effect-glitch-dealer {
  background-image:linear-gradient(180deg,#f3efd9,#c8bd9f);
  text-shadow:0 1px 2px #000;
  animation:nt-glitch-dealer 6.8s steps(1,end) infinite;
}
@keyframes nt-glitch-dealer { 0%,89%,93%,96%,100%{transform:translate(0);text-shadow:0 1px 2px #000} 90%{transform:translateX(1px);text-shadow:-1px 0 #32cbd1,1px 0 #e54d9c,0 1px 2px #000} 91%{transform:translateX(-1px);text-shadow:1px 0 #32cbd1,-1px 0 #e54d9c,0 1px 2px #000} 94%{transform:translateY(.5px);text-shadow:-1px 0 rgba(50,203,209,.65),1px 0 rgba(229,77,156,.65),0 1px 2px #000} }

.name-text-effect-celestial-drift {
  background-image:linear-gradient(105deg,#111b3e,#495d9d 23%,#d7e5ff 42%,#766cb4 58%,#18213f 76%,#9fb8ed 100%);
  background-size:260% 100%;
  text-shadow:0 1px 2px #090d20,2px -1px 5px rgba(188,214,255,.20),-2px 1px 4px rgba(134,115,211,.20);
  animation:nt-celestial-drift 9.2s ease-in-out infinite;
}
@keyframes nt-celestial-drift { 0%{background-position:105% 50%;text-shadow:0 1px 2px #090d20,2px -1px 3px rgba(188,214,255,.12)} 45%{text-shadow:0 1px 2px #090d20,-2px -1px 7px rgba(188,214,255,.42),2px 1px 5px rgba(134,115,211,.30)} 100%{background-position:-15% 50%;text-shadow:0 1px 2px #090d20,2px -1px 4px rgba(188,214,255,.18)} }

.name-text-effect-jackpot-marquee {
  background-image:repeating-linear-gradient(90deg,#7a4a0e 0 9px,#f2c759 9px 15px,#fff0a1 15px 19px,#b87617 19px 29px);
  background-size:116px 100%;
  text-shadow:0 1px 2px #261504,0 0 4px rgba(226,172,56,.28);
  animation:nt-jackpot-marquee 5.6s steps(8,end) infinite;
}
@keyframes nt-jackpot-marquee { from{background-position:0 50%} to{background-position:116px 50%} }

.name-text-effect-phantom-fade {
  background-image:linear-gradient(100deg,#243435,#93c7bd 34%,#d5eee8 48%,#517f79 65%,#1d2a2d 100%);
  background-size:260% 100%;
  text-shadow:0 1px 2px #081212,0 0 5px rgba(105,181,170,.28);
  animation:nt-phantom-fade 7.7s ease-in-out infinite;
}
@keyframes nt-phantom-fade { 0%{background-position:105% 50%;opacity:.86;filter:blur(0)} 42%{opacity:1;filter:blur(.25px)} 68%{opacity:.9;filter:blur(0)} 100%{background-position:-15% 50%;opacity:.96;filter:blur(0)} }

.name-text-effect-heartbeat-rose {
  background-image:linear-gradient(180deg,#ffd7e6,#dc7198 49%,#78334e 100%);
  text-shadow:0 1px 2px #27101a,0 0 4px rgba(225,104,147,.30);
  animation:nt-heartbeat-rose 4.1s ease-in-out infinite;
}
@keyframes nt-heartbeat-rose { 0%,58%,100%{transform:scale(1);filter:brightness(.96);text-shadow:0 1px 2px #27101a,0 0 4px rgba(225,104,147,.25)} 64%{transform:scale(1.035);filter:brightness(1.16);text-shadow:0 1px 2px #27101a,0 0 7px rgba(255,146,185,.50)} 70%{transform:scale(.995);filter:brightness(1.01)} 75%{transform:scale(1.022);filter:brightness(1.12)} 82%{transform:scale(1);filter:brightness(.98)} }

.name-text-effect-prism-cut {
  background-image:linear-gradient(115deg,#8ba9c8 0%,#d8b7ec 17%,#8fe3d4 34%,#f4e8a2 51%,#efa7bd 68%,#9cbff0 84%,#c3ace6 100%);
  background-size:320% 100%;
  text-shadow:0 1px 2px #161728,0 0 4px rgba(177,191,239,.26);
  animation:nt-prism-cut 10.4s ease-in-out infinite;
}
@keyframes nt-prism-cut { 0%{background-position:100% 50%;filter:saturate(.82) hue-rotate(0deg)} 50%{filter:saturate(1.08) hue-rotate(12deg) brightness(1.06)} 100%{background-position:0 50%;filter:saturate(.88) hue-rotate(-6deg)} }

.name-text-effect-crowned-eclipse {
  background-image:linear-gradient(105deg,#d5a742 0 22%,#ffe9a3 34%,#1b160f 46% 57%,#f0c45f 69%,#8d651e 88%,#f2d37a 100%);
  background-size:280% 100%;
  -webkit-text-stroke:.2px rgba(255,218,126,.44);
  text-shadow:0 1px 2px #1f1405,0 -1px 5px rgba(236,186,73,.34);
  animation:nt-crowned-eclipse 8.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes nt-crowned-eclipse { 0%,8%{background-position:108% 50%;filter:brightness(.96)} 49%{filter:brightness(.82);text-shadow:0 1px 2px #1f1405,0 -1px 3px rgba(236,186,73,.22)} 64%{filter:brightness(1.12);text-shadow:0 1px 2px #1f1405,0 -1px 7px rgba(255,215,112,.46)} 100%{background-position:-18% 50%;filter:brightness(.98)} }

@media (prefers-reduced-motion: reduce) {
  .seat-name-text.name-text-effect {
    animation:none !important;
    background-position:50% 50% !important;
    filter:none !important;
    transform:none !important;
  }
}

/* ===== Final live-nameplate restoration, continuous name effects and image supporter panel ===== */
/* Keep the two supporter artworks outside the Shop frame without introducing a
   new text/background panel. Source dimensions are preserved until an image
   would exceed the current Shop frame width. */
.customize-supporter-art {
  position: absolute;
  z-index: 7;
  top: calc(var(--shop-card-height) + 22px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: max-content;
  max-width: min(var(--shop-card-width), calc(100vw - 28px));
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.customize-supporter-panel-image,
.customize-buy-coffee-image-button,
.customize-buy-coffee-image-button > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
}
.customize-supporter-panel-image {
  order: 1;
  object-fit: contain;
  pointer-events: none;
}
.customize-buy-coffee-image-button {
  order: 2;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  line-height: 0;
  text-decoration: none;
  transform-origin: 50% 50%;
  transition: transform .17s cubic-bezier(.2,.76,.24,1), filter .17s ease;
  pointer-events: auto;
}
.customize-buy-coffee-image-button:hover,
.customize-buy-coffee-image-button:focus-visible {
  transform: scale(1.045);
  filter: brightness(1.08) drop-shadow(0 0 7px rgba(244,155,201,.22));
  outline: none;
}
.customize-buy-coffee-image-button:active {
  transform: scale(1.018);
  filter: brightness(.98);
}
.customize-buy-coffee-image-button > img {
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 900px) {
  .customize-supporter-art {
    top: calc(var(--shop-card-height) + 16px);
    gap: 5px;
  }
}

/* Restore the exact live plaque geometry from the approved revision before the
   Name Effect section. New effect/name nodes remain out of flow and cannot
   resize or re-align the name, Bank row, frame or hover label. */
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque > .seat-customize-hover-label {
  position: absolute !important;
  z-index: 60 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  margin: 0 !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 6.65cqw !important;
  max-width: 12.45cqw !important;
  min-height: 0 !important;
  height: auto !important;
  padding: .58cqh .54cqw .7cqh !important;
  transform: translateY(-35px) !important;
  overflow: visible !important;
  contain: none !important;
}
.player-seat.is-self:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
  min-width: 8.55cqw !important;
  max-width: 14.65cqw !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque > .seat-name,
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque > .seat-meta {
  position: relative !important;
  z-index: 20 !important;
  margin-inline: 0 !important;
  transform: none !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque > .seat-name {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}
.player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque > .seat-meta {
  width: auto !important;
  align-self: center !important;
}
.seat-plaque > .nameplate-effect-layer {
  position: absolute !important;
  z-index: 35 !important;
  inset: -7% -4% !important;
  display: block !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  opacity: 1 !important;
}
.customize-effect-only-stage > .customize-effect-only-layer {
  z-index: 5 !important;
  inset: 0 !important;
}
.customize-purchase-preview-stage[data-preview-type="effect"] .seat-plaque > .nameplate-effect-layer {
  z-index: 35 !important;
  inset: -7% -4% !important;
}

/* Name effects use a clipped color layer with a painted fallback. The tiny
   black contour previously applied by custom nameplate backgrounds dominated
   the 14px live text and made activated effects look completely black. */
.seat-name-text.name-text-effect {
  --name-fx-glow: rgba(226,208,156,.30);
  position: relative !important;
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  background-color: #ead9aa !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: .11px rgba(7,8,7,.68) !important;
  text-shadow:
    0 0 .7px rgba(255,255,255,.58),
    0 1px 1px rgba(0,0,0,.96),
    0 0 4px var(--name-fx-glow) !important;
  transform-origin: 50% 55% !important;
  backface-visibility: hidden;
  will-change: background-position, transform;
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect {
  -webkit-text-stroke: .11px rgba(5,6,5,.68) !important;
  text-shadow:
    0 0 .7px rgba(255,255,255,.62),
    0 1px 1px rgba(0,0,0,.98),
    0 0 4px var(--name-fx-glow) !important;
}

/* Every background movement travels by exactly one repeated pattern period, so
   frame 100% is visually identical to frame 0%. This removes the pause/jump at
   loop boundaries while avoiding expensive animated blur/filter repaints. */
.name-text-effect-verdant-wave {
  --name-fx-glow: rgba(49,211,105,.38);
  background-image: repeating-linear-gradient(108deg,
    #071109 0 14px, #174023 14px 28px, #32cf68 28px 44px,
    #b3f6b7 44px 52px, #248d49 52px 68px, #09150c 68px 82px,
    #3bdc74 82px 96px) !important;
  background-size: 96px 100% !important;
  animation: ntc-verdant-wave 5.6s linear infinite !important;
}
@keyframes ntc-verdant-wave {
  from { background-position: 0 50%; }
  to { background-position: 96px 50%; }
}

.name-text-effect-golden-tell {
  --name-fx-glow: rgba(244,192,77,.38);
  background-image: repeating-linear-gradient(106deg,
    #75470e 0 29px, #c88d27 29px 48px, #ffef9a 48px 57px,
    #d7a03b 57px 78px, #6c410c 78px 108px, #c58a25 108px 128px) !important;
  background-size: 128px 100% !important;
  animation: ntc-golden-tell 6.2s linear infinite !important;
}
@keyframes ntc-golden-tell {
  from { background-position: -128px 50%; }
  to { background-position: 0 50%; }
}

.name-text-effect-neon-split {
  --name-fx-glow: rgba(137,218,219,.26);
  background-image: linear-gradient(180deg,#f2f8ef,#cce7dd) !important;
  background-size: 100% 100% !important;
  animation: ntc-neon-split 4.8s linear infinite !important;
}
@keyframes ntc-neon-split {
  0%,100% { transform: translateX(0); text-shadow: -1px 0 rgba(34,211,225,.58), 1px 0 rgba(231,78,174,.55), 0 1px 1px rgba(0,0,0,.96) !important; }
  25% { transform: translateX(.25px); text-shadow: -1.5px 0 rgba(34,211,225,.70), .7px 0 rgba(231,78,174,.42), 0 1px 1px rgba(0,0,0,.96) !important; }
  50% { transform: translateX(0); text-shadow: -.6px 0 rgba(34,211,225,.44), 1.5px 0 rgba(231,78,174,.68), 0 1px 1px rgba(0,0,0,.96) !important; }
  75% { transform: translateX(-.25px); text-shadow: -1.3px 0 rgba(34,211,225,.65), 1.1px 0 rgba(231,78,174,.52), 0 1px 1px rgba(0,0,0,.96) !important; }
}

.name-text-effect-velvet-ember {
  --name-fx-glow: rgba(222,79,30,.40);
  background-image: repeating-linear-gradient(180deg,
    #ffd47c 0 15px, #d36731 15px 31px, #711916 31px 47px,
    #ef8a3b 47px 63px, #9d3020 63px 80px) !important;
  background-size: 100% 80px !important;
  animation: ntc-velvet-ember 5.1s linear infinite !important;
}
@keyframes ntc-velvet-ember {
  from { background-position: 50% 0; }
  to { background-position: 50% -80px; }
}

.name-text-effect-frost-script {
  --name-fx-glow: rgba(153,225,255,.42);
  background-image: repeating-linear-gradient(112deg,
    #6f9ab0 0 23px, #d7f6ff 23px 40px, #fff 40px 48px,
    #9bdaf2 48px 67px, #587b94 67px 91px, #d8f7ff 91px 112px) !important;
  background-size: 112px 100% !important;
  animation: ntc-frost-script 6.9s linear infinite !important;
}
@keyframes ntc-frost-script {
  from { background-position: 112px 50%; }
  to { background-position: 0 50%; }
}

.name-text-effect-royal-ink {
  --name-fx-glow: rgba(181,119,229,.38);
  background-image: repeating-linear-gradient(180deg,
    #e1c5fb 0 18px, #925bc9 18px 39px, #3a2352 39px 59px,
    #c99bea 59px 78px, #6d3e9f 78px 96px) !important;
  background-size: 100% 96px !important;
  -webkit-text-stroke: .18px rgba(226,188,91,.62) !important;
  animation: ntc-royal-ink 6.4s linear infinite !important;
}
@keyframes ntc-royal-ink {
  from { background-position: 50% 0; }
  to { background-position: 50% 96px; }
}

.name-text-effect-lucky-pulse {
  --name-fx-glow: rgba(49,213,103,.42);
  background-image: radial-gradient(ellipse at center,#c1ffc2 0%,#40d16d 34%,#146d38 70%,#0a2b18 100%) !important;
  background-size: 145% 150% !important;
  background-position: 50% 50% !important;
  animation: ntc-lucky-pulse 3.9s linear infinite !important;
}
@keyframes ntc-lucky-pulse {
  0%,100% { transform: scale(1); }
  20% { transform: scale(1.012,1.018); }
  42% { transform: scale(.998,1); }
  65% { transform: scale(1.026,1.018); }
  82% { transform: scale(1.005,1.008); }
}

.name-text-effect-moonlit-silver {
  --name-fx-glow: rgba(181,211,247,.38);
  background-image: repeating-linear-gradient(104deg,
    #4d5c6c 0 28px, #b7c9dd 28px 48px, #f3f8ff 48px 58px,
    #98b2cf 58px 80px, #465463 80px 108px, #dbe8f7 108px 136px) !important;
  background-size: 136px 100% !important;
  animation: ntc-moonlit-silver 8.0s linear infinite !important;
}
@keyframes ntc-moonlit-silver {
  from { background-position: 0 50%; }
  to { background-position: -136px 50%; }
}

.name-text-effect-scarlet-deal {
  --name-fx-glow: rgba(211,60,66,.38);
  background-image: repeating-linear-gradient(90deg,
    #260608 0 32px, #8f171d 32px 46px, #ef6a63 46px 55px,
    #7d1118 55px 72px, #240608 72px 104px) !important;
  background-size: 104px 100% !important;
  animation: ntc-scarlet-deal 5.3s linear infinite !important;
}
@keyframes ntc-scarlet-deal {
  from { background-position: -104px 50%; }
  to { background-position: 0 50%; }
}

.name-text-effect-ocean-current {
  --name-fx-glow: rgba(60,191,215,.38);
  background-image:
    repeating-linear-gradient(104deg,#071a29 0 24px,#0a6c91 24px 45px,#7ce3e7 45px 57px,#145f88 57px 80px,#071a29 80px 112px),
    repeating-linear-gradient(76deg,transparent 0 31px,rgba(210,255,255,.64) 31px 38px,transparent 38px 72px) !important;
  background-size: 112px 100%,72px 100% !important;
  animation: ntc-ocean-current 6.7s linear infinite !important;
}
@keyframes ntc-ocean-current {
  from { background-position: 0 50%,0 50%; }
  to { background-position: 112px 50%,-72px 50%; }
}

.name-text-effect-arcane-glyph {
  --name-fx-glow: rgba(154,102,221,.40);
  background-image: repeating-linear-gradient(126deg,
    #3d245f 0 22px,#b47de5 22px 41px,#50d0c7 41px 54px,
    #7750b2 54px 75px,#2d2143 75px 102px) !important;
  background-size: 102px 102px !important;
  animation: ntc-arcane-glyph 7.3s linear infinite !important;
}
@keyframes ntc-arcane-glyph {
  from { background-position: 0 0; }
  to { background-position: 102px -102px; }
}

.name-text-effect-diamond-facet {
  --name-fx-glow: rgba(207,240,255,.40);
  background-image: repeating-linear-gradient(122deg,
    #6d8494 0 11px,#edfaff 11px 19px,#a9c8dc 19px 30px,
    #fff 30px 35px,#718898 35px 48px) !important;
  background-size: 48px 100% !important;
  animation: ntc-diamond-facet 7.8s linear infinite !important;
}
@keyframes ntc-diamond-facet {
  from { background-position: 0 50%; }
  to { background-position: 48px 50%; }
}

.name-text-effect-coffee-steam {
  --name-fx-glow: rgba(201,139,79,.34);
  background-image: repeating-linear-gradient(180deg,
    #fff0d1 0 18px,#d99c5e 18px 36px,#744326 36px 58px,
    #e7b873 58px 79px,#9a6039 79px 100px) !important;
  background-size: 100% 100px !important;
  animation: ntc-coffee-steam 6.1s linear infinite !important;
}
@keyframes ntc-coffee-steam {
  from { background-position: 50% 100px; }
  to { background-position: 50% 0; }
}

.name-text-effect-glitch-dealer {
  --name-fx-glow: rgba(116,211,210,.24);
  background-image: linear-gradient(180deg,#f3efd9,#c8bd9f) !important;
  background-size: 100% 100% !important;
  animation: ntc-glitch-dealer 4.6s linear infinite !important;
}
@keyframes ntc-glitch-dealer {
  0%,100% { transform: translate(0,0); text-shadow: -1px 0 rgba(50,203,209,.25),1px 0 rgba(229,77,156,.22),0 1px 1px rgba(0,0,0,.96) !important; }
  20% { transform: translate(.22px,-.08px); text-shadow: -.6px 0 rgba(50,203,209,.45),1.2px 0 rgba(229,77,156,.28),0 1px 1px rgba(0,0,0,.96) !important; }
  40% { transform: translate(-.18px,.08px); text-shadow: -1.2px 0 rgba(50,203,209,.28),.6px 0 rgba(229,77,156,.44),0 1px 1px rgba(0,0,0,.96) !important; }
  60% { transform: translate(.12px,.04px); text-shadow: -.7px 0 rgba(50,203,209,.40),1.1px 0 rgba(229,77,156,.35),0 1px 1px rgba(0,0,0,.96) !important; }
  80% { transform: translate(-.10px,-.05px); text-shadow: -1.1px 0 rgba(50,203,209,.34),.8px 0 rgba(229,77,156,.38),0 1px 1px rgba(0,0,0,.96) !important; }
}

.name-text-effect-celestial-drift {
  --name-fx-glow: rgba(175,199,243,.36);
  background-image: repeating-linear-gradient(116deg,
    #111a3a 0 31px,#485c9a 31px 51px,#d8e6ff 51px 61px,
    #756bb2 61px 84px,#17203e 84px 119px,#9fb8ed 119px 150px) !important;
  background-size: 150px 150px !important;
  animation: ntc-celestial-drift 9.1s linear infinite !important;
}
@keyframes ntc-celestial-drift {
  from { background-position: -150px 150px; }
  to { background-position: 0 0; }
}

.name-text-effect-jackpot-marquee {
  --name-fx-glow: rgba(231,178,62,.36);
  background-image: repeating-linear-gradient(90deg,
    #75480e 0 10px,#f0c457 10px 17px,#fff0a0 17px 22px,#b87517 22px 33px) !important;
  background-size: 33px 100% !important;
  animation: ntc-jackpot-marquee 4.9s linear infinite !important;
}
@keyframes ntc-jackpot-marquee {
  from { background-position: 0 50%; }
  to { background-position: 33px 50%; }
}

.name-text-effect-phantom-fade {
  --name-fx-glow: rgba(112,189,178,.34);
  background-image: repeating-linear-gradient(102deg,
    #243435 0 27px,#8fc4ba 27px 47px,#d6eee8 47px 57px,
    #527f79 57px 80px,#1d2b2d 80px 112px) !important;
  background-size: 112px 100% !important;
  animation: ntc-phantom-fade 7.6s linear infinite !important;
}
@keyframes ntc-phantom-fade {
  0% { background-position: 0 50%; opacity: .94; }
  25% { opacity: 1; }
  50% { background-position: 56px 50%; opacity: .96; }
  75% { opacity: .99; }
  100% { background-position: 112px 50%; opacity: .94; }
}

.name-text-effect-heartbeat-rose {
  --name-fx-glow: rgba(236,121,163,.40);
  background-image: linear-gradient(180deg,#ffd7e7,#dc7198 49%,#78334e) !important;
  background-size: 100% 100% !important;
  animation: ntc-heartbeat-rose 3.6s linear infinite !important;
}
@keyframes ntc-heartbeat-rose {
  0%,100% { transform: scale(1); }
  12% { transform: scale(1.025,1.035); }
  24% { transform: scale(.998,1); }
  38% { transform: scale(1.016,1.022); }
  54% { transform: scale(1); }
  72% { transform: scale(1.008,1.011); }
  86% { transform: scale(.999,1); }
}

.name-text-effect-prism-cut {
  --name-fx-glow: rgba(186,194,239,.32);
  background-image: repeating-linear-gradient(115deg,
    #8ba9c8 0 23px,#d8b7ec 23px 43px,#8fe3d4 43px 63px,
    #f4e8a2 63px 83px,#efa7bd 83px 103px,#9cbff0 103px 124px,
    #c3ace6 124px 148px) !important;
  background-size: 148px 100% !important;
  animation: ntc-prism-cut 10.2s linear infinite !important;
}
@keyframes ntc-prism-cut {
  from { background-position: 0 50%; }
  to { background-position: -148px 50%; }
}

.name-text-effect-crowned-eclipse {
  --name-fx-glow: rgba(239,190,79,.38);
  background-image: repeating-linear-gradient(105deg,
    #d4a641 0 31px,#ffe9a3 31px 45px,#1a150f 45px 62px,
    #efc35e 62px 82px,#8d651e 82px 109px,#f2d37a 109px 136px) !important;
  background-size: 136px 100% !important;
  -webkit-text-stroke: .18px rgba(255,219,128,.48) !important;
  animation: ntc-crowned-eclipse 8.7s linear infinite !important;
}
@keyframes ntc-crowned-eclipse {
  from { background-position: 136px 50%; }
  to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .seat-name-text.name-text-effect {
    animation: none !important;
    background-position: 50% 50% !important;
    transform: none !important;
  }
  .customize-buy-coffee-image-button {
    transition-duration: .01ms !important;
  }
}

/* Only products represented in or immediately beside the visible carousel
   window animate. All three loop copies of the same logical product stay in
   phase, while unrelated offscreen products remain paused to reduce repainting. */
.customize-carousel-slide:not(.is-customize-animation-visible)
  .customize-name-effect-option .seat-name-text.name-text-effect,
.customize-carousel-slide:not(.is-customize-animation-visible)
  .customize-effect-option .nameplate-effect-layer > b,
.customize-carousel-slide:not(.is-customize-animation-visible)
  .customize-effect-option .nameplate-effect-layer > i {
  animation-play-state: paused !important;
}
.customize-carousel-slide.is-customize-animation-visible
  .customize-name-effect-option .seat-name-text.name-text-effect,
.customize-carousel-slide.is-customize-animation-visible
  .customize-effect-option .nameplate-effect-layer > b,
.customize-carousel-slide.is-customize-animation-visible
  .customize-effect-option .nameplate-effect-layer > i {
  animation-play-state: running !important;
}

/* ===== Requested supporter panel, Name Effect color fidelity and remote plaque position ===== */
/* Only supportershop.png is shifted upward. The Shop frame, chains, side art,
   section art and all other image sizing/positioning remain untouched. */
.customize-supporter-art {
  top: calc(var(--shop-card-height) + 12px) !important;
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  max-width: min(var(--shop-card-width), calc(100vw - 28px)) !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.customize-supporter-panel-image {
  grid-area: 1 / 1 !important;
  order: initial !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}
.customize-supporter-panel-content {
  grid-area: 1 / 1 !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.7vw, 24px) !important;
  padding: 0 clamp(22px, 5.2%, 48px) !important;
  pointer-events: none !important;
}
.customize-supporter-panel-copy {
  min-width: 0 !important;
  margin: 0 !important;
  color: #f5d7e7 !important;
  -webkit-text-fill-color: #f5d7e7 !important;
  font: 800 clamp(15px, 1.24vw, 21px)/1.2 Georgia, "Times New Roman", serif !important;
  letter-spacing: .012em !important;
  text-align: center !important;
  text-wrap: balance;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .92),
    0 0 7px rgba(244, 146, 198, .34),
    0 0 13px rgba(223, 163, 80, .16) !important;
}
.customize-supporter-cta {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 9px clamp(16px, 1.7vw, 25px) !important;
  border: 1px solid rgba(245, 205, 115, .78) !important;
  border-radius: 8px 3px 8px 3px !important;
  background: linear-gradient(180deg, rgba(123, 61, 84, .96), rgba(64, 29, 43, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 200, .20),
    inset 0 -2px 5px rgba(20, 8, 13, .52),
    0 3px 8px rgba(0, 0, 0, .44),
    0 0 8px rgba(234, 139, 188, .18) !important;
  color: #ffe6f1 !important;
  -webkit-text-fill-color: #ffe6f1 !important;
  font: 800 clamp(14px, 1.04vw, 18px)/1 Arial, sans-serif !important;
  letter-spacing: .018em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .88), 0 0 5px rgba(245, 158, 205, .24) !important;
  transform-origin: 50% 50% !important;
  transition: transform .17s cubic-bezier(.2,.76,.24,1), filter .17s ease, box-shadow .17s ease !important;
  pointer-events: auto !important;
}
.customize-supporter-cta:hover,
.customize-supporter-cta:focus-visible {
  transform: scale(1.045) !important;
  filter: brightness(1.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, .28),
    inset 0 -2px 5px rgba(20, 8, 13, .46),
    0 4px 10px rgba(0, 0, 0, .48),
    0 0 12px rgba(239, 143, 194, .32) !important;
  outline: none !important;
}
.customize-supporter-cta:active {
  transform: scale(1.016) !important;
  filter: brightness(.98) !important;
}
.customize-buy-coffee-image-button {
  display: none !important;
}
@media (max-width: 900px) {
  .customize-supporter-art {
    top: calc(var(--shop-card-height) + 6px) !important;
  }
  .customize-supporter-panel-content {
    gap: 9px !important;
    padding-inline: 18px !important;
  }
  .customize-supporter-panel-copy {
    font-size: clamp(12px, 2.2vw, 16px) !important;
  }
  .customize-supporter-cta {
    min-height: 32px !important;
    padding: 7px 12px !important;
    font-size: clamp(11px, 1.9vw, 14px) !important;
  }
}

/* Restore the long-standing position used by every remote player nameplate.
   This overrides only the plaque of non-self seats; cards, chips, bet text,
   the local player's plaque and every Shop element retain their exact layout. */
.player-seat:not(.is-self):not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
  transform: translateY(30px) !important;
}

/* The shared pale highlight was visually covering the individual Name Effect
   gradients. Remove that veil and restore a restrained, effect-specific glow. */
.seat-name-text.name-text-effect {
  background-color: transparent !important;
  background-blend-mode: normal !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.90), 0 0 3px var(--name-fx-glow) !important;
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect {
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.94), 0 0 3px var(--name-fx-glow) !important;
}
.seat-name-text.name-text-effect-verdant-wave { text-shadow:0 1px 1px #020b05,0 0 4px rgba(48,211,104,.46) !important; }
.seat-name-text.name-text-effect-golden-tell { text-shadow:0 1px 1px #241405,0 0 4px rgba(239,184,66,.42) !important; }
.seat-name-text.name-text-effect-neon-split { text-shadow:-1px 0 rgba(36,210,225,.58),1px 0 rgba(232,78,174,.54),0 1px 1px #000 !important; }
.seat-name-text.name-text-effect-velvet-ember { text-shadow:0 1px 1px #1b0703,0 0 5px rgba(215,70,24,.48) !important; }
.seat-name-text.name-text-effect-frost-script { text-shadow:0 1px 1px #0b2635,0 0 5px rgba(143,221,255,.46) !important; }
.seat-name-text.name-text-effect-royal-ink { -webkit-text-stroke:.18px rgba(236,199,98,.50) !important; text-shadow:0 1px 1px #160c21,0 0 4px rgba(160,104,215,.42) !important; }
.seat-name-text.name-text-effect-lucky-pulse { text-shadow:0 1px 1px #05170c,0 0 5px rgba(43,201,97,.46) !important; }
.seat-name-text.name-text-effect-moonlit-silver { text-shadow:0 1px 1px #101820,0 0 5px rgba(157,190,230,.40) !important; }
.seat-name-text.name-text-effect-scarlet-deal { text-shadow:0 1px 1px #1d0406,0 0 4px rgba(197,40,48,.44) !important; }
.seat-name-text.name-text-effect-ocean-current { text-shadow:0 1px 1px #021018,0 0 5px rgba(39,167,196,.44) !important; }
.seat-name-text.name-text-effect-arcane-glyph { text-shadow:0 1px 1px #170f24,0 0 5px rgba(156,100,219,.44) !important; }
.seat-name-text.name-text-effect-diamond-facet { text-shadow:0 1px 1px #15232b,0 0 4px rgba(205,239,255,.40) !important; }
.seat-name-text.name-text-effect-coffee-steam { text-shadow:0 1px 1px #241207,0 0 4px rgba(180,113,58,.38) !important; }
.seat-name-text.name-text-effect-glitch-dealer { text-shadow:-1px 0 rgba(50,203,209,.40),1px 0 rgba(229,77,156,.36),0 1px 1px #000 !important; }
.seat-name-text.name-text-effect-celestial-drift { text-shadow:0 1px 1px #090d20,1px -1px 5px rgba(188,214,255,.30),-1px 1px 4px rgba(134,115,211,.28) !important; }
.seat-name-text.name-text-effect-jackpot-marquee { text-shadow:0 1px 1px #261504,0 0 4px rgba(226,172,56,.38) !important; }
.seat-name-text.name-text-effect-phantom-fade { text-shadow:0 1px 1px #081212,0 0 5px rgba(105,181,170,.38) !important; }
.seat-name-text.name-text-effect-heartbeat-rose { text-shadow:0 1px 1px #27101a,0 0 5px rgba(225,104,147,.42) !important; }
.seat-name-text.name-text-effect-prism-cut { text-shadow:0 1px 1px #161728,0 0 4px rgba(177,191,239,.38) !important; }
.seat-name-text.name-text-effect-crowned-eclipse { -webkit-text-stroke:.16px rgba(255,218,126,.44) !important; text-shadow:0 1px 1px #1f1405,0 -1px 5px rgba(236,186,73,.42) !important; }

@media (prefers-reduced-motion: reduce) {
  .customize-supporter-cta { transition-duration: .01ms !important; }
}


/* ===== Name Effect fidelity across catalog, purchase preview and live slots =====
   The Shop card is the visual source of truth. The same font weight, material
   scale, animation phase and emitted glow are now used everywhere. */
.seat-name:has(> .seat-name-text.name-text-effect) {
  overflow: visible !important;
}

.seat-name-text.name-text-effect {
  --name-fx-shadow:
    0 .0556em .0556em rgba(0, 0, 0, .92),
    0 0 .238em var(--name-fx-glow);
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: .015em !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: transparent !important;
  background-blend-mode: normal !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--name-fx-shadow) !important;
  filter: drop-shadow(0 0 .105em var(--name-fx-glow)) !important;
  animation-delay: var(--name-fx-sync-delay, 0s) !important;
  animation-fill-mode: both !important;
}

/* Custom nameplate artwork used to replace the effect's own material/shadow
   with one generic contour. Keep only the effect's shared variables instead. */
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: .015em !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: var(--name-fx-shadow) !important;
  filter: drop-shadow(0 0 .105em var(--name-fx-glow)) !important;
}

/* Effect-specific light remains identical in all three contexts. */
.seat-name-text.name-text-effect-verdant-wave { --name-fx-shadow:0 .0556em .0556em #020b05,0 0 .238em rgba(48,211,104,.46); }
.seat-name-text.name-text-effect-golden-tell { --name-fx-shadow:0 .0556em .0556em #241405,0 0 .238em rgba(239,184,66,.42); }
.seat-name-text.name-text-effect-neon-split { --name-fx-shadow:-.0556em 0 rgba(36,210,225,.58),.0556em 0 rgba(232,78,174,.54),0 .0556em .0556em #000,0 0 .16em rgba(137,218,219,.24); }
.seat-name-text.name-text-effect-velvet-ember { --name-fx-shadow:0 .0556em .0556em #1b0703,0 0 .278em rgba(215,70,24,.48); }
.seat-name-text.name-text-effect-frost-script { --name-fx-shadow:0 .0556em .0556em #0b2635,0 0 .278em rgba(143,221,255,.46); }
.seat-name-text.name-text-effect-royal-ink { --name-fx-shadow:0 .0556em .0556em #160c21,0 0 .238em rgba(160,104,215,.42); -webkit-text-stroke:.01em rgba(236,199,98,.50) !important; }
.seat-name-text.name-text-effect-lucky-pulse { --name-fx-shadow:0 .0556em .0556em #05170c,0 0 .278em rgba(43,201,97,.46); }
.seat-name-text.name-text-effect-moonlit-silver { --name-fx-shadow:0 .0556em .0556em #101820,0 0 .278em rgba(157,190,230,.40); }
.seat-name-text.name-text-effect-scarlet-deal { --name-fx-shadow:0 .0556em .0556em #1d0406,0 0 .238em rgba(197,40,48,.44); }
.seat-name-text.name-text-effect-ocean-current { --name-fx-shadow:0 .0556em .0556em #021018,0 0 .278em rgba(39,167,196,.44); }
.seat-name-text.name-text-effect-arcane-glyph { --name-fx-shadow:0 .0556em .0556em #170f24,0 0 .278em rgba(156,100,219,.44); }
.seat-name-text.name-text-effect-diamond-facet { --name-fx-shadow:0 .0556em .0556em #15232b,0 0 .238em rgba(205,239,255,.40); }
.seat-name-text.name-text-effect-coffee-steam { --name-fx-shadow:0 .0556em .0556em #241207,0 0 .238em rgba(180,113,58,.38); }
.seat-name-text.name-text-effect-glitch-dealer { --name-fx-shadow:-.0556em 0 rgba(50,203,209,.40),.0556em 0 rgba(229,77,156,.36),0 .0556em .0556em #000,0 0 .14em rgba(116,211,210,.22); }
.seat-name-text.name-text-effect-celestial-drift { --name-fx-shadow:0 .0556em .0556em #090d20,.0556em -.0556em .278em rgba(188,214,255,.30),-.0556em .0556em .222em rgba(134,115,211,.28); }
.seat-name-text.name-text-effect-jackpot-marquee { --name-fx-shadow:0 .0556em .0556em #261504,0 0 .238em rgba(226,172,56,.38); }
.seat-name-text.name-text-effect-phantom-fade { --name-fx-shadow:0 .0556em .0556em #081212,0 0 .278em rgba(105,181,170,.38); }
.seat-name-text.name-text-effect-heartbeat-rose { --name-fx-shadow:0 .0556em .0556em #27101a,0 0 .278em rgba(225,104,147,.42); }
.seat-name-text.name-text-effect-prism-cut { --name-fx-shadow:0 .0556em .0556em #161728,0 0 .238em rgba(177,191,239,.38); }
.seat-name-text.name-text-effect-crowned-eclipse { --name-fx-shadow:0 .0556em .0556em #1f1405,0 -.0556em .278em rgba(236,186,73,.42); -webkit-text-stroke:.009em rgba(255,218,126,.44) !important; }

/* Scale every animated material in em units. At the 18px catalog size this is
   pixel-for-pixel equivalent to the approved card appearance; at the smaller
   live/purchase sizes the complete texture scales down instead of sampling only
   one dark fragment of a fixed 96–150px strip. */
.name-text-effect-verdant-wave {
  background-image:repeating-linear-gradient(108deg,#071109 0 .7778em,#174023 .7778em 1.5556em,#32cf68 1.5556em 2.4444em,#b3f6b7 2.4444em 2.8889em,#248d49 2.8889em 3.7778em,#09150c 3.7778em 4.5556em,#3bdc74 4.5556em 5.3333em) !important;
  background-size:5.3333em 100% !important;
}
@keyframes ntc-verdant-wave { from{background-position:0 50%} to{background-position:5.3333em 50%} }

.name-text-effect-golden-tell {
  background-image:repeating-linear-gradient(106deg,#75470e 0 1.6111em,#c88d27 1.6111em 2.6667em,#ffef9a 2.6667em 3.1667em,#d7a03b 3.1667em 4.3333em,#6c410c 4.3333em 6em,#c58a25 6em 7.1111em) !important;
  background-size:7.1111em 100% !important;
}
@keyframes ntc-golden-tell { from{background-position:-7.1111em 50%} to{background-position:0 50%} }

.name-text-effect-velvet-ember {
  background-image:repeating-linear-gradient(180deg,#ffd47c 0 .8333em,#d36731 .8333em 1.7222em,#711916 1.7222em 2.6111em,#ef8a3b 2.6111em 3.5em,#9d3020 3.5em 4.4444em) !important;
  background-size:100% 4.4444em !important;
}
@keyframes ntc-velvet-ember { from{background-position:50% 0} to{background-position:50% -4.4444em} }

.name-text-effect-frost-script {
  background-image:repeating-linear-gradient(112deg,#6f9ab0 0 1.2778em,#d7f6ff 1.2778em 2.2222em,#fff 2.2222em 2.6667em,#9bdaf2 2.6667em 3.7222em,#587b94 3.7222em 5.0556em,#d8f7ff 5.0556em 6.2222em) !important;
  background-size:6.2222em 100% !important;
}
@keyframes ntc-frost-script { from{background-position:6.2222em 50%} to{background-position:0 50%} }

.name-text-effect-royal-ink {
  background-image:repeating-linear-gradient(180deg,#e1c5fb 0 1em,#925bc9 1em 2.1667em,#3a2352 2.1667em 3.2778em,#c99bea 3.2778em 4.3333em,#6d3e9f 4.3333em 5.3333em) !important;
  background-size:100% 5.3333em !important;
}
@keyframes ntc-royal-ink { from{background-position:50% 0} to{background-position:50% 5.3333em} }

.name-text-effect-moonlit-silver {
  background-image:repeating-linear-gradient(104deg,#4d5c6c 0 1.5556em,#b7c9dd 1.5556em 2.6667em,#f3f8ff 2.6667em 3.2222em,#98b2cf 3.2222em 4.4444em,#465463 4.4444em 6em,#dbe8f7 6em 7.5556em) !important;
  background-size:7.5556em 100% !important;
}
@keyframes ntc-moonlit-silver { from{background-position:0 50%} to{background-position:-7.5556em 50%} }

.name-text-effect-scarlet-deal {
  background-image:repeating-linear-gradient(90deg,#260608 0 1.7778em,#8f171d 1.7778em 2.5556em,#ef6a63 2.5556em 3.0556em,#7d1118 3.0556em 4em,#240608 4em 5.7778em) !important;
  background-size:5.7778em 100% !important;
}
@keyframes ntc-scarlet-deal { from{background-position:-5.7778em 50%} to{background-position:0 50%} }

.name-text-effect-ocean-current {
  background-image:repeating-linear-gradient(104deg,#071a29 0 1.3333em,#0a6c91 1.3333em 2.5em,#7ce3e7 2.5em 3.1667em,#145f88 3.1667em 4.4444em,#071a29 4.4444em 6.2222em),repeating-linear-gradient(76deg,transparent 0 1.7222em,rgba(210,255,255,.64) 1.7222em 2.1111em,transparent 2.1111em 4em) !important;
  background-size:6.2222em 100%,4em 100% !important;
}
@keyframes ntc-ocean-current { from{background-position:0 50%,0 50%} to{background-position:6.2222em 50%,-4em 50%} }

.name-text-effect-arcane-glyph {
  background-image:repeating-linear-gradient(126deg,#3d245f 0 1.2222em,#b47de5 1.2222em 2.2778em,#50d0c7 2.2778em 3em,#7750b2 3em 4.1667em,#2d2143 4.1667em 5.6667em) !important;
  background-size:5.6667em 5.6667em !important;
}
@keyframes ntc-arcane-glyph { from{background-position:0 0} to{background-position:5.6667em -5.6667em} }

.name-text-effect-diamond-facet {
  background-image:repeating-linear-gradient(122deg,#6d8494 0 .6111em,#edfaff .6111em 1.0556em,#a9c8dc 1.0556em 1.6667em,#fff 1.6667em 1.9444em,#718898 1.9444em 2.6667em) !important;
  background-size:2.6667em 100% !important;
}
@keyframes ntc-diamond-facet { from{background-position:0 50%} to{background-position:2.6667em 50%} }

.name-text-effect-coffee-steam {
  background-image:repeating-linear-gradient(180deg,#fff0d1 0 1em,#d99c5e 1em 2em,#744326 2em 3.2222em,#e7b873 3.2222em 4.3889em,#9a6039 4.3889em 5.5556em) !important;
  background-size:100% 5.5556em !important;
}
@keyframes ntc-coffee-steam { from{background-position:50% 5.5556em} to{background-position:50% 0} }

.name-text-effect-celestial-drift {
  background-image:repeating-linear-gradient(116deg,#111a3a 0 1.7222em,#485c9a 1.7222em 2.8333em,#d8e6ff 2.8333em 3.3889em,#756bb2 3.3889em 4.6667em,#17203e 4.6667em 6.6111em,#9fb8ed 6.6111em 8.3333em) !important;
  background-size:8.3333em 8.3333em !important;
}
@keyframes ntc-celestial-drift { from{background-position:-8.3333em 8.3333em} to{background-position:0 0} }

.name-text-effect-jackpot-marquee {
  background-image:repeating-linear-gradient(90deg,#75480e 0 .5556em,#f0c457 .5556em .9444em,#fff0a0 .9444em 1.2222em,#b87517 1.2222em 1.8333em) !important;
  background-size:1.8333em 100% !important;
}
@keyframes ntc-jackpot-marquee { from{background-position:0 50%} to{background-position:1.8333em 50%} }

.name-text-effect-phantom-fade {
  background-image:repeating-linear-gradient(102deg,#243435 0 1.5em,#8fc4ba 1.5em 2.6111em,#d6eee8 2.6111em 3.1667em,#527f79 3.1667em 4.4444em,#1d2b2d 4.4444em 6.2222em) !important;
  background-size:6.2222em 100% !important;
}
@keyframes ntc-phantom-fade { 0%{background-position:0 50%;opacity:.94} 25%{opacity:1} 50%{background-position:3.1111em 50%;opacity:.96} 75%{opacity:.99} 100%{background-position:6.2222em 50%;opacity:.94} }

.name-text-effect-prism-cut {
  background-image:repeating-linear-gradient(115deg,#8ba9c8 0 1.2778em,#d8b7ec 1.2778em 2.3889em,#8fe3d4 2.3889em 3.5em,#f4e8a2 3.5em 4.6111em,#efa7bd 4.6111em 5.7222em,#9cbff0 5.7222em 6.8889em,#c3ace6 6.8889em 8.2222em) !important;
  background-size:8.2222em 100% !important;
}
@keyframes ntc-prism-cut { from{background-position:0 50%} to{background-position:-8.2222em 50%} }

.name-text-effect-crowned-eclipse {
  background-image:repeating-linear-gradient(105deg,#d4a641 0 1.7222em,#ffe9a3 1.7222em 2.5em,#1a150f 2.5em 3.4444em,#efc35e 3.4444em 4.5556em,#8d651e 4.5556em 6.0556em,#f2d37a 6.0556em 7.5556em) !important;
  background-size:7.5556em 100% !important;
}
@keyframes ntc-crowned-eclipse { from{background-position:7.5556em 50%} to{background-position:0 50%} }

/* ===== Custom-background name readability + Rainbow + purchase success ===== */
/* When a custom nameplate background is active, keep the animated text material
   untouched but add a compact dark contrast halo behind the glyphs. This gives
   the name visual priority over bright/busy artwork without adding a panel or
   changing the plaque's size/position. */
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect {
  filter:
    drop-shadow(0 0 .105em var(--name-fx-glow))
    drop-shadow(0 .045em .035em rgba(0,0,0,.98))
    drop-shadow(0 0 .16em rgba(0,0,0,.92))
    drop-shadow(0 0 .29em rgba(0,0,0,.62)) !important;
}

/* Full-spectrum LED ribbon. One exact pattern period is travelled on every
   cycle, so the right-to-left RGB wave loops with no visible reset. */
.seat-name-text.name-text-effect-rainbow {
  --name-fx-glow: rgba(225,238,255,.48);
  --name-fx-shadow:
    0 .0556em .0556em rgba(0,0,0,.96),
    0 0 .20em rgba(255,255,255,.34),
    -.07em 0 .20em rgba(255,66,92,.22),
    .07em 0 .20em rgba(64,211,255,.22);
  background-image: repeating-linear-gradient(108deg,
    #ff304f 0 1.25em,
    #ff8538 1.25em 2.50em,
    #ffd43b 2.50em 3.75em,
    #57e65e 3.75em 5.00em,
    #27dec5 5.00em 6.25em,
    #38a9ff 6.25em 7.50em,
    #765cff 7.50em 8.75em,
    #d94dff 8.75em 10.00em,
    #ff4d9e 10.00em 11.25em,
    #ff304f 11.25em 12.50em) !important;
  background-size: 12.5em 100% !important;
  animation: ntc-rainbow 7.2s linear infinite !important;
}
@keyframes ntc-rainbow {
  from { background-position: 0 50%; }
  to { background-position: -12.5em 50%; }
}

/* Keep the RGB effect's glow strong enough over custom backgrounds while the
   contrast halo above remains the only extra readability treatment. */
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-rainbow,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-rainbow {
  filter:
    drop-shadow(0 0 .12em rgba(232,244,255,.56))
    drop-shadow(0 .045em .035em rgba(0,0,0,.98))
    drop-shadow(0 0 .17em rgba(0,0,0,.94))
    drop-shadow(0 0 .30em rgba(0,0,0,.66)) !important;
}

/* Successful purchases remain in the same popup. Only its text/actions morph,
   while the preview stays in place. */
.customize-purchase-dialog.is-success .customize-purchase-message {
  display: none !important;
}
.customize-purchase-dialog.is-success .customize-purchase-title {
  font-size: 1.28em !important;
  color: #f6dc8c !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.95), 0 0 8px rgba(226,180,67,.36) !important;
}
.customize-purchase-panel.purchase-success-transition {
  animation: customize-purchase-success-panel .42s cubic-bezier(.2,.78,.2,1) both;
}
.customize-purchase-panel.purchase-success-transition .customize-purchase-title {
  animation: customize-purchase-success-title .52s cubic-bezier(.18,.9,.24,1) both;
}
.customize-purchase-panel.purchase-success-transition .customize-purchase-preview {
  animation: customize-purchase-success-preview .48s .06s cubic-bezier(.2,.78,.2,1) both;
}
.customize-purchase-panel.purchase-success-transition .customize-purchase-actions {
  animation: customize-purchase-success-actions .46s .10s cubic-bezier(.2,.78,.2,1) both;
}
@keyframes customize-purchase-success-panel {
  0% { transform: scale(.985); filter: brightness(.96); }
  55% { transform: scale(1.012); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes customize-purchase-success-title {
  0% { opacity: 0; transform: translateY(7px) scale(.94); }
  65% { opacity: 1; transform: translateY(-1px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes customize-purchase-success-preview {
  0% { opacity: .55; transform: scale(.975); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes customize-purchase-success-actions {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.customize-purchase-dialog.is-success .customize-purchase-confirm {
  box-shadow: 0 0 0 1px rgba(242,202,99,.28) inset, 0 0 12px rgba(229,184,70,.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .customize-purchase-panel.purchase-success-transition,
  .customize-purchase-panel.purchase-success-transition .customize-purchase-title,
  .customize-purchase-panel.purchase-success-transition .customize-purchase-preview,
  .customize-purchase-panel.purchase-success-transition .customize-purchase-actions {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seat-name-text.name-text-effect-rainbow {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}


/* ===== Final cosmetic polish: colored name bases, Pastel Rainbow and supporter image button ===== */
/* Verdant Wave and Rainbow intentionally keep their approved materials. Every
   other Name Effect now has its own readable base hue instead of falling back
   to near-black portions of the material. The animated highlight remains the
   dominant part of each style. */
.name-text-effect-golden-tell {
  background-image:repeating-linear-gradient(106deg,#8b642b 0 1.6111em,#c89536 1.6111em 2.6667em,#fff0a0 2.6667em 3.1667em,#d8a344 3.1667em 4.3333em,#9a702d 4.3333em 6em,#c99032 6em 7.1111em) !important;
}
.name-text-effect-neon-split {
  background-image:linear-gradient(180deg,#f7f4ea,#d9ece5) !important;
}
.name-text-effect-velvet-ember {
  background-image:repeating-linear-gradient(180deg,#ffd681 0 .8333em,#dc7640 .8333em 1.7222em,#8e3b30 1.7222em 2.6111em,#f19349 2.6111em 3.5em,#b54b35 3.5em 4.4444em) !important;
}
.name-text-effect-frost-script {
  background-image:repeating-linear-gradient(112deg,#87adbf 0 1.2778em,#d9f6ff 1.2778em 2.2222em,#fff 2.2222em 2.6667em,#9fddf3 2.6667em 3.7222em,#6c93a9 3.7222em 5.0556em,#daf7ff 5.0556em 6.2222em) !important;
}
.name-text-effect-royal-ink {
  background-image:repeating-linear-gradient(180deg,#e6cffb 0 1em,#a16bd0 1em 2.1667em,#65427e 2.1667em 3.2778em,#cf9feb 3.2778em 4.3333em,#8051ad 4.3333em 5.3333em) !important;
}
.name-text-effect-lucky-pulse {
  background-image:radial-gradient(ellipse at center,#c7ffc7 0%,#4bd679 34%,#2d8a50 70%,#1d5b37 100%) !important;
}
.name-text-effect-moonlit-silver {
  background-image:repeating-linear-gradient(104deg,#73879b 0 1.5556em,#bfd0e1 1.5556em 2.6667em,#f4f8ff 2.6667em 3.2222em,#a5bdd6 3.2222em 4.4444em,#687c91 4.4444em 6em,#dce8f6 6em 7.5556em) !important;
}
.name-text-effect-scarlet-deal {
  background-image:repeating-linear-gradient(90deg,#6d2027 0 1.7778em,#a82a31 1.7778em 2.5556em,#f07570 2.5556em 3.0556em,#92252c 3.0556em 4em,#642028 4em 5.7778em) !important;
}
.name-text-effect-ocean-current {
  background-image:repeating-linear-gradient(104deg,#24536a 0 1.3333em,#14799d 1.3333em 2.5em,#81e4e7 2.5em 3.1667em,#2e82a3 3.1667em 4.4444em,#214e66 4.4444em 6.2222em),repeating-linear-gradient(76deg,transparent 0 1.7222em,rgba(220,255,255,.70) 1.7222em 2.1111em,transparent 2.1111em 4em) !important;
}
.name-text-effect-arcane-glyph {
  background-image:repeating-linear-gradient(126deg,#674586 0 1.2222em,#bc86e6 1.2222em 2.2778em,#62d5ce 2.2778em 3em,#8b64be 3em 4.1667em,#5c4674 4.1667em 5.6667em) !important;
}
.name-text-effect-diamond-facet {
  background-image:repeating-linear-gradient(122deg,#8199a8 0 .6111em,#eefaff .6111em 1.0556em,#b6d2e2 1.0556em 1.6667em,#fff 1.6667em 1.9444em,#8299a8 1.9444em 2.6667em) !important;
}
.name-text-effect-coffee-steam {
  background-image:repeating-linear-gradient(180deg,#fff1d5 0 1em,#dda66c 1em 2em,#9a6543 2em 3.2222em,#e9bd7f 3.2222em 4.3889em,#b17b55 4.3889em 5.5556em) !important;
}
.name-text-effect-glitch-dealer {
  background-image:linear-gradient(180deg,#f6f1df,#d6ccb0) !important;
}
.name-text-effect-celestial-drift {
  background-image:repeating-linear-gradient(116deg,#35466f 0 1.7222em,#5f74ae 1.7222em 2.8333em,#dae7ff 2.8333em 3.3889em,#877bc1 3.3889em 4.6667em,#324464 4.6667em 6.6111em,#a9c0ef 6.6111em 8.3333em) !important;
}
.name-text-effect-jackpot-marquee {
  background-image:repeating-linear-gradient(90deg,#9b712a 0 .5556em,#f1c75f .5556em .9444em,#fff1a5 .9444em 1.2222em,#c98b27 1.2222em 1.8333em) !important;
}
.name-text-effect-phantom-fade {
  background-image:repeating-linear-gradient(102deg,#466b69 0 1.5em,#9ac9bf 1.5em 2.6111em,#d9efea 2.6111em 3.1667em,#67948d 3.1667em 4.4444em,#3f6664 4.4444em 6.2222em) !important;
}
.name-text-effect-heartbeat-rose {
  background-image:linear-gradient(180deg,#ffe0ec,#df7ca1 49%,#9c526d) !important;
}
.name-text-effect-prism-cut {
  background-image:repeating-linear-gradient(115deg,#9bb7d1 0 1.2778em,#ddbdec 1.2778em 2.3889em,#9be5d8 2.3889em 3.5em,#f5e9a8 3.5em 4.6111em,#f0b1c5 4.6111em 5.7222em,#a9c8f2 5.7222em 6.8889em,#ccb6e8 6.8889em 8.2222em) !important;
}
.name-text-effect-crowned-eclipse {
  background-image:repeating-linear-gradient(105deg,#d8ad52 0 1.7222em,#ffeba7 1.7222em 2.5em,#776039 2.5em 3.4444em,#f0c866 3.4444em 4.5556em,#a47b32 4.5556em 6.0556em,#f3d783 6.0556em 7.5556em) !important;
}

/* Pastel Rainbow keeps the exact Rainbow direction/speed, but the material is
   white-dominant (#F7F7F7) with soft pastel spectrum bands. */
.seat-name-text.name-text-effect-pastel-rainbow {
  --name-fx-glow:rgba(236,233,255,.56);
  --name-fx-shadow:
    0 .0556em .0556em rgba(0,0,0,.86),
    0 0 .22em rgba(247,247,247,.48),
    -.06em 0 .18em rgba(255,183,203,.18),
    .06em 0 .18em rgba(175,220,255,.20);
  background-image:repeating-linear-gradient(108deg,
    #f7f7f7 0 .72em,
    #ffc7d4 .72em 1.42em,
    #f7f7f7 1.42em 1.78em,
    #ffd5b2 1.78em 2.48em,
    #f7f7f7 2.48em 2.84em,
    #fff0ad 2.84em 3.54em,
    #f7f7f7 3.54em 3.90em,
    #c8efc5 3.90em 4.60em,
    #f7f7f7 4.60em 4.96em,
    #bcebe2 4.96em 5.66em,
    #f7f7f7 5.66em 6.02em,
    #bddcff 6.02em 6.72em,
    #f7f7f7 6.72em 7.08em,
    #cfcbff 7.08em 7.78em,
    #f7f7f7 7.78em 8.14em,
    #e7c8f6 8.14em 8.84em,
    #f7f7f7 8.84em 9.20em,
    #f7c9df 9.20em 9.90em,
    #f7f7f7 9.90em 10.26em,
    #ffc7d4 10.26em 10.96em,
    #f7f7f7 10.96em 12.50em) !important;
  background-size:12.5em 100% !important;
  animation:ntc-pastel-rainbow 7.2s linear infinite !important;
}
@keyframes ntc-pastel-rainbow {
  from { background-position:0 50%; }
  to { background-position:-12.5em 50%; }
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-pastel-rainbow,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-pastel-rainbow {
  filter:
    drop-shadow(0 0 .12em rgba(247,247,247,.64))
    drop-shadow(0 .045em .035em rgba(0,0,0,.98))
    drop-shadow(0 0 .17em rgba(0,0,0,.90))
    drop-shadow(0 0 .30em rgba(0,0,0,.58)) !important;
}

/* Supporter panel: supportershop.png remains exactly where it was. The image
   button is laid over its lower-right corner and then offset 60px left / 30px
   up as requested. No generated text or extra panel is used. */
.customize-supporter-art {
  position:absolute !important;
  display:grid !important;
  grid-template:1fr / 1fr !important;
  width:max-content !important;
  max-width:min(var(--shop-card-width), calc(100vw - 28px)) !important;
  overflow:visible !important;
  pointer-events:none !important;
}
.customize-supporter-panel-image {
  grid-area:1 / 1 !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  pointer-events:none !important;
}
.customize-supporter-panel-content,
.customize-supporter-panel-copy,
.customize-supporter-cta {
  display:none !important;
}
.customize-buy-coffee-image-button {
  display:block !important;
  position:absolute !important;
  z-index:4 !important;
  right:60px !important;
  bottom:30px !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  line-height:0 !important;
  text-decoration:none !important;
  transform-origin:50% 50% !important;
  transition:transform .17s cubic-bezier(.2,.76,.24,1), filter .17s ease !important;
  pointer-events:auto !important;
}
.customize-buy-coffee-image-button > img {
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  pointer-events:none !important;
}
.customize-buy-coffee-image-button:hover,
.customize-buy-coffee-image-button:focus-visible {
  transform:scale(1.045) !important;
  filter:brightness(1.08) drop-shadow(0 0 7px rgba(244,155,201,.22)) !important;
  outline:none !important;
}
.customize-buy-coffee-image-button:active {
  transform:scale(1.018) !important;
  filter:brightness(.98) !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right:clamp(18px, 8vw, 60px) !important;
    bottom:clamp(12px, 4vw, 30px) !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .seat-name-text.name-text-effect-pastel-rainbow { animation:none !important; background-position:50% 50% !important; }
  .customize-buy-coffee-image-button { transition-duration:.01ms !important; }
}

/* ===== 2026-08-07 targeted cosmetic corrections =====
   Only cosmetic rendering is touched here: no seat/nameplate geometry or Shop
   layout sizing is changed. */

/* Supporter artwork button: substantially smaller, then another 40px left and
   20px up from the previously approved 60/30 offset. */
.customize-buy-coffee-image-button {
  right: 100px !important;
  bottom: 50px !important;
  width: 42% !important;
  max-width: 42% !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(42px, 13vw, 100px) !important;
    bottom: clamp(24px, 7vw, 50px) !important;
    width: 42% !important;
    max-width: 42% !important;
  }
}

/* Effect cards are preview windows. Live nameplates may intentionally let an
   effect breathe around the plaque, but the catalog preview must never leak
   into a neighboring item card. */
.customize-item-preview.customize-effect-preview,
.customize-effect-only-stage {
  overflow: hidden !important;
  clip-path: inset(0 round 8px) !important;
}
.customize-effect-only-stage > .customize-effect-only-layer {
  overflow: hidden !important;
}

/* Bubble Charm: keep the transparent feel but make the rings clearly readable
   against both dark and illustrated nameplates. */
.nameplate-effect-bubble-charm > i {
  border: 1.35px solid rgba(208, 246, 255, .92) !important;
  background:
    radial-gradient(circle at 29% 24%, rgba(255,255,255,.95) 0 11%, transparent 24%),
    radial-gradient(circle at 62% 67%, rgba(142,224,246,.20), transparent 58%) !important;
  box-shadow:
    inset 0 0 3px rgba(174, 235, 249, .48),
    0 0 4px rgba(143, 225, 247, .62),
    0 0 7px rgba(95, 195, 228, .28) !important;
  filter: drop-shadow(0 0 1.5px rgba(236,252,255,.62)) !important;
}
@keyframes np-bubble-rise {
  0%   { opacity:0;   transform:translate3d(-3px,6px,0) scale(.62); }
  16%  { opacity:.82; transform:translate3d(1px,1px,0) scale(.86); }
  48%  { opacity:.68; transform:translate3d(-3px,-13px,0) scale(1.02); }
  76%  { opacity:.78; transform:translate3d(4px,-24px,0) scale(1.10); }
  100% { opacity:0;   transform:translate3d(1px,-37px,0) scale(1.22); }
}

/* Starfall Ribbon: isolated stars enter from different sides and traverse the
   whole plate one at a time instead of sharing one corner-to-corner ribbon. */
.nameplate-effect-starfall-ribbon > i {
  width: 6px !important;
  height: 6px !important;
  left: var(--star-sx, 0%) !important;
  top: var(--star-sy, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  opacity: 0;
  background: transparent !important;
  transform: none !important;
  filter: drop-shadow(0 0 3px rgba(170,201,255,.82)) drop-shadow(0 0 6px rgba(111,158,245,.28)) !important;
  animation: np-star-roam 9.6s linear infinite !important;
  animation-delay: var(--star-delay, 0s) !important;
}
.nameplate-effect-starfall-ribbon > i::before {
  content:'';
  inset:0;
  background:linear-gradient(135deg,#ffffff,#cbdcff 58%,#8fb1ff) !important;
  clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%) !important;
}
.nameplate-effect-starfall-ribbon > i::after {
  content:'';
  left:-7px !important;
  top:2px !important;
  width:8px !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(198,219,255,.60)) !important;
  clip-path:none !important;
  transform:rotate(var(--star-tail-angle,0deg));
  transform-origin:right center;
}
.nameplate-effect-starfall-ribbon > i:nth-of-type(1) { --star-sx:-5%; --star-sy:18%; --star-ex:94%; --star-ey:66%; --star-delay:0s; --star-tail-angle:24deg; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(2) { --star-sx:101%; --star-sy:34%; --star-ex:8%; --star-ey:78%; --star-delay:-2.4s; --star-tail-angle:156deg; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(3) { --star-sx:18%; --star-sy:-8%; --star-ex:78%; --star-ey:94%; --star-delay:-4.8s; --star-tail-angle:62deg; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(4) { --star-sx:82%; --star-sy:104%; --star-ex:14%; --star-ey:6%; --star-delay:-7.2s; --star-tail-angle:-116deg; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(n+5) { display:none !important; }
@keyframes np-star-roam {
  0%   { left:var(--star-sx); top:var(--star-sy); opacity:0; transform:scale(.56) rotate(0deg); }
  8%   { opacity:.92; }
  42%  { opacity:.76; transform:scale(1.02) rotate(72deg); }
  78%  { opacity:.88; }
  90%  { left:var(--star-ex); top:var(--star-ey); opacity:0; transform:scale(.66) rotate(156deg); }
  100% { left:var(--star-ex); top:var(--star-ey); opacity:0; transform:scale(.56) rotate(180deg); }
}

/* Heartbeat Aura: true hearts cross different regions/timings of the whole
   nameplate. The old center-only geometric/ECG motif is disabled. */
.nameplate-effect-heartbeat-aura > b { display:none !important; }
.nameplate-effect-heartbeat-aura > i {
  display:block !important;
  left:var(--heart-sx,0%) !important;
  top:var(--heart-sy,50%) !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  color:var(--heart-color,#f58cab) !important;
  font:700 10px/1 Georgia,serif !important;
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(241,102,145,.58)) !important;
  animation:np-heart-roam 7.2s ease-in-out infinite !important;
  animation-delay:var(--heart-delay,0s) !important;
}
.nameplate-effect-heartbeat-aura > i::before {
  content:'♥' !important;
  position:static !important;
}
.nameplate-effect-heartbeat-aura > i:nth-of-type(1) { --heart-sx:-3%; --heart-sy:22%; --heart-ex:91%; --heart-ey:58%; --heart-delay:0s; --heart-color:#f68da9; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(2) { --heart-sx:102%; --heart-sy:65%; --heart-ex:12%; --heart-ey:20%; --heart-delay:-1.2s; --heart-color:#ffc0cf; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(3) { --heart-sx:18%; --heart-sy:104%; --heart-ex:72%; --heart-ey:4%; --heart-delay:-2.4s; --heart-color:#ee6e9b; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(4) { --heart-sx:74%; --heart-sy:-10%; --heart-ex:24%; --heart-ey:90%; --heart-delay:-3.6s; --heart-color:#ffabc0; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(5) { --heart-sx:2%; --heart-sy:78%; --heart-ex:97%; --heart-ey:30%; --heart-delay:-4.8s; --heart-color:#f486aa; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(6) { --heart-sx:96%; --heart-sy:12%; --heart-ex:6%; --heart-ey:72%; --heart-delay:-6s; --heart-color:#ffd0dc; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(n+7) { display:none !important; }
@keyframes np-heart-roam {
  0%   { left:var(--heart-sx); top:var(--heart-sy); opacity:0; transform:scale(.55) rotate(-8deg); }
  12%  { opacity:.72; transform:scale(.86) rotate(-2deg); }
  28%  { opacity:.88; transform:scale(1.08) rotate(4deg); }
  43%  { opacity:.56; transform:scale(.88) rotate(-3deg); }
  59%  { opacity:.84; transform:scale(1.03) rotate(3deg); }
  84%  { left:var(--heart-ex); top:var(--heart-ey); opacity:.48; transform:scale(.82) rotate(7deg); }
  94%,100% { left:var(--heart-ex); top:var(--heart-ey); opacity:0; transform:scale(.58) rotate(10deg); }
}

/* Mystic Orbit: a rotating segmented elliptical ring. The upper arc is muted
   (visually behind the plaque), while the lower arc is bright (in front), so
   the nameplate reads as physically passing through a 3-D orbit. */
.nameplate-effect-mystic-orbit > b {
  display:block !important;
  left:-7% !important;
  right:-7% !important;
  top:-28% !important;
  bottom:-28% !important;
  border:0 !important;
  border-radius:50% !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  animation:none !important;
  overflow:visible !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content:'';
  inset:0;
  border-radius:50%;
  padding:1.5px;
  background:conic-gradient(from 0deg,
    transparent 0 9%, rgba(151,104,232,.24) 13%, #d9c0ff 22%,
    rgba(104,191,236,.78) 31%, transparent 40% 52%,
    rgba(193,139,255,.74) 61%, #f0ddff 70%, rgba(91,178,227,.48) 81%, transparent 91% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:np-mystic-ring-spin 8.4s linear infinite;
  filter:drop-shadow(0 0 3px rgba(151,108,230,.48));
}
.nameplate-effect-mystic-orbit > b::before {
  clip-path:inset(0 0 50% 0);
  opacity:.24;
  filter:brightness(.58) drop-shadow(0 0 2px rgba(95,69,160,.24));
}
.nameplate-effect-mystic-orbit > b::after {
  clip-path:inset(49% 0 0 0);
  opacity:.92;
  filter:drop-shadow(0 0 4px rgba(192,148,255,.64)) drop-shadow(0 0 7px rgba(95,182,232,.25));
}
.nameplate-effect-mystic-orbit > i {
  width:5px !important;
  height:5px !important;
  margin:-2.5px !important;
  opacity:.88 !important;
  animation:np-mystic-orbit 7.6s linear infinite !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(2) {
  animation-duration:9.4s !important;
  animation-direction:reverse !important;
}
@keyframes np-mystic-ring-spin {
  from { transform:rotate(0deg) scaleY(.72); }
  to   { transform:rotate(360deg) scaleY(.72); }
}
@keyframes np-mystic-orbit {
  from { transform:rotate(0deg) translateX(61px) scaleY(.72) rotate(0deg) scale(.82); }
  to   { transform:rotate(360deg) translateX(61px) scaleY(.72) rotate(-360deg) scale(1.08); }
}

/* Name Effects: the animated material is now a highlight on a readable,
   effect-specific base color. No generic black fill remains. Verdant Wave,
   Rainbow and Glitch Dealer keep their already-approved identity. */
.seat-name-text.name-text-effect {
  --name-fx-base:#e7d8ac;
  background-color:var(--name-fx-base) !important;
  --name-fx-shadow:0 .045em .05em rgba(18,12,8,.52),0 0 .25em var(--name-fx-glow);
  text-shadow:var(--name-fx-shadow) !important;
  -webkit-text-stroke:0 !important;
}
.name-text-effect-golden-tell {
  --name-fx-base:#d8ad54;
  background-image:repeating-linear-gradient(106deg,transparent 0 2.05em,rgba(255,242,161,.96) 2.05em 2.66em,rgba(255,255,220,.98) 2.66em 2.94em,rgba(240,191,84,.56) 2.94em 3.45em,transparent 3.45em 7.1111em) !important;
}
.name-text-effect-neon-split {
  --name-fx-base:#eee9dd;
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(218,235,229,.20)) !important;
}
.name-text-effect-velvet-ember {
  --name-fx-base:#c76443;
  background-image:repeating-linear-gradient(180deg,transparent 0 .72em,rgba(255,211,119,.88) .72em 1.24em,rgba(239,126,69,.72) 1.24em 1.82em,transparent 1.82em 4.4444em) !important;
}
.name-text-effect-frost-script {
  --name-fx-base:#a9cedf;
  background-image:repeating-linear-gradient(112deg,transparent 0 1.65em,rgba(237,252,255,.98) 1.65em 2.18em,#fff 2.18em 2.42em,rgba(139,211,240,.58) 2.42em 2.90em,transparent 2.90em 6.2222em) !important;
}
.name-text-effect-royal-ink {
  --name-fx-base:#9b71bf;
  background-image:repeating-linear-gradient(180deg,transparent 0 1.30em,rgba(227,197,250,.90) 1.30em 1.84em,rgba(224,187,94,.72) 1.84em 2.02em,transparent 2.02em 5.3333em) !important;
  -webkit-text-stroke:.008em rgba(239,205,115,.42) !important;
}
.name-text-effect-lucky-pulse {
  --name-fx-base:#55bc70;
  background-image:radial-gradient(ellipse at center,rgba(212,255,214,.96) 0%,rgba(107,226,137,.72) 34%,transparent 72%) !important;
}
.name-text-effect-moonlit-silver {
  --name-fx-base:#a8bdd2;
  background-image:repeating-linear-gradient(104deg,transparent 0 2.15em,rgba(243,249,255,.98) 2.15em 2.70em,rgba(190,218,244,.76) 2.70em 3.30em,transparent 3.30em 7.5556em) !important;
}
.name-text-effect-scarlet-deal {
  --name-fx-base:#b7474d;
  background-image:repeating-linear-gradient(90deg,transparent 0 1.82em,rgba(246,119,112,.92) 1.82em 2.30em,rgba(255,181,157,.66) 2.30em 2.58em,transparent 2.58em 5.7778em) !important;
}
.name-text-effect-ocean-current {
  --name-fx-base:#378da8;
  background-image:repeating-linear-gradient(104deg,transparent 0 1.60em,rgba(123,228,231,.92) 1.60em 2.24em,transparent 2.24em 3.28em,rgba(219,255,255,.56) 3.28em 3.62em,transparent 3.62em 6.2222em),repeating-linear-gradient(76deg,transparent 0 1.72em,rgba(213,255,255,.44) 1.72em 2.08em,transparent 2.08em 4em) !important;
}
.name-text-effect-arcane-glyph {
  --name-fx-base:#8c6bb3;
  background-image:repeating-linear-gradient(126deg,transparent 0 1.48em,rgba(193,139,235,.90) 1.48em 2.12em,rgba(90,216,207,.78) 2.12em 2.66em,transparent 2.66em 5.6667em) !important;
}
.name-text-effect-diamond-facet {
  --name-fx-base:#b7cfdd;
  background-image:repeating-linear-gradient(122deg,transparent 0 .58em,rgba(245,253,255,.98) .58em .98em,rgba(169,207,228,.76) .98em 1.35em,rgba(255,255,255,.96) 1.35em 1.55em,transparent 1.55em 2.6667em) !important;
}
.name-text-effect-coffee-steam {
  --name-fx-base:#bf8559;
  background-image:repeating-linear-gradient(180deg,transparent 0 1.22em,rgba(255,238,205,.92) 1.22em 1.78em,rgba(226,176,117,.74) 1.78em 2.34em,transparent 2.34em 5.5556em) !important;
}
.name-text-effect-celestial-drift {
  --name-fx-base:#6679a8;
  background-image:repeating-linear-gradient(116deg,transparent 0 2.10em,rgba(219,232,255,.94) 2.10em 2.82em,rgba(154,140,210,.72) 2.82em 3.55em,transparent 3.55em 8.3333em) !important;
}
.name-text-effect-jackpot-marquee {
  --name-fx-base:#d2a447;
  background-image:repeating-linear-gradient(90deg,transparent 0 .56em,rgba(255,238,158,.96) .56em .92em,rgba(255,251,217,.96) .92em 1.12em,transparent 1.12em 1.8333em) !important;
}
.name-text-effect-phantom-fade {
  --name-fx-base:#74a39b;
  background-image:repeating-linear-gradient(102deg,transparent 0 1.72em,rgba(207,239,232,.92) 1.72em 2.42em,rgba(128,196,185,.68) 2.42em 3.02em,transparent 3.02em 6.2222em) !important;
}
.name-text-effect-heartbeat-rose {
  --name-fx-base:#d57f9e;
  background-image:linear-gradient(180deg,rgba(255,228,239,.86),rgba(222,122,161,.58) 52%,transparent) !important;
}
.name-text-effect-prism-cut {
  --name-fx-base:#b9b9d4;
  background-image:repeating-linear-gradient(115deg,transparent 0 1.18em,rgba(217,185,238,.88) 1.18em 1.86em,rgba(143,228,212,.88) 1.86em 2.54em,rgba(246,234,166,.88) 2.54em 3.20em,rgba(239,178,198,.84) 3.20em 3.86em,rgba(164,198,241,.86) 3.86em 4.55em,transparent 4.55em 8.2222em) !important;
}
.name-text-effect-crowned-eclipse {
  --name-fx-base:#d0ad56;
  background-image:repeating-linear-gradient(105deg,transparent 0 1.92em,rgba(255,237,169,.96) 1.92em 2.48em,rgba(119,96,57,.42) 2.48em 2.88em,rgba(242,198,91,.82) 2.88em 3.50em,transparent 3.50em 7.5556em) !important;
  -webkit-text-stroke:.008em rgba(255,225,150,.38) !important;
}

/* Pastel Rainbow specifically keeps #F7F7F7 as the readable text body. Pastel
   bands are translucent highlights rather than replacing the body with dark
   material. */
.seat-name-text.name-text-effect-pastel-rainbow {
  --name-fx-base:#F7F7F7;
  --name-fx-glow:rgba(238,232,255,.62);
  --name-fx-shadow:0 .045em .05em rgba(38,32,45,.42),0 0 .23em rgba(247,247,247,.54),0 0 .31em rgba(198,188,255,.24);
  background-color:#F7F7F7 !important;
  background-image:repeating-linear-gradient(108deg,
    transparent 0 .72em,
    rgba(255,190,207,.74) .72em 1.40em,
    transparent 1.40em 1.78em,
    rgba(255,216,177,.74) 1.78em 2.46em,
    transparent 2.46em 2.84em,
    rgba(255,240,175,.72) 2.84em 3.52em,
    transparent 3.52em 3.90em,
    rgba(195,236,194,.72) 3.90em 4.58em,
    transparent 4.58em 4.96em,
    rgba(188,234,226,.72) 4.96em 5.64em,
    transparent 5.64em 6.02em,
    rgba(185,219,255,.74) 6.02em 6.70em,
    transparent 6.70em 7.08em,
    rgba(204,200,255,.74) 7.08em 7.76em,
    transparent 7.76em 8.14em,
    rgba(231,199,246,.72) 8.14em 8.82em,
    transparent 8.82em 9.20em,
    rgba(247,198,221,.72) 9.20em 9.88em,
    transparent 9.88em 12.50em) !important;
}

/* Keep custom-background readability without painting a heavy black veil over
   the actual text material. */
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect {
  filter:
    drop-shadow(0 .045em .045em rgba(0,0,0,.76))
    drop-shadow(0 0 .12em rgba(0,0,0,.42))
    drop-shadow(0 0 .12em var(--name-fx-glow)) !important;
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-rainbow,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-rainbow {
  filter:
    drop-shadow(0 .045em .045em rgba(0,0,0,.76))
    drop-shadow(0 0 .12em rgba(0,0,0,.42))
    drop-shadow(0 0 .15em rgba(232,244,255,.52)) !important;
}
.player-seat > .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-pastel-rainbow,
.customize-purchase-preview-stage .seat-plaque.has-nameplate-background .seat-name-text.name-text-effect-pastel-rainbow {
  filter:
    drop-shadow(0 .045em .045em rgba(0,0,0,.72))
    drop-shadow(0 0 .11em rgba(0,0,0,.38))
    drop-shadow(0 0 .16em rgba(247,247,247,.60)) !important;
}

/* ===== 2026-08-07 targeted pass: distinct Name Effects + travelling VFX =====
   Intentionally CSS-only. No player-slot/nameplate geometry is changed. */

/* Supporter button: actually smaller, and another 40px left / 20px up from
   the immediately previous placement. */
.customize-buy-coffee-image-button {
  right: 140px !important;
  bottom: 70px !important;
  width: 24% !important;
  max-width: 24% !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(34px, 16vw, 140px) !important;
    bottom: clamp(22px, 9vw, 70px) !important;
    width: 24% !important;
    max-width: 24% !important;
  }
}

/* Starfall Ribbon: the earlier left/top declarations were !important, which
   meant the animation could fade stars but could not move those coordinates.
   Movement now uses the independent `translate` property, so each star really
   travels through a different section of the full nameplate. */
.nameplate-effect-starfall-ribbon > i {
  animation: np4-star-travel var(--star-duration, 6.8s) linear infinite !important;
  animation-delay: var(--star-delay, 0s) !important;
  translate: 0 0;
  scale: .72;
}
.nameplate-effect-starfall-ribbon > i:nth-of-type(1) { left:2% !important;  top:16% !important; --star-tx:132px; --star-ty:24px;  --star-duration:6.2s; --star-delay:-.4s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(2) { left:94% !important; top:28% !important; --star-tx:-136px; --star-ty:20px; --star-duration:7.1s; --star-delay:-3.0s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(3) { left:18% !important; top:3% !important;  --star-tx:88px; --star-ty:48px;  --star-duration:6.6s; --star-delay:-5.1s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(4) { left:78% !important; top:82% !important; --star-tx:-92px; --star-ty:-45px; --star-duration:7.4s; --star-delay:-1.9s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(5) { display:block !important; left:6% !important; top:66% !important; --star-tx:126px; --star-ty:-25px; --star-duration:6.9s; --star-delay:-4.2s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(6) { display:block !important; left:88% !important; top:10% !important; --star-tx:-118px; --star-ty:39px; --star-duration:7.6s; --star-delay:-6.0s; }
.nameplate-effect-starfall-ribbon > i:nth-of-type(n+7) { display:none !important; }
@keyframes np4-star-travel {
  0%   { translate:0 0; opacity:0; scale:.52; }
  10%  { opacity:.90; scale:.78; }
  32%  { opacity:.78; scale:1.02; }
  62%  { opacity:.94; scale:.84; }
  88%  { translate:var(--star-tx) var(--star-ty); opacity:.68; scale:.96; }
  100% { translate:var(--star-tx) var(--star-ty); opacity:0; scale:.52; }
}

/* Heartbeat Aura: same coordinate bug as Starfall. Hearts now cross the plate
   instead of pulsing in place, with staggered routes and independent timing. */
.nameplate-effect-heartbeat-aura > i {
  animation: np4-heart-travel var(--heart-duration, 7.4s) ease-in-out infinite !important;
  animation-delay: var(--heart-delay, 0s) !important;
  translate:0 0;
  scale:.72;
}
.nameplate-effect-heartbeat-aura > i:nth-of-type(1) { left:1% !important;  top:18% !important; --heart-tx:130px; --heart-ty:22px;  --heart-duration:7.0s; --heart-delay:-.2s; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(2) { left:94% !important; top:60% !important; --heart-tx:-132px; --heart-ty:-22px; --heart-duration:7.8s; --heart-delay:-2.0s; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(3) { left:20% !important; top:82% !important; --heart-tx:72px; --heart-ty:-48px; --heart-duration:6.8s; --heart-delay:-3.8s; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(4) { left:73% !important; top:3% !important;  --heart-tx:-68px; --heart-ty:48px; --heart-duration:7.3s; --heart-delay:-5.4s; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(5) { left:4% !important;  top:70% !important; --heart-tx:122px; --heart-ty:-28px; --heart-duration:8.0s; --heart-delay:-6.6s; }
.nameplate-effect-heartbeat-aura > i:nth-of-type(6) { left:90% !important; top:13% !important; --heart-tx:-118px; --heart-ty:30px; --heart-duration:7.5s; --heart-delay:-1.1s; }
@keyframes np4-heart-travel {
  0%   { translate:0 0; opacity:0; scale:.50; }
  11%  { opacity:.70; scale:.78; }
  23%  { opacity:.92; scale:1.06; }
  35%  { opacity:.66; scale:.84; }
  49%  { opacity:.90; scale:1.01; }
  66%  { opacity:.74; scale:.88; }
  88%  { translate:var(--heart-tx) var(--heart-ty); opacity:.64; scale:.96; }
  100% { translate:var(--heart-tx) var(--heart-ty); opacity:0; scale:.52; }
}

/* Mystic Orbit: preserve the foreground/background segmented 3-D ring, but
   reduce the ellipse and orbital radius from the last pass. */
.nameplate-effect-mystic-orbit > b {
  left: 2% !important;
  right: 2% !important;
  top: -10% !important;
  bottom: -10% !important;
}
@keyframes np-mystic-orbit {
  from { transform:rotate(0deg) translateX(48px) scaleY(.72) rotate(0deg) scale(.82); }
  to   { transform:rotate(360deg) translateX(48px) scaleY(.72) rotate(-360deg) scale(1.08); }
}

/* Name Effects: remove the common warm/metallic-looking body that made the
   catalog read as one effect with tiny stains. Each effect now owns a clearly
   different full-glyph material. Rainbow is deliberately left untouched. */
.seat-name-text.name-text-effect {
  background-color: transparent !important;
  background-blend-mode: normal !important;
  -webkit-text-stroke: 0 !important;
}

.name-text-effect-golden-tell {
  --name-fx-glow:rgba(255,194,67,.52);
  --name-fx-shadow:0 .05em .05em rgba(50,25,2,.82),0 0 .28em rgba(255,190,58,.50);
  background-image:repeating-linear-gradient(105deg,#6e3c05 0 .75em,#b87711 .75em 1.55em,#f3bb39 1.55em 2.18em,#fff1a0 2.18em 2.55em,#df9b20 2.55em 3.25em,#875009 3.25em 4.4em) !important;
  background-size:4.4em 100% !important;
}
.name-text-effect-neon-split {
  --name-fx-glow:rgba(89,228,236,.42);
  --name-fx-shadow:-.07em 0 .08em rgba(42,226,236,.74),.07em 0 .08em rgba(255,77,187,.68),0 .05em .05em rgba(0,0,0,.88);
  background-image:linear-gradient(180deg,#f8ffff 0%,#d9ffff 44%,#fff1fa 55%,#f7fbff 100%) !important;
  background-size:100% 100% !important;
}
.name-text-effect-velvet-ember {
  --name-fx-glow:rgba(255,92,35,.54);
  --name-fx-shadow:0 .05em .05em rgba(42,7,1,.86),0 0 .30em rgba(255,83,24,.50);
  background-image:repeating-linear-gradient(180deg,#ffdf77 0 .52em,#ff9a37 .52em 1.10em,#dd4b22 1.10em 1.72em,#8f1e1b 1.72em 2.30em,#f37028 2.30em 2.92em) !important;
  background-size:100% 2.92em !important;
}
.name-text-effect-frost-script {
  --name-fx-glow:rgba(115,223,255,.56);
  --name-fx-shadow:0 .05em .05em rgba(7,33,47,.82),0 0 .32em rgba(105,220,255,.54);
  background-image:repeating-linear-gradient(112deg,#5aa4c6 0 .70em,#a9e8ff .70em 1.36em,#f6fdff 1.36em 1.82em,#84d7fa 1.82em 2.40em,#dff9ff 2.40em 2.83em,#4689ae 2.83em 3.60em) !important;
  background-size:3.60em 100% !important;
}
.name-text-effect-royal-ink {
  --name-fx-glow:rgba(183,113,240,.52);
  --name-fx-shadow:0 .05em .05em rgba(30,10,43,.86),0 0 .29em rgba(183,113,240,.48);
  background-image:repeating-linear-gradient(180deg,#f0d6ff 0 .55em,#c080ef .55em 1.18em,#7b40b2 1.18em 1.85em,#d4a0f5 1.85em 2.42em,#6b319f 2.42em 3.10em) !important;
  background-size:100% 3.10em !important;
  -webkit-text-stroke:.012em rgba(240,199,92,.62) !important;
}
.name-text-effect-lucky-pulse {
  --name-fx-glow:rgba(65,224,111,.55);
  --name-fx-shadow:0 .05em .05em rgba(4,37,15,.84),0 0 .30em rgba(57,223,109,.50);
  background-image:radial-gradient(ellipse at center,#e4ffe6 0%,#74ed93 31%,#2cc65f 58%,#13783a 82%,#0c4826 100%) !important;
}
.name-text-effect-moonlit-silver {
  --name-fx-glow:rgba(169,202,255,.54);
  --name-fx-shadow:0 .05em .05em rgba(14,22,35,.82),0 0 .30em rgba(157,194,255,.46);
  background-image:repeating-linear-gradient(103deg,#62758d 0 .78em,#9fb8d5 .78em 1.48em,#eef5ff 1.48em 1.92em,#c4d8ef 1.92em 2.42em,#7187a3 2.42em 3.28em,#dce9f9 3.28em 4.10em) !important;
  background-size:4.10em 100% !important;
}
.name-text-effect-scarlet-deal {
  --name-fx-glow:rgba(234,54,65,.50);
  --name-fx-shadow:0 .05em .05em rgba(45,3,7,.88),0 0 .27em rgba(234,54,65,.46);
  background-image:repeating-linear-gradient(90deg,#6b0f17 0 .85em,#a91f29 .85em 1.52em,#f45e62 1.52em 1.92em,#d0323d 1.92em 2.55em,#7e121c 2.55em 3.50em) !important;
  background-size:3.50em 100% !important;
}
.name-text-effect-ocean-current {
  --name-fx-glow:rgba(46,207,230,.53);
  --name-fx-shadow:0 .05em .05em rgba(1,29,39,.86),0 0 .30em rgba(45,205,229,.50);
  background-image:repeating-linear-gradient(104deg,#0a4b68 0 .78em,#0f8db5 .78em 1.48em,#65e8ea 1.48em 2.06em,#27bad0 2.06em 2.68em,#0d6788 2.68em 3.62em),repeating-linear-gradient(76deg,transparent 0 1.0em,rgba(225,255,255,.78) 1.0em 1.22em,transparent 1.22em 2.3em) !important;
  background-size:3.62em 100%,2.3em 100% !important;
}
.name-text-effect-arcane-glyph {
  --name-fx-glow:rgba(164,104,239,.54);
  --name-fx-shadow:0 .05em .05em rgba(27,10,43,.84),0 0 .31em rgba(164,104,239,.49);
  background-image:repeating-linear-gradient(126deg,#67408f 0 .72em,#a967df .72em 1.38em,#58d8cf 1.38em 1.92em,#9761c9 1.92em 2.52em,#493269 2.52em 3.42em) !important;
  background-size:3.42em 3.42em !important;
}
.name-text-effect-diamond-facet {
  --name-fx-glow:rgba(205,241,255,.57);
  --name-fx-shadow:0 .05em .05em rgba(18,42,54,.80),0 0 .26em rgba(205,241,255,.50);
  background-image:repeating-linear-gradient(122deg,#7eacbf 0 .46em,#e9fbff .46em .82em,#9edaf0 .82em 1.18em,#ffffff 1.18em 1.42em,#79a9bf 1.42em 1.90em) !important;
  background-size:1.90em 100% !important;
}
.name-text-effect-coffee-steam {
  --name-fx-glow:rgba(225,157,90,.47);
  --name-fx-shadow:0 .05em .05em rgba(51,23,7,.84),0 0 .27em rgba(222,151,84,.42);
  background-image:repeating-linear-gradient(180deg,#ffe9c2 0 .62em,#d89658 .62em 1.22em,#9b5a33 1.22em 1.86em,#e7b779 1.86em 2.50em,#b46f42 2.50em 3.18em) !important;
  background-size:100% 3.18em !important;
}
.name-text-effect-glitch-dealer {
  --name-fx-glow:rgba(76,222,225,.35);
  --name-fx-shadow:-.065em 0 rgba(51,218,226,.55),.065em 0 rgba(241,72,164,.52),0 .05em .05em rgba(0,0,0,.90);
  background-image:linear-gradient(180deg,#d9f5ff,#b8e5ef) !important;
  background-size:100% 100% !important;
}
.name-text-effect-celestial-drift {
  --name-fx-glow:rgba(139,161,255,.50);
  --name-fx-shadow:0 .05em .05em rgba(10,13,41,.88),-.06em 0 .25em rgba(113,98,228,.38),.06em 0 .25em rgba(125,190,255,.34);
  background-image:repeating-linear-gradient(116deg,#283b79 0 .88em,#526ec2 .88em 1.58em,#b9d5ff 1.58em 2.10em,#8e79d8 2.10em 2.76em,#384a89 2.76em 3.70em,#8fb1f1 3.70em 4.64em) !important;
  background-size:4.64em 4.64em !important;
}
.name-text-effect-jackpot-marquee {
  --name-fx-glow:rgba(255,195,56,.52);
  --name-fx-shadow:0 .05em .05em rgba(55,27,2,.84),0 0 .28em rgba(255,192,47,.47);
  background-image:repeating-linear-gradient(90deg,#a56a0c 0 .42em,#f3b92d .42em .73em,#fff09a .73em .95em,#d48b13 .95em 1.28em) !important;
  background-size:1.28em 100% !important;
}
.name-text-effect-phantom-fade {
  --name-fx-glow:rgba(113,220,202,.49);
  --name-fx-shadow:0 .05em .05em rgba(6,38,36,.84),0 0 .30em rgba(111,218,201,.45);
  background-image:repeating-linear-gradient(102deg,#356e69 0 .82em,#6fb9ad .82em 1.48em,#c8eee7 1.48em 1.92em,#8bd0c2 1.92em 2.54em,#477e76 2.54em 3.50em) !important;
  background-size:3.50em 100% !important;
}
.name-text-effect-heartbeat-rose {
  --name-fx-glow:rgba(245,112,166,.54);
  --name-fx-shadow:0 .05em .05em rgba(48,12,26,.84),0 0 .30em rgba(244,111,164,.50);
  background-image:linear-gradient(180deg,#ffd8e9 0%,#ff9fc4 32%,#e75c95 66%,#ad3d6a 100%) !important;
  background-size:100% 100% !important;
}
.name-text-effect-prism-cut {
  --name-fx-glow:rgba(184,188,255,.48);
  --name-fx-shadow:0 .05em .05em rgba(22,24,59,.82),0 0 .28em rgba(181,187,255,.45);
  background-image:repeating-linear-gradient(115deg,#a8c8f0 0 .74em,#dfb6ef .74em 1.38em,#8ee7d7 1.38em 2.02em,#f8e797 2.02em 2.66em,#f3a9c3 2.66em 3.30em,#9fc7ff 3.30em 3.96em,#cbb4ef 3.96em 4.72em) !important;
  background-size:4.72em 100% !important;
}
.name-text-effect-crowned-eclipse {
  --name-fx-glow:rgba(247,196,75,.53);
  --name-fx-shadow:0 .05em .05em rgba(42,27,4,.86),0 0 .29em rgba(247,196,75,.48);
  background-image:repeating-linear-gradient(105deg,#b47b19 0 .82em,#f6c958 .82em 1.46em,#fff0a4 1.46em 1.88em,#7c5925 1.88em 2.36em,#e4ad39 2.36em 3.05em,#c18824 3.05em 3.88em) !important;
  background-size:3.88em 100% !important;
  -webkit-text-stroke:.01em rgba(255,225,142,.56) !important;
}

/* Pastel Rainbow: the visible body is explicitly #F7F7F7. The pastel ribbon
   acts as a translucent LED sheen rather than replacing the body with a dark
   sampled material. */
.seat-name-text.name-text-effect-pastel-rainbow {
  --name-fx-glow:rgba(231,227,255,.66);
  --name-fx-shadow:0 .05em .045em rgba(38,32,45,.70),0 0 .25em rgba(247,247,247,.72),0 0 .34em rgba(204,194,255,.30);
  background-color:#F7F7F7 !important;
  background-image:repeating-linear-gradient(108deg,
    #F7F7F7 0 .70em,
    #ffd8e4 .70em 1.18em,
    #F7F7F7 1.18em 1.55em,
    #ffe2c9 1.55em 2.03em,
    #F7F7F7 2.03em 2.40em,
    #fff4c7 2.40em 2.88em,
    #F7F7F7 2.88em 3.25em,
    #d9f2d3 3.25em 3.73em,
    #F7F7F7 3.73em 4.10em,
    #d1f1eb 4.10em 4.58em,
    #F7F7F7 4.58em 4.95em,
    #d3e7ff 4.95em 5.43em,
    #F7F7F7 5.43em 5.80em,
    #dfdcff 5.80em 6.28em,
    #F7F7F7 6.28em 6.65em,
    #eedafa 6.65em 7.13em,
    #F7F7F7 7.13em 7.50em) !important;
  background-size:7.5em 100% !important;
  animation:ntc-pastel-rainbow-v2 7.2s linear infinite !important;
  -webkit-text-stroke:0 !important;
}
@keyframes ntc-pastel-rainbow-v2 {
  from { background-position:0 50%; }
  to   { background-position:-7.5em 50%; }
}


/* ===== 2026-08-07 targeted cleanup: Mystic Orbit + supporter button =====
   No player-slot/nameplate geometry or other Shop element positioning changes. */

/* The Ko-fi artwork remains in the same approved anchor position, only smaller. */
.customize-buy-coffee-image-button {
  width: 15% !important;
  max-width: 110px !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    width: 15% !important;
    max-width: 82px !important;
  }
}

/* Mystic Orbit: smaller ring, rotating through depth instead of spinning around
   the face of the nameplate.  The two clipped arcs preserve the visual read of
   one half passing behind the plaque while the other half crosses in front. */
.nameplate-effect-mystic-orbit {
  perspective: 260px !important;
  transform-style: preserve-3d !important;
}
.nameplate-effect-mystic-orbit > b {
  left: 16% !important;
  right: 16% !important;
  top: -7% !important;
  bottom: -7% !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  animation: np5-mystic-depth-roll 7.2s linear infinite !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  animation: none !important;
  backface-visibility: visible !important;
}
@keyframes np5-mystic-depth-roll {
  0%   { transform: rotateX(0deg) scaleY(.78); }
  25%  { transform: rotateX(90deg) scaleY(.78); }
  50%  { transform: rotateX(180deg) scaleY(.78); }
  75%  { transform: rotateX(270deg) scaleY(.78); }
  100% { transform: rotateX(360deg) scaleY(.78); }
}

/* Keep the orbiting motes compact enough to belong to the reduced ring. */
@keyframes np-mystic-orbit {
  from { transform: rotate(0deg) translateX(40px) scaleY(.66) rotate(0deg) scale(.82); }
  to   { transform: rotate(360deg) translateX(40px) scaleY(.66) rotate(-360deg) scale(1.06); }
}

/* ===== 2026-08-07 follow-up: Mystic Orbit atom motion + slightly larger Ko-fi art ===== */

/* Increase the Ko-fi artwork a bit from the last pass and nudge it 10px up / 15px left. */
.customize-buy-coffee-image-button {
  right: 155px !important;
  bottom: 80px !important;
  width: 18% !important;
  max-width: 132px !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(42px, 17vw, 155px) !important;
    bottom: clamp(28px, 10vw, 80px) !important;
    width: 18% !important;
    max-width: 98px !important;
  }
}

/* Mystic Orbit should read like an atom ring circling around the plaque from
   the right side to the left side, not rising vertically through the plate. */
.nameplate-effect-mystic-orbit {
  perspective: 420px !important;
  transform-style: preserve-3d !important;
}
.nameplate-effect-mystic-orbit > b {
  left: 22% !important;
  right: 22% !important;
  top: -4% !important;
  bottom: -4% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  animation: np6-mystic-atom-spin 5.8s linear infinite !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  padding: 1.5px !important;
  background: conic-gradient(from 0deg,
    transparent 0 9%, rgba(151,104,232,.22) 13%, #d9c0ff 22%,
    rgba(104,191,236,.78) 31%, transparent 40% 52%,
    rgba(193,139,255,.76) 61%, #f0ddff 70%, rgba(91,178,227,.5) 81%, transparent 91% 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  backface-visibility: visible !important;
  animation: none !important;
}
/* Back half of the ring: dimmer and visually behind the plaque. */
.nameplate-effect-mystic-orbit > b::before {
  clip-path: inset(0 50% 0 0) !important;
  opacity: .32 !important;
  filter: brightness(.62) drop-shadow(0 0 2px rgba(95,69,160,.22)) !important;
}
/* Front half of the ring: brighter and passing in front of the plaque. */
.nameplate-effect-mystic-orbit > b::after {
  clip-path: inset(0 0 0 50%) !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 4px rgba(192,148,255,.62)) drop-shadow(0 0 7px rgba(95,182,232,.22)) !important;
}
@keyframes np6-mystic-atom-spin {
  from { transform: rotateY(0deg) rotateZ(14deg) scaleY(.74); }
  to   { transform: rotateY(360deg) rotateZ(14deg) scaleY(.74); }
}

/* ===== 2026-08-07 follow-up: supporter blur + larger Ko-fi art + Mystic Orbit fix ===== */

/* When Confirm Purchase / Purchase Successful is open, the supporter artwork
   should blur and dim the same way the rest of the Shop background does. */
.customize-modal-card.is-purchase-open .customize-supporter-art,
.customize-modal-card.is-purchase-open .customize-supporter-panel-image,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button > img {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Ko-fi artwork: slightly larger again, plus 30px more to the left and 3px up. */
.customize-buy-coffee-image-button {
  right: 185px !important;
  bottom: 83px !important;
  width: 20% !important;
  max-width: 146px !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(52px, 19vw, 185px) !important;
    bottom: clamp(31px, 11vw, 83px) !important;
    width: 20% !important;
    max-width: 108px !important;
  }
}

/* Mystic Orbit: restore continuous visible motion like an atom ring travelling
   around the plaque from the right side to the left side. Avoid the previous
   vertical-through-the-nameplate roll and avoid the visually static symmetry. */
.nameplate-effect-mystic-orbit {
  perspective: none !important;
  transform-style: flat !important;
}
.nameplate-effect-mystic-orbit > b {
  left: 26% !important;
  right: 26% !important;
  top: 1% !important;
  bottom: 1% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: 50% 50% !important;
  animation: np7-mystic-atom-ring-spin 4.8s linear infinite !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  padding: 1.35px !important;
  background: conic-gradient(from 0deg,
    transparent 0 8%, rgba(151,104,232,.20) 12%, #d9c0ff 20%,
    rgba(104,191,236,.76) 29%, transparent 39% 51%,
    rgba(193,139,255,.72) 60%, #f0ddff 69%, rgba(91,178,227,.48) 80%, transparent 90% 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: none !important;
  backface-visibility: visible !important;
}
/* Rear half: dimmer. */
.nameplate-effect-mystic-orbit > b::before {
  clip-path: inset(0 46% 0 0) !important;
  opacity: .28 !important;
  filter: brightness(.56) drop-shadow(0 0 2px rgba(95,69,160,.20)) !important;
}
/* Front half: brighter. */
.nameplate-effect-mystic-orbit > b::after {
  clip-path: inset(0 0 0 46%) !important;
  opacity: .94 !important;
  filter: drop-shadow(0 0 4px rgba(192,148,255,.58)) drop-shadow(0 0 7px rgba(95,182,232,.20)) !important;
}
@keyframes np7-mystic-atom-ring-spin {
  from { transform: rotate(0deg) scaleY(.66) rotate(-12deg); }
  to   { transform: rotate(360deg) scaleY(.66) rotate(-12deg); }
}

/* ===== 2026-08-07 final follow-up: buymeacoffee size/position + visible Mystic Orbit motion ===== */

/* Slightly larger Ko-fi button and 20px more to the right. */
.customize-buy-coffee-image-button {
  right: 165px !important;
  bottom: 83px !important;
  width: 22% !important;
  max-width: 160px !important;
  height: auto !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(48px, 18vw, 165px) !important;
    bottom: clamp(31px, 11vw, 83px) !important;
    width: 22% !important;
    max-width: 116px !important;
  }
}

/* Make Mystic Orbit unmistakably animated. The ring uses an asymmetric bright
   sweep so motion is visible at all times, while still reading like an atom
   ring wrapping around the plaque from right to left. */
.nameplate-effect-mystic-orbit {
  perspective: none !important;
  transform-style: flat !important;
}
.nameplate-effect-mystic-orbit > b {
  left: 26% !important;
  right: 26% !important;
  top: 1% !important;
  bottom: 1% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform-origin: 50% 50% !important;
  animation: np8-mystic-atom-ring 3.6s linear infinite !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  padding: 1.4px !important;
  background: conic-gradient(from 0deg,
    rgba(120,89,197,.02) 0deg 34deg,
    rgba(214,192,255,.92) 54deg 84deg,
    rgba(84,184,239,.94) 85deg 102deg,
    rgba(255,255,255,.98) 103deg 110deg,
    rgba(153,111,236,.42) 111deg 168deg,
    rgba(120,89,197,.03) 169deg 208deg,
    rgba(175,129,250,.74) 218deg 252deg,
    rgba(101,199,249,.96) 253deg 270deg,
    rgba(245,240,255,.96) 271deg 277deg,
    rgba(145,109,226,.30) 278deg 338deg,
    rgba(120,89,197,.02) 339deg 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  backface-visibility: visible !important;
  animation: none !important;
}
/* Rear arc */
.nameplate-effect-mystic-orbit > b::before {
  clip-path: inset(0 46% 0 0) !important;
  opacity: .26 !important;
  filter: brightness(.48) saturate(.85) drop-shadow(0 0 2px rgba(95,69,160,.18)) !important;
}
/* Front arc */
.nameplate-effect-mystic-orbit > b::after {
  clip-path: inset(0 0 0 46%) !important;
  opacity: .98 !important;
  filter: drop-shadow(0 0 4px rgba(192,148,255,.66)) drop-shadow(0 0 7px rgba(95,182,232,.25)) !important;
}
@keyframes np8-mystic-atom-ring {
  from { transform: rotate(0deg) scaleY(.66) rotate(-12deg); }
  to   { transform: rotate(360deg) scaleY(.66) rotate(-12deg); }
}

/* ===== 2026-08-07 final-final follow-up: Ko-fi nudge + supporter blur + explicit ring animation ===== */

/* Keep the supporter art blurred/dimmed whenever either purchase popup state is open. */
.customize-modal-card.is-purchase-open .customize-supporter-art,
.customize-modal-card.is-purchase-open .customize-supporter-panel-image,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button > img,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button::after {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Move buymeacoffee 10px left and 2px down from the current approved position,
   and make it a bit larger. Add a looping sheen every 4 seconds. */
.customize-buy-coffee-image-button {
  right: 175px !important;
  bottom: 81px !important;
  width: 23.5% !important;
  max-width: 172px !important;
  height: auto !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.customize-buy-coffee-image-button > img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}
.customize-buy-coffee-image-button::after {
  content: '' !important;
  position: absolute !important;
  top: -26% !important;
  bottom: -26% !important;
  left: -36% !important;
  width: 30% !important;
  pointer-events: none !important;
  transform: skewX(-22deg) !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 18%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,.08) 82%,
    rgba(255,255,255,0) 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  animation: customize-kofi-sheen 4s ease-in-out infinite !important;
}
@keyframes customize-kofi-sheen {
  0%, 18% { left: -36%; opacity: 0; }
  26% { opacity: .92; }
  56% { left: 116%; opacity: .92; }
  64%, 100% { left: 116%; opacity: 0; }
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(58px, 20vw, 175px) !important;
    bottom: clamp(29px, 10.5vw, 81px) !important;
    width: 23.5% !important;
    max-width: 124px !important;
  }
}

/* Mystic Orbit: animate the ring itself directly so motion stays clearly visible.
   The parent ring no longer relies on a possibly-imperceptible whole-element spin;
   instead each arc rotates its conic highlight around the ellipse like an atom ring. */
.nameplate-effect-mystic-orbit {
  perspective: none !important;
  transform-style: flat !important;
}
.nameplate-effect-mystic-orbit > b {
  left: 26% !important;
  right: 26% !important;
  top: 1% !important;
  bottom: 1% !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: scaleY(.66) rotate(-12deg) !important;
  animation: none !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  padding: 1.45px !important;
  background: conic-gradient(from 0deg,
    rgba(120,89,197,.02) 0deg 26deg,
    rgba(174,134,248,.30) 36deg 62deg,
    rgba(245,241,255,.98) 63deg 71deg,
    rgba(98,196,247,.98) 72deg 89deg,
    rgba(214,192,255,.88) 90deg 118deg,
    rgba(120,89,197,.04) 119deg 196deg,
    rgba(175,129,250,.70) 206deg 238deg,
    rgba(255,255,255,.96) 239deg 247deg,
    rgba(101,199,249,.92) 248deg 266deg,
    rgba(120,89,197,.03) 267deg 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  backface-visibility: visible !important;
  transform-origin: 50% 50% !important;
  animation: np9-mystic-atom-sweep 2.9s linear infinite !important;
}
.nameplate-effect-mystic-orbit > b::before {
  clip-path: inset(0 46% 0 0) !important;
  opacity: .28 !important;
  filter: brightness(.48) saturate(.85) drop-shadow(0 0 2px rgba(95,69,160,.18)) !important;
}
.nameplate-effect-mystic-orbit > b::after {
  clip-path: inset(0 0 0 46%) !important;
  opacity: .98 !important;
  filter: drop-shadow(0 0 4px rgba(192,148,255,.66)) drop-shadow(0 0 7px rgba(95,182,232,.26)) !important;
}
@keyframes np9-mystic-atom-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== 2026-08-07 final override: visible Ko-fi sheen + spiral Mystic Orbit ===== */

/* Move the Ko-fi art 20px to the right from the last approved position. */
.customize-buy-coffee-image-button {
  right: 195px !important;
  bottom: 81px !important;
  width: 23.5% !important;
  max-width: 172px !important;
  height: auto !important;
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.customize-buy-coffee-image-button > img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
.customize-buy-coffee-image-button::after {
  content: '' !important;
  position: absolute !important;
  z-index: 2 !important;
  top: -24% !important;
  bottom: -24% !important;
  left: -42% !important;
  width: 28% !important;
  pointer-events: none !important;
  transform: skewX(-20deg) translateX(0) !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 16%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.09) 84%,
    rgba(255,255,255,0) 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  animation: customize-kofi-sheen-visible 4s linear infinite !important;
}
@keyframes customize-kofi-sheen-visible {
  0%, 14% { transform: skewX(-20deg) translateX(0); opacity: 0; }
  18% { opacity: .12; }
  28% { opacity: .95; }
  52% { transform: skewX(-20deg) translateX(540%); opacity: .95; }
  58%, 100% { transform: skewX(-20deg) translateX(540%); opacity: 0; }
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(66px, 22vw, 195px) !important;
    bottom: clamp(29px, 10.5vw, 81px) !important;
    width: 23.5% !important;
    max-width: 124px !important;
  }
}

/* Keep supporter artwork blurred/dimmed under both purchase popup states. */
.customize-modal-card.is-purchase-open .customize-supporter-art,
.customize-modal-card.is-purchase-open .customize-supporter-panel-image,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button > img,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button::after {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Replace the ring in Mystic Orbit with a compact spiral of stars/motes that
   corkscrews from right to left around the plaque. Some particles read in
   front, others read behind, keeping the current magical visual language while
   avoiding any circle-like shape. */
.nameplate-effect-mystic-orbit > b {
  display: none !important;
}
.nameplate-effect-mystic-orbit > i {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  left: auto !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(179,221,255,.95) 42%, rgba(118,88,204,.58) 75%, rgba(118,88,204,0) 100%) !important;
  box-shadow: 0 0 5px rgba(183,214,255,.58), 0 0 10px rgba(130,94,218,.24) !important;
  opacity: 0 !important;
  filter: drop-shadow(0 0 2px rgba(233,242,255,.32));
  animation: np10-mystic-spiral 4.8s cubic-bezier(.24,.64,.28,1) infinite !important;
  animation-delay: calc(var(--effect-i) * -.48s) !important;
}
.nameplate-effect-mystic-orbit > i::before,
.nameplate-effect-mystic-orbit > i::after {
  content: '' !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}
/* four-point sparkle */
.nameplate-effect-mystic-orbit > i::before {
  width: 12px !important;
  height: 12px !important;
  margin: -6px 0 0 -6px !important;
  inset: 50% auto auto 50% !important;
  background: linear-gradient(90deg, transparent 0 46%, rgba(240,247,255,.86) 50%, transparent 54%),
              linear-gradient(0deg, transparent 0 46%, rgba(240,247,255,.86) 50%, transparent 54%) !important;
  opacity: .72 !important;
}
/* trailing mote */
.nameplate-effect-mystic-orbit > i::after {
  width: 10px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(150,205,255,0), rgba(150,205,255,.46), rgba(150,205,255,0)) !important;
  margin-left: -10px !important;
  opacity: .55 !important;
  filter: blur(.4px);
}
.nameplate-effect-mystic-orbit > i:nth-of-type(odd) {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(214,194,255,.96) 42%, rgba(134,96,222,.58) 75%, rgba(134,96,222,0) 100%) !important;
  box-shadow: 0 0 5px rgba(214,190,255,.52), 0 0 10px rgba(130,94,218,.24) !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(even) {
  filter: blur(.35px) brightness(.82) !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(1) { --mystic-y: -17px; --mystic-curve: -11px; --mystic-scale: 1.08; }
.nameplate-effect-mystic-orbit > i:nth-of-type(2) { --mystic-y: -10px; --mystic-curve: 9px; --mystic-scale: .86; }
.nameplate-effect-mystic-orbit > i:nth-of-type(3) { --mystic-y: -3px; --mystic-curve: -15px; --mystic-scale: .74; }
.nameplate-effect-mystic-orbit > i:nth-of-type(4) { --mystic-y: 4px; --mystic-curve: 13px; --mystic-scale: .92; }
.nameplate-effect-mystic-orbit > i:nth-of-type(5) { --mystic-y: 11px; --mystic-curve: -8px; --mystic-scale: 1.04; }
.nameplate-effect-mystic-orbit > i:nth-of-type(6) { --mystic-y: 17px; --mystic-curve: 12px; --mystic-scale: .78; }
.nameplate-effect-mystic-orbit > i:nth-of-type(7) { --mystic-y: 0px; --mystic-curve: -18px; --mystic-scale: .98; }
.nameplate-effect-mystic-orbit > i:nth-of-type(8) { --mystic-y: 8px; --mystic-curve: 16px; --mystic-scale: .70; }
.nameplate-effect-mystic-orbit > i:nth-of-type(n+9) { display:none !important; }
@keyframes np10-mystic-spiral {
  0% {
    opacity: 0;
    transform: translate3d(54px, calc(var(--mystic-y) * .8), 0) scale(calc(var(--mystic-scale) * .56)) rotate(0deg);
  }
  12% {
    opacity: .42;
  }
  28% {
    opacity: .9;
    transform: translate3d(22px, calc(var(--mystic-y) + var(--mystic-curve)), 0) scale(calc(var(--mystic-scale) * .84)) rotate(85deg);
  }
  50% {
    opacity: .54;
    transform: translate3d(-2px, var(--mystic-y), 0) scale(var(--mystic-scale)) rotate(180deg);
  }
  72% {
    opacity: .96;
    transform: translate3d(-26px, calc(var(--mystic-y) - var(--mystic-curve)), 0) scale(calc(var(--mystic-scale) * .86)) rotate(270deg);
  }
  88% {
    opacity: .38;
  }
  100% {
    opacity: 0;
    transform: translate3d(-58px, calc(var(--mystic-y) * .86), 0) scale(calc(var(--mystic-scale) * .54)) rotate(360deg);
  }
}

/* ===== 2026-08-07 follow-up fix: move Ko-fi right, make sheen visible, restore Mystic Orbit ===== */

/* The Ko-fi artwork should stay where it is and move 30px to the right. */
.customize-buy-coffee-image-button {
  right: 165px !important;
  bottom: 81px !important;
  width: 23.5% !important;
  max-width: 172px !important;
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(56px, 19vw, 165px) !important;
    bottom: clamp(29px, 10.5vw, 81px) !important;
    width: 23.5% !important;
    max-width: 124px !important;
  }
}

/* Make the sheen clearly visible even without blend-mode support. */
.customize-buy-coffee-image-button::after {
  content: '' !important;
  position: absolute !important;
  z-index: 3 !important;
  top: -18% !important;
  bottom: -18% !important;
  left: -52% !important;
  width: 42% !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 20%,
    rgba(255,255,255,.80) 48%,
    rgba(255,255,255,.22) 72%,
    rgba(255,255,255,0) 100%) !important;
  transform: skewX(-20deg) !important;
  filter: blur(1.4px) !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  animation: customize-kofi-sheen-strong 4s linear infinite !important;
}
@keyframes customize-kofi-sheen-strong {
  0%, 15% { left: -52%; opacity: 0; }
  21% { opacity: .14; }
  30% { opacity: 1; }
  55% { left: 118%; opacity: .88; }
  64%, 100% { left: 118%; opacity: 0; }
}

/* Mystic Orbit: remove the circle entirely and replace it with a compact,
   magical spiral stream of stars/motes that twists from right to left around
   the plaque. One stream reads behind the plaque, one reads in front. */
.nameplate-effect-mystic-orbit > b {
  display: block !important;
  left: -6% !important;
  right: -6% !important;
  top: -16% !important;
  bottom: -16% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}
.nameplate-effect-mystic-orbit > i {
  display: none !important;
}
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 86% 31%, rgba(255,255,255,.96) 0 1.4px, rgba(197,229,255,.8) 1.5px, transparent 2.7px),
    radial-gradient(circle at 80% 44%, rgba(220,196,255,.9) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 73% 57%, rgba(255,255,255,.92) 0 1.2px, rgba(116,196,247,.88) 1.3px, transparent 2.6px),
    radial-gradient(circle at 66% 37%, rgba(184,214,255,.82) 0 1px, transparent 2.3px),
    radial-gradient(circle at 60% 63%, rgba(208,180,255,.86) 0 1.1px, transparent 2.5px),
    radial-gradient(circle at 52% 49%, rgba(245,241,255,.92) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 43% 34%, rgba(173,218,255,.78) 0 1px, transparent 2.3px),
    radial-gradient(circle at 37% 61%, rgba(214,194,255,.84) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 29% 46%, rgba(255,255,255,.94) 0 1.15px, rgba(132,199,248,.84) 1.25px, transparent 2.6px),
    linear-gradient(90deg, transparent 0 14%, rgba(230,243,255,.22) 21%, transparent 28%),
    linear-gradient(90deg, transparent 0 58%, rgba(214,194,255,.18) 65%, transparent 72%) !important;
  background-repeat: no-repeat !important;
  transform-origin: 50% 50% !important;
}
/* Rear stream */
.nameplate-effect-mystic-orbit > b::before {
  opacity: .32 !important;
  filter: blur(.45px) brightness(.78) drop-shadow(0 0 2px rgba(102,81,173,.14)) !important;
  animation: np11-mystic-spiral-back 4.8s cubic-bezier(.23,.63,.27,1) infinite !important;
}
/* Front stream */
.nameplate-effect-mystic-orbit > b::after {
  opacity: .96 !important;
  filter: drop-shadow(0 0 4px rgba(196,157,255,.42)) drop-shadow(0 0 7px rgba(106,190,243,.22)) !important;
  animation: np11-mystic-spiral-front 4.8s cubic-bezier(.23,.63,.27,1) infinite !important;
}
@keyframes np11-mystic-spiral-back {
  0% {
    transform: translate3d(54px, -6px, 0) rotate(-22deg) scale(.70);
    opacity: 0;
  }
  16% { opacity: .26; }
  34% {
    transform: translate3d(22px, 12px, 0) rotate(26deg) scale(.92);
    opacity: .34;
  }
  52% {
    transform: translate3d(-2px, -10px, 0) rotate(108deg) scale(1.02);
    opacity: .22;
  }
  74% {
    transform: translate3d(-28px, 10px, 0) rotate(212deg) scale(.86);
    opacity: .30;
  }
  100% {
    transform: translate3d(-58px, -4px, 0) rotate(322deg) scale(.62);
    opacity: 0;
  }
}
@keyframes np11-mystic-spiral-front {
  0% {
    transform: translate3d(48px, 10px, 0) rotate(-6deg) scale(.64);
    opacity: 0;
  }
  14% { opacity: .54; }
  31% {
    transform: translate3d(18px, -12px, 0) rotate(62deg) scale(.90);
    opacity: .94;
  }
  50% {
    transform: translate3d(-4px, 8px, 0) rotate(154deg) scale(1.06);
    opacity: .72;
  }
  71% {
    transform: translate3d(-26px, -12px, 0) rotate(252deg) scale(.90);
    opacity: .96;
  }
  100% {
    transform: translate3d(-54px, 8px, 0) rotate(344deg) scale(.60);
    opacity: 0;
  }
}

/* ===== 2026-08-07 follow-up: stronger Ko-fi sheen + 10px right + new Mystic Orbit ===== */

/* Move buymeacoffee.png 10px to the right from the last version. */
.customize-buy-coffee-image-button {
  right: 155px !important;
  bottom: 81px !important;
  width: 23.5% !important;
  max-width: 172px !important;
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
@media (max-width:700px) {
  .customize-buy-coffee-image-button {
    right: clamp(50px, 18vw, 155px) !important;
    bottom: clamp(29px, 10.5vw, 81px) !important;
    width: 23.5% !important;
    max-width: 124px !important;
  }
}

/* Much more visible idle sheen, always above the image. */
.customize-buy-coffee-image-button::after {
  content: '' !important;
  position: absolute !important;
  z-index: 4 !important;
  top: -14% !important;
  bottom: -14% !important;
  left: -70% !important;
  width: 54% !important;
  pointer-events: none !important;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,.18) 34%,
    rgba(255,255,255,.86) 49%,
    rgba(255,255,255,.30) 61%,
    rgba(255,255,255,0) 74%,
    rgba(255,255,255,0) 100%) !important;
  transform: skewX(-22deg) !important;
  filter: blur(1px) brightness(1.08) !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  animation: customize-kofi-sheen-very-visible 4s linear infinite !important;
}
@keyframes customize-kofi-sheen-very-visible {
  0%, 13%   { left: -70%; opacity: 0; }
  18%       { opacity: .22; }
  28%       { opacity: 1; }
  56%       { left: 130%; opacity: .98; }
  65%,100%  { left: 130%; opacity: 0; }
}

/* Keep blur/apagado over supportershop.png and buymeacoffee.png whenever the
   purchase popup is open. */
.customize-modal-card.is-purchase-open .customize-supporter-art,
.customize-modal-card.is-purchase-open .customize-supporter-panel-image,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button > img,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button::after {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Completely replace Mystic Orbit with a compact magical spiral storm. No rings,
   no circles. Particles twist from right to left around the plaque, with one
   stream reading behind and one in front. */
.nameplate-effect-mystic-orbit > b {
  display: block !important;
  left: -8% !important;
  right: -8% !important;
  top: -18% !important;
  bottom: -18% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}
.nameplate-effect-mystic-orbit > i {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 5px !important;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  display: block !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(208,190,255,.95) 40%, rgba(125,96,217,.44) 70%, rgba(125,96,217,0) 100%) !important;
  box-shadow: 0 0 5px rgba(214,194,255,.52), 0 0 8px rgba(108,187,243,.22) !important;
  opacity: 0 !important;
  animation: np12-mystic-spiral-front 4.8s cubic-bezier(.24,.64,.28,1) infinite !important;
  animation-delay: calc(var(--effect-i) * -.42s) !important;
}
.nameplate-effect-mystic-orbit > i::before,
.nameplate-effect-mystic-orbit > i::after,
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
}
/* Front-stream particles carried by the existing <i> nodes. */
.nameplate-effect-mystic-orbit > i::before {
  inset: 50% auto auto 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translate(-50%, -50%) !important;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(245,250,255,.88) 50%, transparent 56%),
    linear-gradient(0deg, transparent 0 44%, rgba(245,250,255,.88) 50%, transparent 56%) !important;
  opacity: .72 !important;
}
.nameplate-effect-mystic-orbit > i::after {
  inset: 50% auto auto 50% !important;
  width: 12px !important;
  height: 2px !important;
  margin-left: -11px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(164,214,255,0), rgba(164,214,255,.52), rgba(164,214,255,0)) !important;
  opacity: .55 !important;
  filter: blur(.4px) !important;
}
/* Two compact background swirls behind the plaque. */
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  left: 50% !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(170,218,255,.90) 42%, rgba(118,88,204,.30) 74%, rgba(118,88,204,0) 100%) !important;
  box-shadow:
    14px -8px 0 0 rgba(215,194,255,.74),
    23px 6px 0 0 rgba(168,216,255,.72),
    6px 14px 0 0 rgba(245,243,255,.62),
    -15px 9px 0 0 rgba(206,185,255,.64),
    -24px -4px 0 0 rgba(165,214,255,.58),
    -6px -15px 0 0 rgba(242,238,255,.54) !important;
}
.nameplate-effect-mystic-orbit > b::before {
  opacity: .26 !important;
  filter: blur(.65px) brightness(.74) drop-shadow(0 0 2px rgba(93,73,162,.16)) !important;
  animation: np12-mystic-spiral-back-a 4.9s cubic-bezier(.23,.63,.27,1) infinite !important;
}
.nameplate-effect-mystic-orbit > b::after {
  opacity: .22 !important;
  filter: blur(.85px) brightness(.68) !important;
  animation: np12-mystic-spiral-back-b 5.2s cubic-bezier(.23,.63,.27,1) infinite !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(odd) {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(214,194,255,.95) 42%, rgba(134,96,222,.50) 74%, rgba(134,96,222,0) 100%) !important;
  box-shadow: 0 0 5px rgba(214,190,255,.56), 0 0 9px rgba(130,94,218,.26) !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(even) {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(181,227,255,.95) 40%, rgba(96,171,228,.40) 72%, rgba(96,171,228,0) 100%) !important;
  box-shadow: 0 0 5px rgba(182,225,255,.56), 0 0 9px rgba(83,172,230,.24) !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(1) { --mystic-y: -16px; --mystic-bend: -10px; --mystic-scale: 1.04; }
.nameplate-effect-mystic-orbit > i:nth-of-type(2) { --mystic-y: -9px;  --mystic-bend: 9px;   --mystic-scale: .84; }
.nameplate-effect-mystic-orbit > i:nth-of-type(3) { --mystic-y: -2px;  --mystic-bend: -15px; --mystic-scale: .72; }
.nameplate-effect-mystic-orbit > i:nth-of-type(4) { --mystic-y: 5px;   --mystic-bend: 13px;  --mystic-scale: .92; }
.nameplate-effect-mystic-orbit > i:nth-of-type(5) { --mystic-y: 12px;  --mystic-bend: -8px;  --mystic-scale: 1.02; }
.nameplate-effect-mystic-orbit > i:nth-of-type(6) { --mystic-y: 17px;  --mystic-bend: 12px;  --mystic-scale: .76; }
.nameplate-effect-mystic-orbit > i:nth-of-type(7) { --mystic-y: 1px;   --mystic-bend: -18px; --mystic-scale: .96; }
.nameplate-effect-mystic-orbit > i:nth-of-type(8) { --mystic-y: 8px;   --mystic-bend: 16px;  --mystic-scale: .68; }
.nameplate-effect-mystic-orbit > i:nth-of-type(n+9) { display:none !important; }
@keyframes np12-mystic-spiral-front {
  0% {
    opacity: 0;
    transform: translate3d(52px, calc(var(--mystic-y) * .82), 0) scale(calc(var(--mystic-scale) * .54)) rotate(0deg);
  }
  13% { opacity: .44; }
  30% {
    opacity: .95;
    transform: translate3d(20px, calc(var(--mystic-y) + var(--mystic-bend)), 0) scale(calc(var(--mystic-scale) * .84)) rotate(86deg);
  }
  50% {
    opacity: .68;
    transform: translate3d(-2px, var(--mystic-y), 0) scale(var(--mystic-scale)) rotate(180deg);
  }
  72% {
    opacity: .98;
    transform: translate3d(-24px, calc(var(--mystic-y) - var(--mystic-bend)), 0) scale(calc(var(--mystic-scale) * .86)) rotate(272deg);
  }
  88% { opacity: .42; }
  100% {
    opacity: 0;
    transform: translate3d(-56px, calc(var(--mystic-y) * .86), 0) scale(calc(var(--mystic-scale) * .50)) rotate(360deg);
  }
}
@keyframes np12-mystic-spiral-back-a {
  0%   { transform: translate3d(46px, -7px, 0) rotate(-22deg) scale(.70); opacity: 0; }
  16%  { opacity: .20; }
  34%  { transform: translate3d(19px, 11px, 0) rotate(28deg) scale(.90); opacity: .28; }
  52%  { transform: translate3d(-1px, -9px, 0) rotate(110deg) scale(.98); opacity: .18; }
  74%  { transform: translate3d(-25px, 9px, 0) rotate(212deg) scale(.84); opacity: .24; }
  100% { transform: translate3d(-50px, -4px, 0) rotate(322deg) scale(.60); opacity: 0; }
}
@keyframes np12-mystic-spiral-back-b {
  0%   { transform: translate3d(40px, 10px, 0) rotate(-4deg) scale(.64); opacity: 0; }
  15%  { opacity: .16; }
  32%  { transform: translate3d(14px, -11px, 0) rotate(72deg) scale(.82); opacity: .24; }
  52%  { transform: translate3d(-5px, 8px, 0) rotate(162deg) scale(.96); opacity: .16; }
  72%  { transform: translate3d(-23px, -12px, 0) rotate(256deg) scale(.82); opacity: .22; }
  100% { transform: translate3d(-48px, 8px, 0) rotate(344deg) scale(.58); opacity: 0; }
}

/* ===== 2026-08-07 corrective override: visible Ko-fi sheen + real Mystic Orbit spiral ===== */

/* Strong, always-visible idle sheen across the Ko-fi art. */
.customize-buy-coffee-image-button {
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.customize-buy-coffee-image-button > img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}
.customize-buy-coffee-image-button::before {
  content: '' !important;
  position: absolute !important;
  z-index: 5 !important;
  top: -10% !important;
  bottom: -10% !important;
  left: -48% !important;
  width: 38% !important;
  pointer-events: none !important;
  background: linear-gradient(102deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.18) 78%,
    rgba(255,255,255,0) 100%) !important;
  transform: skewX(-18deg) translateX(0) !important;
  filter: blur(.85px) brightness(1.1) !important;
  box-shadow: 0 0 14px rgba(255,255,255,.32) !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  will-change: transform, opacity !important;
  animation: customize-kofi-sheen-definite 4s linear infinite !important;
}
/* small complementary brightening so the sweep is perceptible on all displays */
.customize-buy-coffee-image-button > img {
  animation: customize-kofi-image-glint 4s linear infinite !important;
}
@keyframes customize-kofi-sheen-definite {
  0%, 14% {
    transform: skewX(-18deg) translateX(0);
    opacity: 0;
  }
  20% { opacity: .18; }
  28% { opacity: 1; }
  58% {
    transform: skewX(-18deg) translateX(430%);
    opacity: .96;
  }
  66%, 100% {
    transform: skewX(-18deg) translateX(430%);
    opacity: 0;
  }
}
@keyframes customize-kofi-image-glint {
  0%, 16%, 100% { filter: brightness(1) saturate(1); }
  24% { filter: brightness(1.05) saturate(1.02); }
  33% { filter: brightness(1.16) saturate(1.06); }
  47% { filter: brightness(1.04) saturate(1.02); }
  58% { filter: brightness(1) saturate(1); }
}

/* Keep the blur/apagado on the supporter artwork while purchase popups are open. */
.customize-modal-card.is-purchase-open .customize-supporter-art,
.customize-modal-card.is-purchase-open .customize-supporter-panel-image,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button > img,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button::before,
.customize-modal-card.is-purchase-open .customize-buy-coffee-image-button::after {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Mystic Orbit: no circles, no rounded rectangle sheets. Build a compact 3D-like
   spiral storm of stars/motes flowing from right to left around the plaque. */
.nameplate-effect-mystic-orbit > b,
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after {
  display: none !important;
  content: none !important;
}
.nameplate-effect-mystic-orbit > i {
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 6px !important;
  height: 6px !important;
  margin: -3px 0 0 -3px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(214,194,255,.95) 42%, rgba(136,97,224,.46) 74%, rgba(136,97,224,0) 100%) !important;
  box-shadow: 0 0 5px rgba(214,194,255,.55), 0 0 10px rgba(105,187,242,.24) !important;
  opacity: 0 !important;
  transform-origin: 50% 50% !important;
  will-change: transform, opacity !important;
  animation: np13-mystic-vortex-front 4.9s cubic-bezier(.24,.64,.28,1) infinite !important;
  animation-delay: calc(var(--effect-i) * -.46s) !important;
}
.nameplate-effect-mystic-orbit > i::before,
.nameplate-effect-mystic-orbit > i::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  pointer-events: none !important;
}
/* sparkle */
.nameplate-effect-mystic-orbit > i::before {
  width: 11px !important;
  height: 11px !important;
  margin: -5.5px 0 0 -5.5px !important;
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(244,249,255,.88) 50%, transparent 55%),
    linear-gradient(0deg, transparent 0 45%, rgba(244,249,255,.88) 50%, transparent 55%) !important;
  opacity: .74 !important;
  transform: rotate(18deg) !important;
}
/* trailing streak */
.nameplate-effect-mystic-orbit > i::after {
  width: 14px !important;
  height: 2px !important;
  margin: -1px 0 0 -12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(164,214,255,0), rgba(164,214,255,.58), rgba(164,214,255,0)) !important;
  opacity: .58 !important;
  filter: blur(.4px) !important;
}
/* back-stream particles */
.nameplate-effect-mystic-orbit > i:nth-of-type(even) {
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(183,228,255,.92) 40%, rgba(93,170,228,.34) 72%, rgba(93,170,228,0) 100%) !important;
  box-shadow: 0 0 5px rgba(182,225,255,.48), 0 0 8px rgba(83,172,230,.20) !important;
  filter: blur(.45px) brightness(.80) !important;
  animation-name: np13-mystic-vortex-back !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(odd) {
  filter: none !important;
}
.nameplate-effect-mystic-orbit > i:nth-of-type(1) { --sy:-16px; --curve:-10px; --s:1.08; }
.nameplate-effect-mystic-orbit > i:nth-of-type(2) { --sy:-10px; --curve:10px;  --s:.84; }
.nameplate-effect-mystic-orbit > i:nth-of-type(3) { --sy:-3px;  --curve:-16px; --s:.72; }
.nameplate-effect-mystic-orbit > i:nth-of-type(4) { --sy:4px;   --curve:14px;  --s:.90; }
.nameplate-effect-mystic-orbit > i:nth-of-type(5) { --sy:11px;  --curve:-8px;  --s:1.04; }
.nameplate-effect-mystic-orbit > i:nth-of-type(6) { --sy:17px;  --curve:12px;  --s:.76; }
.nameplate-effect-mystic-orbit > i:nth-of-type(7) { --sy:1px;   --curve:-18px; --s:.96; }
.nameplate-effect-mystic-orbit > i:nth-of-type(8) { --sy:8px;   --curve:16px;  --s:.68; }
.nameplate-effect-mystic-orbit > i:nth-of-type(n+9) { display:none !important; }
@keyframes np13-mystic-vortex-front {
  0% {
    opacity: 0;
    transform: translate3d(54px, calc(var(--sy) * .84), 0) scale(calc(var(--s) * .48)) rotate(0deg);
  }
  14% { opacity: .42; }
  30% {
    opacity: .98;
    transform: translate3d(22px, calc(var(--sy) + var(--curve)), 0) scale(calc(var(--s) * .82)) rotate(94deg);
  }
  50% {
    opacity: .76;
    transform: translate3d(-1px, var(--sy), 0) scale(var(--s)) rotate(180deg);
  }
  72% {
    opacity: .98;
    transform: translate3d(-25px, calc(var(--sy) - var(--curve)), 0) scale(calc(var(--s) * .84)) rotate(272deg);
  }
  88% { opacity: .42; }
  100% {
    opacity: 0;
    transform: translate3d(-57px, calc(var(--sy) * .88), 0) scale(calc(var(--s) * .48)) rotate(360deg);
  }
}
@keyframes np13-mystic-vortex-back {
  0% {
    opacity: 0;
    transform: translate3d(48px, calc(var(--sy) * .80), 0) scale(calc(var(--s) * .42)) rotate(0deg);
  }
  16% { opacity: .20; }
  34% {
    opacity: .32;
    transform: translate3d(18px, calc(var(--sy) + var(--curve) * .86), 0) scale(calc(var(--s) * .72)) rotate(102deg);
  }
  52% {
    opacity: .18;
    transform: translate3d(-4px, calc(var(--sy) * .96), 0) scale(calc(var(--s) * .86)) rotate(190deg);
  }
  74% {
    opacity: .30;
    transform: translate3d(-26px, calc(var(--sy) - var(--curve) * .86), 0) scale(calc(var(--s) * .72)) rotate(282deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-52px, calc(var(--sy) * .84), 0) scale(calc(var(--s) * .40)) rotate(360deg);
  }
}

/* ===== 2026-08-07 exact DJ / MY CARRD reflection for buymeacoffee.png ===== */
/* Disable every experimental pseudo-element sheen from previous revisions. */
.customize-buy-coffee-image-button::before,
.customize-buy-coffee-image-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.customize-buy-coffee-image-button {
  overflow: visible !important;
  isolation: isolate !important;
}
.customize-buy-coffee-image-button > img {
  position: relative !important;
  z-index: 1 !important;
}

/* This is the same two-layer reflection used by DJ / MY CARRD. The only
   difference is the mask: it follows buymeacoffee.png instead of button.png. */
.customize-buy-coffee-image-button > .customize-buy-coffee-topbar-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(
    108deg,
    transparent 21%,
    rgba(255,255,255,.04) 36%,
    rgba(255,248,211,.62) 48%,
    rgba(255,255,255,.08) 59%,
    transparent 74%
  ) !important;
  transform: translateX(-145%) skewX(-16deg) !important;
  -webkit-mask: url("./assets/buymeacoffee.png") center / 100% 100% no-repeat !important;
  mask: url("./assets/buymeacoffee.png") center / 100% 100% no-repeat !important;
  animation: customize-buycoffee-reflection-loop 4s linear infinite !important;
}
.customize-buy-coffee-image-button > .customize-buy-coffee-topbar-shine::before {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  bottom: -45% !important;
  left: -52% !important;
  width: 34% !important;
  opacity: 0 !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.2) 28%,
    rgba(255,250,214,.92) 52%,
    rgba(255,255,255,.24) 75%,
    transparent
  ) !important;
  filter: blur(.5px) !important;
  mix-blend-mode: screen !important;
  animation: customize-buycoffee-reflection-v2-loop 4s linear infinite !important;
}

/* Idle for most of the 4-second cycle, then reproduce the DJ/MY CARRD sweep. */
@keyframes customize-buycoffee-reflection-loop {
  0%, 70% { opacity: 0; transform: translateX(-145%) skewX(-16deg); }
  73.5% { opacity: .82; }
  88% { opacity: .58; }
  95% { opacity: 0; transform: translateX(145%) skewX(-16deg); }
  100% { opacity: 0; transform: translateX(145%) skewX(-16deg); }
}
@keyframes customize-buycoffee-reflection-v2-loop {
  0%, 70% { left: -52%; opacity: 0; }
  73% { opacity: .9; }
  90% { opacity: .72; }
  98% { left: 122%; opacity: 0; }
  100% { left: 122%; opacity: 0; }
}

/* Purchase confirmation/success must blur/dim the new shine together with the
   supporter panel and Ko-fi artwork. */
.customize-modal-card.is-purchase-open .customize-buy-coffee-topbar-shine,
.customize-modal-card.is-purchase-open .customize-buy-coffee-topbar-shine::before {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* Mystic Orbit was removed from the catalog. Hide stale local markup too until
   the database migration clears any previously equipped copy. */
.nameplate-effect-mystic-orbit,
.nameplate-effect-mystic-orbit > b,
.nameplate-effect-mystic-orbit > i,
.nameplate-effect-mystic-orbit > b::before,
.nameplate-effect-mystic-orbit > b::after,
.nameplate-effect-mystic-orbit > i::before,
.nameplate-effect-mystic-orbit > i::after {
  display: none !important;
  animation: none !important;
  content: none !important;
}

/* ===== 2026-08-07 definitive Ko-fi reflection: trigger the ACTUAL DJ/MY CARRD sweep with JS ===== */
/* Strip every previous Ko-fi brightness/loop experiment. The image itself never pulses. */
.customize-buy-coffee-image-button > img {
  animation: none !important;
  filter: none !important;
}
.customize-buy-coffee-image-button::before,
.customize-buy-coffee-image-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* This child now uses the same current construction as .topbar-button-shine on DJ/MY CARRD. */
.customize-buy-coffee-image-button > .customize-buy-coffee-topbar-shine {
  position: absolute !important;
  inset: 4px 5px !important;
  z-index: 20 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
  animation: none !important;
  filter: none !important;
}
.customize-buy-coffee-image-button > .customize-buy-coffee-topbar-shine::before {
  content: "" !important;
  position: absolute !important;
  top: -45% !important;
  bottom: -45% !important;
  left: -52% !important;
  width: 34% !important;
  opacity: 0 !important;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.2) 28%,
    rgba(255,250,214,.92) 52%,
    rgba(255,255,255,.24) 75%,
    transparent
  ) !important;
  filter: blur(.5px) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Instead of trying to keep a CSS infinite loop alive through all the Shop state
   changes, JS restarts the exact existing DJ/MY CARRD animation every 4 seconds. */
.customize-buy-coffee-image-button.is-auto-reflecting > .customize-buy-coffee-topbar-shine::before {
  animation: topbar-button-reflection-v2 .88s cubic-bezier(.2,.7,.24,1) both !important;
}

/* Preserve the requested blur/dim behavior while either purchase popup is open. */
.customize-modal-card.is-purchase-open .customize-buy-coffee-topbar-shine,
.customize-modal-card.is-purchase-open .customize-buy-coffee-topbar-shine::before {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* ===== 2026-08-07 hard fix: runtime DJ/MY CARRD reflection on buymeacoffee.png ===== */
/* Old Ko-fi pseudo/shine experiments are fully disabled. The moving reflection
   is now a real DOM layer animated by Web Animations API, so CSS cascade and
   repeated Shop redraws cannot silently cancel it. */
.customize-buy-coffee-image-button::before,
.customize-buy-coffee-image-button::after,
.customize-buy-coffee-image-button > .customize-buy-coffee-topbar-shine {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.customize-buy-coffee-image-button {
  overflow: hidden !important;
  isolation: isolate !important;
}
.customize-buy-coffee-image-button > img {
  position: relative !important;
  z-index: 1 !important;
  animation: none !important;
  filter: none !important;
}
.customize-buy-coffee-runtime-reflection {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.customize-buy-coffee-runtime-reflection-beam {
  position: absolute !important;
  top: -45% !important;
  bottom: -45% !important;
  left: -52%;
  width: 34% !important;
  opacity: 0;
  transform: skewX(-18deg) !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.2) 28%,
    rgba(255,250,214,.92) 52%,
    rgba(255,255,255,.24) 75%,
    transparent
  );
  filter: blur(.5px);
  mix-blend-mode: screen;
  pointer-events: none !important;
  will-change: left, opacity !important;
}

/* Purchase popup blur/dim also covers the runtime reflection layer. */
.customize-modal-card.is-purchase-open .customize-buy-coffee-runtime-reflection,
.customize-modal-card.is-purchase-open .customize-buy-coffee-runtime-reflection-beam {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
}

/* ===== 2026-08-07 purchase popup: blur the external supporter artwork correctly ===== */
/* supportershop.png / buymeacoffee.png live as siblings of .customize-modal-card,
   not inside it. Use the general-sibling relationship so both Confirm Purchase
   and Purchase Successful states dim/blur the complete supporter artwork. */
.customize-modal-card.is-purchase-open ~ .customize-supporter-art {
  filter: blur(4px) brightness(.58) saturate(.78) !important;
  opacity: .56 !important;
  pointer-events: none !important;
}

/* ===== 2026-08-07 Shop popup supporter backdrop refinement ===== */
/* Softer than the previous purchase-only treatment, and shared by every Shop
   popup state currently used by the UI (purchase confirmation/success and the
   acquired-item Preview dialog opened from the context menu). */
.customize-modal-card.is-shop-popup-open ~ .customize-supporter-art {
  filter: blur(2px) brightness(.76) saturate(.90) !important;
  opacity: .74 !important;
  pointer-events: none !important;
}

/* Fallback for the current popup DOM even if the JS state class is ever missed. */
.customize-modal-card:has(> .customize-purchase-dialog:not(.hidden), > .customize-owned-preview-dialog:not(.hidden)) ~ .customize-supporter-art {
  filter: blur(2px) brightness(.76) saturate(.90) !important;
  opacity: .74 !important;
  pointer-events: none !important;
}

/* ===== 2026-08-07 shop section normalization: price + card organization ===== */

/* Slightly increase every item price and its gil.png icon in all Shop item
   sections without affecting the purchase-confirmation popup. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card .customize-price {
  gap: 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
}
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card .customize-price img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* Use Name Effect as the layout reference for Slot, Nameplate Background,
   Nameplate Border and Badges: same card height, same three grid rows, same
   spacing/padding and same preview-row geometry. Artwork keeps its own aspect
   ratio inside the standardized preview area. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option
  ) {
  width: 100% !important;
  height: 166px !important;
  min-height: 166px !important;
  max-height: 166px !important;
  grid-template-rows: 66px auto 20px !important;
  gap: 5px !important;
  padding: 12px 10px 12px !important;
  margin: 0 !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
}

.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option
  ) > .customize-item-preview {
  width: calc(100% - 18px) !important;
  height: 66px !important;
  min-width: 0 !important;
  min-height: 66px !important;
  max-width: calc(100% - 18px) !important;
  max-height: 66px !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Keep the artwork centered and contained in exactly the same first row. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option
  ) > .customize-item-preview > img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 66px !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Default text-only previews share the same centered preview geometry too. */
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-nameplate-option .customize-default-nameplate-preview,
.customize-modal-overlay:not([data-shop-view="root"])
  .customize-badge-option .customize-default-badge-preview {
  width: calc(100% - 18px) !important;
  height: 66px !important;
  max-width: calc(100% - 18px) !important;
  max-height: 66px !important;
  margin: 0 auto !important;
}

/* ===== 2026-08-07 Shop carousel persistent cosmetic notice ===== */
/* Add the same centered note below the < > navigation arrows in every Shop
   carousel without taking any layout space or moving/resizing existing UI. */
.customize-modal-overlay .customize-carousel-navigation {
  position: relative !important;
  overflow: visible !important;
}
.customize-modal-overlay .customize-carousel-navigation::after {
  content: "Everyone will see your cosmetics and everything bought stays saved for future sessions." !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 6px) !important;
  width: min(560px, 78vw) !important;
  max-width: 560px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(230, 214, 183, .82) !important;
  font: 500 11px/1.25 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 70 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
}
@media (max-width:700px) {
  .customize-modal-overlay .customize-carousel-navigation::after {
    width: min(92vw, 520px) !important;
    font-size: 9.5px !important;
    white-space: normal !important;
  }
}

/* ===== 2026-08-07 Root Shop notice below Your balance ===== */
/* Show the same cosmetics persistence notice on the category/session selection
   screen, directly below "Your balance", without consuming layout space or
   moving/resizing any existing element. */
.customize-modal-overlay[data-shop-view="root"] .customize-balance {
  position: relative !important;
  overflow: visible !important;
}
.customize-modal-overlay[data-shop-view="root"] .customize-balance::after {
  content: "Everyone will see your cosmetics and everything bought stays saved for future sessions." !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% - 2px) !important;
  width: min(560px, 78vw) !important;
  max-width: 560px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(230, 214, 183, .82) !important;
  font: 500 11px/1.25 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 70 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
}
@media (max-width:700px) {
  .customize-modal-overlay[data-shop-view="root"] .customize-balance::after {
    width: min(92vw, 520px) !important;
    font-size: 9.5px !important;
    white-space: normal !important;
  }
}

/* ===== 2026-08-07 Root Shop notice de-duplication ===== */
/* On the category/session selection screen, keep the persistence note only
   below "Your balance". The carousel/navigation copy remains available in the
   actual item sections. */
.customize-modal-overlay[data-shop-view="root"] .customize-carousel-navigation::after {
  content: none !important;
  display: none !important;
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE-ONLY RESPONSIVE PASS                                  */
/* Desktop geometry above remains untouched. Everything in this block is      */
/* scoped to phone-sized/coarse-pointer viewports only.                        */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  :root {
    --mobile-page-gap: 10px;
    --mobile-content-width: min(94vw, 680px);
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: #080604 url("./assets/background.png") center / cover fixed no-repeat !important;
  }

  .game-shell {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .game-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    pointer-events: none !important;
  }

  .game-background-overlay {
    position: absolute !important;
    left: 50% !important;
    top: 150px !important;
    width: min(42vw, 230px) !important;
    height: auto !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    opacity: .78 !important;
  }

  .game-stage {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    container-type: inline-size !important;
    padding: 0 0 18px !important;
    isolation: isolate !important;
  }

  /* ---------- Access / loading ---------- */
  .access-gate {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
  }
  .access-card {
    width: min(92vw, 430px) !important;
    padding: 28px 22px 24px !important;
    margin: auto !important;
  }
  .access-card h1 { font-size: clamp(28px, 8vw, 34px) !important; }
  .access-copy { font-size: 13px !important; }
  .access-character {
    top: -205px !important;
    right: -78px !important;
    max-width: min(230px, 58vw) !important;
    opacity: .92 !important;
  }
  .access-emblem { width: 54px !important; height: 54px !important; font-size: 27px !important; }
  .access-input,
  .access-submit { min-height: 46px !important; }

  .real-loading-panel {
    width: min(90vw, 430px) !important;
    max-width: 90vw !important;
    padding-inline: 20px !important;
  }

  /* ---------- Top bar ---------- */
  .topbar {
    position: sticky !important;
    order: 0 !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: max(7px, env(safe-area-inset-top)) 8px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand account"
      "links links" !important;
    align-items: center !important;
    gap: 6px 7px !important;
    overflow: visible !important;
    z-index: 800 !important;
  }

  .brand-block {
    grid-area: brand !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;
    overflow: visible !important;
  }
  .site-title-image {
    width: clamp(98px, 27vw, 132px) !important;
    height: auto !important;
    max-width: 132px !important;
    flex: 0 0 auto !important;
  }
  .topbar-audio-controls {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: clamp(128px, 38vw, 154px) !important;
    height: 36px !important;
    transform: none !important;
    grid-template-rows: repeat(2, 17px) !important;
    gap: 2px !important;
    flex: 0 1 154px !important;
  }
  .topbar-audio-row {
    grid-template-columns: 16px 27px 1fr 19px !important;
    gap: 2px !important;
    height: 17px !important;
  }
  .audio-mute-button { width: 16px !important; min-width: 16px !important; height: 16px !important; font-size: 11px !important; }
  .audio-control-label,
  .topbar-audio-row output { font-size: 7px !important; }

  .topbar-links {
    grid-area: links !important;
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .topbar-links .topbar-dj-button,
  .topbar-links .topbar-customize-button,
  .topbar-links .topbar-carrd-button {
    height: 37px !important;
    min-height: 37px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .topbar-links .topbar-dj-button { width: 70px !important; min-width: 70px !important; }
  .topbar-links .topbar-customize-button { width: 92px !important; min-width: 92px !important; }
  .topbar-links .topbar-carrd-button { width: 94px !important; min-width: 94px !important; }
  .topbar-links .topbar-dj-art,
  .topbar-links .topbar-customize-button .topbar-dj-art,
  .topbar-links .topbar-carrd-button .topbar-dj-art {
    width: 100% !important;
    height: 37px !important;
    object-fit: fill !important;
  }
  .topbar-links .topbar-dj-label { font-size: 12px !important; letter-spacing: .02em !important; }
  .topbar-links .topbar-customize-button .topbar-dj-label,
  .topbar-links .topbar-carrd-button .topbar-dj-label { font-size: 11px !important; }

  .account-block {
    grid-area: account !important;
    justify-self: end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .account-stat { min-width: 0 !important; }
  .account-label { font-size: 7px !important; }
  .account-stat strong { font-size: 12px !important; gap: 3px !important; }
  .account-divider { height: 30px !important; }
  .account-user { min-width: 0 !important; max-width: 94px !important; }
  .account-user > div { min-width: 0 !important; }
  .account-user strong {
    max-width: 94px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  .gil-inline img,
  .gil-number img { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; }

  /* Decorative desktop-only hanging pieces are removed from the phone canvas;
     all functional controls remain available. */
  .chains-decoration,
  .chains-decoration-left { display: none !important; }
  .ambient-glow { opacity: .38 !important; transform: scale(.72) !important; }
  .page-embers-canvas { opacity: .42 !important; }

  /* ---------- Dealer area ---------- */
  .dealer-zone {
    position: relative !important;
    order: 1 !important;
    left: auto !important;
    top: auto !important;
    width: var(--mobile-content-width) !important;
    min-height: 112px !important;
    margin: 12px auto 0 !important;
    transform: none !important;
    z-index: 40 !important;
  }
  .dealer-hand {
    min-height: 82px !important;
    margin: 0 !important;
    align-items: flex-start !important;
  }
  .dealer-hand .playing-card,
  .dealer-hand .hidden-card {
    width: 54px !important;
    height: 74px !important;
  }
  .dealer-hand .hand-cards > * + * { margin-left: -34px !important; }
  #dealer-score,
  .dealer-score-badge {
    min-width: 42px !important;
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  .table-live-banner {
    position: relative !important;
    order: 2 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: var(--mobile-content-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 2px auto 8px !important;
    padding: 8px 10px !important;
    z-index: 45 !important;
  }
  .round-state {
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 7px !important;
    font-size: 11px !important;
  }
  .round-state strong { font-size: 11px !important; }
  .status-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; }

  .shoe {
    left: 50% !important;
    top: 180px !important;
    width: 68px !important;
    height: 88px !important;
    z-index: 50 !important;
  }
  .shoe-card { width: 34px !important; height: 47px !important; }

  /* ---------- Player table: two compact columns instead of a forced landscape canvas ---------- */
  .table-seats {
    position: relative !important;
    order: 3 !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(600px, 165vw, 760px) !important;
    min-height: 600px !important;
    overflow: visible !important;
    z-index: 35 !important;
    pointer-events: none !important;
  }
  .table-seats > .player-seat {
    position: absolute !important;
    width: min(44vw, 235px) !important;
    min-width: 0 !important;
    max-width: 235px !important;
    height: auto !important;
    left: 25% !important;
    top: 12% !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center !important;
    z-index: 36 !important;
  }
  .table-seats > .player-seat:nth-child(even) { left: 75% !important; }
  .table-seats > .player-seat:nth-child(1),
  .table-seats > .player-seat:nth-child(2) { top: 13% !important; }
  .table-seats > .player-seat:nth-child(3),
  .table-seats > .player-seat:nth-child(4) { top: 37% !important; }
  .table-seats > .player-seat:nth-child(5),
  .table-seats > .player-seat:nth-child(6) { top: 61% !important; }
  .table-seats > .player-seat:nth-child(7),
  .table-seats > .player-seat:nth-child(8) { top: 85% !important; }

  .table-seats > .player-seat.is-self {
    width: min(46vw, 245px) !important;
    max-width: 245px !important;
    z-index: 40 !important;
  }

  .player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque,
  .player-seat.is-self:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
    min-width: 108px !important;
    max-width: min(39vw, 164px) !important;
    padding: 5px 8px 6px !important;
    transform: translateY(-20px) !important;
  }
  .player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-hands-wrap {
    transform: translateY(-20px) !important;
  }
  .player-seat .seat-name { font-size: 11px !important; }
  .player-seat.is-self .seat-name { font-size: 12px !important; }
  .player-seat .seat-meta { margin-top: 2px !important; gap: 6px !important; font-size: 9px !important; }
  .player-seat .seat-turn { font-size: 8px !important; }
  .player-seat .seat-customize-hover-label { font-size: 8px !important; bottom: calc(100% + 5px) !important; }

  .player-seat .seat-hands { gap: 4px !important; min-height: 58px !important; }
  .player-seat .hand { min-width: 34px !important; }
  .player-seat .hand-cards { min-height: 56px !important; }
  .player-seat .playing-card,
  .player-seat .hidden-card,
  .player-seat:not(.is-self) .playing-card,
  .player-seat:not(.is-self) .hidden-card {
    width: 42px !important;
    height: 57px !important;
  }
  .player-seat.is-self .playing-card,
  .player-seat.is-self .hidden-card { width: 46px !important; height: 63px !important; }
  .player-seat .hand-cards > * + *,
  .player-seat:not(.is-self) .hand-cards > * + * { margin-left: -27px !important; }
  .player-seat.is-self .hand-cards > * + * { margin-left: -30px !important; }
  .player-seat .hand-score,
  .player-seat.is-self .hand-score,
  .player-seat .hand.is-active .hand-score {
    right: -15px !important;
    min-width: 27px !important;
    height: 27px !important;
    font-size: 10px !important;
  }

  .player-seat > .seat-circle-backdrop {
    left: 50% !important;
    top: calc(50% + 10px) !important;
    transform: translateX(-50%) scale(.76) !important;
  }
  .player-seat .seat-circle-image { transform: scale(.92) !important; }
  .player-seat > .seat-chip-zone {
    left: 50% !important;
    top: calc(50% + 1px) !important;
    width: 132px !important;
    height: 68px !important;
    transform: translateX(-50%) !important;
  }
  .player-seat > .seat-chip-zone .seat-chip {
    width: 25px !important;
    max-width: 25px !important;
  }
  .player-seat > .seat-bet-display {
    top: calc(50% + 78px) !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  .player-seat.is-self > .seat-bet-display { font-size: 12px !important; }
  .player-seat > .seat-bet-display img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }
  .player-seat .seat-bust-label { font-size: 13px !important; }

  /* Center-table transient VFX follow the compact player-table area. */
  .table-pot-layer,
  .chip-flight-layer,
  .confetti-layer { max-width: 100vw !important; overflow: hidden !important; }
  .table-pot-layer .pot-chip { width: 28px !important; }

  .center-turn-overlay {
    position: fixed !important;
    left: 50% !important;
    top: 44dvh !important;
    transform: translateX(-50%) !important;
    font-size: clamp(17px, 5vw, 24px) !important;
    white-space: nowrap !important;
    z-index: 900 !important;
  }

  .round-result-summary {
    position: fixed !important;
    inset: 0 !important;
    z-index: 920 !important;
    pointer-events: none !important;
  }
  .round-result-summary-card {
    width: min(88vw, 360px) !important;
    max-width: 88vw !important;
    padding: 18px 18px 16px !important;
  }
  .round-result-summary-title { font-size: clamp(24px, 7vw, 34px) !important; }
  .round-result-summary-scores,
  .round-result-summary-bank { font-size: 12px !important; }

  /* ---------- Play controls ---------- */
  .bottom-hud {
    position: relative !important;
    order: 4 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--mobile-content-width) !important;
    height: auto !important;
    margin: 8px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    z-index: 55 !important;
  }
  .bet-panel,
  .action-panel,
  .last-hand-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 14px 13px !important;
  }
  .panel-bet { min-height: 172px !important; }
  .panel-choices { min-height: 235px !important; }
  .panel-lasthand { min-height: 145px !important; }

  .hud-heading-row { font-size: 11px !important; gap: 6px !important; }
  .hud-heading-row small { font-size: 9px !important; }
  .bet-editor {
    grid-template-columns: 42px 1fr 42px !important;
    gap: 7px !important;
    margin-top: 10px !important;
  }
  .bet-editor .square-button { min-height: 42px !important; font-size: 22px !important; }
  .bet-input-wrap input {
    height: 42px !important;
    padding: 0 34px !important;
    font-size: 15px !important;
  }
  .bet-input-icon { left: 10px !important; width: 17px !important; height: 17px !important; }
  .bet-presets { gap: 5px !important; margin-top: 8px !important; }
  .preset-button { min-height: 32px !important; padding: 5px 3px !important; font-size: 10px !important; }
  .apply-bet-button { height: 40px !important; margin-top: 8px !important; font-size: 11px !important; }

  .action-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .action-utility-controls {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    order: -1 !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 auto 10px !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
  }
  .utility-action-button,
  .auto-stand-value { height: 34px !important; min-height: 34px !important; font-size: 9px !important; }
  .utility-action-button { min-width: 82px !important; padding: 0 8px !important; }
  .auto-stand-shell { height: 34px !important; }
  .auto-stand-shell .auto-stand-value { width: 42px !important; min-width: 42px !important; }
  .auto-stand-shell .auto-stand-toggle { min-width: 136px !important; padding-inline: 8px !important; }
  .action-buttons {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .action-button {
    height: 66px !important;
    min-height: 66px !important;
    gap: 5px !important;
    font-size: 11px !important;
  }
  .action-button span { font-size: 18px !important; }
  .panel-choices .turn-message {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    min-height: 18px !important;
    margin: 10px 0 0 !important;
    font-size: 10px !important;
  }

  .last-hand-content {
    height: auto !important;
    min-height: 82px !important;
    margin-top: 7px !important;
    gap: 10px !important;
  }
  .last-hand-cards { min-width: 80px !important; }
  .last-hand-cards img { width: 38px !important; height: 52px !important; }
  .last-hand-cards img + img { margin-left: -23px !important; }
  .last-hand-result strong { font-size: 13px !important; }
  .last-hand-result span,
  .last-hand-empty { font-size: 10px !important; }

  /* ---------- Details / leaderboards ---------- */
  .left-rail,
  .right-rail {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: var(--mobile-content-width) !important;
    margin: 10px auto 0 !important;
    gap: 10px !important;
    z-index: 50 !important;
  }
  .left-rail { order: 5 !important; }
  .right-rail { order: 6 !important; }

  .panel-tabledetails,
  .panel-totalearnings,
  .panel-blackjacks {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 17px 16px 15px !important;
    transform: none !important;
    animation: none !important;
  }
  .panel-tabledetails { min-height: 330px !important; }
  .panel-totalearnings,
  .panel-blackjacks { min-height: 230px !important; }
  .panel-title-row h2 { font-size: 13px !important; }
  .live-pill { font-size: 9px !important; padding: 3px 6px !important; }
  .table-details div { padding: 8px 0 !important; gap: 8px !important; }
  .table-details dt { font-size: 11px !important; }
  .table-details dd { font-size: 12px !important; }
  .history-section { margin-top: 10px !important; }
  .history-count { min-width: 22px !important; height: 22px !important; font-size: 9px !important; }
  .history-list { height: 150px !important; margin-top: 8px !important; }
  .history-round-button { padding: 8px 7px !important; margin-bottom: 6px !important; }
  .history-round-button strong { font-size: 11px !important; }
  .history-round-button span { font-size: 9px !important; }
  .empty-copy { font-size: 10px !important; margin: 18px 6px !important; }

  .leaderboard-list {
    height: 190px !important;
    margin-top: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
  }
  .leaderboard-row {
    grid-template-columns: 27px minmax(0,1fr) auto !important;
    min-height: 31px !important;
    gap: 7px !important;
    padding: 4px 3px !important;
    font-size: 11px !important;
  }
  .leaderboard-rank,
  .leaderboard-name,
  .leaderboard-value,
  .panel-totalearnings .leaderboard-value { font-size: 10px !important; }

  /* ---------- Support block ---------- */
  .support-widget {
    position: relative !important;
    order: 7 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 390px) !important;
    height: auto !important;
    margin: 12px auto 6px !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 45 !important;
  }
  .support-widget .support-art,
  .support-widget .support-art-overlay {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .support-widget .support-art-overlay {
    position: absolute !important;
    inset: 0 !important;
  }
  .support-widget .support-actions {
    left: 6% !important;
    bottom: 13% !important;
    gap: 7px !important;
  }
  .support-widget .support-button {
    min-width: 138px !important;
    padding: 8px 9px !important;
    font-size: 10px !important;
  }

  /* ---------- History / general popups ---------- */
  .modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    padding: 12px !important;
    z-index: 1100 !important;
  }
  .modal-card {
    width: min(94vw, 520px) !important;
    max-height: 84dvh !important;
    padding: 14px !important;
  }
  .modal-header h2 { font-size: 16px !important; }
  .modal-close { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  .modal-body { max-height: calc(84dvh - 62px) !important; margin-top: 10px !important; }
  .modal-history-entry strong { font-size: 11px !important; }
  .modal-history-entry time { font-size: 9px !important; }
  .modal-history-entry p { font-size: 10px !important; }

  .toast-stack {
    position: fixed !important;
    top: calc(124px + env(safe-area-inset-top)) !important;
    width: min(92vw, 420px) !important;
    z-index: 1300 !important;
  }
  .toast { min-width: 0 !important; width: 100% !important; max-width: 100% !important; padding: 9px 11px !important; font-size: 10px !important; }

  /* ---------- Shop ---------- */
  .customize-modal-overlay {
    --shop-topbar-bottom: 0px !important;
    --shop-card-width: min(94vw, 720px) !important;
    --shop-card-half-width: min(47vw, 360px) !important;
    --shop-card-height: min(640px, calc(100dvh - 135px)) !important;
    --shop-frame-height: min(690px, calc(100dvh - 90px)) !important;
    --shop-side-art-width: min(21vw, 140px) !important;
    --shop-chain-width: min(108vw, 720px) !important;
    --shop-chain-height: clamp(110px, 39vw, 195px) !important;
    --shop-panel-top: clamp(88px, 23vw, 132px) !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    z-index: 1500 !important;
  }
  .customize-drop-assembly {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 0 170px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    pointer-events: auto !important;
  }
  .customize-shop-chains {
    top: -4px !important;
    left: 50% !important;
    width: var(--shop-chain-width) !important;
    height: var(--shop-chain-height) !important;
    max-width: none !important;
    object-fit: fill !important;
  }
  .customize-shop-panel-group {
    top: var(--shop-panel-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--shop-card-height) !important;
  }
  .customize-modal-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card,
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-card {
    width: var(--shop-card-width) !important;
    height: var(--shop-card-height) !important;
    min-height: 0 !important;
    max-height: var(--shop-card-height) !important;
    padding: 13px 12px 14px !important;
    overflow: hidden !important;
  }
  .customize-shop-side-art {
    top: 20px !important;
    width: var(--shop-side-art-width) !important;
    height: auto !important;
    max-height: 58% !important;
    opacity: .48 !important;
    filter: saturate(.86) brightness(.82) !important;
  }
  .customize-shop-side-art-left { left: -5vw !important; }
  .customize-shop-side-art-right { left: auto !important; right: -5vw !important; }

  .customize-modal-header {
    grid-template-columns: 36px minmax(0,1fr) 36px !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
  }
  .customize-back-button,
  .customize-modal-close { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
  .customize-modal-heading {
    gap: 6px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }
  .customize-modal-heading h2 { font-size: clamp(20px, 6vw, 27px) !important; }
  .customize-modal-kicker {
    max-width: 100% !important;
    font-size: 8px !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }
  .customize-balance {
    min-height: 40px !important;
    gap: 7px !important;
    font-size: 10px !important;
  }
  .customize-balance strong { font-size: 14px !important; }
  .customize-modal-content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 5px 2px 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .customize-category-grid { min-height: 240px !important; }
  .customize-category-card {
    width: min(76vw, 290px) !important;
    min-height: 185px !important;
    padding: 16px !important;
    gap: 9px !important;
  }
  .customize-category-preview { width: min(52vw, 205px) !important; }
  .customize-category-card strong { font-size: 20px !important; }
  .customize-category-card > span:last-child { font-size: 10px !important; }

  .customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
    top: -18px !important;
  }
  .customize-carousel-filter-row { min-height: 31px !important; flex-basis: 31px !important; }
  .customize-only-acquired-control { font-size: 9px !important; }
  .customize-carousel-viewport,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
    height: 184px !important;
    flex-basis: 184px !important;
    padding: 7px 1px 9px !important;
  }
  .customize-carousel-slide { padding-inline: 5px !important; }
  .customize-carousel-slide > .customize-item-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option
  ) {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    grid-template-rows: 62px auto 20px !important;
    padding: 10px 7px !important;
    gap: 4px !important;
  }
  .customize-item-card strong { font-size: 13px !important; }
  .customize-item-state { font-size: 8px !important; }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card .customize-price {
    font-size: 11px !important;
    gap: 4px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card .customize-price img {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }
  .customize-carousel-navigation,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
    min-height: 42px !important;
    flex-basis: 42px !important;
    gap: 20px !important;
  }
  .customize-carousel-arrow { width: 48px !important; height: 36px !important; font-size: 27px !important; }
  .customize-modal-overlay .customize-carousel-navigation::after,
  .customize-modal-overlay[data-shop-view="root"] .customize-balance::after {
    width: min(88vw, 520px) !important;
    font-size: 9px !important;
    white-space: normal !important;
  }

  .customize-purchase-dialog,
  .customize-owned-preview-dialog {
    padding: 12px !important;
  }
  .customize-purchase-panel,
  .customize-owned-preview-panel {
    width: min(88vw, 360px) !important;
    max-width: 88vw !important;
    padding: 18px 16px 16px !important;
  }
  .customize-purchase-title { font-size: 18px !important; }
  .customize-purchase-message { font-size: 11px !important; }
  .customize-purchase-actions { gap: 8px !important; flex-wrap: wrap !important; }
  .customize-purchase-actions button { min-width: 105px !important; min-height: 38px !important; }

  .customize-supporter-art {
    top: calc(var(--shop-card-height) + 10px) !important;
    left: 50% !important;
    width: min(92vw, 610px) !important;
    max-width: 92vw !important;
    transform: translateX(-50%) !important;
  }
  .customize-supporter-panel-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .customize-buy-coffee-image-button {
    right: clamp(28px, 12vw, 96px) !important;
    bottom: clamp(18px, 7vw, 48px) !important;
    width: 25% !important;
    max-width: 150px !important;
  }

  /* Never allow any Shop layer to create horizontal page scrolling. */
  .customize-modal-overlay,
  .customize-drop-assembly,
  .customize-shop-panel-group,
  .customize-modal-card,
  .customize-modal-content,
  .customize-section-shop,
  .customize-carousel,
  .customize-carousel-viewport { max-width: 100vw !important; }
}

/* Phone landscape gets a shorter 4-column seat field instead of becoming a
   desktop landscape canvas. This remains mobile-only and keeps every seat. */
@media (max-width: 980px) and (pointer: coarse) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .table-seats {
    height: 390px !important;
    min-height: 390px !important;
  }
  .table-seats > .player-seat {
    width: min(24vw, 205px) !important;
    max-width: 205px !important;
  }
  .table-seats > .player-seat:nth-child(1),
  .table-seats > .player-seat:nth-child(5) { left: 13% !important; }
  .table-seats > .player-seat:nth-child(2),
  .table-seats > .player-seat:nth-child(6) { left: 38% !important; }
  .table-seats > .player-seat:nth-child(3),
  .table-seats > .player-seat:nth-child(7) { left: 63% !important; }
  .table-seats > .player-seat:nth-child(4),
  .table-seats > .player-seat:nth-child(8) { left: 87% !important; }
  .table-seats > .player-seat:nth-child(-n+4) { top: 30% !important; }
  .table-seats > .player-seat:nth-child(n+5) { top: 74% !important; }

  .player-seat:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque,
  .player-seat.is-self:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
    min-width: 94px !important;
    max-width: min(20vw, 150px) !important;
  }
  .player-seat .playing-card,
  .player-seat .hidden-card,
  .player-seat:not(.is-self) .playing-card,
  .player-seat:not(.is-self) .hidden-card { width: 38px !important; height: 52px !important; }
  .player-seat.is-self .playing-card,
  .player-seat.is-self .hidden-card { width: 41px !important; height: 56px !important; }
  .player-seat > .seat-chip-zone { transform: translateX(-50%) scale(.82) !important; }

  .customize-modal-overlay {
    --shop-panel-top: 82px !important;
    --shop-card-height: calc(100dvh - 98px) !important;
    --shop-frame-height: calc(100dvh - 55px) !important;
    --shop-chain-height: 115px !important;
  }
  .customize-supporter-art { top: calc(var(--shop-card-height) + 8px) !important; }
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE-ONLY REFINEMENT PASS                                  */
/* Desktop remains untouched.                                                  */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  /* On phones only the current player's seat is useful. Keep the dealer area,
     hide every remote player seat, and use the freed table space for a clearer
     self seat. */
  .table-seats {
    height: 300px !important;
    min-height: 300px !important;
  }
  .table-seats > .player-seat:not(.is-self) {
    display: none !important;
  }
  .table-seats > .player-seat.is-self {
    display: block !important;
    left: 50% !important;
    top: 72% !important;
    width: min(78vw, 330px) !important;
    max-width: 330px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 42 !important;
  }
  .player-seat.is-self:not(.customize-purchase-seat-preview):not(.customize-effect-preview-seat) > .seat-plaque {
    min-width: 132px !important;
    max-width: min(48vw, 190px) !important;
  }
  .player-seat.is-self .playing-card,
  .player-seat.is-self .hidden-card {
    width: 54px !important;
    height: 74px !important;
  }
  .player-seat.is-self .hand-cards > * + * {
    margin-left: -35px !important;
  }

  /* The deck was sitting underneath the sticky top bar. Put it in the clear
     center-table area created by hiding remote seats. */
  .shoe,
  .shoe.is-parked {
    left: 50% !important;
    top: 330px !important;
  }
  .shoe {
    width: 78px !important;
    height: 98px !important;
  }
  .shoe-card {
    width: 38px !important;
    height: 52px !important;
  }

  /* background2.png: keep the exact mobile anchor, only enlarge the artwork. */
  .game-background-overlay {
    left: 50% !important;
    top: 150px !important;
    width: min(58vw, 300px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
  }

  /* Choice controls need to be touch-sized and visually substantial. */
  .panel-choices {
    min-height: 300px !important;
  }
  .action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .action-button {
    height: 88px !important;
    min-height: 88px !important;
    padding: 10px 8px !important;
    gap: 7px !important;
    font-size: 14px !important;
    letter-spacing: .045em !important;
  }
  .action-button span {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* The mobile Shop must render above the dedicated game blur layer. The old
     mobile z-index placed the Shop underneath .customize-page-blur (10030),
     which blurred the Shop itself. */
  .customize-modal-overlay {
    z-index: 10040 !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .customize-drop-assembly,
  .customize-shop-panel-group,
  .customize-modal-card,
  .customize-modal-header,
  .customize-modal-content,
  .customize-section-shop,
  .customize-carousel,
  .customize-carousel-viewport,
  .customize-category-grid,
  .customize-category-card {
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Root Shop category names were disproportionately large on phones. */
  .customize-category-card strong {
    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: .02em !important;
  }

  /* Keep price + gil.png on one horizontal line in every item section. */
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    gap: 5px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price > span {
    display: inline-block !important;
    white-space: nowrap !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price img {
    display: block !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }

  /* Section windows were inheriting a desktop-oriented 640px height while only
     ~94vw wide, vertically stretching shopsectionsborder/shopsectionsfill.
     Keep the same artwork and content, but use a compact mobile window and let
     the existing content area handle overflow internally. */
  .customize-modal-overlay:not([data-shop-view="root"]) {
    --shop-card-height: min(390px, calc(100dvh - 132px)) !important;
    --shop-frame-height: calc(var(--shop-card-height) + 46px) !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card {
    height: var(--shop-card-height) !important;
    min-height: var(--shop-card-height) !important;
    max-height: var(--shop-card-height) !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* The earlier landscape block re-expanded the full eight-seat field. Keep the
   same phone behavior in landscape: dealer + own seat only. */
@media (max-width: 980px) and (pointer: coarse) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .table-seats {
    height: 260px !important;
    min-height: 260px !important;
  }
  .table-seats > .player-seat:not(.is-self) {
    display: none !important;
  }
  .table-seats > .player-seat.is-self {
    display: block !important;
    left: 50% !important;
    top: 70% !important;
    width: min(48vw, 320px) !important;
    max-width: 320px !important;
    transform: translate(-50%, -50%) !important;
  }
  .shoe,
  .shoe.is-parked {
    left: 50% !important;
    top: 250px !important;
  }
  .panel-choices {
    min-height: 275px !important;
  }
  .action-button {
    height: 78px !important;
    min-height: 78px !important;
    font-size: 13px !important;
  }
  .action-button span {
    font-size: 22px !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE-ONLY COMPACTNESS CORRECTION                           */
/* Desktop is intentionally untouched.                                        */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  /* Choice panel: the old desktop width (7.6cqw) was still constraining each
     button on phones. Fill each grid cell horizontally and reduce only the
     unnecessary vertical bulk of the panel. */
  .panel-choices {
    min-height: 238px !important;
    padding-top: 11px !important;
    padding-bottom: 10px !important;
  }
  .action-panel .action-buttons,
  .panel-choices .action-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }
  .action-panel .action-button,
  .panel-choices .action-button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 7px 10px !important;
    gap: 4px !important;
    font-size: 13px !important;
  }
  .action-panel .action-button span,
  .panel-choices .action-button span {
    font-size: 21px !important;
  }
  .action-utility-controls {
    margin-bottom: 7px !important;
  }
  .panel-choices .turn-message {
    margin-top: 7px !important;
  }

  /* background2.png: step back from the previous 58vw enlargement, while
     remaining clearly larger than the first mobile pass. Anchor is unchanged. */
  .game-background-overlay {
    width: min(53vw, 275px) !important;
  }

  /* Shop: preserve the desktop artwork proportions much more closely instead
     of forcing a tall phone-shaped frame. All content is compacted inside the
     existing window; no desktop rule is changed. */
  .customize-modal-overlay {
    --shop-card-width: min(94vw, 720px) !important;
    --shop-card-height: min(68vw, 300px, calc(100dvh - 165px)) !important;
    --shop-frame-height: calc(var(--shop-card-height) + 34px) !important;
  }
  .customize-shop-panel-group {
    min-height: var(--shop-card-height) !important;
    height: var(--shop-card-height) !important;
  }
  .customize-modal-card,
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card {
    height: var(--shop-card-height) !important;
    min-height: var(--shop-card-height) !important;
    max-height: var(--shop-card-height) !important;
    padding: 10px 10px 10px !important;
  }
  .customize-modal-header {
    grid-template-columns: 32px minmax(0,1fr) 32px !important;
    min-height: 34px !important;
    padding-bottom: 4px !important;
    gap: 5px !important;
  }
  .customize-back-button,
  .customize-modal-close {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .customize-modal-heading h2 {
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.05 !important;
  }
  .customize-modal-kicker {
    font-size: 7px !important;
    line-height: 1.05 !important;
  }
  .customize-balance {
    min-height: 31px !important;
    padding-block: 2px !important;
    font-size: 9px !important;
  }
  .customize-balance strong {
    font-size: 12px !important;
  }
  .customize-modal-content {
    padding: 2px 1px 1px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Root/category view. */
  .customize-category-grid {
    min-height: 150px !important;
  }
  .customize-category-card {
    width: min(72vw, 270px) !important;
    min-height: 128px !important;
    height: 128px !important;
    padding: 9px 11px !important;
    gap: 5px !important;
  }
  .customize-category-preview {
    width: min(39vw, 150px) !important;
    max-height: 72px !important;
  }
  .customize-category-card strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }
  .customize-category-card > span:last-child {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  /* Item sections: reduce the vertical reservations together so the frame,
     carousel and item slots keep the same compact organization. */
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
    top: -8px !important;
  }
  .customize-carousel-filter-row {
    min-height: 24px !important;
    flex-basis: 24px !important;
  }
  .customize-carousel-viewport,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
    height: 130px !important;
    flex-basis: 130px !important;
    padding: 4px 1px 5px !important;
  }
  .customize-carousel-slide > .customize-item-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option,
    .customize-effect-option
  ) {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    grid-template-rows: 49px auto 18px !important;
    padding: 7px 6px !important;
    gap: 2px !important;
  }
  .customize-item-card strong {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }
  .customize-item-state {
    font-size: 7px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    flex-basis: 15px !important;
  }
  .customize-carousel-navigation,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
    min-height: 31px !important;
    flex-basis: 31px !important;
    gap: 17px !important;
  }
  .customize-carousel-arrow {
    width: 44px !important;
    height: 30px !important;
    font-size: 23px !important;
  }
  .customize-modal-overlay .customize-carousel-navigation::after,
  .customize-modal-overlay[data-shop-view="root"] .customize-balance::after {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  /* The PNG frame/fill still cover the whole card, but now use the compact
     card proportions above instead of the previous tall mobile rectangle. */
  .customize-modal-card::before,
  .customize-modal-card::after,
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
    background-size: 100% 100% !important;
  }
}

/* Keep the same compact Shop and choice controls on phone landscape; the older
   landscape overrides must not re-expand them vertically. */
@media (max-width: 980px) and (pointer: coarse) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .panel-choices {
    min-height: 222px !important;
  }
  .action-panel .action-button,
  .panel-choices .action-button {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
  }
  .customize-modal-overlay {
    --shop-card-height: min(66vh, 290px) !important;
    --shop-frame-height: calc(var(--shop-card-height) + 30px) !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE-ONLY SHOP RESTORATION + BACKGROUND2 REDUCTION          */
/* Desktop remains untouched.                                                  */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  /* background2.png: reduce it again, while keeping the same mobile anchor. */
  .game-background-overlay {
    width: min(47vw, 245px) !important;
  }

  /* Restore a coherent Shop layout instead of squeezing/cropping every child.
     The frame is allowed to render outside the card again, while only the
     inner content area handles vertical overflow. */
  .customize-modal-overlay {
    --shop-card-width: min(94vw, 720px) !important;
    --shop-card-height: min(330px, calc(100dvh - 145px)) !important;
    --shop-frame-height: calc(var(--shop-card-height) + 46px) !important;
  }
  .customize-shop-panel-group {
    height: var(--shop-card-height) !important;
    min-height: var(--shop-card-height) !important;
  }
  .customize-modal-card,
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card {
    width: var(--shop-card-width) !important;
    height: var(--shop-card-height) !important;
    min-height: var(--shop-card-height) !important;
    max-height: var(--shop-card-height) !important;
    padding: 13px 12px 14px !important;
    overflow: visible !important;
  }
  .customize-modal-card::before,
  .customize-modal-card::after,
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-card::after,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-card::after {
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .customize-modal-header {
    grid-template-columns: 34px minmax(0,1fr) 34px !important;
    min-height: 38px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
  }
  .customize-back-button,
  .customize-modal-close {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  .customize-modal-heading h2 {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.05 !important;
  }
  .customize-modal-kicker {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  .customize-balance {
    min-height: 34px !important;
    padding-block: 3px !important;
    font-size: 9px !important;
  }
  .customize-balance strong {
    font-size: 13px !important;
  }
  .customize-modal-content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 4px 2px 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Root/category cards: restore readable proportions without returning to the
     previous oversized mobile layout. */
  .customize-category-grid {
    min-height: 178px !important;
  }
  .customize-category-card {
    width: min(74vw, 280px) !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 11px 12px !important;
    gap: 6px !important;
  }
  .customize-category-preview {
    width: min(43vw, 165px) !important;
    max-height: 86px !important;
  }
  .customize-category-card strong {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }
  .customize-category-card > span:last-child {
    font-size: 8px !important;
    line-height: 1.08 !important;
  }

  /* Item sections: restore enough vertical room for previews and labels so the
     elements no longer collide after the last aggressive compacting pass. */
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
    top: -12px !important;
  }
  .customize-carousel-filter-row {
    min-height: 27px !important;
    flex-basis: 27px !important;
  }
  .customize-carousel-viewport,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
    height: 160px !important;
    flex-basis: 160px !important;
    padding: 6px 1px 7px !important;
  }
  .customize-carousel-slide > .customize-item-card,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option,
    .customize-effect-option
  ) {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    grid-template-rows: 58px auto 20px !important;
    padding: 9px 7px !important;
    gap: 3px !important;
  }
  .customize-item-card strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
  .customize-item-state {
    font-size: 8px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    gap: 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"])
    .customize-carousel-slide > .customize-item-card .customize-price img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex-basis: 16px !important;
  }
  .customize-carousel-navigation,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
    min-height: 38px !important;
    flex-basis: 38px !important;
    gap: 18px !important;
  }
  .customize-carousel-arrow {
    width: 46px !important;
    height: 33px !important;
    font-size: 25px !important;
  }
}

@media (max-width: 980px) and (pointer: coarse) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .game-background-overlay {
    width: min(38vw, 235px) !important;
  }
  .customize-modal-overlay {
    --shop-card-height: min(310px, calc(100dvh - 100px)) !important;
    --shop-frame-height: calc(var(--shop-card-height) + 42px) !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE SHOP PROPORTION / SPACING CORRECTION                   */
/* Desktop remains completely untouched.                                      */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  /* background2.png: reduce substantially from the previous mobile pass while
     preserving its existing anchor/position. */
  .game-background-overlay {
    width: min(32vw, 165px) !important;
  }

  /* Give the Shop heading, subtitle and balance actual vertical breathing room
     instead of inheriting the desktop one-line heading arrangement. */
  .customize-modal-header {
    min-height: 58px !important;
    padding-top: 3px !important;
    padding-bottom: 8px !important;
    gap: 7px !important;
  }
  .customize-modal-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: normal !important;
    line-height: 1 !important;
  }
  .customize-modal-heading h2 {
    margin: 0 !important;
    line-height: 1.05 !important;
  }
  .customize-modal-heading .customize-modal-kicker {
    margin: 0 !important;
    line-height: 1.22 !important;
    max-width: min(76vw, 520px) !important;
    white-space: normal !important;
  }
  .customize-balance {
    min-height: 38px !important;
    margin-top: 5px !important;
    margin-bottom: 6px !important;
    padding-block: 3px !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-balance {
    margin-bottom: 22px !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-balance::after {
    top: calc(100% + 1px) !important;
    line-height: 1.25 !important;
  }

  /* Two cards per page on phones. app.js now also calculates the carousel
     geometry with visibleCount=2, preventing tall/narrow stretched slots. */
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-viewport {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    flex: 0 0 154px !important;
    padding: 6px 0 7px !important;
    overflow: hidden !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track,
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping,
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-next,
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-track.is-looping.is-moving-prev {
    height: 140px !important;
    min-height: 140px !important;
    align-items: stretch !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-slide {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    padding: 0 6px !important;
    align-items: stretch !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-card {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    padding: 8px 8px !important;
    gap: 4px !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-preview {
    width: min(34vw, 138px) !important;
    height: 68px !important;
    max-height: 68px !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-preview img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-card strong {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-category-card > span:last-child {
    font-size: 7px !important;
    line-height: 1.12 !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-root-category-carousel .customize-carousel-navigation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    margin-top: 4px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 80 !important;
  }
  .customize-modal-overlay[data-shop-view="root"] .customize-modal-content {
    overflow: visible !important;
    padding-top: 2px !important;
  }

  /* Item pages: keep cards compact and proportionate instead of tall/narrow.
     The two-column JS geometry gives them enough width without stretching. */
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-section-shop {
    top: -5px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-filter-row {
    min-height: 25px !important;
    flex-basis: 25px !important;
    padding-bottom: 4px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-viewport {
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    flex-basis: 146px !important;
    padding: 6px 0 !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide {
    padding-inline: 5px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card:is(
    .customize-slot-option,
    .customize-nameplate-option,
    .customize-border-option,
    .customize-badge-option,
    .customize-name-effect-option,
    .customize-effect-option
  ),
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    grid-template-rows: 58px minmax(24px, auto) 19px !important;
    padding: 7px 7px !important;
    gap: 2px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card > .customize-item-preview {
    height: 58px !important;
    max-height: 58px !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-slide > .customize-item-card > .customize-item-preview > img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 58px !important;
    object-fit: contain !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-nameplate-preview,
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-border-preview {
    width: min(100%, 138px) !important;
    height: 46px !important;
    max-height: 46px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-border-preview img {
    object-fit: contain !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-badge-preview {
    width: min(100%, 118px) !important;
    height: 58px !important;
    max-height: 58px !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-carousel-navigation {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin-top: 5px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 80 !important;
  }
  .customize-modal-overlay:not([data-shop-view="root"]) .customize-modal-content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-top: 3px !important;
  }
}

@media (max-width: 980px) and (pointer: coarse) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  .game-background-overlay {
    width: min(25vw, 155px) !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — MOBILE ONLY: remove background2/ambient lights and move the   */
/* dealer-turn cue to a restrained golden glow under the top bar.             */
/* Desktop remains untouched.                                                 */
/* ========================================================================== */
@media (max-width: 900px), (max-width: 980px) and (pointer: coarse) {
  /* background2.png and every dealer glow layer derived from it are removed
     entirely on mobile. */
  .game-background-overlay,
  .dealer-background-glow-layer,
  .dealer-background-glow-image {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    filter: none !important;
  }

  /* Remove the two free-floating decorative lights from the mobile table. */
  .ambient-glow,
  .ambient-glow-blue,
  .ambient-glow-gold {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Ensure no old pseudo-layer can recreate background2 during dealer turns. */
  .game-shell::before {
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  /* Normal mobile top bar stays unchanged outside the dealer turn. */
  .topbar {
    box-shadow: none;
  }

  /* Dealer turn: a soft gold light is emitted only from the lower edge of the
     top bar. It stays compact and fades before reaching far into the table. */
  .game-shell.is-dealer-turn-active .topbar,
  .game-stage.is-dealer-turn-active .topbar {
    animation: mobile-dealer-topbar-gold-glow 3.6s ease-in-out infinite !important;
  }

  @keyframes mobile-dealer-topbar-gold-glow {
    0%, 100% {
      box-shadow:
        inset 0 -1px 0 rgba(255, 226, 142, .24),
        0 5px 9px -6px rgba(255, 209, 92, .28),
        0 10px 18px -11px rgba(238, 172, 49, .18);
    }
    50% {
      box-shadow:
        inset 0 -1px 0 rgba(255, 236, 176, .44),
        0 6px 11px -5px rgba(255, 216, 113, .42),
        0 13px 22px -10px rgba(238, 174, 51, .26);
    }
  }
}

/* ========================================================================== */
/* 2026-08-07 — UNIFIED LOWER-DESKTOP ART FIT + COFFER-HALL SLIT TRANSITION   */
/* ========================================================================== */

/* Support-art transition copied from the Coffer Hall rotating-title effect:
   a thin horizontal golden slit opens while the old image blurs/disintegrates,
   then the new image materializes while the slit closes. No circular beam and
   no particle canvas are used. Falling coin canvases are untouched. */
.support-widget .support-art-transition-canvas {
  display: none !important;
}
.support-widget .support-art-transition-beam {
  position: absolute !important;
  z-index: 3 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(112%, 520px) !important;
  height: 3px !important;
  opacity: 0;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scaleX(.015) !important;
  transform-origin: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,196,103,.04) 14%,
    rgba(255,224,145,.34) 40%,
    rgba(255,250,221,.92) 50%,
    rgba(255,224,145,.34) 60%,
    rgba(232,196,103,.04) 86%,
    transparent 100%) !important;
  box-shadow:
    0 0 7px rgba(255,244,203,.62),
    0 0 20px rgba(232,196,103,.32),
    0 0 42px rgba(232,196,103,.16) !important;
  filter: blur(.15px);
  will-change: opacity, transform, filter;
}
.support-widget .support-art-transition-beam::before {
  content: '' !important;
  position: absolute !important;
  inset: 50% 9% auto !important;
  height: clamp(34px, 5vw, 78px) !important;
  transform: translateY(-50%) !important;
  border-radius: 0 !important;
  background: radial-gradient(ellipse at center,
    rgba(255,232,164,.17),
    rgba(232,196,103,.055) 38%,
    transparent 72%) !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
}
.support-widget.is-support-transition-out .support-art-transition-beam {
  animation: supportLightSlitOpen .48s cubic-bezier(.22,.78,.3,1) forwards !important;
}
.support-widget.is-support-transition-in .support-art-transition-beam {
  animation: supportLightSlitClose .65s cubic-bezier(.42,0,.24,1) forwards !important;
}
@keyframes supportLightSlitOpen {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scaleX(.015) scaleY(.55); filter: blur(1.3px); }
  36%  { opacity: .56; transform: translate(-50%,-50%) scaleX(.48) scaleY(1);    filter: blur(.25px); }
  100% { opacity: .72; transform: translate(-50%,-50%) scaleX(1) scaleY(1.12);   filter: blur(0); }
}
@keyframes supportLightSlitClose {
  0%   { opacity: .72; transform: translate(-50%,-50%) scaleX(1) scaleY(1.12);   filter: blur(0); }
  58%  { opacity: .34; transform: translate(-50%,-50%) scaleX(.34) scaleY(.88);  filter: blur(.5px); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scaleX(.015) scaleY(.5);  filter: blur(1.8px); }
}

/* Use independent translate/scale longhands so support2/slidebadge can keep the
   existing JS floating transform while the transition is playing. */
.support-widget.is-support-transition-out .support-art {
  animation: supportArtDisintegrateOut .48s cubic-bezier(.55,.04,.84,.34) forwards !important;
}
.support-widget.is-support-transition-in .support-art {
  animation: supportArtMaterializeIn .65s cubic-bezier(.16,.84,.3,1) forwards !important;
}
@keyframes supportArtDisintegrateOut {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1);
    translate: 0 0;
    scale: 1;
  }
  45% {
    opacity: .56;
    filter: blur(3px) saturate(.72);
    translate: 0 -2px;
    scale: 1.012;
  }
  100% {
    opacity: 0;
    filter: blur(13px) saturate(.15);
    translate: 0 -9px;
    scale: 1.045;
  }
}
@keyframes supportArtMaterializeIn {
  0% {
    opacity: 0;
    filter: blur(13px) saturate(.2);
    translate: 0 9px;
    scale: .965;
  }
  62% {
    opacity: .9;
    filter: blur(1.5px) saturate(.9);
    translate: 0 -1px;
    scale: 1.006;
  }
  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    translate: 0 0;
    scale: 1;
  }
}
.support-widget .support-coins-back { z-index: 0 !important; }
.support-widget .support-art:not(.support-art-overlay) { z-index: 1 !important; }
.support-widget .support-art-overlay { z-index: 2 !important; }
.support-widget .support-art-transition-beam { z-index: 3 !important; }
.support-widget .support-coins-front { z-index: 4 !important; }
.support-widget .support-actions { z-index: 5 !important; }

/* Desktop below the 1920x1080 reference canvas. All independent artwork uses
   one uniform reference scale, while background2 is mapped through the actual
   object-fit:cover crop of background.png. This prevents correct-sized images
   from drifting vertically in tall/narrow desktop windows. */
@media (min-width: 901px) and (max-width: 1919px),
       (min-width: 901px) and (max-height: 1079px) {
  .game-background-overlay {
    left: var(--desktop-bg2-left, calc(50% + 8px)) !important;
    top: var(--desktop-bg2-top, 167px) !important;
    width: var(--desktop-bg2-width, 125px) !important;
    height: var(--desktop-bg2-height, 21.7143px) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
    transform-origin: center center !important;
    object-fit: fill !important;
  }

  .chains-decoration,
  .chains-decoration-left {
    top: var(--desktop-chain-top, 65px) !important;
    width: max-content !important;
    height: max-content !important;
  }
  .chains-decoration {
    right: var(--desktop-chain-side-offset, 19.2px) !important;
    left: auto !important;
  }
  .chains-decoration-left {
    left: var(--desktop-chain-side-offset, 19.2px) !important;
    right: auto !important;
  }
  .chains-swing-image,
  .chains-fixed-top img {
    width: var(--desktop-chain-width, 412px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .chains-fixed-top {
    height: var(--desktop-chain-cap, 42px) !important;
  }
  .chains-swing-image {
    clip-path: inset(var(--desktop-chain-cap, 42px) 0 0 0) !important;
    transform-origin: 50% var(--desktop-chain-cap, 42px) !important;
  }
  .chains-decoration-left .chains-swing-image,
  .chains-decoration-left .chains-fixed-top img,
  .chains-decoration .chains-swing-image,
  .chains-decoration .chains-fixed-top img {
    transform-origin: 50% var(--desktop-chain-cap, 42px) !important;
  }

  /* Keep the support illustration above the bottom HUD when the available
     desktop canvas forces the two areas to overlap. */
  .support-widget {
    right: var(--desktop-support-right, 19.2px) !important;
    bottom: var(--desktop-support-bottom, 12.96px) !important;
    z-index: 56 !important;
  }
  .support-widget .support-actions {
    bottom: var(--desktop-support-actions-bottom, 71.34px) !important;
  }

  .player-seat .seat-circle-backdrop {
    top: calc(50% + var(--desktop-seat-circle-offset, 20px)) !important;
  }
  .player-seat .seat-circle-image {
    width: var(--desktop-seat-circle-width, 209px) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .player-seat > .seat-plaque,
  .player-seat > .seat-hands-wrap,
  .player-seat .hand-score {
    transform: translateY(var(--desktop-seat-content-lift, -35px)) !important;
  }
  .player-seat > .seat-chip-zone {
    top: calc(50% + var(--desktop-seat-chip-top, 14px)) !important;
    width: var(--desktop-seat-chip-width-area, 238px) !important;
    height: var(--desktop-seat-chip-height-area, 104px) !important;
  }
  .player-seat > .seat-chip-zone .seat-chip {
    width: var(--desktop-seat-chip-width, 39px) !important;
    max-width: var(--desktop-seat-chip-width, 39px) !important;
    bottom: var(--desktop-seat-chip-bottom, 5px) !important;
  }
  .player-seat > .seat-bet-display,
  .player-seat:not(.is-self) > .seat-bet-display,
  .player-seat.is-dealer-overview > .seat-bet-display {
    top: calc(50% + var(--desktop-seat-bet-offset, 121px)) !important;
  }
  .player-seat > .seat-bet-display img {
    width: var(--desktop-seat-bet-gil-size, 18px) !important;
    height: var(--desktop-seat-bet-gil-size, 18px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .table-pot-layer .pot-chip {
    width: var(--desktop-pot-chip-width, 48px) !important;
  }

  .ambient-glow-blue {
    left: var(--desktop-glow-blue-left, 201.72px) !important;
    top: var(--desktop-glow-blue-top, 840.6px) !important;
    width: var(--desktop-glow-blue-size, 136px) !important;
    height: var(--desktop-glow-blue-size, 136px) !important;
    filter: blur(var(--desktop-glow-blue-blur, 11px)) !important;
  }
  .ambient-glow-gold {
    left: var(--desktop-glow-gold-left, 341px) !important;
    top: var(--desktop-glow-gold-top, 130.72px) !important;
    width: var(--desktop-glow-gold-size, 126px) !important;
    height: var(--desktop-glow-gold-size, 126px) !important;
    filter: blur(var(--desktop-glow-gold-blur, 11px)) !important;
  }
}

/* Mobile keeps the existing mobile layout and uses the same slit transition,
   scaled inside the responsive support block. */
@media (max-width: 900px) {
  .support-widget .support-art-transition-beam {
    width: 112% !important;
    max-width: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-widget.is-support-transition-out .support-art-transition-beam,
  .support-widget.is-support-transition-in .support-art-transition-beam,
  .support-widget.is-support-transition-out .support-art,
  .support-widget.is-support-transition-in .support-art {
    animation-duration: .01ms !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — LOWER DESKTOP ART GEOMETRY: GROUP-LEVEL RESPONSIVE FIT        */
/* ========================================================================== */
/* This final block supersedes the previous per-image lower-desktop overrides.
   Desktop >=1920x1080 and every mobile rule remain unchanged. */
@media (min-width: 901px) and (max-width: 1919px),
       (min-width: 901px) and (max-height: 1079px) {
  /* background2 is now mapped to the exact source rectangle of the DEALER word
     inside background.png by JS, so it remains glued to the artwork crop. */
  .game-background-overlay {
    left: var(--desktop-bg2-left) !important;
    top: var(--desktop-bg2-top) !important;
    width: var(--desktop-bg2-width) !important;
    height: var(--desktop-bg2-height) !important;
    max-width: none !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
    object-fit: fill !important;
  }

  /* Scale each complete hanging-chain assembly instead of resizing the PNG
     separately from its clipped cap/swing geometry. */
  .chains-decoration,
  .chains-decoration-left {
    top: var(--desktop-chain-top, 65px) !important;
    width: max-content !important;
    height: max-content !important;
    scale: var(--desktop-art-scale, 1) !important;
    transform-origin: 50% 0 !important;
  }
  .chains-decoration {
    right: var(--desktop-chain-side-offset, 19.2px) !important;
    left: auto !important;
  }
  .chains-decoration-left {
    left: var(--desktop-chain-side-offset, 19.2px) !important;
    right: auto !important;
  }
  .chains-swing-image,
  .chains-fixed-top img {
    width: 412px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .chains-fixed-top {
    height: 42px !important;
  }
  .chains-swing-image {
    clip-path: inset(42px 0 0 0) !important;
    transform-origin: 50% 42px !important;
  }
  .chains-decoration-left .chains-swing-image,
  .chains-decoration-left .chains-fixed-top img,
  .chains-decoration .chains-swing-image,
  .chains-decoration .chains-fixed-top img {
    transform-origin: 50% 42px !important;
  }

  /* Keep support.png/support2.png (and the rotating pair) in one local 413px
     artwork coordinate system. Coins/buttons/slit scale with the art instead
     of being left behind when the viewport gets narrow. */
  .support-widget {
    right: var(--desktop-support-right, 19.2px) !important;
    bottom: var(--desktop-support-bottom, 12.96px) !important;
    scale: var(--desktop-art-scale, 1) !important;
    transform-origin: 100% 100% !important;
    z-index: 56 !important;
  }
  .support-widget .support-actions {
    bottom: var(--desktop-support-actions-bottom, 71.34px) !important;
  }

  /* circleslot + slot VFX are one group. Do not independently resize only the
     base PNG, which was what caused layers to separate on narrow desktops. */
  .player-seat > .seat-circle-backdrop {
    top: calc(50% + var(--desktop-seat-circle-offset, 20px)) !important;
    width: max-content !important;
    height: max-content !important;
    scale: var(--desktop-art-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }
  .player-seat .seat-circle-image,
  .player-seat .seat-circle-effect {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* The complete real-chip area scales as one unit. This preserves the exact
     denomination spacing and prevents the chips from drifting outside the slot. */
  .player-seat > .seat-chip-zone {
    top: calc(50% + var(--desktop-seat-chip-top, 14px)) !important;
    width: 238px !important;
    height: 104px !important;
    scale: var(--desktop-art-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }
  .player-seat > .seat-chip-zone .seat-chip {
    width: 39px !important;
    max-width: 39px !important;
    bottom: 5px !important;
  }

  .player-seat > .seat-plaque,
  .player-seat > .seat-hands-wrap,
  .player-seat .hand-score {
    transform: translateY(var(--desktop-seat-content-lift, -35px)) !important;
  }
  .player-seat > .seat-bet-display,
  .player-seat:not(.is-self) > .seat-bet-display,
  .player-seat.is-dealer-overview > .seat-bet-display {
    top: calc(50% + var(--desktop-seat-bet-offset, 121px)) !important;
  }

  /* Pot chips also keep their 48px authored geometry and scale as complete
     sprites. Flight calculations use their transformed bounding boxes. */
  .table-pot-layer .pot-chip {
    width: 48px !important;
    scale: var(--desktop-art-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }

  .ambient-glow-blue {
    left: var(--desktop-glow-blue-left, 201.72px) !important;
    top: var(--desktop-glow-blue-top, 840.6px) !important;
    width: var(--desktop-glow-blue-size, 136px) !important;
    height: var(--desktop-glow-blue-size, 136px) !important;
    filter: blur(var(--desktop-glow-blue-blur, 11px)) !important;
  }
  .ambient-glow-gold {
    left: var(--desktop-glow-gold-left, 341px) !important;
    top: var(--desktop-glow-gold-top, 130.72px) !important;
    width: var(--desktop-glow-gold-size, 126px) !important;
    height: var(--desktop-glow-gold-size, 126px) !important;
    filter: blur(var(--desktop-glow-gold-blur, 11px)) !important;
  }
}

/* ========================================================================== */
/* 2026-08-07 — FINAL CONTINUOUS DESKTOP ART FIT                              */
/* ========================================================================== */
/*
   Desktop artwork is no longer tuned per resolution. JavaScript exposes one
   continuous scale derived from the current visual viewport and the original
   large-desktop art canvas. Every loose image group scales around its own
   logical anchor, so left artwork stays attached to the left edge, right art
   stays attached to the right edge, and centered art stays centered.
*/
@media (min-width: 901px) {
  html.is-desktop-responsive-fit .chains-decoration,
  html.is-desktop-responsive-fit .chains-decoration-left {
    top: 65px !important;
    width: max-content !important;
    height: max-content !important;
    scale: var(--desktop-art-fit-scale, 1) !important;
  }
  html.is-desktop-responsive-fit .chains-decoration {
    right: 1cqw !important;
    left: auto !important;
    transform-origin: 100% 0 !important;
  }
  html.is-desktop-responsive-fit .chains-decoration-left {
    left: 1cqw !important;
    right: auto !important;
    transform-origin: 0 0 !important;
  }
  html.is-desktop-responsive-fit .chains-swing-image,
  html.is-desktop-responsive-fit .chains-fixed-top img {
    width: 412px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  html.is-desktop-responsive-fit .chains-fixed-top {
    height: 42px !important;
  }
  html.is-desktop-responsive-fit .chains-swing-image {
    clip-path: inset(42px 0 0 0) !important;
    transform-origin: 50% 42px !important;
  }

  /* support.png/support2.png/support3.png/slidebadge.png + coins + buttons are
     one anchored object. Child images keep their own natural dimensions. */
  html.is-desktop-responsive-fit .support-widget {
    right: 1cqw !important;
    bottom: 1.2cqh !important;
    scale: var(--desktop-art-fit-scale, 1) !important;
    transform-origin: 100% 100% !important;
    z-index: 56 !important;
  }
  html.is-desktop-responsive-fit .support-widget .support-art {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  html.is-desktop-responsive-fit .support-widget .support-actions {
    bottom: 71.34px !important;
  }

  /* chains2.png remains centered on its music label while shrinking as one
     sprite, rather than changing its center coordinate. */
  html.is-desktop-responsive-fit .current-music-chains {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -100%) scale(var(--desktop-art-fit-scale, 1)) !important;
    transform-origin: 50% 100% !important;
  }

  /* Player pixel artwork scales locally around the responsive seat center. */
  html.is-desktop-responsive-fit .player-seat > .seat-circle-backdrop {
    top: calc(50% + var(--desktop-seat-circle-offset, 20px)) !important;
    width: max-content !important;
    height: max-content !important;
    scale: var(--desktop-art-fit-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }
  html.is-desktop-responsive-fit .player-seat .seat-circle-image,
  html.is-desktop-responsive-fit .player-seat .seat-circle-effect {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  html.is-desktop-responsive-fit .player-seat > .seat-chip-zone {
    top: calc(50% + var(--desktop-seat-chip-top, 14px)) !important;
    width: 238px !important;
    height: 104px !important;
    scale: var(--desktop-art-fit-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }
  html.is-desktop-responsive-fit .player-seat > .seat-chip-zone .seat-chip {
    width: 39px !important;
    max-width: 39px !important;
    bottom: 5px !important;
  }
  html.is-desktop-responsive-fit .player-seat > .seat-plaque,
  html.is-desktop-responsive-fit .player-seat > .seat-hands-wrap,
  html.is-desktop-responsive-fit .player-seat .hand-score {
    transform: translateY(var(--desktop-seat-content-lift, -35px)) !important;
  }
  html.is-desktop-responsive-fit .player-seat > .seat-bet-display,
  html.is-desktop-responsive-fit .player-seat:not(.is-self) > .seat-bet-display,
  html.is-desktop-responsive-fit .player-seat.is-dealer-overview > .seat-bet-display {
    top: calc(50% + var(--desktop-seat-bet-offset, 121px)) !important;
  }
  html.is-desktop-responsive-fit .table-pot-layer .pot-chip {
    width: 48px !important;
    scale: var(--desktop-art-fit-scale, 1) !important;
    transform-origin: 50% 50% !important;
  }

  html.is-desktop-responsive-fit .ambient-glow-blue {
    left: var(--desktop-glow-blue-left) !important;
    top: var(--desktop-glow-blue-top) !important;
    width: var(--desktop-glow-blue-size) !important;
    height: var(--desktop-glow-blue-size) !important;
    filter: blur(var(--desktop-glow-blue-blur)) !important;
  }
  html.is-desktop-responsive-fit .ambient-glow-gold {
    left: var(--desktop-glow-gold-left) !important;
    top: var(--desktop-glow-gold-top) !important;
    width: var(--desktop-glow-gold-size) !important;
    height: var(--desktop-glow-gold-size) !important;
    filter: blur(var(--desktop-glow-gold-blur)) !important;
  }

  /* Scale the ENTIRE Shop assembly from one reference coordinate system.
     chains3.png, panel, cards, side characters, supporter panel and buttons all
     move together. The internal opening/closing animations remain untouched. */
  html.is-desktop-responsive-fit .customize-drop-assembly {
    top: 78px !important;
    left: 50% !important;
    right: auto !important;
    width: 1920px !important;
    height: 1165px !important;
    transform: translateX(-50%) scale(var(--desktop-shop-fit-scale, 1)) !important;
    transform-origin: 50% 0 !important;
  }
}