/* Final visual alignment with the s7-style mobile pages. */
.member-route-content {
  padding: 0;
}

.target-member {
  padding: 20px 10px 66px;
}

.target-profile {
  min-height: 112px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.target-wallet-card,
.target-member-shortcuts,
.target-menu-card {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .1);
}

.target-wallet-card {
  grid-template-columns: minmax(0, 1fr) 132px;
  min-height: 112px;
  padding: 10px 12px;
}

.target-wallet-card .target-wallet-head {
  gap: 10px;
}

.target-wallet-head strong,
.target-wallet-amount strong {
  font-size: 14px;
}

.target-wallet-card .target-wallet-actions {
  gap: 12px;
}

.target-wallet-card .target-wallet-action,
.target-member-shortcuts .target-wallet-action {
  min-height: 44px;
  gap: 4px;
}

.target-member-shortcuts {
  padding: 14px 8px 12px;
}

.target-wallet-action span,
.target-wallet-action span svg,
.target-member-shortcuts .target-wallet-action svg {
  width: 25px;
  height: 25px;
}

.target-member-row {
  min-height: 52px;
  padding: 0 22px;
}

.target-logout {
  height: 52px;
  margin-top: 4px;
}

.game-detail-page .record-grid-card {
  padding: 12px 9px 4px;
  overflow: hidden;
}

.game-detail-page .record-grid-card > header {
  height: 28px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(94, 95, 95, .25);
}

.record-grid-dot-row {
  height: 34px;
  margin-top: 5px;
}

.record-grid-col {
  max-height: 34px;
}

.record-grid-expand {
  width: 16px;
  height: 12px;
  margin: 0 auto;
  color: #999;
  font-size: 18px;
  font-weight: 400;
  line-height: 12px;
  transform: rotate(90deg);
}

.record-grid-expand svg,
.record-grid-expand .target-svg {
  display: none;
}

.route-progress {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  width: min(410px, 100vw);
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.route-progress::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #6eaaf9, #ffd65c);
  opacity: 0;
  transform: translateX(-120%);
}

.route-progress.active::before {
  opacity: 1;
  animation: route-progress-sweep .72s ease-in-out infinite;
}

@keyframes route-progress-sweep {
  to {
    transform: translateX(260%);
  }
}

.target-wallet-card {
  grid-template-columns: minmax(0, 1fr) 116px;
  min-height: 92px;
  padding: 10px 12px;
}

.target-wallet-card .target-wallet-head {
  gap: 6px;
}

.target-wallet-card .target-wallet-actions {
  gap: 8px;
}

.target-wallet-card .target-wallet-action {
  min-height: 42px;
}

.target-wallet-card .target-wallet-action span,
.target-wallet-card .target-wallet-action span svg {
  width: 23px;
  height: 23px;
}

.target-wallet-card .target-wallet-amount {
  gap: 5px;
}

.target-wallet-card .target-refresh-icon {
  width: 17px;
  height: 17px;
}

.game-detail-page .record-grid-card {
  min-height: 0;
  max-height: 146px;
  padding: 12px 0 0;
  background: #222d45;
  overflow: hidden;
  transition: max-height .28s ease, padding-bottom .28s ease;
  will-change: max-height;
}

.game-detail-page .record-grid-card > header {
  height: 39px;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.record-grid-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  align-items: center;
  gap: 6px;
  padding: 10px 18px 7px;
}

.record-legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.record-legend-item b {
  font: inherit;
}

.record-legend-item i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.record-legend-item.record-red,
.record-legend-item.record-blue,
.record-legend-item.record-yellow,
.record-legend-item.record-green {
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.record-legend-item.record-red {
  color: #ff3338;
}

.record-legend-item.record-blue {
  color: #1098ff;
}

.record-legend-item.record-yellow,
.record-legend-item.record-green {
  color: #3cce8e;
}

.record-grid-board {
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .28s ease, opacity .2s ease, transform .28s ease, padding-top .28s ease;
}

.record-grid-dot-row {
  align-items: flex-start;
  gap: 6px;
  height: 126px;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: auto;
  touch-action: pan-y;
}

.record-grid-dot-row::-webkit-scrollbar {
  display: none;
}

.record-grid-col {
  gap: 4px;
  max-height: 126px;
}

.record-wide-col {
  min-width: 43px;
}

.record-ball {
  width: 17px;
  height: 17px;
  border-width: 1px;
  font-size: 10px;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.record-ball.record-wide {
  width: auto;
  min-width: 36px;
  max-width: 48px;
  padding: 0 5px;
  border-radius: 999px;
  white-space: nowrap;
}

.record-kind-xyhash .record-ball.record-wide {
  min-width: 32px;
}

.record-kind-tbnn .record-grid-dot-row,
.record-kind-xyhash .record-grid-dot-row {
  gap: 8px;
}

.detail-info-card.record-kind-tbnn .detail-bead-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px 4px;
}

.detail-info-card.record-kind-tbnn .detail-bead-grid .record-ball.record-wide {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 18px;
  padding: 0 2px;
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 1;
}

.record-red {
  color: #fff;
  border-color: #ff5c5f;
  background: #e43437;
  box-shadow: 0 0 7px rgba(228, 52, 55, .7);
}

.record-blue {
  color: #fff;
  border-color: #5cc8ff;
  background: #088bff;
  box-shadow: 0 0 8px rgba(8, 139, 255, .78);
}

.record-yellow,
.record-green {
  color: #0f2535;
  border-color: #78f2b6;
  background: #3cce8e;
  box-shadow: 0 0 8px rgba(60, 206, 142, .72);
}

.record-grid-expand {
  display: grid;
  place-items: center;
  width: 34px;
  height: 14px;
  margin: -1px auto 0;
  padding: 0;
  color: #9aa5b8;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .22s ease, color .2s ease;
}

.record-grid-card.is-expanded {
  max-height: 320px;
}

.record-grid-card.is-expanded .record-grid-board {
  max-height: 130px;
  padding-top: 2px;
  opacity: 1;
  transform: translateY(0);
}

.record-grid-card.is-expanded .record-grid-expand {
  margin-top: 1px;
  transform: rotate(-90deg);
}

.record-grid-card.is-expanded .record-note-inside {
  margin-top: 2px !important;
}

.record-note-inside {
  margin: 0 !important;
  padding: 0 0 7px;
  color: #fff100 !important;
  font-size: 12px;
  line-height: 1.25;
  transition: margin-top .28s ease;
}

.record-note-inside b {
  color: #17233c;
  background: #fff100;
}

.shell,
.page-shell,
.content,
.page-body {
  scrollbar-width: none;
}

.shell::-webkit-scrollbar,
.page-shell::-webkit-scrollbar,
.content::-webkit-scrollbar,
.page-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Keep the s7-style draw record panel predictable after earlier visual overrides. */
.game-detail-page .target-open-record.record-grid-card {
  max-height: 146px;
}

.game-detail-page .target-open-record.record-grid-card.is-expanded {
  max-height: 320px;
}

.game-detail-page .target-open-record.record-grid-card .record-grid-board {
  display: block;
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
}

.game-detail-page .target-open-record.record-grid-card.is-expanded .record-grid-board {
  max-height: 130px;
  padding-top: 2px;
  opacity: 1;
  transform: translateY(0);
}

.game-detail-page .target-open-record.record-grid-card.is-expanded .record-grid-dot-row {
  height: 126px;
}

/* Final home/route interaction alignment with the target mobile site. */
.route-loading-state {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #9fb0ce;
  font-size: 13px;
}

.route-loading-state i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .14);
  border-top-color: #e7c27d;
  animation: route-loading-spin .72s linear infinite;
}

@keyframes route-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.target-quick-actions {
  min-height: 86px;
  margin: 8px 0 10px;
  padding: 9px 6px 8px;
  align-items: center;
  border-radius: 7px;
  background: #1d2a47;
}

.shortcut {
  align-content: center;
  gap: 7px;
  min-height: 66px;
}

.shortcut span {
  width: 25px;
  height: 25px;
}

.shortcut strong {
  font-size: 13px;
  line-height: 1.15;
}

.target-home-wallets,
.target-provider-strip,
.target-home-faq {
  margin-top: 14px;
}

.target-home-wallets header {
  margin-bottom: 10px;
  padding: 0 1px;
}

.target-home-wallets header strong,
.target-provider-strip h2,
.target-home-faq h2 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
}

.target-home-wallets header button {
  height: auto;
  padding: 0;
  border-radius: 0;
  color: #b9c7df;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.target-home-wallets > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.target-home-wallets .target-home-wallet-item {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 65px;
  color: #dfe8f7;
  background: transparent;
  font-size: 12px;
  line-height: 1.15;
}

.target-home-wallets .target-home-wallet-item img,
.target-home-wallets .target-home-wallet-item svg {
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.target-home-wallets .target-home-wallet-item span {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-provider-strip {
  overflow: hidden;
}

.target-provider-strip h2 {
  margin-bottom: 10px;
}

.target-provider-strip > div.target-provider-scroll {
  display: flex;
  width: max-content;
  gap: 11px;
  height: 43px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  animation: target-provider-marquee 18s linear infinite;
}

.target-provider-strip > div.target-provider-scroll span {
  flex: 0 0 103px;
  width: 103px;
  height: 43px;
  display: block;
  overflow: hidden;
}

.target-provider-strip > div.target-provider-scroll img {
  display: block;
  width: 103px;
  height: 43px;
  object-fit: contain;
}

@keyframes target-provider-marquee {
  to {
    transform: translateX(-50%);
  }
}

.target-home-faq h2 {
  margin: 16px 0 8px;
}

.target-accordion {
  margin: 0;
  border-radius: 0;
  background: transparent;
}

.target-accordion > button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  color: #fff;
  background: transparent;
  text-align: left;
}

.target-accordion > button strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 850;
}

.target-accordion > button span {
  flex: 0 0 auto;
  color: #8d9cb9;
  transform: rotate(0deg);
  transition: transform .22s ease;
}

.target-accordion.open > button span {
  transform: rotate(180deg);
}

.target-accordion > div {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  color: #aebbd4;
  font-size: 12px;
  line-height: 1.58;
  opacity: 0;
  transition: max-height .24s ease, opacity .18s ease, padding-bottom .24s ease;
}

.target-accordion.open > div {
  max-height: 220px;
  padding-bottom: 8px;
  opacity: 1;
}

.target-accordion p {
  position: relative;
  margin: 4px 0 0;
  padding-left: 13px;
}

.target-accordion p::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #d8e4fb;
}

.game-detail-page .game-address-field button svg {
  color: #050505;
  stroke: #050505;
}

.game-detail-page .game-address-field button .target-svg {
  color: #050505 !important;
  fill: #050505 !important;
  stroke: none !important;
}

.game-detail-page .game-address-field .game-copy-svg {
  width: 15px;
  height: 15px;
  color: #050505;
  fill: none;
  stroke: #050505;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Final target-style invite page alignment. */
.agent-target-shell {
  background: #151d34;
}

.agent-target-shell .page-titlebar {
  border-bottom: 0;
  background: #1c2744;
}

.agent-target-shell .page-titlebar strong {
  color: #fff;
  font-size: 16px;
}

.agent-target-shell .page-body {
  padding: 8px 10px 32px;
}

.agent-target-shell .agent-tabbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74px, 1fr);
  position: sticky;
  top: 0;
  z-index: 4;
  gap: 2px;
  margin: 0 -2px 12px;
  padding: 5px 4px 0;
  border-bottom: 1px solid rgba(124, 145, 184, .18);
  background: #151d34;
  overflow-x: auto;
  scrollbar-width: none;
}

.agent-target-shell .agent-tabbar::-webkit-scrollbar {
  display: none;
}

.agent-target-shell .agent-tabbar button {
  gap: 0;
  min-height: 43px;
  padding: 0 2px;
  color: #fff;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-target-shell .agent-tabbar button svg {
  display: none;
}

.agent-target-shell .agent-tabbar button.active {
  color: #72a8ff;
  border-bottom-color: #72a8ff;
  background: transparent;
}

.agent-target-shell .agent-page-body {
  padding-bottom: 28px;
}

.agent-target-card {
  position: relative;
  margin: 0 0 10px;
  padding: 12px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 8px;
  background: #202b46;
  box-shadow: none;
}

.agent-target-card h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 850;
}

.agent-money-img {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 80px;
  height: auto;
  pointer-events: none;
}

.agent-info-list {
  margin-top: 28px;
}

.agent-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 6px;
  align-items: center;
  min-height: 43px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #8995ad;
  font-size: 13px;
}

.agent-info-row:first-child {
  border-top: 0;
}

.agent-info-row span,
.agent-info-row strong {
  min-width: 0;
}

.agent-info-row strong {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-info-row.is-positive strong {
  color: #45dd77;
}

.agent-info-row button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #8da1c6;
  background: transparent;
}

.agent-info-row button svg {
  width: 14px;
  height: 14px;
}

.agent-commission-card {
  padding-bottom: 14px;
}

.agent-commission-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-commission-card header button {
  flex: 0 0 auto;
  color: #6fa5ff;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}

.agent-commission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.agent-commission-grid div {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 62px;
  color: #9aa9c5;
  font-size: 12px;
}

.agent-commission-grid strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.agent-commission-coin-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.agent-commission-coin-card,
.agent-other-commission-list div {
  display: grid;
  grid-template-columns: minmax(84px, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 133, 202, .25);
  border-radius: 6px;
  background: rgba(14, 25, 47, .7);
}

.agent-commission-coin-card > span {
  display: grid;
  gap: 2px;
}

.agent-commission-coin-card b {
  color: #f4f7ff;
  font-size: 13px;
}

.agent-commission-coin-card small,
.agent-commission-coin-card em {
  color: #8698b9;
  font-size: 11px;
  font-style: normal;
}

.agent-commission-coin-card strong {
  justify-self: end;
  color: #53efbb;
  font-size: 17px;
}

.agent-commission-coin-card em {
  grid-column: 1 / -1;
}

.agent-other-commission-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.agent-withdraw-coin-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid #2d4166;
  border-radius: 8px;
  background: #101b30;
}

.agent-withdraw-coin-switch button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  color: #91a4c6;
  background: transparent;
  font-weight: 700;
}

.agent-withdraw-coin-switch button.active {
  color: #071426;
  background: #55e7b0;
}

.agent-commission-destination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #2d4166;
  border-radius: 8px;
  background: #101b30;
}

.agent-commission-destination span {
  color: #91a4c6;
  font-size: 12px;
}

.agent-commission-destination strong {
  color: #53efbb;
  font-size: 14px;
}

.agent-other-commission-list div {
  min-height: 42px;
  padding-block: 7px;
  color: #9baccc;
  font-size: 12px;
}

.agent-other-commission-list strong {
  justify-self: end;
  color: #eaf1ff;
  font-size: 13px;
}

.agent-settle-tip {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 6px 0 30px;
  color: #ffd513;
  font-size: 12px;
  line-height: 1.45;
}

.agent-settle-tip svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: #ffd513;
  fill: none;
  stroke: #ffd513;
}

.agent-share-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(328px, calc(100% - 44px));
  height: 48px;
  margin: 0 auto;
  border-radius: 6px;
  color: #fff;
  background: #0fc86a;
  box-shadow: 0 8px 18px rgba(15, 200, 106, .18);
  font-size: 14px;
  font-weight: 900;
}

.agent-share-main svg {
  width: 17px;
  height: 17px;
}

.agent-player-panel {
  padding: 4px 7px 28px;
}

.agent-player-panel h2 {
  margin: 8px 0 18px;
  color: #fff;
  font-size: 17px;
  font-weight: 850;
}

.agent-player-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-bottom: 14px;
  padding: 0 8px 0 12px;
  border-radius: 8px;
  background: #202b46;
  color: #8191ad;
}

.agent-player-search svg {
  width: 16px;
  height: 16px;
}

.agent-player-search input {
  min-width: 0;
  height: 100%;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

.agent-player-search input::placeholder {
  color: #71819e;
}

.agent-player-search button {
  height: 26px;
  border-radius: 5px;
  color: #fff;
  background: rgba(114, 168, 255, .22);
  font-size: 12px;
  font-weight: 850;
}

.agent-player-stats {
  padding: 0 12px;
}

.agent-player-table {
  overflow: hidden;
  margin: 12px auto 22px;
  border-radius: 8px;
  background: #202b46;
}

.agent-player-head,
.agent-player-row {
  display: grid;
  grid-template-columns: 1.18fr repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 45px;
  padding: 0 10px;
}

.agent-player-entry + .agent-player-entry { border-top: 1px solid rgba(121, 157, 218, .14); }
.agent-player-entry .agent-player-row { border-top: 0; }
.agent-rebate-tip { margin: 10px 2px; color: #93a9cc; font-size: 12px; line-height: 1.55; }
.agent-rebate-editor { margin: 0 12px 12px; border: 1px solid rgba(96, 165, 250, .22); border-radius: 6px; background: rgba(11, 28, 57, .72); overflow: hidden; }
.agent-rebate-editor summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #e5efff; cursor: pointer; }
.agent-rebate-editor summary em { color: #4ce3b4; font-style: normal; font-size: 12px; }
.agent-rebate-editor > label { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; padding: 0 12px 10px; color: #9fb1d0; font-size: 12px; }
.agent-rebate-editor select,
.agent-rebate-game-row input { min-width: 0; height: 34px; border: 1px solid #314970; border-radius: 5px; background: #101e38; color: #fff; padding: 0 9px; }
.agent-rebate-game-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 58px; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid rgba(96, 165, 250, .12); }
.agent-rebate-game-row span { display: grid; gap: 2px; min-width: 0; }
.agent-rebate-game-row b { color: #f3f7ff; font-size: 13px; }
.agent-rebate-game-row small { color: #7891bb; font-size: 11px; }
.agent-rebate-game-row button { height: 34px; border: 0; border-radius: 5px; background: #2f91f5; color: #fff; }
.agent-own-lottery-rates { display: grid; gap: 8px; margin-top: 10px; }
.agent-own-lottery-rates > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid rgba(96, 165, 250, .18); border-radius: 6px; background: rgba(12, 31, 61, .7); }
.agent-own-lottery-rates span { color: #c6d4eb; }
.agent-own-lottery-rates strong { color: #4ce3b4; }

.agent-domain-card {
  padding: 0 14px;
}

.agent-domain-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  border-bottom: 1px solid rgba(121, 157, 218, .14);
}

.agent-domain-card > header > div {
  min-width: 0;
}

.agent-domain-card h2,
.agent-domain-card p {
  margin: 0;
}

.agent-domain-card h2 {
  color: #f3f7ff;
  font-size: 15px;
}

.agent-domain-card p {
  margin-top: 4px;
  color: #8295b5;
  font-size: 11px;
  line-height: 1.45;
}

.agent-domain-card > header > span {
  flex: 0 0 auto;
  color: #4ce3b4;
  font-size: 11px;
}

.agent-domain-list {
  display: grid;
}

.agent-domain-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.agent-domain-row + .agent-domain-row {
  border-top: 1px solid rgba(121, 157, 218, .12);
}

.agent-domain-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agent-domain-row small {
  color: #d8b968;
  font-size: 10px;
}

.agent-domain-row strong {
  overflow: hidden;
  color: #e8f0ff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-domain-actions {
  display: flex;
  gap: 6px;
}

.agent-domain-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 52px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 5px;
  color: #dce9ff;
  background: rgba(47, 145, 245, .12);
  font-size: 11px;
}

.agent-domain-actions button:first-child {
  color: #071426;
  border-color: #4ce3b4;
  background: #4ce3b4;
}

.agent-domain-actions svg {
  width: 13px;
  height: 13px;
}

.agent-domain-apply {
  display: grid;
  gap: 10px;
  padding: 14px 0;
}

.agent-domain-apply > p {
  color: #91a4c5;
  font-size: 12px;
}

.agent-domain-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  border: 1px solid #314970;
  border-radius: 6px;
  background: #101e38;
}

.agent-domain-input input {
  min-width: 0;
  height: 100%;
  padding: 0 11px;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

.agent-domain-input span,
.agent-domain-input select {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 10px;
  border-left: 1px solid #314970;
  color: #9fb1d0;
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
}

.agent-domain-input select { min-width: 0; max-width: 210px; height: 100%; border-top: 0; border-right: 0; border-bottom: 0; color-scheme: dark; }
@media (max-width: 480px) { .agent-domain-input { grid-template-columns: minmax(80px, 1fr) minmax(120px, 1.2fr); } .agent-domain-input select { max-width: 100%; } }

.agent-domain-apply > button {
  height: 40px;
  border: 0;
  border-radius: 6px;
  color: #071426;
  background: #4ce3b4;
  font-weight: 850;
}

@media (max-width: 420px) {
  .agent-domain-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 11px 0;
  }

  .agent-domain-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .agent-domain-actions button {
    width: 100%;
  }
}

.agent-player-head {
  color: #8fa0bd;
  background: rgba(255, 255, 255, .035);
  font-size: 13px;
}

.agent-player-row {
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .055);
  font-size: 13px;
}

.agent-player-row strong,
.agent-player-row span,
.agent-player-head span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-player-row strong {
  overflow: visible;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.agent-coin-flow-list {
  display: grid;
  gap: 2px;
  padding: 5px 0;
  white-space: normal !important;
}

.agent-coin-flow-list small {
  display: block;
  color: #d7e2f5;
  font-size: 10px;
  line-height: 1.25;
}

.agent-rule-note {
  margin: -2px 0 10px;
  color: #8fa0bd;
  font-size: 11px;
}

.agent-player-empty {
  display: grid;
  place-items: center;
  min-height: 58px;
  color: #7f8ba3;
  border-top: 1px solid rgba(255, 255, 255, .055);
  font-size: 13px;
}

.agent-performance-panel {
  padding: 4px 8px 28px;
}

.agent-performance-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}

.agent-performance-title small {
  color: #5f8bd5;
  font-size: 9px;
  font-weight: 900;
}

.agent-performance-title h2 {
  margin: 1px 0 0;
  color: #fff;
  font-size: 18px;
}

.agent-performance-title > span {
  padding: 5px 8px;
  color: #9fb5d9;
  border: 1px solid rgba(112, 151, 215, .25);
  border-radius: 5px;
  background: #1d2944;
  font-size: 11px;
}

.agent-performance-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0 10px;
  padding: 3px;
  border: 1px solid rgba(112, 151, 215, .2);
  border-radius: 6px;
  background: #111a30;
}

.agent-performance-filter button {
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  color: #93a4c2;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.agent-performance-filter button:focus-visible {
  outline: 2px solid #b8d2ff;
  outline-offset: 1px;
}

.agent-performance-filter button.active {
  color: #172136;
  border-radius: 4px;
  background: #f4cc67;
  box-shadow: 0 4px 10px rgba(244, 204, 103, .18);
}

.agent-performance-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 9px;
}

.agent-performance-scope,
.agent-performance-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 2px;
  border-radius: 5px;
  background: #1d2944;
}

.agent-performance-toolbar button {
  min-width: 0;
  min-height: 30px;
  color: #8fa0bd;
  border-radius: 4px;
  font-size: 11px;
}

.agent-performance-toolbar button.active {
  color: #fff;
  background: #31558b;
}

.agent-performance-status button.active {
  color: #172136;
  background: #62d6ad;
}

.agent-performance-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 7px;
  color: #dce7f8;
  font-size: 11px;
}

.agent-performance-meta small {
  min-width: 0;
  overflow: hidden;
  color: #7f91b0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-performance-table {
  overflow: hidden;
  margin: 0 auto 22px;
  border: 1px solid rgba(93, 132, 198, .24);
  border-radius: 8px;
  background: #202b46;
}

.agent-performance-head,
.agent-performance-row {
  display: grid;
  grid-template-columns: 1.22fr repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 45px;
  padding: 0 10px;
}

.agent-performance-head {
  color: #8fa0bd;
  background: #1a2540;
  font-size: 12px;
  font-weight: 750;
}

.agent-performance-row {
  color: #fff;
  border-top: 1px solid rgba(121, 157, 218, .13);
  font-size: 13px;
}

.agent-performance-row strong,
.agent-performance-row span,
.agent-performance-head span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-performance-row strong {
  padding-left: 8px;
  text-align: left;
  font-weight: 900;
}

.agent-performance-head span:first-child {
  padding-left: 8px;
  text-align: left;
}

.agent-performance-row span {
  color: #e9f0ff;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.agent-performance-total {
  color: #f4cc67;
  background: rgba(244, 204, 103, .07);
}

.agent-performance-empty {
  display: grid;
  place-items: center;
  min-height: 72px;
  color: #7f91b0;
  border-top: 1px solid rgba(255, 255, 255, .055);
  font-size: 12px;
}

.agent-performance-error {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin-top: 34px;
  padding: 28px 18px;
  color: #dbe6f7;
  border: 1px solid rgba(235, 111, 111, .22);
  border-radius: 8px;
  background: #202b46;
  text-align: center;
}

.agent-performance-error svg {
  width: 30px;
  color: #f3b05d;
}

.agent-performance-error p {
  margin: 0;
  color: #8fa0bd;
  font-size: 12px;
  line-height: 1.6;
}

.agent-performance-error button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  color: #172136;
  border-radius: 5px;
  background: #f4cc67;
  font-weight: 850;
}

.agent-performance-error button svg {
  width: 15px;
  color: currentColor;
}

.agent-performance-loading {
  display: grid;
  gap: 12px;
}

.agent-performance-skeleton {
  height: 86px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1d2944 25%, #263552 45%, #1d2944 65%);
  background-size: 220% 100%;
  animation: agent-performance-shimmer 1.2s linear infinite;
}

.agent-performance-skeleton.is-table {
  height: 210px;
}

@keyframes agent-performance-shimmer {
  to { background-position: -220% 0; }
}

.agent-target-shell .agent-rule-card {
  margin: 0 0 10px;
  border-radius: 8px;
  background: #202b46;
  box-shadow: none;
}

.agent-share-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 max(0px, calc((100vw - 430px) / 2));
  background: rgba(0, 0, 0, .58);
}

.agent-share-sheet {
  width: 100%;
  max-width: 430px;
  animation: agent-share-rise .22s ease-out;
}

@keyframes agent-share-rise {
  from {
    transform: translateY(18px);
    opacity: .72;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.agent-share-poster {
  position: relative;
  margin: 0 12px;
  padding: 20px 14px 16px;
  overflow: hidden;
  border-radius: 14px 14px 8px 8px;
  background:
    radial-gradient(circle at 82% 4%, rgba(47, 175, 102, .32), transparent 32%),
    linear-gradient(155deg, #263956, #17233b 60%, #10182d);
  color: #fff;
  text-align: center;
}

.agent-share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .08);
}

.agent-share-close svg {
  width: 16px;
  height: 16px;
}

.agent-share-poster h2 {
  margin: 2px 0 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.agent-share-poster p {
  margin: 0 0 12px;
  color: #e6c988;
  font-size: 13px;
}

.agent-share-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 16px;
  color: #13223c;
  background: #ffe7a6;
  font-size: 13px;
  font-weight: 850;
}

.agent-share-qr {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 14px auto 12px;
  border-radius: 10px;
  background: #fff;
}

.agent-share-qr .qr-img {
  width: 76px;
  height: 76px;
}

.agent-share-games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.agent-share-games span {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.agent-share-games img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.agent-share-actions {
  margin-top: 8px;
  padding: 14px 13px 12px;
  border-radius: 14px 14px 0 0;
  background: #fff;
  color: #1f2937;
  text-align: center;
}

.agent-share-actions > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

.agent-share-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.agent-share-grid button {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  color: #364258;
  background: transparent;
  font-size: 11px;
  line-height: 1.15;
}

.agent-share-grid img {
  width: 39px;
  height: 39px;
  object-fit: contain;
}

.agent-share-grid span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-share-cancel {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border-radius: 8px;
  color: #596579;
  background: #f1f4f8;
  font-size: 14px;
  font-weight: 850;
}

.agent-share-main svg,
.agent-share-main .target-svg,
.agent-share-main .target-svg use {
  color: #fff;
  fill: currentColor;
  stroke: currentColor;
}

.agent-player-panel {
  padding: 6px 4px 28px;
}

.agent-player-panel h2 {
  margin: 10px 2px 18px;
  font-size: 17px;
}

.agent-player-search {
  grid-template-columns: 19px minmax(0, 1fr) 48px;
  height: 42px;
  margin: 0 0 12px;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 10px;
  background: #202b46;
  box-shadow: none;
}

.agent-player-search button {
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: #2f5f9f;
  box-shadow: none;
}

.agent-player-stats.agent-target-card {
  margin: 0 0 12px;
  padding: 0 12px;
  border-radius: 10px;
  background: #202b46;
}

.agent-player-stats .agent-info-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 42px;
}

.agent-player-table {
  margin: 0 0 22px;
  border-radius: 10px;
  background: #202b46;
}

.agent-player-head,
.agent-player-row {
  min-height: 44px;
  padding: 0 9px;
}

.agent-player-head {
  color: #9aabc8;
  background: rgba(255, 255, 255, .035);
  font-size: 12px;
}

.agent-player-row {
  font-size: 12px;
}

.agent-player-account {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.agent-player-account span {
  max-width: 100%;
}

.agent-player-account button {
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(83, 239, 187, .35);
  border-radius: 5px;
  color: #53efbb;
  background: rgba(83, 239, 187, .08);
  font-size: 11px;
  font-weight: 800;
}

.agent-transfer-page {
  display: grid;
  gap: 12px;
}

.agent-transfer-card {
  padding: 14px 12px;
}

.agent-transfer-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 2px 12px;
}

.agent-transfer-card > header div {
  display: grid;
  gap: 3px;
}

.agent-transfer-card > header span {
  color: #8fa1c1;
  font-size: 12px;
}

.agent-transfer-card > header strong {
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.agent-transfer-card > header strong small {
  color: #53efbb;
  font-size: 12px;
}

.agent-transfer-card > header > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #53efbb;
  background: rgba(83, 239, 187, .09);
}

.agent-transfer-card > header svg {
  width: 24px;
  height: 24px;
}

.agent-transfer-coins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #2d4166;
  border-radius: 8px;
  background: #101b30;
}

.agent-transfer-coins button {
  min-height: 36px;
  border-radius: 6px;
  color: #91a4c6;
  background: transparent;
  font-weight: 800;
}

.agent-transfer-coins button.active {
  color: #071426;
  background: #55e7b0;
}

.agent-transfer-card .form-label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 13px 0 7px;
  color: #a6b6d1;
  font-size: 12px;
}

.agent-transfer-card .form-label small {
  color: #697c9d;
  font-weight: 400;
}

.agent-transfer-card .field {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 1px solid #31466b;
  border-radius: 7px;
  color: #fff;
  background: #111d34;
}

.agent-transfer-card select.field {
  padding: 0 34px 0 12px;
}

.agent-transfer-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 7px;
}

.agent-transfer-amount-row button {
  border-radius: 7px;
  color: #53efbb;
  background: #172843;
  font-weight: 800;
}

.agent-transfer-safety {
  margin: 10px 0 13px;
  color: #f2c85b;
  font-size: 11px;
  line-height: 1.5;
}

.agent-transfer-card .agent-share-main:disabled {
  opacity: .45;
}

.agent-transfer-history {
  padding: 13px 12px 4px;
}

.agent-transfer-history h2 {
  padding-bottom: 10px;
}

.agent-transfer-record {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 62px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.agent-transfer-record > span {
  display: grid;
  place-items: center;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 850;
}

.agent-transfer-record > span.out {
  color: #ffbc63;
  background: rgba(255, 188, 99, .1);
}

.agent-transfer-record > span.in {
  color: #53efbb;
  background: rgba(83, 239, 187, .1);
}

.agent-transfer-record > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agent-transfer-record > div strong {
  overflow: hidden;
  color: #edf4ff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-transfer-record > div small {
  overflow: hidden;
  color: #7689a9;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-transfer-record > b {
  display: grid;
  justify-items: end;
  color: #ffbc63;
  font-size: 14px;
}

.agent-transfer-record > b.in {
  color: #53efbb;
}

.agent-transfer-record > b small {
  color: #8295b6;
  font-size: 9px;
}

.money-target-page {
  display: grid;
  gap: 12px;
  padding: 0 0 20px;
}

.recharge-methods {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.recharge-picker,
.recharge-method-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.recharge-picker > strong,
.recharge-method-picker > strong {
  color: #dce8f7;
  font-size: 14px;
}

.recharge-currency-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.recharge-currency-options button,
.recharge-method-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  gap: 8px;
  border: 1px solid #354969;
  border-radius: 9px;
  color: #d7e3f3;
  background: #17263e;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.recharge-currency-options button.active,
.recharge-method-options button.active {
  border-color: #57d9b5;
  color: #79efc7;
  background: #173c3e;
}

.recharge-currency-options button:focus-visible,
.recharge-method-options button:focus-visible {
  outline: 2px solid #f3d17d;
  outline-offset: 2px;
}

.recharge-currency-options .wallet-coin-mark {
  flex: none;
}

.recharge-method-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 440px;
}

.recharge-method-options button {
  flex-direction: column;
  min-height: 76px;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 9px;
  text-align: center;
  background: #17263e;
}

.recharge-method-options button.active {
  border: 2px solid #e6c47e;
  color: #f7e5b7;
  background: #203747;
}

.recharge-method-options button:hover:not(.active) {
  background: #1c304d;
}

.recharge-method-icon {
  display: grid;
  flex: none;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  background: #2d9fc3;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.recharge-method-icon.is-okpay-cny {
  background: #e7b85b;
  color: #4b310e;
}

.recharge-method-icon.is-onchain {
  border-radius: 50%;
  background: #17a887;
}

.recharge-method-name {
  display: block;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.money-target-card.okpay-recharge-card {
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.desktop-member .money-target-card.okpay-recharge-card {
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.okpay-recharge-amount-row {
  display: flex;
  min-height: 50px;
  align-items: center;
  border: 1px solid #586984;
  border-radius: 8px;
  background: #f7f8fb;
}

.okpay-recharge-amount-row:focus-within {
  border-color: #e6c47e;
  box-shadow: 0 0 0 2px rgb(230 196 126 / 18%);
}

.okpay-recharge-amount-row .form-input {
  flex: 1;
  width: 1px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #243247;
  font-size: 16px;
  box-shadow: none;
  appearance: textfield;
}

.okpay-recharge-amount-row .form-input::placeholder {
  color: #75849a;
}

.okpay-recharge-amount-row .form-input::-webkit-outer-spin-button,
.okpay-recharge-amount-row .form-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.okpay-recharge-amount-row > span {
  flex: none;
  padding: 0 15px;
  color: #42506a;
  font-size: 13px;
  font-weight: 700;
}

.okpay-recharge-card .confirm-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  color: #1e2940;
  background: #f1cf85;
}

.desktop-member .money-target-card.okpay-recharge-card .confirm-btn {
  width: 100%;
  max-width: none;
}

.money-target-tabs {
  display: flex;
  min-height: 34px;
  align-items: center;
}

.money-target-tabs button {
  min-width: 92px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  background: #213b68;
  font-size: 13px;
  font-weight: 850;
}

.money-target-card.recharge-target-card,
.money-target-card.withdraw-target-card {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: #101b32;
  box-shadow: none;
}

.money-gold-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  min-height: 92px;
  gap: 8px;
}

.money-gold-head strong {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.money-gold-head img {
  width: 118px;
  height: 98px;
  object-fit: contain;
  object-position: right center;
}

.money-support-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: #9fb0cc;
  font-size: 13px;
}

.money-support-line button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 72px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: #17243d;
  font-size: 13px;
  font-weight: 850;
}

.money-support-line svg {
  width: 17px;
  height: 17px;
  color: #21bf7c;
  fill: none;
  stroke: currentColor;
}

.money-lead {
  margin: 10px 0 12px;
  color: #dce7f7;
  font-size: 13px;
  line-height: 1.55;
}

.money-target-card .form-label {
  margin: 12px 0 8px;
  color: #a6b6d1;
  font-size: 13px;
}

.money-address-field.copy-field {
  grid-template-columns: minmax(0, 1fr) 44px;
  min-height: 42px;
  border-radius: 9px;
  background: #17243d;
}

.money-address-field.copy-field button {
  color: #fff;
  background: transparent;
}

.money-address-field.copy-field svg {
  width: 18px;
  height: 18px;
  color: #fff;
  fill: none;
  stroke: currentColor;
}

.money-warning.warning-text {
  margin: 12px 0 0;
  color: #f0c84b !important;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 850;
}

.recharge-qr-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
  padding: 12px;
  border-radius: 10px;
  background: #17243d;
}

.recharge-qr-card .qr-img {
  width: 92px;
  height: 92px;
  margin: 0;
  border-width: 3px;
}

.recharge-qr-card .qr-svg {
  display: block;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
}

.recharge-qr-card strong,
.recharge-qr-card span {
  display: block;
}

.recharge-qr-card strong {
  color: #fff;
  font-size: 14px;
}

.recharge-qr-card span {
  margin-top: 6px;
  color: #8fa0bd;
  font-size: 12px;
}

.recharge-qr-card .qr-img span {
  margin: 0;
}

.qr-placeholder {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  color: #8292ae;
  background: #10192d;
  font-size: 12px;
}

.money-help-text {
  margin: 0 0 12px;
  color: #95a7c5;
  font-size: 12px;
  line-height: 1.55;
}

.recharge-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.recharge-action-grid .secondary {
  color: #25324a;
  background: #e8d19a;
}

.recharge-action-grid button:disabled {
  opacity: .55;
}

.detail-transfer-rule-summary {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.detail-transfer-rule-summary > h4,
.detail-transfer-rule-summary > p {
  margin: 0;
}

.detail-transfer-rule-summary > h4 {
  color: #f8fafc;
  font-size: 14px;
}

.detail-transfer-rule-summary > p {
  color: #91a4c8;
  font-size: 12px;
  line-height: 1.55;
}

.detail-transfer-rule-summary .odds-limit-row span {
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.money-target-card .confirm-btn {
  width: 100%;
  height: 44px;
  border-radius: 9px;
  color: #fff;
  background: #4d8ff7;
  box-shadow: none;
  font-weight: 900;
}

.money-address-title {
  min-height: 36px;
  margin-top: 10px;
  color: #dce7f7;
}

.money-address-title button {
  color: #6fb0ff;
}

.money-select-field.dropdown-field,
.money-password-input.field {
  min-height: 42px;
  border-radius: 9px;
  color: #dce7f7;
  background: #17243d;
}

.money-select-field.dropdown-field {
  display: flex;
  justify-content: space-between;
}

.money-amount-input.inline-input {
  min-height: 42px;
  border-radius: 9px;
  background: #17243d;
}

.money-amount-input.inline-input button {
  color: #6fb0ff;
}

.withdraw-balance.target {
  min-height: 32px;
  margin: 8px 0 0;
  color: #9fb0cc;
}

.withdraw-balance.target strong {
  color: #fff;
}

.withdraw-balance.target svg {
  color: #21bf7c;
}

.agent-player-search {
  grid-template-columns: 22px minmax(0, 1fr);
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: #202b46;
}

.agent-player-search svg {
  width: 17px;
  height: 17px;
  color: #89a0c3;
}

.agent-player-search input {
  width: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0;
  font-size: 13px;
}

.agent-player-search button {
  display: none;
}

.money-select-field.dropdown-field {
  min-width: 0;
  gap: 8px;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 14px;
}

.money-select-field.dropdown-field span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-select-field.dropdown-field i {
  flex: 0 0 auto;
  color: #8fa0bd;
  font-style: normal;
}

.game-title-recharge[hidden] {
  display: none !important;
}

.money-amount-input.field {
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  border-radius: 9px;
  background: #17243d;
  box-shadow: none;
  padding: 0 14px;
}

.money-amount-input.field::placeholder {
  color: #8fa0bd;
}

.wallet-address-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.wallet-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 58px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #17243d;
  padding: 0;
  text-align: left;
}

.address-add-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #17243d;
  padding: 10px 12px;
  text-align: left;
}

.wallet-address-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 10px 8px 10px 12px;
  text-align: left;
}

.wallet-address-delete {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 100%;
  border: 0;
  color: #ffb8b8;
  background: rgba(255, 76, 76, .12);
  font-size: 12px;
  font-weight: 900;
}

.wallet-address-delete:disabled {
  opacity: .55;
}

.wallet-address-row.selected {
  background: #20355c;
  box-shadow: inset 0 0 0 1px rgba(111, 176, 255, .34);
}

.wallet-address-icon,
.address-add-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #21bf7c;
  background: rgba(33, 191, 124, .12);
}

.address-add-icon {
  color: #6fb0ff;
  background: rgba(111, 176, 255, .14);
}

.address-add-icon b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #8fc0ff;
  background: rgba(143, 192, 255, .16);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.wallet-address-icon svg,
.address-add-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
}

.wallet-address-copy,
.address-add-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-address-copy strong,
.address-add-copy strong {
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.wallet-address-copy small,
.address-add-copy small {
  min-width: 0;
  overflow: hidden;
  color: #8fa0bd;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-address-row em,
.address-add-row i {
  color: #6fb0ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.address-add-row {
  margin-top: 10px;
  background: #202b46;
}

.wallet-address-empty.compact {
  min-height: 72px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #17243d;
}

.address-form-preview header button {
  width: 24px;
  height: 24px;
  color: #8fa0bd;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}

.wallet-verification-card {
  display: grid;
  gap: 14px;
  margin-top: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 207, 90, .28);
  border-radius: 12px;
  background: #17243d;
}

.wallet-verification-card > header,
.wallet-verification-step,
.wallet-verification-destination,
.wallet-verification-actions {
  display: flex;
  align-items: center;
}

.wallet-verification-card > header {
  justify-content: space-between;
  gap: 12px;
}

.wallet-verification-card > header span,
.wallet-verification-step span,
.wallet-verification-destination > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wallet-verification-card small,
.wallet-verification-meta {
  color: #8fa0bd;
  font-size: 11px;
}

.wallet-verification-card > header strong,
.wallet-verification-destination strong {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-verification-card > header em {
  flex: 0 0 auto;
  border-radius: 7px;
  color: #ffd66d;
  background: rgba(255, 207, 90, .12);
  padding: 6px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.wallet-verification-step {
  gap: 10px;
  min-height: 56px;
  border-top: 1px solid rgba(143, 160, 189, .12);
  border-bottom: 1px solid rgba(143, 160, 189, .12);
  padding: 10px 0;
}

.wallet-verification-step > b {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #08142a;
  background: #ffd66d;
  font-size: 14px;
}

.wallet-verification-step strong {
  color: #ffd66d;
  font-size: 21px;
  line-height: 1.2;
}

.wallet-verification-destination {
  gap: 12px;
  min-width: 0;
}

.wallet-verification-qr {
  display: grid;
  place-items: center;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  background: #fff;
  padding: 5px;
}

.wallet-verification-qr svg {
  width: 100%;
  height: 100%;
}

.wallet-verification-destination button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  border: 0;
  color: #6fb0ff;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

.wallet-verification-destination button svg {
  width: 14px;
  height: 14px;
}

.wallet-verification-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-verification-meta span {
  display: grid;
  gap: 3px;
  border-radius: 8px;
  background: #111d34;
  padding: 9px 10px;
}

.wallet-verification-meta b {
  overflow-wrap: anywhere;
  color: #dce7f7;
  font-size: 11px;
}

.wallet-verification-card > p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: #aab8ce;
  font-size: 11px;
  line-height: 1.6;
}

.wallet-verification-card > p svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.wallet-verification-actions {
  gap: 8px;
}

.wallet-verification-actions .btn {
  flex: 1 1 0;
  height: 42px;
  margin: 0;
}

@media (max-width: 360px) {
  .wallet-verification-meta {
    grid-template-columns: 1fr;
  }

  .wallet-verification-qr {
    flex-basis: 74px;
    width: 74px;
    height: 74px;
  }
}

.target-activity-page {
  padding: 8px 0 66px;
}

.target-activity-list {
  gap: 12px;
}

.target-activity-card {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #17233c;
  padding: 0;
  text-align: left;
}

.target-activity-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 475;
  border-radius: 8px 8px 0 0;
  object-fit: contain;
  background: #0f1930;
}

.target-activity-card::after {
  display: none;
}

.target-activity-card > .target-activity-copy {
  position: relative;
  inset: auto;
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 10px 96px 12px 12px;
  border-top: 1px solid rgba(103, 126, 169, .16);
  background: #17233c;
}

.target-activity-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.target-activity-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.target-activity-copy em {
  position: absolute;
  right: 12px;
  bottom: 16px;
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  height: 24px;
  border-radius: 4px;
  color: #f4c233;
  background: rgba(255, 217, 103, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 217, 103, .36);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

/* Keep large balances readable without breaking compact mobile headers. */
.top-actions {
  min-width: 0;
}

.top-balance {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(198px, 52vw);
}

.top-balance span {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.top-balance button {
  flex: 0 0 auto;
}

.page-titlebar.has-right {
  grid-template-columns: 48px minmax(42px, 1fr) minmax(48px, max-content);
}

.page-titlebar.has-right strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-titlebar.has-right .titlebar-right {
  justify-self: end;
  width: auto;
  min-width: 0;
  max-width: min(228px, 58vw);
  padding-right: 5px;
}

.titlebar-right .titlebar-home-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  color: #f4d38b;
  background: rgba(255, 223, 148, .12);
}

.titlebar-right .titlebar-home-btn svg,
.titlebar-right .titlebar-home-btn .target-svg {
  width: 17px;
  height: 17px;
  color: currentColor;
}

.game-detail-page .titlebar-right {
  min-width: 0;
}

.game-title-balance {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(150px, 40vw);
}

.game-title-balance span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.game-detail-page .page-titlebar.has-right {
  grid-template-columns: 42px minmax(48px, 1fr) minmax(166px, min(52vw, 210px));
}

.game-detail-page .page-titlebar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-detail-page .titlebar-right {
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: end;
  padding-right: 5px;
}

.game-detail-page .page-titlebar.has-right .titlebar-right {
  width: 100%;
  max-width: none;
}

.game-title-balance {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.game-title-balance .target-svg {
  flex: 0 0 17px;
}

.titlebar-right .game-title-recharge {
  flex: 0 0 auto;
}

@media (max-width: 360px) {
  .pool-left {
    margin-top: 4px;
  }

  .pool-address-list {
    max-height: 62px;
    margin-top: 8px;
  }

  .pool-address-row {
    min-height: 27px;
  }

  .pool-address-row code {
    font-size: 9px;
  }

  .page-titlebar.has-right {
    grid-template-columns: 42px minmax(34px, 1fr) minmax(42px, max-content);
  }

  .titlebar-right .titlebar-home-btn {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .game-detail-page .page-titlebar.has-right {
    grid-template-columns: 36px minmax(42px, 1fr) minmax(158px, min(54vw, 186px));
  }

  .game-detail-page .titlebar-right {
    gap: 4px;
  }

  .titlebar-right .game-title-recharge {
    padding-inline: 7px;
  }
}
/* 页面投注开奖频率 */
.page-bet-frequency-shell,
.page-bet-frequency-single {
  border: 1px solid #2b3854;
  border-radius: 6px;
  background: #121a2a;
}

.page-bet-frequency-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
}

.page-bet-frequency-shell > span {
  color: #9aabc8;
  font-size: 12px;
  white-space: nowrap;
}

.page-bet-frequency-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 1fr);
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-bet-frequency-options::-webkit-scrollbar {
  display: none;
}

.page-bet-frequency-options button {
  display: grid;
  gap: 1px;
  min-height: 38px;
  padding: 4px 10px;
  border: 1px solid #33415e;
  border-radius: 5px;
  color: #b9c6dc;
  background: #1b263d;
  white-space: nowrap;
}

.page-bet-frequency-options button.active {
  border-color: #18dba1;
  color: #fff;
  background: #17433d;
}

.page-bet-frequency-options strong {
  font-size: 13px;
}

.page-bet-frequency-options small {
  color: #8fa1bf;
  font-size: 10px;
}

.page-bet-frequency-options button.active small {
  color: #7ff0cf;
}

.page-bet-frequency-single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 10px;
  color: #afbdd4;
  font-size: 12px;
}

.page-bet-frequency-single b {
  color: #59e5bc;
  font-weight: 750;
}

.page-bet-record-frequency {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  color: #55dfb7;
  font-size: 10px;
}

.page-bet-record-issue {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  color: #f3cf6a;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.hash-round-clock {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, .9fr) 52px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #2e4264;
  border-radius: 6px;
  color: #dce8fb;
  background: linear-gradient(90deg, #132038 0%, #172741 58%, #122035 100%);
}

#app img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.target-page-bet > .target-bet-shared-hero + .hash-round-clock {
  margin-top: 10px;
  margin-bottom: 10px;
}

.hash-round-issue,
.hash-round-times,
.hash-round-times > span {
  min-width: 0;
}

.hash-round-issue {
  display: grid;
  gap: 3px;
}

.hash-round-issue > span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hash-round-issue strong {
  color: #ffdb6b;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.hash-round-issue small {
  color: #8fa6c4;
  font-size: 10px;
}

.hash-round-issue small b {
  color: #62e4bb;
}

.hash-round-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.hash-round-times > span {
  display: grid;
  gap: 2px;
  text-align: center;
}

.hash-round-times strong {
  color: #60e5bd;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.hash-round-times small {
  color: #8fa6c4;
  font-size: 9px;
}

.hash-round-times i {
  width: 1px;
  height: 30px;
  background: rgba(125, 154, 193, .32);
}

.hash-round-sound {
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 48px;
  height: 42px;
  border: 1px solid #365273;
  border-radius: 5px;
  color: #7de9ca;
  background: #172a44;
}

.hash-round-sound svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hash-round-sound span {
  font-size: 9px;
}

.hash-round-sound.is-muted {
  color: #8496af;
}

.target-page-bet.is-sealed .hash-round-times [data-hash-seal-countdown] {
  color: #ff8b77;
}

@media (max-width: 520px) {
  .hash-round-clock {
    grid-template-columns: minmax(0, 1fr) 122px 38px;
    gap: 4px;
    min-height: 52px;
    padding: 6px;
  }

  .hash-round-issue > span {
    font-size: 10px;
    letter-spacing: -.15px;
  }

  .hash-round-issue strong {
    font-size: 12px;
  }

  .hash-round-issue small {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hash-round-times {
    gap: 3px;
  }

  .hash-round-times strong {
    font-size: 13px;
  }

  .hash-round-times small {
    font-size: 8px;
  }

  .hash-round-sound {
    min-width: 36px;
    height: 36px;
  }

  .hash-round-sound span {
    display: none;
  }
}

[data-page-bet-limit-coin][hidden],
[data-page-bet-stake-coin][hidden],
[data-page-bet-venue-selector][hidden] {
  display: none !important;
}

.target-page-limit [data-page-bet-limit-coin],
.target-page-option-limit [data-page-bet-limit-coin] {
  display: inline;
}

.target-page-bet[data-page-bet-rule="hxyfds"] .target-page-choice-grid,
.target-page-bet[data-page-bet-rule="hxhzds"] .target-page-choice-grid,
.target-page-bet[data-page-bet-rule="hxyfdx"] .target-page-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-title-balance small {
  flex: 0 0 auto;
  color: #5ce2ba;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.target-wallet-card .target-wallet-head {
  align-items: center;
}

.target-wallet-refresh {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.target-wallet-balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(70, 96, 143, .35);
  border-radius: 6px;
  background: #17243d;
}

.target-wallet-balances span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 8px;
  border-left: 1px solid rgba(70, 96, 143, .28);
}

.target-wallet-balances span:first-child {
  border-left: 0;
}

.target-wallet-balances small {
  color: #7f91af;
  font-size: 9px;
}

.target-wallet-balances strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The member wallet is one compact summary, independent from older card grids. */
.target-wallet-card.member-wallet-summary {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(111, 139, 190, .3);
  border-radius: 8px;
  background: #26334c;
  box-shadow: 0 12px 26px rgba(5, 10, 21, .16);
}

.member-wallet-summary .target-wallet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(126, 150, 194, .18);
}

.member-wallet-summary .target-wallet-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.member-wallet-summary .target-wallet-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(70, 221, 176, .42);
  border-radius: 50%;
  color: #55dfb7;
  background: rgba(19, 91, 78, .25);
}

.member-wallet-summary .target-wallet-heading-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}

.member-wallet-summary .target-wallet-heading > span:last-child {
  display: grid;
  gap: 2px;
}

.member-wallet-summary .target-wallet-heading strong {
  color: #f5f8ff;
  font-size: 14px;
  line-height: 1.1;
}

.member-wallet-summary .target-wallet-heading small {
  color: #8fa2c2;
  font-size: 10px;
}

.member-wallet-summary .target-wallet-refresh {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(122, 148, 194, .28);
  color: #b9c7dc;
  background: rgba(13, 23, 42, .28);
}

.member-wallet-summary .target-wallet-refresh svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}

.member-wallet-summary .target-wallet-balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 13px 5px 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.member-wallet-summary .target-wallet-balance {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 8px;
  border-left: 1px solid rgba(126, 150, 194, .16);
}

.member-wallet-summary .target-wallet-balance:first-child {
  border-left: 0;
}

.member-wallet-summary .target-wallet-balance > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border-left: 0;
}

.member-wallet-summary .target-wallet-balance small {
  color: #9bacc8;
  font-size: 10px;
  font-weight: 700;
}

.member-wallet-summary .target-wallet-balance strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-wallet-summary .target-wallet-balance.is-compact strong {
  font-size: 12px;
}

.member-wallet-summary .wallet-coin-mark {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  font-size: 9px;
}

.member-wallet-summary .target-wallet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 12px 12px;
}

.member-wallet-summary .target-wallet-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid rgba(108, 145, 205, .3);
  border-radius: 5px;
  color: #e8effc;
  background: rgba(20, 31, 53, .46);
}

.member-wallet-summary .target-wallet-action:first-child {
  border-color: rgba(237, 202, 134, .38);
  color: #f2d38f;
  background: rgba(94, 75, 37, .2);
}

.member-wallet-summary .target-wallet-action span,
.member-wallet-summary .target-wallet-action span svg {
  width: 20px;
  height: 20px;
}

.member-wallet-summary .target-wallet-action strong {
  color: inherit;
  font-size: 13px;
}

/* A single remembered wallet currency drives every page-bet game. */
.wallet-coin-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #071622;
  background: #35d79f;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.wallet-coin-mark.is-trx {
  color: #fff;
  background: #ef4d5c;
}

.wallet-coin-mark.is-cny {
  color: #312300;
  background: #f5cb6d;
}

.top-balance {
  gap: 2px;
  padding: 0 3px 0 4px;
}

.top-balance .top-balance-main {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 4px;
  width: auto;
  min-width: 0;
  height: 28px;
  padding: 0 2px;
  color: #eaf2ff;
  background: transparent;
}

.top-balance-main small {
  flex: 0 0 auto;
  color: #83efd0;
  font-size: 9px;
  font-weight: 900;
}

.top-balance-main span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.top-balance .top-balance-refresh {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.wallet-coin-caret {
  display: inline-grid;
  place-items: center;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  color: #9cadc8;
  font-style: normal;
  transform: rotate(90deg);
}

.wallet-coin-caret svg,
.wallet-coin-caret .target-svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}

.game-title-balance {
  border: 0;
  cursor: default;
}

.game-title-balance.is-switchable {
  cursor: pointer;
}

.game-title-balance .wallet-coin-mark {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
  font-size: 9px;
}

.game-title-balance .wallet-coin-caret {
  flex-basis: 11px;
  width: 11px;
}

.wallet-currency-popover {
  z-index: 140;
  padding: 5px;
  border: 1px solid rgba(92, 122, 173, .48);
  border-radius: 8px;
  background: #142039;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .46);
}

.wallet-currency-popover button {
  display: grid;
  grid-template-columns: 20px 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  color: #dce8f9;
  background: transparent;
  text-align: left;
}

.wallet-currency-popover button + button {
  margin-top: 2px;
}

.wallet-currency-popover button.active {
  color: #fff;
  background: rgba(32, 216, 162, .13);
}

.wallet-currency-popover button strong {
  font-size: 12px;
}

.wallet-currency-popover button span {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-support-line button {
  border: 1px solid transparent;
}

.money-support-line button.active {
  border-color: #28d8a2;
  color: #fff;
  background: #19443f;
  box-shadow: inset 0 0 0 1px rgba(40, 216, 162, .1);
}

.money-support-line .wallet-coin-mark {
  width: 17px;
  height: 17px;
}

.money-lead strong {
  color: #5ce2ba;
}

.page-bet-success-modal {
  position: relative;
  width: min(340px, calc(100vw - 30px));
  padding: 26px 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(76, 132, 166, .58);
  border-radius: 10px;
  background: #142039;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .46);
  animation: page-bet-success-in .22s ease-out;
}

@keyframes page-bet-success-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.security-modal .page-bet-success-close {
  position: absolute;
  top: 11px;
  right: 11px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  padding: 0;
  border: 1px solid #3b577f;
  border-radius: 50%;
  color: #9fb0c9;
  background: #22314c;
}

.page-bet-success-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.page-bet-success-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid rgba(69, 221, 177, .52);
  border-radius: 50%;
  background: rgba(69, 221, 177, .12);
  box-shadow: 0 0 26px rgba(69, 221, 177, .15);
}

.page-bet-success-icon i {
  width: 25px;
  height: 13px;
  border-bottom: 4px solid #45ddb1;
  border-left: 4px solid #45ddb1;
  transform: translateY(-3px) rotate(-45deg);
}

.page-bet-success-modal > span {
  display: block;
  color: #45ddb1;
  font-size: 9px;
  font-weight: 800;
}

.page-bet-success-modal h3 {
  margin: 5px 0 0;
  font-size: 21px;
}

.page-bet-success-modal > p {
  margin: 7px 0 16px;
  color: #96a9c4;
  font-size: 11px;
  font-weight: 500;
}

.page-bet-success-modal dl {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid #2d466c;
  border-radius: 6px;
  background: #0d1b32;
  text-align: left;
}

.page-bet-success-modal dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 39px;
  padding: 6px 10px;
  border-bottom: 1px solid #263e60;
}

.page-bet-success-modal dl > div:last-child {
  border-bottom: 0;
}

.page-bet-success-modal dt,
.page-bet-success-modal dd {
  min-width: 0;
  margin: 0;
}

.page-bet-success-modal dt {
  color: #7e93b1;
  font-size: 10px;
}

.page-bet-success-modal dd {
  overflow: hidden;
  color: #f4cc67;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-bet-success-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.security-modal .page-bet-success-actions button {
  min-width: 0;
  height: 42px;
  border: 1px solid #3a557e;
  border-radius: 5px;
  color: #dce5f2;
  background: #1a3152;
  font-size: 11px;
}

.security-modal .page-bet-success-actions button.primary {
  border-color: #45ddb1;
  color: #06231d;
  background: #45ddb1;
}

.page-bet-balance-modal {
  position: relative;
  width: min(360px, calc(100vw - 30px));
  padding: 20px 18px 16px;
  border: 1px solid rgba(76, 107, 160, .48);
  border-radius: 10px;
  background: #142039;
}

.page-bet-balance-modal h3 {
  margin: 0 34px 7px 0;
  color: #fff;
  font-size: 17px;
}

.page-bet-balance-modal > p {
  margin: 0;
  color: #aebdd4;
  font-size: 12px;
  line-height: 1.65;
}

.security-modal .page-bet-balance-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  color: #9eacc2;
  background: #22314c;
}

.security-modal .page-bet-balance-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.page-bet-balance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.page-bet-balance-options > span {
  grid-column: 1 / -1;
  color: #8294b1;
  font-size: 11px;
}

.page-bet-balance-options button {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 50px;
  padding: 7px 10px;
  border: 1px solid #334666;
  border-radius: 6px;
  color: #fff;
  background: #1b2943;
  text-align: left;
}

.page-bet-balance-options button strong {
  color: #5ce2ba;
  font-size: 13px;
}

.page-bet-balance-options button small,
.page-bet-balance-only {
  overflow: hidden;
  color: #96a7c1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-bet-balance-only {
  display: block;
  margin-top: 13px;
}

.page-bet-balance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.page-bet-balance-actions button {
  min-width: 0;
  height: 40px;
  border-radius: 6px;
  color: #c8d5e8;
  background: #273753;
  font-size: 12px;
  font-weight: 850;
}

.page-bet-balance-actions button.primary {
  color: #071923;
  background: linear-gradient(180deg, #72edc6, #2fd4a2);
}

.page-bet-balance-actions button:only-child {
  grid-column: 1 / -1;
}
/* 注册默认只展开必填项；选填资料按需展开，折叠不清空值。 */
.register-optional > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: #b6c8df;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.register-optional > summary::-webkit-details-marker { display: none; }
.register-optional > summary::after { content: "+"; font-size: 20px; color: #52dbc3; }
.register-optional[open] > summary::after { content: "−"; }
.register-optional > summary:focus-visible { outline: 2px solid #52dbc3; outline-offset: 3px; }
.register-profile-fields { display: grid; gap: 14px; padding-top: 8px; min-width: 0; }
.register-profile-fields > .auth-optional-label { margin-bottom: -7px; }

.auth-required-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.auth-required-field > label:first-child {
  color: #c5d2e7;
  font-size: 13px;
}

.auth-required-mark {
  color: #ff8585;
  font-weight: 700;
}

.auth-optional-label {
  margin-bottom: 7px;
  color: #c5d2e7;
  font-size: 13px;
}

.register-profile-note {
  color: #94a6c3;
  line-height: 1.5;
}
.home-notice-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 10px 0 12px;
  padding: 0 8px 0 11px;
  overflow: hidden;
  border: 1px solid rgba(95, 224, 189, .18);
  border-radius: 7px;
  color: #dce8fb;
  background: #1d2a47;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.home-notice-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4ee0b1;
  font-size: 13px;
  white-space: nowrap;
}

.home-notice-label svg {
  width: 18px;
  height: 18px;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-notice-window {
  min-width: 0;
  height: 42px;
  overflow: hidden;
}

.home-notice-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0;
  overflow: hidden;
  color: #dce8fb;
  background: transparent;
  font-size: 13px;
  text-align: left;
}

.home-notice-track {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 48px;
  width: max-content;
  font-size: 13px;
}

.home-notice-track.is-scrolling {
  animation: home-notice-marquee var(--home-notice-duration, 14s) linear infinite;
  will-change: transform;
}

.home-notice-track:not(.is-scrolling) .home-notice-copy[aria-hidden="true"] {
  display: none;
}

.home-notice-copy {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  line-height: 42px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.home-notice-service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  height: 32px;
  padding: 0 8px;
  border-left: 1px solid rgba(127, 145, 176, .28);
  color: #56dab1;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.home-notice-service svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@keyframes home-notice-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--home-notice-shift, -100%)); }
}

.notice-modal-mask {
  align-items: center;
  padding: 18px 14px;
  background: rgba(3, 10, 23, .72);
  backdrop-filter: blur(7px);
}

.notice-modal {
  position: relative;
  display: flex;
  width: min(100%, 600px);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  align-items: center;
}

.notice-modal-tabs {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  gap: 2px;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.notice-modal-tabs::-webkit-scrollbar {
  display: none;
}

.notice-modal-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 126px;
  max-width: 190px;
  height: 48px;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 7px 7px 0 0;
  color: #bed0ea;
  background: #1b2b47;
  font-size: 14px;
}

.notice-modal-tabs button.active {
  color: #07152b;
  background: #52ddb0;
  font-weight: 900;
}

.notice-modal-tabs button svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.notice-modal-tabs button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-modal-panel {
  align-self: stretch;
  max-height: min(66dvh, 680px);
  overflow-y: auto;
  border: 1px solid rgba(104, 143, 195, .28);
  border-radius: 0 0 8px 8px;
  color: #e9f1ff;
  background: #10203a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.notice-modal-cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58dvh;
  object-fit: contain;
  background: #09162a;
}

.notice-modal-content {
  padding: 18px 20px;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.75;
}

.notice-modal-content p,
.notice-modal-content h1,
.notice-modal-content h2,
.notice-modal-content h3,
.notice-modal-content h4,
.notice-modal-content ul,
.notice-modal-content ol,
.notice-modal-content blockquote {
  margin-top: 0;
  margin-bottom: 12px;
}

.notice-modal-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: 6px;
}

.notice-modal-suppress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: 7px;
  color: #eef5ff;
  background: rgba(12, 25, 46, .86);
  cursor: pointer;
}

.notice-modal-suppress input {
  width: 20px;
  height: 20px;
  accent-color: #52ddb0;
}

.notice-modal-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 19, 35, .72);
}

.notice-modal-close svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
  .home-notice-track.is-scrolling {
    animation: none;
  }

  .home-notice-track.is-scrolling .home-notice-copy[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 480px) {
  .notice-modal-mask {
    padding: 12px 10px;
  }

  .notice-modal-tabs button {
    min-width: 112px;
    height: 44px;
    padding: 0 11px;
    font-size: 13px;
  }

  .notice-modal-panel {
    max-height: 65dvh;
  }

  .notice-modal-content {
    padding: 15px;
    font-size: 13px;
  }
}

.record-load-failure,
.startup-failure {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 18px;
  padding: 24px 18px;
  border: 1px solid rgba(255, 193, 92, .3);
  border-radius: 8px;
  color: #dce8fb;
  background: #172640;
  text-align: center;
}

.record-load-failure strong,
.startup-failure strong {
  font-size: 16px;
}

.record-load-failure span,
.startup-failure span {
  color: #93a8c8;
  font-size: 13px;
  line-height: 1.6;
}

.record-load-failure button,
.startup-failure button {
  min-width: 128px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 6px;
  color: #071a2e;
  background: #52ddb0;
  font-weight: 850;
}

.startup-failure-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

.startup-failure {
  width: min(calc(100% - 32px), 420px);
}

.app-update-prompt {
  position: fixed;
  z-index: 1600;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(calc(100% - 24px), 420px);
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(82, 221, 176, .42);
  border-radius: 8px;
  color: #e9f4ff;
  background: #10223d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  transform: translateX(-50%);
}

.app-update-prompt span {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.app-update-prompt button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  color: #071a2e;
  background: #52ddb0;
  font-size: 13px;
  font-weight: 850;
}

/* Keep uploaded game artwork visible beneath the title. */
.game-card .game-name {
  background: linear-gradient(
    180deg,
    rgba(3, 8, 18, 0) 0%,
    rgba(3, 8, 18, .12) 32%,
    rgba(3, 8, 18, .5) 100%
  );
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .95),
    0 0 7px rgba(0, 0, 0, .7);
}

/* 首页游戏图标下方独立显示名称与真实开奖节奏，不再覆盖上传素材。 */
.game-card button {
  display: flex;
  height: auto;
  aspect-ratio: auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(93, 132, 180, .22);
  background: rgba(14, 30, 53, .92);
}

.game-card img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #10233e;
}

.game-card-info {
  display: flex;
  min-height: 52px;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px 6px;
  border-top: 1px solid rgba(111, 155, 205, .2);
  color: #eaf3ff;
  background: rgba(20, 43, 73, .9);
}

.game-card-info.is-name-hidden {
  min-height: 38px;
  padding-top: 6px;
}

.game-card .game-card-info .game-name {
  position: static;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: #f5f9ff;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.game-draw-countdown {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  line-height: 16px;
  white-space: nowrap;
}

.game-draw-countdown b {
  color: #63e6be;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.game-draw-countdown span {
  overflow: hidden;
  color: #b7c9df;
  font-size: 10px;
  text-overflow: ellipsis;
}

.game-draw-countdown[data-countdown-kind="official"] b {
  color: #ffd76f;
}

.game-draw-countdown[data-countdown-state="loading"] b,
.game-draw-countdown[data-countdown-state="waiting"] b {
  color: #7890ad;
}

@media (max-width: 390px) {
  .game-card-info {
    min-height: 48px;
    padding-right: 3px;
    padding-left: 3px;
  }

  .game-card-info.is-name-hidden {
    min-height: 36px;
  }

  .game-draw-countdown {
    gap: 3px;
  }

  .game-draw-countdown b {
    font-size: 11px;
  }

  .game-draw-countdown span {
    font-size: 9px;
  }
}