:root {
  --text: #fff8e8;
  --muted: rgba(255, 248, 232, 0.7);
  --gold: #ffd36b;
  --green: #24c581;
  --red: #e74745;
  --panel: rgba(12, 18, 34, 0.76);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

/* Ornate aqua and gold card back, inspired by a premium compass-style deck. */
.card.back,
.deck-stack {
  --back-gold: #d9b76b;
  --back-cream: #fff7df;
  --back-ink: #1b6f64;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 247, 223, 0.96) 0 10%, transparent 11%),
    conic-gradient(from 45deg at 50% 50%, transparent 0 10%, rgba(255, 244, 210, 0.96) 10% 15%, transparent 15% 25%, rgba(255, 244, 210, 0.96) 25% 30%, transparent 30% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 23%, rgba(217, 183, 107, 0.95) 24% 26%, rgba(255, 247, 223, 0.82) 27% 30%, transparent 31%),
    linear-gradient(135deg, transparent 0 47%, rgba(255, 247, 223, 0.76) 48% 50%, transparent 51%),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 247, 223, 0.58) 48% 50%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(89, 82, 48, 0.1) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, #fbfff2 0%, #cfead6 22%, #6ebea8 58%, var(--back-ink) 100%);
  border: 2px solid var(--back-gold);
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 223, 0.96),
    inset 0 0 0 5px rgba(217, 183, 107, 0.36),
    inset 0 -10px 18px rgba(9, 82, 70, 0.22),
    0 7px 14px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.deck-stack {
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 223, 0.96),
    inset 0 0 0 5px rgba(217, 183, 107, 0.36),
    inset 0 -10px 18px rgba(9, 82, 70, 0.22),
    7px 5px 0 rgba(255, 255, 255, 0.2),
    12px 9px 0 rgba(255, 255, 255, 0.12),
    0 14px 22px rgba(0, 0, 0, 0.28);
}

.card.back::before,
.deck-stack::before {
  content: "";
  position: absolute;
  inset: 9px 7px;
  border: 1px solid rgba(255, 247, 223, 0.9);
  border-radius: 6px;
  background:
    radial-gradient(circle at 18% 18%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 18%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 18% 82%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 82%, var(--back-cream) 0 3%, transparent 4%),
    linear-gradient(90deg, transparent 0 42%, rgba(217, 183, 107, 0.78) 43% 57%, transparent 58%),
    linear-gradient(0deg, transparent 0 42%, rgba(217, 183, 107, 0.62) 43% 57%, transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(217, 183, 107, 0.46),
    inset 0 0 0 4px rgba(255, 247, 223, 0.28);
}

.card.back::after,
.deck-stack::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #4bbccd 0 20%, transparent 22%),
    conic-gradient(from 45deg, var(--back-cream) 0 12.5%, var(--back-gold) 12.5% 25%, var(--back-cream) 25% 37.5%, var(--back-gold) 37.5% 50%, var(--back-cream) 50% 62.5%, var(--back-gold) 62.5% 75%, var(--back-cream) 75% 87.5%, var(--back-gold) 87.5% 100%);
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  filter: drop-shadow(0 1px 1px rgba(79, 63, 29, 0.45));
  transform: translate(-50%, -50%);
}

/* Final room controls: hide the fixed center deck; cards still animate through player hands. */
.deck-stack {
  display: none !important;
}

/* Absolute final centering for round win/loss numbers. */
.player.active-seat > .round-delta {
  top: 142px !important;
  left: 50% !important;
  width: 124px !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 14 !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  font-size: 30px !important;
}

.player.self.active-seat > .round-delta {
  top: 182px !important;
  left: 50% !important;
  width: 210px !important;
  font-size: 46px !important;
}

/* Final override: keep the rules drawer mounted so it can slide in from the right. */
.rules-drawer.hidden {
  display: block !important;
  pointer-events: none !important;
}

/* EOF absolute final top frame: real full-width CSS rail, after every room-head rule. */
.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 14px 18px 18px !important;
  overflow: visible !important;
}

.room-head::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 8px !important;
  bottom: 4px !important;
  z-index: -2 !important;
  width: auto !important;
  background: linear-gradient(180deg, #f7d36a 0%, #b87922 48%, #6d4312 100%) !important;
  clip-path: polygon(0 14%, 100% 14%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28)) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  right: 5px !important;
  top: 14px !important;
  bottom: 11px !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 116, 0.78),
    inset 0 0 0 3px rgba(28, 82, 42, 0.56) !important;
  pointer-events: none !important;
}

.room-head #backBtn {
  left: 16px !important;
  top: 18px !important;
}

.room-head #ruleBtn {
  right: 16px !important;
  top: 18px !important;
}

/* EOF top frame polish: keep full width, restore smoother ornate rail styling. */
.room-head::before {
  top: 7px !important;
  bottom: 5px !important;
  background:
    linear-gradient(180deg, #f8d66e 0%, #d09b34 34%, #8b5b17 100%) !important;
  clip-path: path("M 10 15 Q 10 8 18 8 L 1102 8 Q 1110 8 1110 15 L 1110 160 Q 1110 183 1086 183 L 800 183 Q 774 183 759 160 L 727 112 Q 713 91 688 91 L 432 91 Q 407 91 393 112 L 361 160 Q 346 183 320 183 L 34 183 Q 10 183 10 160 Z") !important;
}

.room-head::after {
  left: 8px !important;
  right: 8px !important;
  top: 13px !important;
  bottom: 12px !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: path("M 10 14 Q 10 8 17 8 L 1087 8 Q 1094 8 1094 14 L 1094 145 Q 1094 166 1072 166 L 790 166 Q 766 166 752 145 L 719 97 Q 705 78 682 78 L 428 78 Q 405 78 391 97 L 358 145 Q 344 166 320 166 L 32 166 Q 10 166 10 145 Z") !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 130, 0.88),
    inset 0 0 0 3px rgba(9, 62, 38, 0.7),
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.18) !important;
}

@supports not (clip-path: path("M 0 0")) {
  .room-head::before {
    border-radius: 18px 18px 24px 24px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  }

  .room-head::after {
    border-radius: 14px 14px 20px 20px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  }
}

/* TRUE EOF 183: replace lobby Niu/Jinhua entries with Hundred Niu and Benz BMW styles. */
#lobby .game-card.hundred {
  background:
    radial-gradient(ellipse at 58% 48%, rgba(0, 255, 167, 0.24), transparent 28%),
    radial-gradient(ellipse at 88% 31%, rgba(94, 255, 184, 0.36), transparent 38%),
    linear-gradient(90deg, #063f31 0%, #08714a 52%, #11c774 100%) !important;
  border-color: rgba(45, 247, 139, 0.72) !important;
}

#lobby .game-card.racing {
  background:
    radial-gradient(ellipse at 60% 50%, rgba(255, 230, 120, 0.26), transparent 30%),
    radial-gradient(ellipse at 90% 30%, rgba(255, 176, 60, 0.38), transparent 36%),
    linear-gradient(90deg, #5a2a05 0%, #9b5c13 52%, #f0a130 100%) !important;
  border-color: rgba(255, 174, 58, 0.78) !important;
}

#lobby .game-card.hundred em::before {
  color: #63ffc0;
}

#lobby .game-card.racing em::before {
  color: #ffc14a;
}

#lobby .game-card.hundred .lobby-card-stack small:nth-child(1),
#lobby .game-card.racing .lobby-card-stack small:nth-child(1),
#lobby .game-card.racing .lobby-card-stack small:nth-child(2) {
  color: #2c2b25;
}

#lobby .game-card.hundred .lobby-card-stack small:nth-child(2),
#lobby .game-card.hundred .lobby-card-stack small:nth-child(3),
#lobby .game-card.racing .lobby-card-stack small:nth-child(3) {
  color: #d7293b;
}

#lobby .game-card.hundred strong,
#lobby .game-card.racing strong {
  font-size: 26px !important;
}

@media (max-width: 430px) {
  #lobby .game-card.hundred strong,
  #lobby .game-card.racing strong {
    font-size: 24px !important;
  }
}

/* TRUE EOF 184: league game tabs mirror the lobby game list. */
#clubPage .club-game-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 6px !important;
}

#clubPage .club-game-tabs button {
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* TRUE EOF 186: remove the league top header and move owner points entry to Mine. */
#clubPage.club-page {
  grid-template-rows: 1fr auto !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  align-content: start !important;
}

#adminPage .admin-note:has(.mine-league-owner) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#adminPage .mine-league-owner {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.32);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.88), rgba(21, 16, 75, 0.92));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#adminPage .mine-league-owner span {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4, #d89524);
  color: #251405;
  font-size: 12px;
  font-weight: 950;
}

#adminPage .mine-league-owner strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.45);
}

#adminPage .mine-league-owner em {
  color: rgba(235, 226, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

#adminPage .mine-league-owner button {
  justify-self: start;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4 0%, #f2bf45 48%, #c17a18 100%);
  color: #251405;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* TRUE EOF 187: remove the Mine page top header. */
#adminPage.admin-page {
  grid-template-rows: 1fr auto !important;
}

#adminPage > .topbar {
  display: none !important;
}

#adminPage .admin-panel {
  align-content: start !important;
}

/* TRUE EOF 188: league summary strip above game categories. */
#clubPage .club-panel {
  grid-template-rows: auto auto 1fr !important;
  gap: 10px !important;
}

#clubPage .club-league-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.34);
  background:
    radial-gradient(ellipse at 70% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.82), rgba(21, 16, 75, 0.88));
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .club-league-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#clubPage .club-league-summary span {
  color: #ffe477;
  font-size: 11px;
  font-weight: 950;
}

#clubPage .club-league-summary strong {
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.5);
}

#clubPage .club-league-summary em {
  flex: 0 0 auto;
  max-width: 58%;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(11, 8, 48, 0.52);
  color: rgba(235, 226, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#clubPage .club-league-summary b {
  color: #ffe477;
}

/* TRUE EOF 189: keep league label and name on one line. */
#clubPage .club-league-summary div {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#clubPage .club-league-summary span {
  flex: 0 0 auto !important;
}

#clubPage .club-league-summary strong {
  min-width: 0 !important;
  font-size: 18px !important;
}

/* TRUE EOF 190: make empty waiting seats easier to read. */
#room .player.empty-seat {
  width: 68px !important;
  height: 96px !important;
}

#room .seat-card.empty-chair {
  width: 58px !important;
  height: 86px !important;
  min-width: 58px !important;
  min-height: 86px !important;
  gap: 9px !important;
  border-radius: 12px !important;
}

#room .seat-card.empty-chair i {
  width: 24px !important;
  height: 23px !important;
}

#room .seat-card.empty-chair i::before {
  width: 11px !important;
  height: 11px !important;
}

#room .seat-card.empty-chair i::after {
  width: 22px !important;
  height: 13px !important;
}

#room .seat-card.empty-chair span {
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 430px) {
  #room .player.empty-seat {
    width: 62px !important;
    height: 88px !important;
  }

  #room .seat-card.empty-chair {
    width: 54px !important;
    height: 80px !important;
    min-width: 54px !important;
    min-height: 80px !important;
  }

  #room .seat-card.empty-chair span {
    font-size: 11px !important;
  }
}

/* TRUE EOF 191: remove the four small decorative dots on the game table felt. */
#room .table::before {
  background:
    linear-gradient(90deg, rgba(255, 228, 147, 0.34) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 228, 147, 0.34) calc(100% - 2px)),
    radial-gradient(ellipse at 50% 18%, rgba(70, 170, 116, 0.45), transparent 34%),
    radial-gradient(ellipse at 50% 86%, rgba(5, 42, 31, 0.58), transparent 36%),
    linear-gradient(180deg, #176348 0%, #0e4b37 42%, #062a22 100%) !important;
}

/* TRUE EOF 192: hide the raw login screen while the saved session is being restored. */
body.app-booting {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(116, 70, 255, 0.28), transparent 30%),
    radial-gradient(ellipse at 50% 42%, rgba(25, 185, 122, 0.16), transparent 46%),
    linear-gradient(180deg, #090a2a 0%, #151060 44%, #070926 100%) !important;
}

body.app-booting main > section {
  visibility: hidden !important;
}

body.app-booting::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(116, 70, 255, 0.3), transparent 30%),
    radial-gradient(ellipse at 50% 42%, rgba(25, 185, 122, 0.16), transparent 46%),
    linear-gradient(180deg, #090a2a 0%, #151060 44%, #070926 100%);
  pointer-events: none;
}

/* TRUE EOF 186: remove the league top header and move owner points entry to Mine. */
#clubPage.club-page {
  grid-template-rows: 1fr auto !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  align-content: start !important;
}

#adminPage .admin-note:has(.mine-league-owner) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#adminPage .mine-league-owner {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.32);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.88), rgba(21, 16, 75, 0.92));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#adminPage .mine-league-owner span {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4, #d89524);
  color: #251405;
  font-size: 12px;
  font-weight: 950;
}

#adminPage .mine-league-owner strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.45);
}

#adminPage .mine-league-owner em {
  color: rgba(235, 226, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

#adminPage .mine-league-owner button {
  justify-self: start;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4 0%, #f2bf45 48%, #c17a18 100%);
  color: #251405;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* TRUE EOF 186: remove the league top header and move owner points entry to Mine. */
#clubPage.club-page {
  grid-template-rows: 1fr auto !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  align-content: start !important;
}

#adminPage .admin-note:has(.mine-league-owner) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#adminPage .mine-league-owner {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.32);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.88), rgba(21, 16, 75, 0.92));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#adminPage .mine-league-owner span {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4, #d89524);
  color: #251405;
  font-size: 12px;
  font-weight: 950;
}

#adminPage .mine-league-owner strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.45);
}

#adminPage .mine-league-owner em {
  color: rgba(235, 226, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

#adminPage .mine-league-owner button {
  justify-self: start;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4 0%, #f2bf45 48%, #c17a18 100%);
  color: #251405;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* FINAL: top room frame uses the provided source-code SVG, not CSS clip-path rails. */
.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 14px 18px 18px !important;
  overflow: visible !important;
}

.room-head::before,
.room-head::after {
  display: none !important;
  content: none !important;
}

.room-head-art {
  position: absolute !important;
  left: -4px !important;
  right: -4px !important;
  top: -2px !important;
  bottom: -8px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.26)) !important;
}

.room-head-art svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.room-head-green-bg {
  fill: url(#roomHeadGreenGradient) !important;
}

.room-head-gold-line {
  fill: none !important;
  stroke: #d6a23a !important;
  stroke-width: 7 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head-gold-line-dark {
  fill: none !important;
  stroke: #8d651b !important;
  stroke-width: 2 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head-inner-line {
  fill: none !important;
  stroke: #e1b650 !important;
  stroke-width: 2 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head #backBtn {
  left: 16px !important;
  top: 18px !important;
}

.room-head #ruleBtn {
  right: 16px !important;
  top: 18px !important;
}

/* EOF source-code top frame: use the provided SVG paths as the actual border. */
.room-head::before,
.room-head::after {
  display: none !important;
}

.room-head-art {
  position: absolute;
  left: -4px;
  right: -4px;
  top: -2px;
  bottom: -8px;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.26));
}

.room-head-art svg {
  width: 100%;
  height: 100%;
  display: block;
  preserveAspectRatio: none;
}

.room-head-green-bg {
  fill: url(#roomHeadGreenGradient);
}

.room-head-gold-line {
  fill: none;
  stroke: #d6a23a;
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.room-head-gold-line-dark {
  fill: none;
  stroke: #8d651b;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.room-head-inner-line {
  fill: none;
  stroke: #e1b650;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.room-head #backBtn,
.room-head #ruleBtn {
  z-index: 2 !important;
}

/* EOF top frame polish: keep full width, restore smoother ornate rail styling. */
.room-head::before {
  top: 7px !important;
  bottom: 5px !important;
  background:
    linear-gradient(180deg, #f8d66e 0%, #d09b34 34%, #8b5b17 100%) !important;
  clip-path: path("M 10 15 Q 10 8 18 8 L 1102 8 Q 1110 8 1110 15 L 1110 160 Q 1110 183 1086 183 L 800 183 Q 774 183 759 160 L 727 112 Q 713 91 688 91 L 432 91 Q 407 91 393 112 L 361 160 Q 346 183 320 183 L 34 183 Q 10 183 10 160 Z") !important;
}

.room-head::after {
  left: 8px !important;
  right: 8px !important;
  top: 13px !important;
  bottom: 12px !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: path("M 10 14 Q 10 8 17 8 L 1087 8 Q 1094 8 1094 14 L 1094 145 Q 1094 166 1072 166 L 790 166 Q 766 166 752 145 L 719 97 Q 705 78 682 78 L 428 78 Q 405 78 391 97 L 358 145 Q 344 166 320 166 L 32 166 Q 10 166 10 145 Z") !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 130, 0.88),
    inset 0 0 0 3px rgba(9, 62, 38, 0.7),
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.18) !important;
}

@supports not (clip-path: path("M 0 0")) {
  .room-head::before {
    border-radius: 18px 18px 24px 24px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  }

  .room-head::after {
    border-radius: 14px 14px 20px 20px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  }
}

/* EOF top frame polish: keep full width, restore smoother ornate rail styling. */
.room-head::before {
  top: 7px !important;
  bottom: 5px !important;
  background:
    linear-gradient(180deg, #f8d66e 0%, #d09b34 34%, #8b5b17 100%) !important;
  clip-path: path("M 10 15 Q 10 8 18 8 L 1102 8 Q 1110 8 1110 15 L 1110 160 Q 1110 183 1086 183 L 800 183 Q 774 183 759 160 L 727 112 Q 713 91 688 91 L 432 91 Q 407 91 393 112 L 361 160 Q 346 183 320 183 L 34 183 Q 10 183 10 160 Z") !important;
}

.room-head::after {
  left: 8px !important;
  right: 8px !important;
  top: 13px !important;
  bottom: 12px !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: path("M 10 14 Q 10 8 17 8 L 1087 8 Q 1094 8 1094 14 L 1094 145 Q 1094 166 1072 166 L 790 166 Q 766 166 752 145 L 719 97 Q 705 78 682 78 L 428 78 Q 405 78 391 97 L 358 145 Q 344 166 320 166 L 32 166 Q 10 166 10 145 Z") !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 130, 0.88),
    inset 0 0 0 3px rgba(9, 62, 38, 0.7),
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.18) !important;
}

@supports not (clip-path: path("M 0 0")) {
  .room-head::before {
    border-radius: 18px 18px 24px 24px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  }

  .room-head::after {
    border-radius: 14px 14px 20px 20px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  }
}

/* Absolute final top frame: real CSS rail, not an inset SVG image. */
.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 14px 18px 18px !important;
  overflow: visible !important;
}

.room-head::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 8px !important;
  bottom: 4px !important;
  z-index: -2 !important;
  width: auto !important;
  background:
    linear-gradient(180deg, #f7d36a 0%, #b87922 48%, #6d4312 100%) !important;
  clip-path: polygon(
    0 14%,
    100% 14%,
    100% 78%,
    78% 78%,
    74% 77%,
    71% 66%,
    66% 40%,
    63% 35%,
    37% 35%,
    34% 40%,
    29% 66%,
    26% 77%,
    22% 78%,
    0 78%
  ) !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28)) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  right: 5px !important;
  top: 14px !important;
  bottom: 11px !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: polygon(
    0 12%,
    100% 12%,
    100% 76%,
    78% 76%,
    74% 75%,
    71% 64%,
    66% 38%,
    63% 33%,
    37% 33%,
    34% 38%,
    29% 64%,
    26% 75%,
    22% 76%,
    0 76%
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 116, 0.78),
    inset 0 0 0 3px rgba(28, 82, 42, 0.56) !important;
  pointer-events: none !important;
}

.room-head #backBtn {
  left: 16px !important;
  top: 18px !important;
}

.room-head #ruleBtn {
  right: 16px !important;
  top: 18px !important;
}

/* Room rules drawer. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.room-head .rule-toggle {
  width: 58px;
  height: 34px;
  padding: 0;
  border: 0;
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.34);
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 5px 12px rgba(0, 0, 0, 0.2);
}

.rules-drawer {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: block !important;
  pointer-events: auto;
}

.rules-drawer.hidden {
  display: block !important;
  pointer-events: none;
}

.rules-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 8, 20, 0.45);
  opacity: 1;
  transition: opacity 0.22s ease;
}

.rules-drawer.hidden .rules-backdrop {
  opacity: 0;
}

.rules-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-left: 2px solid rgba(228, 185, 83, 0.95);
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 218, 117, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(22, 83, 65, 0.98), rgba(5, 42, 36, 0.98));
  box-shadow: -16px 0 34px rgba(0, 0, 0, 0.42);
  transform: translateX(0);
  transition: transform 0.26s ease;
}

.rules-drawer.hidden .rules-panel {
  transform: translateX(102%);
}

.rules-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rules-panel header span {
  color: #f4ce67;
  font-size: 12px;
  font-weight: 950;
}

.rules-panel header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #2b1800;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.26);
}

.rules-panel h3 {
  margin: 6px 0 14px;
  color: #fff8e8;
  font-size: 28px;
  font-weight: 950;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.rules-content {
  display: grid;
  gap: 10px;
}

.rules-content section {
  padding: 11px 12px;
  border: 1px solid rgba(255, 224, 138, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rules-content strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe08a;
  font-size: 15px;
  font-weight: 950;
}

.rules-content p {
  margin: 0;
  color: rgba(255, 248, 232, 0.9);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.65;
}

/* Final table felt: dark emerald gradient, keeping the existing gold rail. */
.table::before {
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 12%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 17% 88%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 88%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(216, 185, 104, 0.08) 24px 26px, transparent 26px 50px),
    linear-gradient(90deg, rgba(255, 228, 147, 0.34) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 228, 147, 0.34) calc(100% - 2px)),
    radial-gradient(ellipse at 50% 18%, rgba(70, 170, 116, 0.45), transparent 34%),
    radial-gradient(ellipse at 50% 86%, rgba(5, 42, 31, 0.58), transparent 36%),
    linear-gradient(180deg, #176348 0%, #0e4b37 42%, #062a22 100%) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 226, 137, 0.56),
    inset 0 0 0 8px rgba(97, 62, 18, 0.3),
    inset 0 20px 46px rgba(182, 255, 205, 0.08),
    inset 0 -34px 54px rgba(0, 18, 13, 0.48),
    0 0 0 4px rgba(255, 205, 99, 0.72),
    0 0 0 8px rgba(77, 49, 16, 0.88),
    0 16px 30px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(255, 196, 75, 0.28);
}

.table::after {
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(234, 205, 125, 0.07) 18px 20px, transparent 20px 38px),
    radial-gradient(ellipse at 50% 22%, rgba(76, 177, 120, 0.18), transparent 42%) !important;
}

/* Alliance table cards: red casino table with surrounding seats. */
.club-list {
  gap: 14px;
}

.club-table-card {
  display: grid !important;
  justify-items: center !important;
  min-height: 214px !important;
  padding: 12px 10px 10px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(44, 50, 91, 0.96), rgba(24, 25, 55, 0.98)) !important;
  box-shadow:
    0 16px 26px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.club-table-card::before,
.club-table-card::after {
  display: none !important;
}

.club-table-scene {
  position: relative;
  width: min(100%, 330px);
  height: 170px;
  margin: 0 auto;
}

.club-table-scene::before {
  content: "";
  position: absolute;
  inset: 18px 10px 10px;
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 40px),
    linear-gradient(30deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 42px);
  opacity: 0.55;
}

.club-table-top {
  position: absolute;
  left: 50%;
  top: 42px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 190px;
  height: 84px;
  padding: 10px 16px 13px;
  border: 3px solid rgba(116, 53, 35, 0.96);
  border-radius: 34px 34px 28px 28px;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.23), transparent 36%),
    linear-gradient(180deg, #cf3b37 0%, #9b1e22 64%, #6c141b 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 214, 172, 0.42),
    inset 0 -8px 14px rgba(64, 7, 10, 0.38),
    0 10px 0 rgba(61, 48, 38, 0.82),
    0 16px 18px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
}

.club-table-top strong {
  max-width: none !important;
  color: #f8e3c9 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(76, 11, 9, 0.85);
}

.club-table-top span {
  min-width: 108px;
  padding: 3px 10px !important;
  border-radius: 5px !important;
  background: rgba(45, 78, 28, 0.92) !important;
  color: #52ff79 !important;
  font-size: 15px !important;
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(142, 255, 130, 0.16);
}

.club-table-top span:not(.club-round-real) {
  display: none !important;
}

.club-table-base {
  position: absolute;
  left: 50%;
  top: 122px;
  z-index: 3;
  width: 206px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8e5d0, #5b514b 55%, #211d22);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
}

.club-table-chair {
  position: absolute;
  top: 132px;
  z-index: 2;
  width: 58px;
  height: 28px;
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, #36313c, #17171f);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1), 0 8px 12px rgba(0, 0, 0, 0.35);
}

.club-table-chair.c1 { left: 55px; transform: rotate(-8deg); }
.club-table-chair.c2 { left: 50%; transform: translateX(-50%); }
.club-table-chair.c3 { right: 55px; transform: rotate(8deg); }

.club-entry-card {
  position: absolute;
  left: 50%;
  top: 119px;
  z-index: 5;
  width: 38px;
  height: 44px;
  border-radius: 9px;
  background:
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff;
  box-shadow:
    -8px 0 0 -2px rgba(255, 255, 255, 0.72),
    0 8px 12px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
}

.club-entry-card::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 5px;
  width: 12px;
  height: 18px;
  background: linear-gradient(135deg, #ffe36a, #ae7420);
  clip-path: polygon(50% 0, 100% 48%, 62% 48%, 88% 100%, 0 38%, 40% 38%);
}

.club-seat {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.52), transparent 18%),
    linear-gradient(135deg, #2a7d6c, #143158);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 9px 14px rgba(0, 0, 0, 0.28);
}

.club-seat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 42%);
}

.club-seat.filled {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.club-seat.filled b {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5), transparent 26%),
    radial-gradient(circle at 50% 72%, rgba(48, 27, 11, 0.18), transparent 33%),
    linear-gradient(145deg, #ffe08a, #a05a1e);
  color: #271802;
  font-size: 20px;
  font-weight: 950;
  font-style: normal;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.club-seat.empty {
  opacity: 0.38;
  filter: saturate(0.65);
}

.club-seat.s1 { left: 7px; top: 18px; background: linear-gradient(135deg, #333b6c, #151932); }
.club-seat.s2 { left: 72px; top: 0; background: linear-gradient(135deg, #b86b58, #28204b); }
.club-seat.s3 { left: 139px; top: -2px; background: linear-gradient(135deg, #477748, #151b27); }
.club-seat.s4 { right: 72px; top: 0; background: linear-gradient(135deg, #5b4658, #141928); }
.club-seat.s5 { right: 7px; top: 18px; background: linear-gradient(135deg, #66b883, #1a5a48); }
.club-seat.s6 { left: 17px; top: 86px; background: linear-gradient(135deg, #78c5e0, #27547a); }
.club-seat.s7 { right: 17px; top: 86px; background: linear-gradient(135deg, #b7d77a, #27583f); }
.club-seat.s8 { left: 83px; top: 126px; background: linear-gradient(135deg, #8d5b3a, #2b2452); }

.club-table-chair {
  z-index: 1 !important;
  top: 137px !important;
  height: 22px !important;
  opacity: 0.9;
}

.club-table-chair.c1 { left: 68px !important; }
.club-table-chair.c2 { width: 42px !important; }
.club-table-chair.c3 { right: 68px !important; }

/* Refine the lower part of the alliance table: neat chairs and centered card. */
.club-table-base {
  top: 124px !important;
  width: 196px !important;
  height: 10px !important;
  z-index: 3 !important;
  background:
    linear-gradient(180deg, rgba(255, 244, 201, 0.95), rgba(145, 121, 82, 0.96) 48%, rgba(32, 28, 31, 0.94)) !important;
  box-shadow:
    0 5px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.club-table-chair {
  top: 133px !important;
  width: 48px !important;
  height: 24px !important;
  z-index: 2 !important;
  border-radius: 13px 13px 7px 7px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.15), transparent 42%),
    linear-gradient(180deg, #3e3844 0%, #24222b 58%, #121219 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.3),
    0 6px 9px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
}

.club-table-chair::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -8px;
  height: 12px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #615963, #302c35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.club-table-chair.c1 {
  left: 76px !important;
  transform: rotate(-8deg) !important;
}

.club-table-chair.c2 {
  display: none !important;
}

.club-table-chair.c3 {
  right: 76px !important;
  transform: rotate(8deg) !important;
}

.club-entry-card {
  top: 121px !important;
  width: 42px !important;
  height: 48px !important;
  z-index: 6 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 222, 91, 0.12), transparent 30%),
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff !important;
  box-shadow:
    -8px 0 0 -3px rgba(255, 255, 255, 0.76),
    0 7px 10px rgba(0, 0, 0, 0.24) !important;
}

.club-entry-card::after {
  right: 8px !important;
  bottom: 6px !important;
  width: 13px !important;
  height: 18px !important;
}

/* Final polish for the alliance table bottom: smaller chair seats with slim legs. */
.club-table-base {
  top: 126px !important;
  width: 186px !important;
  height: 8px !important;
  border-radius: 999px !important;
}

.club-table-chair {
  top: 139px !important;
  width: 38px !important;
  height: 17px !important;
  border-radius: 12px 12px 7px 7px !important;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #47414c 0%, #25242d 62%, #16161d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 7px rgba(0, 0, 0, 0.28) !important;
}

.club-table-chair::before {
  left: 9px !important;
  right: 9px !important;
  top: -10px !important;
  height: 11px !important;
  border-radius: 9px 9px 3px 3px !important;
  background: linear-gradient(180deg, #706874, #3a3540) !important;
}

.club-table-chair::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -10px;
  height: 10px;
  border-left: 2px solid rgba(118, 103, 86, 0.75);
  border-right: 2px solid rgba(118, 103, 86, 0.75);
  opacity: 0.8;
}

.club-table-chair.c1 {
  left: 86px !important;
  transform: rotate(-9deg) !important;
}

.club-table-chair.c3 {
  right: 86px !important;
  transform: rotate(9deg) !important;
}

.club-entry-card {
  top: 118px !important;
  width: 43px !important;
  height: 50px !important;
}

/* Bottom positions should match the other avatar frames, not chair blocks. */
.club-table-chair {
  top: 126px !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 4 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px),
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5), transparent 26%),
    linear-gradient(145deg, #ffe08a, #a05a1e) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 9px 14px rgba(0, 0, 0, 0.28) !important;
}

.club-table-chair::before,
.club-table-chair::after {
  display: none !important;
}

.club-table-chair.c1 {
  left: 86px !important;
  transform: none !important;
}

.club-table-chair.c2 {
  display: none !important;
}

.club-table-chair.c3 {
  right: 86px !important;
  transform: none !important;
}

.club-entry-card {
  top: 120px !important;
  z-index: 5 !important;
}

/* Remove decorative bottom card/chairs; only real seats should show. */
.club-entry-card,
.club-table-chair {
  display: none !important;
}

.club-seat.s8 {
  left: 92px !important;
  top: 126px !important;
}

.club-seat.s9 {
  left: 50% !important;
  top: 126px !important;
  margin-left: -22px;
}

.club-seat.s10 {
  right: 92px !important;
  top: 126px !important;
}

.club-seat.empty {
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.25) 0 5px, transparent 6px),
    linear-gradient(145deg, rgba(73, 95, 91, 0.72), rgba(40, 55, 63, 0.78)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(180, 215, 205, 0.16),
    0 7px 12px rgba(0, 0, 0, 0.18) !important;
  opacity: 0.72 !important;
}

/* Align the bottom three seats with the top three seats. */
.club-seat.s8,
.club-seat.s9,
.club-seat.s10 {
  top: 126px !important;
  z-index: 5 !important;
  margin-left: 0 !important;
}

.club-seat.s8 {
  left: 72px !important;
  right: auto !important;
}

.club-seat.s9 {
  left: 139px !important;
  right: auto !important;
}

.club-seat.s10 {
  left: auto !important;
  right: 72px !important;
}

/* Compact and regular 10-seat alliance layout: 3 top, 3 bottom, 2 left, 2 right. */
.club-seat {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
}

.club-seat.filled b {
  font-size: 17px !important;
}

.club-seat.s1 {
  left: 24px !important;
  top: 44px !important;
}

.club-seat.s2 {
  left: 96px !important;
  top: 8px !important;
}

.club-seat.s3 {
  left: 50% !important;
  top: 8px !important;
  margin-left: -20px !important;
}

.club-seat.s4 {
  right: 96px !important;
  top: 8px !important;
}

.club-seat.s5 {
  right: 24px !important;
  top: 44px !important;
}

.club-seat.s6 {
  left: 24px !important;
  top: 94px !important;
}

.club-seat.s7 {
  right: 24px !important;
  top: 94px !important;
}

.club-seat.s8 {
  left: 96px !important;
  top: 128px !important;
}

.club-seat.s9 {
  left: 50% !important;
  top: 128px !important;
  margin-left: -20px !important;
}

.club-seat.s10 {
  right: 96px !important;
  top: 128px !important;
}

/* Keep alliance table cards clean: remove the large purple backdrop. */
.club-table-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Final club page background: green felt tone. */
.club-page {
  background:
    radial-gradient(ellipse at 70% 16%, rgba(255, 211, 107, 0.14), transparent 30%),
    radial-gradient(ellipse at 28% 24%, rgba(54, 190, 120, 0.34), transparent 38%),
    radial-gradient(ellipse at 50% 58%, rgba(12, 92, 65, 0.34), transparent 48%),
    linear-gradient(180deg, #183f34 0%, #0f3a31 48%, #08251f 100%) !important;
}

/* Remove table felt line texture while keeping the emerald gradient. */
.table::after {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(76, 177, 120, 0.12), transparent 42%) !important;
}

/* Final emerald felt without rail suit ornaments. */
.table::before {
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 12%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 17% 88%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 88%, rgba(255, 230, 146, 0.46) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(255, 228, 147, 0.34) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 228, 147, 0.34) calc(100% - 2px)),
    radial-gradient(ellipse at 50% 18%, rgba(70, 170, 116, 0.45), transparent 34%),
    radial-gradient(ellipse at 50% 86%, rgba(5, 42, 31, 0.58), transparent 36%),
    linear-gradient(180deg, #176348 0%, #0e4b37 42%, #062a22 100%) !important;
}

.club-table-card > em {
  position: relative !important;
  z-index: 3 !important;
  justify-self: center !important;
  max-width: 300px !important;
  margin-top: -4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(7, 15, 32, 0.45);
  color: rgba(255, 248, 232, 0.82) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  text-align: center;
}

/* Add breathing room between nameplate and ready badge. */
.player.active-seat .ready-badge {
  top: 86px !important;
}

.player.self.active-seat .ready-badge {
  top: 94px !important;
}

/* Keep the bottom player's bet amount clear above the cards. */
.player.self.active-seat .bet-chip {
  top: 96px !important;
  z-index: 16 !important;
}

.player.self.active-seat .cards {
  z-index: 5 !important;
}

/* Lift the bottom player's cards away from the gold table border. */
.player.self.active-seat .cards {
  top: 126px !important;
}

.player.self.active-seat > .round-delta {
  top: 168px !important;
}

.player.self.active-seat .result.hand-result {
  top: 194px !important;
  margin-top: 0 !important;
}

/* Absolute final placement: win/loss number sits over the card faces only. */
.player.active-seat > .round-delta {
  top: 142px !important;
  left: 50% !important;
  z-index: 14 !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  font-size: 30px !important;
  margin: 0 !important;
}

.player.self.active-seat > .round-delta {
  top: 182px !important;
  left: 50% !important;
  font-size: 46px !important;
}

/* Final win/loss placement: float over the cards without affecting seat layout. */
.player.active-seat > .round-delta {
  top: 116px;
  left: 50%;
  z-index: 12;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-size: 30px;
}

.player.self.active-seat > .round-delta {
  top: 128px;
  left: 50%;
  font-size: 46px;
}

/* Fixed player layout: status/result labels must never move avatar and name. */
.slot-hidden {
  visibility: hidden !important;
}

.player.active-seat {
  height: 190px;
  grid-template-rows: 46px 31px 16px 24px 54px 26px;
  align-content: start;
  align-items: start;
  gap: 3px;
}

.player.self.active-seat {
  height: 260px;
  grid-template-rows: 46px 36px 16px 28px 82px 34px;
}

.player .seat-card,
.player .nameplate,
.player .ready-badge,
.player .bet-chip,
.player .cards,
.player .result.hand-result {
  grid-row: auto;
  justify-self: center;
}

.player .ready-badge {
  min-height: 16px;
  margin-top: 0;
}

.player .bet-chip {
  min-height: 24px;
}

.player .cards {
  height: 54px;
  min-height: 54px;
  align-items: flex-end;
}

.player.self .cards {
  height: 82px;
  min-height: 82px;
  align-items: flex-end;
}

.player .result.hand-result {
  margin-top: -18px;
}

.player.self .result.hand-result {
  margin-top: -23px;
}

/* Lock every visual part inside a player seat, so dealt cards cannot shift avatar/name. */
.player.active-seat {
  display: block;
  width: 112px;
  height: 190px;
}

.player.self.active-seat {
  width: 210px;
  height: 260px;
}

.player.active-seat .seat-card,
.player.active-seat .nameplate,
.player.active-seat .ready-badge,
.player.active-seat .bet-chip,
.player.active-seat .cards,
.player.active-seat .result.hand-result {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-self: auto;
}

.player.active-seat .seat-card {
  top: 0;
}

.player.active-seat .nameplate {
  top: 50px;
}

.player.active-seat .ready-badge {
  top: 80px;
}

.player.active-seat .bet-chip {
  top: 96px;
}

.player.active-seat .cards {
  top: 123px;
  width: 124px;
}

.player.active-seat .result.hand-result {
  top: 168px;
  margin-top: 0;
}

.player.self.active-seat .seat-card {
  top: 0;
}

.player.self.active-seat .nameplate {
  top: 50px;
}

.player.self.active-seat .ready-badge {
  top: 88px;
}

.player.self.active-seat .bet-chip {
  top: 108px;
}

.player.self.active-seat .cards {
  top: 140px;
  width: 210px;
}

.player.self.active-seat .result.hand-result {
  top: 208px;
  margin-top: 0;
}

/* Keep avatar/name anchored while status, bet and point labels appear. */
.slot-hidden {
  visibility: hidden !important;
}

.player .ready-badge,
.player .bet-chip,
.player .result.hand-result {
  flex-shrink: 0;
}

.player .cards {
  height: 54px;
  min-height: 54px;
  align-items: flex-end;
}

.player.self .cards {
  height: 82px;
  min-height: 82px;
  align-items: flex-end;
}

/* Final override: win/loss amount belongs inside its own avatar. */
.seat-card {
  position: relative;
  overflow: visible;
}

.seat-card .round-delta,
.player.self .seat-card .round-delta {
  top: 50%;
  left: 50%;
  width: 100%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-size: 38px;
  z-index: 3;
}

.player.self .seat-card .round-delta {
  font-size: 42px;
}

/* Final override: show round win/loss above the point banner near the cards. */
.player > .round-delta {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  margin-top: -10px;
  margin-bottom: -15px;
  display: block;
  transform: rotate(-3deg);
  font-size: 31px;
  z-index: 8;
}

.player.self > .round-delta {
  margin-top: -14px;
  margin-bottom: -18px;
  font-size: 42px;
}

/* Final override: place win/loss numbers over the card faces. */
.player > .round-delta {
  margin-top: -47px;
  margin-bottom: 12px;
  transform: rotate(-3deg);
  font-size: 31px;
}

.player.self > .round-delta {
  margin-top: -118px;
  margin-bottom: 70px;
  font-size: 46px;
}

.ready-badge {
  margin-top: -2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20, 92, 85, 0.86);
  color: #ffe978;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255, 232, 120, 0.24), 0 2px 5px rgba(0, 0, 0, 0.2);
}

#logText {
  display: none !important;
}

/* Deprecated image skin; the real card back is CSS-only at the end of this file. */
.card.back,
.deck-stack {
  border: 1px solid rgba(231, 197, 111, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 7px 14px rgba(0, 0, 0, 0.3);
}

.deck-stack {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    7px 5px 0 rgba(255, 255, 255, 0.2),
    12px 9px 0 rgba(255, 255, 255, 0.12),
    0 14px 22px rgba(0, 0, 0, 0.28);
}

.card.back::before,
.card.back::after,
.deck-stack::before,
.deck-stack::after {
  display: none;
}

/* Keep win/loss amount inside the matching avatar square. */
.seat-card {
  position: relative;
}

.seat-card .round-delta {
  top: 50%;
  left: 50%;
  width: 100%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-size: 17px;
  z-index: 3;
}

.player.self .seat-card .round-delta {
  top: 50%;
  font-size: 20px;
}

/* Final point banner and in-avatar win/loss amount. */
.round-delta {
  top: 20px;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, -50%) rotate(-3deg);
  font-size: 18px;
  line-height: 1;
}

.player.self .round-delta {
  top: 21px;
  font-size: 22px;
}

.result.hand-result {
  position: relative;
  min-width: 96px;
  height: 28px;
  margin-top: -20px;
  padding: 3px 18px;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.84) 12%, rgba(255, 255, 255, 0.14) 24%, transparent 34%, transparent 66%, rgba(255, 255, 255, 0.14) 76%, rgba(255, 255, 255, 0.82) 88%, transparent 100%),
    linear-gradient(90deg, rgba(137, 8, 41, 0) 0%, rgba(190, 13, 61, 0.82) 13%, #d71950 48%, #b80d3d 72%, rgba(137, 8, 41, 0) 100%),
    linear-gradient(180deg, rgba(252, 194, 204, 0.92) 0%, rgba(214, 20, 75, 0.98) 46%, rgba(126, 7, 38, 0.9) 100%);
  overflow: visible;
}

.result.hand-result::before,
.result.hand-result::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffd76e, #c81045 58%, #79072b);
  box-shadow: 0 0 5px rgba(255, 244, 143, 0.46);
  transform: rotate(45deg);
  z-index: -1;
}

.result.hand-result::before {
  left: 8px;
}

.result.hand-result::after {
  right: 8px;
}

.player.self .result.hand-result {
  min-width: 150px;
  height: 38px;
  margin-top: -25px;
  font-size: 29px;
  line-height: 31px;
}

.player.self .result.hand-result::before,
.player.self .result.hand-result::after {
  top: 9px;
  width: 20px;
  height: 20px;
}

.nameplate {
  min-width: 96px;
  padding: 4px 8px 5px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(45, 83, 95, 0.84), rgba(13, 37, 48, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(130, 205, 218, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.26);
}

.nameplate strong {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.nameplate span {
  color: #ffd862;
  font-size: 10px;
}

.nameplate em {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.bet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  height: 24px;
  padding: 0 9px 0 5px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(30, 84, 91, 0.88), rgba(8, 45, 58, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 227, 133, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.25);
  color: #ffcf52;
  font-weight: 950;
}

.bet-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff6b1 0 15%, transparent 16%),
    radial-gradient(circle, #f8d557 0 34%, #cc8f1f 35% 64%, #8d5b11 65% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 239, 144, 0.68);
}

.bet-chip strong {
  color: #ffcf52;
  font-size: 14px;
  font-style: italic;
  text-shadow:
    0 1px 0 #6b260b,
    0 0 5px rgba(255, 116, 40, 0.7);
}

.round-delta {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 7;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: #ff9a3b;
  font-size: 28px;
  font-weight: 950;
  font-style: italic;
  line-height: 1;
  text-shadow:
    0 2px 0 #7d1e0a,
    0 0 3px #fff5a4,
    0 4px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.round-delta.lose {
  color: #56d5ff;
  text-shadow:
    0 2px 0 #063a5d,
    0 0 3px #d6fbff,
    0 4px 8px rgba(0, 0, 0, 0.55);
}

.result.hand-result {
  min-width: 84px;
  height: 26px;
  margin-top: -18px;
  padding: 2px 14px;
  border: 1px solid rgba(255, 226, 126, 0.86);
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 244, 214, 0.22) 12%, transparent 24%, transparent 76%, rgba(255, 244, 214, 0.22) 88%, transparent 100%),
    linear-gradient(90deg, rgba(142, 13, 53, 0) 0%, rgba(210, 24, 78, 0.9) 16%, #cf174d 50%, rgba(210, 24, 78, 0.9) 84%, rgba(142, 13, 53, 0) 100%),
    linear-gradient(180deg, rgba(247, 166, 178, 0.9) 0%, rgba(207, 23, 77, 0.96) 45%, rgba(142, 13, 53, 0.9) 100%);
  color: #fff48d;
  font-size: 18px;
  font-weight: 950;
  line-height: 20px;
  text-align: center;
  text-shadow:
    0 2px 0 #7a1e16,
    0 0 4px rgba(255, 247, 163, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 4px 8px rgba(0, 0, 0, 0.28);
  z-index: 5;
}

.player.self .nameplate {
  min-width: 112px;
}

.player.self .bet-chip {
  height: 28px;
  min-width: 72px;
}

.player.self .bet-chip i {
  width: 21px;
  height: 21px;
}

.player.self .bet-chip strong {
  font-size: 17px;
}

.player.self .round-delta {
  top: 42px;
  font-size: 38px;
}

.player.self .result.hand-result {
  min-width: 136px;
  height: 34px;
  margin-top: -23px;
  font-size: 26px;
  line-height: 28px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: #101326;
}

button {
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

#codex-browser-sidebar-comments-root {
  display: none !important;
  pointer-events: none !important;
}

.hidden {
  display: none !important;
}

.app,
.login-page,
.lobby,
.rooms,
.club-page,
.admin-page,
.room {
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  min-height: 620px;
  overflow: hidden;
}

.login-page {
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 211, 107, 0.2), transparent 32%),
    radial-gradient(ellipse at 50% 58%, rgba(36, 197, 129, 0.28), transparent 42%),
    linear-gradient(180deg, #172141, #123d36 58%, #151327);
}

.login-card {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
  padding: 24px;
  border-radius: 22px;
  background: rgba(12, 18, 34, 0.78);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.login-card span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.login-card strong {
  font-size: 30px;
  line-height: 1.08;
}

.login-card em,
.login-card p {
  margin: 0;
  color: rgba(255, 248, 232, 0.72);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.login-card input {
  height: 46px;
  padding: 0 13px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #162032;
  font: inherit;
  font-weight: 900;
  outline: 0;
}

.login-card button {
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 16px;
  font-weight: 950;
}

.lobby {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 24%, rgba(75, 108, 255, 0.5), transparent 38%),
    radial-gradient(ellipse at 50% 58%, rgba(160, 80, 225, 0.32), transparent 42%),
    linear-gradient(180deg, #21194d, #241b62 48%, #171433);
}

.lobby::before {
  content: "";
  position: absolute;
  inset: 120px 0 66px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.rooms {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 72% 12%, rgba(255, 211, 107, 0.18), transparent 32%),
    radial-gradient(ellipse at 30% 28%, rgba(36, 197, 129, 0.32), transparent 38%),
    linear-gradient(180deg, #172141, #123d36 58%, #151327);
}

.rooms.rules-active,
.rooms:has(.sangong-rules:not(.hidden)) {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.98), transparent 29%),
    radial-gradient(ellipse at 88% 10%, rgba(255, 255, 255, 0.78), transparent 24%),
    radial-gradient(ellipse at 16% 25%, rgba(98, 196, 255, 0.22), transparent 30%),
    radial-gradient(ellipse at 50% 82%, rgba(128, 217, 255, 0.22), transparent 38%),
    linear-gradient(180deg, #bfe8ff 0%, #eefaff 32%, #f8fdff 100%);
}

.rooms.rules-active .topbar,
.rooms:has(.sangong-rules:not(.hidden)) .topbar {
  min-height: 42px;
  color: #143966;
}

.rooms.rules-active .topbar span,
.rooms:has(.sangong-rules:not(.hidden)) .topbar span {
  color: #183f73;
  font-size: 13px;
  letter-spacing: 1px;
}

.rooms.rules-active .topbar h1,
.rooms:has(.sangong-rules:not(.hidden)) .topbar h1 {
  display: none;
}

.rooms.rules-active .back-pill,
.rooms.rules-active .wallet,
.rooms:has(.sangong-rules:not(.hidden)) .back-pill,
.rooms:has(.sangong-rules:not(.hidden)) .wallet {
  border: 1px solid rgba(221, 189, 112, 0.72);
  background: rgba(255, 255, 255, 0.76);
  color: #28629d;
  box-shadow: 0 6px 16px rgba(74, 142, 191, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.rooms.rules-active .back-pill,
.rooms:has(.sangong-rules:not(.hidden)) .back-pill {
  position: relative;
  width: 68px;
  height: 34px;
  padding-left: 24px;
  border-radius: 999px;
  font-size: 13px;
  text-align: left;
}

.rooms.rules-active .back-pill::before,
.rooms:has(.sangong-rules:not(.hidden)) .back-pill::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #28629d;
  border-left: 2px solid #28629d;
  transform: rotate(45deg);
}

.rooms.rules-active .wallet,
.rooms:has(.sangong-rules:not(.hidden)) .wallet {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 9px 0 8px;
  border-radius: 999px;
  color: #27706d;
  font-size: 12px;
  gap: 4px;
}

.rooms.rules-active .wallet::before,
.rooms:has(.sangong-rules:not(.hidden)) .wallet::before {
  content: "鈾?;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #f9dc83;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff5b4, #e9a83b 60%, #c98518);
  color: #9c6714;
  font-size: 10px;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8);
}

.rooms.rules-active .wallet strong,
.rooms:has(.sangong-rules:not(.hidden)) .wallet strong {
  color: #127768;
  font-size: 17px;
  letter-spacing: 1px;
}

.club-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 74% 14%, rgba(255, 211, 107, 0.18), transparent 32%),
    radial-gradient(ellipse at 32% 30%, rgba(86, 111, 255, 0.28), transparent 40%),
    linear-gradient(180deg, #172141, #143b43 56%, #151327);
}

.admin-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 70% 16%, rgba(255, 211, 107, 0.18), transparent 30%),
    radial-gradient(ellipse at 25% 32%, rgba(36, 197, 129, 0.24), transparent 36%),
    linear-gradient(180deg, #172141, #26304d 58%, #151327);
}

.admin-desktop {
  min-height: 100vh;
  padding: 28px;
  color: var(--text);
  background:
    radial-gradient(ellipse at 72% 12%, rgba(255, 211, 107, 0.18), transparent 30%),
    radial-gradient(ellipse at 24% 28%, rgba(36, 197, 129, 0.24), transparent 36%),
    linear-gradient(180deg, #172141, #26304d 58%, #151327);
}

.admin-desktop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 18px;
}

.admin-desktop-head span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 950;
}

.admin-desktop-head h1 {
  max-width: none;
  font-size: 34px;
}

.admin-desktop-head a {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-weight: 950;
  text-decoration: none;
}

.admin-desktop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.club-page .topbar > div {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.club-page .topbar {
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 224, 138, 0.1), transparent 48%),
    linear-gradient(135deg, rgba(20, 75, 56, 0.48), rgba(11, 48, 42, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.club-page .topbar .back-pill {
  width: 54px;
  height: 32px;
  font-size: 13px;
}

.club-page .topbar span {
  display: block;
  color: #ffde72;
  font-size: 11px;
  line-height: 1;
}

.club-page .topbar span:empty {
  display: none;
}

.club-page .topbar h1 {
  max-width: none;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.96);
  font-size: 25px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-header-info {
  display: block;
  max-width: 255px;
  margin: 4px auto 0;
  padding: 3px 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(4, 22, 24, 0.28);
  color: rgba(255, 248, 232, 0.8);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-header-info:empty {
  display: none;
}

.lobby-profile {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(32, 45, 102, 0.9), rgba(38, 28, 88, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 22px rgba(0, 0, 0, 0.24);
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.58), transparent 20%),
    linear-gradient(145deg, #ffe08a, #bc6d22);
  color: #2b1905;
  font-size: 24px;
  font-weight: 950;
}

.profile-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 148px;
  font-size: 17px;
}

.profile-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.profile-balance {
  min-width: 88px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.profile-balance strong {
  display: block;
  color: var(--gold);
  font-size: 20px;
}

.room-card-balance strong {
  color: #78f0bd;
}

.lobby-title {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-top: 2px;
}

.lobby-title span {
  color: rgba(255, 248, 232, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.lobby-title h1 {
  max-width: none;
  font-size: 28px;
  color: rgba(255, 248, 232, 0.92);
}

.back-pill {
  width: 58px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.topbar span,
.room-head span {
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
}

h1,
h2 {
  margin: 3px 0 0;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  max-width: 190px;
  font-size: 34px;
}

h2 {
  font-size: 27px;
  text-align: center;
}

.wallet,
.pot {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.wallet strong,
.pot strong {
  margin-left: 5px;
  color: var(--gold);
  font-size: 17px;
}

.room-list {
  display: grid;
  grid-template-rows: repeat(3, minmax(132px, 1fr));
  gap: 12px;
  min-height: 0;
}

.create-table {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 12px;
  min-height: 0;
}

.game-lounge {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 14px;
  min-height: 0;
}

.club-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 0;
}

.admin-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
}

.admin-card,
.league-create-card {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 76% 24%, rgba(255, 224, 138, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(31, 92, 73, 0.96), rgba(48, 44, 120, 0.94));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-card span,
.league-create-card span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.admin-card strong,
.league-create-card strong {
  font-size: 28px;
  line-height: 1.08;
}

.admin-card em,
.league-create-card em {
  max-width: 250px;
  color: rgba(255, 248, 232, 0.76);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.league-entry-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-height: 116px;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 224, 138, 0.2), transparent 35%),
    linear-gradient(135deg, rgba(42, 116, 88, 0.86), rgba(24, 72, 62, 0.78));
  color: #fff8e8;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 22px rgba(0, 0, 0, 0.18);
}

.league-entry-card.join {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 224, 138, 0.18), transparent 35%),
    linear-gradient(135deg, rgba(43, 94, 115, 0.82), rgba(23, 62, 72, 0.78));
}

.league-entry-card span {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 12px;
  font-weight: 950;
}

.league-entry-card strong {
  font-size: 24px;
  line-height: 1;
}

.league-entry-card em {
  max-width: 260px;
  color: rgba(255, 248, 232, 0.72);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.league-back-entry {
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 248, 232, 0.88);
  font-size: 15px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-control {
  display: grid;
  gap: 8px;
}

.cost-control {
  grid-template-columns: minmax(0, 1fr) 92px;
}

.resource-control {
  grid-template-columns: minmax(0, 1fr) 96px 82px;
}

.admin-control input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #162032;
  font: inherit;
  font-weight: 950;
  outline: 0;
}

.league-name-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #162032;
  font: inherit;
  font-weight: 950;
  outline: 0;
}

.admin-control button,
.create-league-btn,
.logout-btn {
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-weight: 950;
}

.logout-btn {
  padding: 0 14px;
}

.admin-note,
.league-cost {
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 248, 232, 0.78);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.my-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.my-stats div {
  display: grid;
  gap: 3px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.my-stats span {
  color: rgba(255, 248, 232, 0.68);
  font-size: 12px;
  font-weight: 850;
}

.my-stats strong {
  font-size: 20px;
}

.admin-users {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.admin-users-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 248, 232, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.admin-users-head strong {
  color: var(--text);
  font-size: 18px;
}

.admin-table {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-bottom: 2px;
}

.admin-row {
  display: grid;
  grid-template-columns: 1.25fr 0.72fr 0.62fr 0.9fr 0.75fr 0.62fr;
  gap: 8px;
  align-items: center;
  min-width: 520px;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.86);
  text-align: left;
  font-size: 12px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.admin-row-head {
  min-height: 34px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--gold);
}

.admin-empty {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.76);
  font-weight: 850;
}

.admin-users-wide,
.admin-desktop-grid .admin-note {
  grid-column: 1 / -1;
}

.league-cost b {
  color: var(--gold);
}

.league-message {
  width: 100%;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(36, 197, 129, 0.14);
  color: rgba(255, 248, 232, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.league-message.warn {
  background: rgba(231, 71, 69, 0.16);
  color: #ffe08a;
}

.create-league-btn {
  width: 132px;
}

.club-title {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.club-title span {
  color: rgba(255, 248, 232, 0.68);
  font-size: 12px;
  font-weight: 850;
}

.club-title strong {
  font-size: 24px;
  line-height: 1.08;
}

.club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 0 !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(4, 22, 24, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.club-game-tabs button {
  height: 38px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 248, 232, 0.72);
  font-size: 15px;
  font-weight: 950;
}

.club-game-tabs button.active {
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  box-shadow: 0 7px 13px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.club-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}

.club-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.club-empty strong {
  font-size: 22px;
}

.club-empty span {
  max-width: 230px;
  color: rgba(255, 248, 232, 0.68);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.league-info-card,
.league-owner-tools {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.league-info-card {
  position: relative;
  padding-right: 58px;
}

.club-list > .league-info-card {
  display: none !important;
}

.league-info-card > .league-owner-tools {
  display: none !important;
}

.league-info-card > .league-member-list,
.league-info-card > .league-setting-btn {
  display: none !important;
}

.league-setting-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.club-top-setting {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 7px 13px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.club-top-setting strong {
  display: none !important;
}

.league-info-card > span,
.league-owner-tools > span {
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 11px;
  font-weight: 950;
}

.league-info-card > strong,
.league-owner-tools > strong {
  color: #fff8e8;
  font-size: 24px;
  line-height: 1.1;
}

.league-info-card > em {
  color: rgba(255, 248, 232, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.league-info-card > em b {
  color: #ffdf78;
  font-size: 15px;
}

.league-point-form {
  display: grid;
  grid-template-columns: 1fr 82px 58px 58px;
  gap: 7px;
}

.league-point-form input {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #14203a;
  font-size: 13px;
  font-weight: 850;
}

.league-point-form button {
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 13px;
  font-weight: 950;
}

.league-member-list {
  display: grid;
  gap: 6px;
  max-height: 164px;
  overflow-y: auto;
}

.league-member-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(4, 17, 25, 0.28);
}

.league-member-row i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #221504;
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}

.league-member-row span {
  display: grid;
  gap: 1px;
  color: #fff8e8;
  font-size: 13px;
  font-weight: 950;
}

.league-member-row small {
  color: rgba(255, 248, 232, 0.58);
  font-size: 10px;
  font-weight: 800;
}

.league-member-row b {
  color: #ffdf78;
  font-size: 15px;
}

.league-settings-card {
  gap: 11px;
}

/* TRUE EOF 294: Dragon Tiger top seatbar and bottom betting desk closer to reference. */
.dt-shell {
  padding: 5px 58px 164px !important;
  overflow: hidden !important;
}

.dt-shell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -42px;
  height: 218px;
  z-index: 3;
  border-radius: 54% 54% 0 0 / 34% 34% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(118, 85, 56, .9) 0%, rgba(54, 32, 31, .96) 48%, rgba(24, 17, 22, .98) 100%);
  border-top: 1px solid rgba(205, 132, 74, .48);
  box-shadow: 0 -18px 38px rgba(0, 0, 0, .35), inset 0 24px 56px rgba(255, 197, 100, .08);
  pointer-events: none;
}

.dt-top-seatbar {
  width: min(410px, calc(100% - 84px)) !important;
  margin: 0 auto !important;
  min-height: 72px !important;
  grid-template-columns: 56px 56px 76px 56px 56px 56px !important;
  gap: 7px !important;
  padding: 10px 12px !important;
  border-radius: 0 0 44px 44px !important;
  background: linear-gradient(180deg, rgba(28, 74, 90, .78), rgba(6, 28, 43, .9)) !important;
  border: 1px solid rgba(144, 224, 239, .3) !important;
  border-top: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 13px 26px rgba(0,0,0,.33) !important;
}

.dt-top-user,
.dt-empty {
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  border-radius: 9px !important;
}

.dt-top-user {
  grid-template-rows: 34px 15px !important;
  align-content: center !important;
  gap: 1px !important;
  background: linear-gradient(180deg, rgba(13, 48, 64, .95), rgba(5, 25, 38, .94)) !important;
}

.dt-top-user span {
  width: 42px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.dt-top-user b {
  font-size: 10px !important;
  line-height: 1 !important;
}

.dt-empty {
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.78) !important;
  background: rgba(5, 28, 43, .82) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.dt-apply {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  background: radial-gradient(circle at 38% 18%, #fff7c6 0%, #f5c75c 34%, #d48a1b 64%, #8c4d06 100%) !important;
  border: 2px solid rgba(118, 64, 6, .95) !important;
  box-shadow: 0 0 20px rgba(248,187,57,.5), inset 0 3px 7px rgba(255,255,255,.75), inset 0 -8px 14px rgba(96,45,0,.45) !important;
}

.dt-wallet { top: 13px !important; }
.dt-rule { top: 74px !important; }
.dt-fold { top: 135px !important; }

.dt-stage {
  margin-top: 9px !important;
  padding-bottom: 4px !important;
}

.dt-beasts {
  min-height: 58px !important;
  margin-top: 0 !important;
}

.dt-user-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 7 !important;
  height: 178px !important;
  padding: 28px 12px 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.dt-user-panel > * {
  pointer-events: auto !important;
}

.dt-me {
  left: 14px !important;
  bottom: 62px !important;
  transform: scale(.78) !important;
  transform-origin: left bottom !important;
  z-index: 9 !important;
}

.dt-chip-row {
  position: absolute !important;
  left: 50% !important;
  bottom: 40px !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  width: 250px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 62px) !important;
  justify-content: center !important;
  gap: 11px 26px !important;
  margin: 0 !important;
}

.dt-chip-row button {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  border-width: 6px !important;
  font-size: 18px !important;
  background: radial-gradient(circle at 50% 48%, #fff 0 34%, currentColor 36% 39%, #fff 40% 57%, currentColor 59% 100%) !important;
  box-shadow: 0 0 13px rgba(255,255,255,.18), 0 8px 14px rgba(0,0,0,.28) !important;
}

.dt-chip-row button.active {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 0 18px rgba(255,225,87,.62), 0 9px 17px rgba(0,0,0,.3) !important;
}

.dt-bottom-tools {
  left: 24px !important;
  right: 24px !important;
  bottom: 5px !important;
  z-index: 9 !important;
  height: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 7px !important;
  background: transparent !important;
}

.dt-bottom-tools button {
  height: 22px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(229,207,137,.45) !important;
  background: linear-gradient(180deg, rgba(12,39,45,.92), rgba(3,18,29,.96)) !important;
  color: #ffe7a3 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.dt-room-info {
  bottom: 150px !important;
  z-index: 8 !important;
}

.dt-toast,
.dt-phase {
  z-index: 8 !important;
}

@media (max-width: 430px) {
  .dt-shell {
    padding: 4px 55px 158px !important;
  }

  .dt-top-seatbar {
    width: min(326px, calc(100% - 68px)) !important;
    min-height: 62px !important;
    grid-template-columns: 42px 42px 58px repeat(3, 39px) !important;
    gap: 5px !important;
    padding: 8px 9px !important;
  }

  .dt-top-user,
  .dt-empty {
    width: 39px !important;
    height: 46px !important;
  }

  .dt-top-user span {
    width: 34px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  .dt-apply {
    width: 56px !important;
    height: 56px !important;
    font-size: 15px !important;
  }

  .dt-empty {
    font-size: 10px !important;
  }

  .dt-chip-row {
    width: 214px !important;
    grid-template-columns: repeat(3, 54px) !important;
    gap: 10px 20px !important;
  }

  .dt-chip-row button {
    width: 54px !important;
    height: 54px !important;
    border-width: 5px !important;
    font-size: 16px !important;
  }

  .dt-me {
    bottom: 58px !important;
    transform: scale(.72) !important;
  }
}

/* TRUE EOF 272: exact league page remake from supplied source, bottom nav untouched. */
#clubPage.club-page {
  min-height: 100vh !important;
  padding: 20px 18px 112px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(99, 74, 255, 0.25), transparent 30%),
    radial-gradient(circle at 50% 85%, rgba(108, 54, 255, 0.22), transparent 35%),
    linear-gradient(180deg, #080a2b 0%, #0c0f45 45%, #120a4d 100%) !important;
  font-family: "Microsoft YaHei", Arial, sans-serif !important;
  overflow-x: hidden !important;
}

#clubPage.club-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 110px 110px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 94px !important;
  padding: 14px !important;
  margin: 0 0 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(107, 106, 255, 0.5) !important;
  background: linear-gradient(180deg, rgba(31, 29, 103, 0.95), rgba(15, 16, 72, 0.95)) !important;
  box-shadow:
    inset 0 0 24px rgba(88, 91, 255, 0.18),
    0 0 16px rgba(54, 70, 255, 0.18) !important;
  overflow: visible !important;
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .club-league-summary .league-summary-name {
  display: block !important;
  min-width: 0 !important;
  height: 64px !important;
  overflow: visible !important;
}

#clubPage .club-league-summary .league-switch-shell {
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  overflow: visible !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(78, 110, 255, 0.95) !important;
  background: linear-gradient(180deg, #2a217e 0%, #1a1959 100%) !important;
  box-shadow:
    inset 0 0 16px rgba(97, 103, 255, 0.35),
    0 0 10px rgba(62, 84, 255, 0.18) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage .club-league-summary .league-switch-trigger::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #9fa7ff !important;
  border-radius: 50% !important;
  box-shadow: 0 9px 0 -5px #1a1959, 0 10px 0 -4px #9fa7ff !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  flex: 0 0 auto !important;
  color: #ffd94b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-trigger span::after {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 24px !important;
  margin: 0 0 -7px 10px !important;
  background: rgba(183, 190, 255, 0.45) !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-switch-trigger i {
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 8px solid #c9d0ff !important;
}

#clubPage .club-league-summary .league-summary-id {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(95, 101, 196, 0.5) !important;
  background: linear-gradient(180deg, rgba(15, 18, 68, 0.95), rgba(11, 14, 52, 0.95)) !important;
  color: #d7dcff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage .club-league-summary .league-summary-id b {
  color: #ffd54d !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

#clubPage .club-league-summary .league-points-log-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(170, 175, 255, 0.28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2ef4f1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

#clubPage .club-league-summary .league-summary-actions {
  display: contents !important;
}

#clubPage .club-league-summary .league-setting-entry-btn,
#clubPage .club-league-summary .league-record-btn {
  width: 110px !important;
  height: 64px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 22px !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

#clubPage .club-league-summary .league-setting-entry-btn {
  color: #fff !important;
  border: 1px solid rgba(135, 153, 255, 0.8) !important;
  background: linear-gradient(180deg, #38479d 0%, #212b73 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(187, 202, 255, 0.24),
    0 0 12px rgba(75, 100, 255, 0.16) !important;
}

#clubPage .club-league-summary .league-record-btn {
  color: #352100 !important;
  border: 1px solid #ffe597 !important;
  background: linear-gradient(180deg, #ffefaa 0%, #e1b14d 55%, #b7761b 100%) !important;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(255, 205, 94, 0.18) !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 12px !important;
  margin: 0 0 18px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(75, 99, 255, 0.9) !important;
  background: linear-gradient(180deg, rgba(26, 34, 96, 0.98), rgba(12, 16, 62, 0.98)) !important;
  box-shadow:
    inset 0 0 18px rgba(73, 93, 255, 0.25),
    0 0 12px rgba(63, 90, 255, 0.16) !important;
}

#clubPage .club-game-tabs button {
  height: 78px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #bfc5ef !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  position: relative !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 34px !important;
  background: rgba(134, 148, 255, 0.28) !important;
}

#clubPage .club-game-tabs button.active {
  border-radius: 18px !important;
  border: 2px solid rgba(241, 174, 255, 0.9) !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 24%),
    linear-gradient(180deg, #c05bff 0%, #942beb 58%, #6617d1 100%) !important;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.16),
    0 0 16px rgba(183, 88, 255, 0.55) !important;
}

#clubPage .club-list {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 860px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 32px !important;
  border: 2px solid rgba(100, 110, 255, 0.88) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(116, 90, 255, 0.42), transparent 24%),
    radial-gradient(circle at 50% 76%, rgba(130, 48, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(20, 28, 104, 0.96), rgba(14, 18, 78, 0.96)) !important;
  box-shadow:
    inset 0 0 48px rgba(72, 94, 255, 0.24),
    inset 0 0 60px rgba(164, 81, 255, 0.08),
    0 0 16px rgba(88, 108, 255, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

#clubPage .club-list::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  opacity: 0.6 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#clubPage .club-list::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #64a1ff, #d56dff, #64a1ff, transparent) !important;
  box-shadow: 0 0 14px #7688ff !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#clubPage .club-list > * {
  position: relative !important;
  z-index: 1 !important;
}

#clubPage .club-empty {
  width: 100% !important;
  min-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 86px 20px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#clubPage .club-empty::before {
  content: "10   K" !important;
  width: 190px !important;
  height: 190px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 42px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(149, 121, 255, 0.4) !important;
  box-shadow: inset 0 0 0 12px transparent, inset 0 0 0 14px rgba(150, 111, 255, 0.36), 0 0 14px rgba(158, 106, 255, 0.34) !important;
  color: rgba(230, 224, 255, 0.78) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
}

#clubPage .club-empty strong {
  display: block !important;
  margin: 0 !important;
  color: transparent !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1e8ff 48%, #bb9cff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 14px rgba(183, 115, 255, 0.45) !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 6px !important;
}

#clubPage .club-empty strong::after {
  content: "" !important;
  display: block !important;
  width: 470px !important;
  max-width: 72vw !important;
  height: 1px !important;
  margin: 20px auto 24px !important;
  background: linear-gradient(90deg, transparent, rgba(192, 120, 255, 0.75), #fff, rgba(192, 120, 255, 0.75), transparent) !important;
}

#clubPage .club-empty span {
  display: block !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  color: #cfd5ff !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

#clubPage .club-empty span:nth-of-type(1) {
  margin-bottom: 28px !important;
  color: #d6dbff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

#clubPage .club-empty span:nth-of-type(1)::first-letter {
  color: #ffd44d !important;
}

@media (max-width: 780px) {
  #clubPage .club-league-summary {
    grid-template-columns: 1fr 1fr !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    grid-column: span 2 !important;
    order: 3 !important;
  }

  #clubPage .club-league-summary .league-setting-entry-btn,
  #clubPage .club-league-summary .league-record-btn {
    width: 100% !important;
  }

  #clubPage .club-game-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #clubPage .club-game-tabs button {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }

  #clubPage .club-game-tabs button:not(:last-child)::after {
    display: none !important;
  }

  #clubPage .club-list,
  #clubPage .club-empty {
    min-height: 720px !important;
  }

  #clubPage .club-empty strong {
    font-size: 42px !important;
  }
}

/* TRUE EOF 277: league page top two-row layout with category icons. */
#clubPage .club-panel {
  padding-top: 10px !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(196px, 1.08fr) minmax(250px, 1.32fr) 104px 112px !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(100%, 824px) !important;
  min-height: 94px !important;
  margin: 0 auto 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(103, 105, 255, .72) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 52% -10%, rgba(128, 82, 255, .38), transparent 42%),
    linear-gradient(180deg, rgba(45, 34, 135, .96), rgba(26, 19, 93, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 12px 28px rgba(18, 8, 72, .42) !important;
  overflow: visible !important;
}

#clubPage .league-summary-name {
  grid-column: 1 !important;
  min-width: 0 !important;
  height: 56px !important;
}

#clubPage .league-switch-shell {
  width: 100% !important;
  height: 100% !important;
}

#clubPage .league-switch-trigger {
  display: grid !important;
  grid-template-columns: 34px auto minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 14px !important;
  border: 2px solid rgba(94, 126, 255, .96) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(64, 59, 194, .94), rgba(38, 28, 132, .98)) !important;
  box-shadow:
    inset 0 0 14px rgba(103, 134, 255, .32),
    0 0 18px rgba(94, 95, 255, .24) !important;
  color: #fff !important;
}

#clubPage .league-switch-trigger::before {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #b6b9ff !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 42%, transparent 0 34%, #b6b9ff 36% 41%, transparent 43%),
    linear-gradient(#b6b9ff, #b6b9ff) 50% 82% / 20px 3px no-repeat !important;
  box-shadow: 0 0 10px rgba(170, 175, 255, .38) !important;
}

#clubPage .league-switch-trigger span {
  color: #ffe85f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage .league-switch-trigger strong {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .league-switch-trigger i {
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #d7d4ff !important;
}

#clubPage .league-summary-id {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(93, 94, 184, .62) !important;
  border-radius: 18px !important;
  background: rgba(12, 11, 54, .72) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-style: normal !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#clubPage .league-summary-id::before {
  content: "联盟ID:" !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#clubPage .league-summary-id b {
  color: #ffe75a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: .4px !important;
}

#clubPage .league-points-log-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  margin-left: 8px !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(183, 188, 255, .34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31f8f2 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#clubPage .league-summary-actions {
  display: contents !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#clubPage .league-setting-entry-btn {
  grid-column: 3 !important;
  border: 1px solid rgba(149, 171, 255, .78) !important;
  background: linear-gradient(180deg, #5f70d7, #263184) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 9px 18px rgba(28,29,100,.35) !important;
}

#clubPage .league-record-btn {
  grid-column: 4 !important;
  border: 1px solid rgba(255, 231, 134, .9) !important;
  background: linear-gradient(180deg, #fff19e 0%, #e7af35 50%, #b87917 100%) !important;
  color: #251100 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 9px 18px rgba(104,63,0,.36) !important;
}

#clubPage .league-setting-entry-btn::before {
  content: "⚙" !important;
  font-size: .95em !important;
}

#clubPage .league-record-btn::before {
  content: "🏆" !important;
  font-size: .95em !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(100%, 824px) !important;
  min-height: 84px !important;
  margin: 0 auto 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(72, 99, 255, .86) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(83, 62, 221, .42), transparent 44%),
    linear-gradient(180deg, rgba(31, 26, 112, .96), rgba(16, 13, 72, .98)) !important;
  box-shadow: inset 0 0 0 1px rgba(81, 110, 255, .42), 0 12px 24px rgba(13, 7, 64, .34) !important;
  overflow: visible !important;
}

#clubPage .club-game-tabs button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #d8d9ff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

#clubPage .club-game-tabs button::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 23px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.34)) !important;
}

#clubPage .club-game-tabs button[data-club-game="bairenniuniu"]::before {
  content: "🃏" !important;
}

#clubPage .club-game-tabs button[data-club-game="benchiBaoma"]::before {
  content: "🚙" !important;
}

#clubPage .club-game-tabs button[data-club-game="sangong"]::before {
  content: "🎲" !important;
}

#clubPage .club-game-tabs button[data-club-game="longhudou"]::before {
  content: "🐉" !important;
}

#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  display: block !important;
  width: 1px !important;
  height: 30px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(180deg, transparent, rgba(155, 160, 255, .44), transparent) !important;
}

#clubPage .club-game-tabs button.active {
  border: 2px solid rgba(235, 139, 255, .8) !important;
  background: linear-gradient(180deg, #d65cff, #8421e7 58%, #6016ba) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 20px rgba(195, 86, 255, .48) !important;
}

@media (max-width: 640px) {
  #clubPage .club-panel {
    padding-top: 8px !important;
  }

  #clubPage .club-league-summary {
    grid-template-columns: minmax(130px, 1fr) minmax(128px, 1fr) 62px 66px !important;
    gap: 7px !important;
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage .league-summary-name,
  #clubPage .league-switch-shell,
  #clubPage .league-switch-trigger,
  #clubPage .league-summary-id,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 12px !important;
  }

  #clubPage .league-switch-trigger {
    grid-template-columns: 20px auto minmax(0, 1fr) 8px !important;
    gap: 4px !important;
    padding: 0 7px !important;
  }

  #clubPage .league-switch-trigger::before {
    width: 17px !important;
    height: 17px !important;
    border-width: 1.5px !important;
  }

  #clubPage .league-switch-trigger span {
    font-size: 10px !important;
  }

  #clubPage .league-switch-trigger strong {
    font-size: 13px !important;
  }

  #clubPage .league-switch-trigger i {
    border-left-width: 4px !important;
    border-right-width: 4px !important;
    border-top-width: 5px !important;
  }

  #clubPage .league-summary-id {
    gap: 4px !important;
    padding: 0 6px !important;
  }

  #clubPage .league-summary-id::before {
    font-size: 10px !important;
  }

  #clubPage .league-summary-id b {
    font-size: 11px !important;
  }

  #clubPage .league-points-log-btn {
    height: 18px !important;
    margin-left: 2px !important;
    padding-left: 5px !important;
    font-size: 10px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    gap: 2px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }

  #clubPage .club-game-tabs {
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage .club-game-tabs button {
    gap: 5px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 3px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  #clubPage .club-game-tabs button::before {
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }

  #clubPage .club-game-tabs button:not(:last-child)::after {
    height: 22px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(118px, 1fr) minmax(106px, 1fr) 50px 54px !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  #clubPage .league-switch-trigger span {
    font-size: 9px !important;
  }

  #clubPage .league-switch-trigger strong {
    font-size: 12px !important;
  }

  #clubPage .league-summary-id::before {
    content: "ID:" !important;
    font-size: 9px !important;
  }

  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn {
    font-size: 9px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    font-size: 10px !important;
  }

  #clubPage .club-game-tabs button {
    gap: 3px !important;
    font-size: 11px !important;
  }

  #clubPage .club-game-tabs button::before {
    font-size: 14px !important;
  }
}

/* TRUE EOF 280: robust league top bar, including old cached action-wrapper DOM. */
#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1.08fr) 86px 90px !important;
  grid-template-areas: "league-name league-info league-setting league-record" !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(100%, 824px) !important;
  min-height: 82px !important;
  padding: 12px !important;
  margin: 0 auto 14px !important;
  border-radius: 22px !important;
  overflow: visible !important;
}

#clubPage .club-league-summary .league-summary-name {
  grid-area: league-name !important;
  width: auto !important;
  height: 50px !important;
}

#clubPage .club-league-summary .league-switch-shell,
#clubPage .club-league-summary .league-switch-trigger {
  width: 100% !important;
  height: 50px !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  min-width: 0 !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
}

#clubPage .club-league-summary .league-switch-trigger::before {
  width: 26px !important;
  height: 26px !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  font-size: 13px !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  font-size: 16px !important;
  min-width: 0 !important;
}

#clubPage .league-summary-id {
  grid-area: league-info !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-radius: 16px !important;
}

#clubPage .league-summary-id::before {
  font-size: 15px !important;
}

#clubPage .league-summary-id b {
  font-size: 16px !important;
}

#clubPage .league-points-log-btn {
  height: 24px !important;
  margin-left: 2px !important;
  padding-left: 10px !important;
  font-size: 13px !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-setting-entry-placeholder,
#clubPage .league-record-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-setting-entry-placeholder {
  grid-area: league-setting !important;
}

#clubPage .league-record-btn {
  grid-area: league-record !important;
}

#clubPage .league-summary-actions {
  grid-area: league-setting / league-setting / league-record / league-record !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  min-width: 0 !important;
  margin: 0 !important;
  order: 0 !important;
}

#clubPage .league-summary-actions .league-setting-entry-btn,
#clubPage .league-summary-actions .league-record-btn {
  grid-area: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

#clubPage .club-game-tabs {
  width: min(100%, 824px) !important;
  min-height: 76px !important;
  padding: 10px 12px !important;
  margin: 0 auto 14px !important;
  border-radius: 22px !important;
}

#clubPage .club-game-tabs button {
  height: 50px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  font-size: 15px !important;
}

#clubPage .club-game-tabs button::before {
  width: 22px !important;
  height: 22px !important;
  font-size: 20px !important;
}

@media (max-width: 640px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(0, 1fr) 54px 58px !important;
    grid-template-areas:
      "league-name league-setting league-record"
      "league-info league-info league-info" !important;
    gap: 7px !important;
    min-height: 98px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #clubPage .club-league-summary .league-summary-name,
  #clubPage .club-league-summary .league-switch-shell,
  #clubPage .club-league-summary .league-switch-trigger,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-setting-entry-placeholder,
  #clubPage .league-record-btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 12px !important;
  }

  #clubPage .league-summary-id {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger {
    gap: 5px !important;
    padding: 0 8px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger::before {
    width: 22px !important;
    height: 22px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 14px !important;
  }

  #clubPage .league-summary-id::before {
    content: "联盟ID:" !important;
    font-size: 11px !important;
  }

  #clubPage .league-summary-id b {
    font-size: 12px !important;
  }

  #clubPage .league-points-log-btn {
    height: 18px !important;
    padding-left: 7px !important;
    font-size: 11px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    gap: 1px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  #clubPage .league-summary-actions {
    display: contents !important;
  }

  #clubPage .league-summary-actions .league-setting-entry-btn {
    grid-area: league-setting !important;
  }

  #clubPage .league-summary-actions .league-record-btn {
    grid-area: league-record !important;
  }

  #clubPage .club-game-tabs {
    min-height: 60px !important;
    padding: 7px !important;
    border-radius: 16px !important;
  }

  #clubPage .club-game-tabs button {
    height: 44px !important;
    gap: 4px !important;
    padding: 0 2px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  #clubPage .club-game-tabs button::before {
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(0, 1fr) 50px 52px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger::before {
    width: 20px !important;
    height: 20px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 9px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 12px !important;
  }

  #clubPage .league-summary-id::before {
    font-size: 10px !important;
  }

  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn {
    font-size: 10px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    font-size: 9px !important;
  }
}

/* TRUE EOF 281: higher-specificity lock for league header layout. */
#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1.08fr) 86px 90px !important;
  grid-template-areas: "league-name league-info league-setting league-record" !important;
  align-items: center !important;
  gap: 12px !important;
}

#clubPage .club-league-summary > .league-summary-name {
  grid-area: league-name !important;
  grid-column: league-name !important;
  grid-row: league-name !important;
  width: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

#clubPage .club-league-summary > .league-summary-id {
  grid-area: league-info !important;
  grid-column: league-info !important;
  grid-row: league-info !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  align-self: center !important;
}

#clubPage .club-league-summary > .league-setting-entry-btn,
#clubPage .club-league-summary > .league-setting-entry-placeholder {
  grid-area: league-setting !important;
  grid-column: league-setting !important;
  grid-row: league-setting !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

#clubPage .club-league-summary > .league-record-btn {
  grid-area: league-record !important;
  grid-column: league-record !important;
  grid-row: league-record !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

#clubPage .club-league-summary > .league-summary-actions {
  grid-area: league-setting / league-setting / league-record / league-record !important;
  grid-column: league-setting / league-record !important;
  grid-row: league-setting !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

#clubPage .club-league-summary > .league-summary-actions > .league-setting-entry-btn,
#clubPage .club-league-summary > .league-summary-actions > .league-record-btn {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

@media (max-width: 640px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(0, 1fr) 54px 58px !important;
    grid-template-areas:
      "league-name league-setting league-record"
      "league-info league-info league-info" !important;
    min-height: 98px !important;
  }

  #clubPage .club-league-summary > .league-summary-name,
  #clubPage .club-league-summary > .league-setting-entry-btn,
  #clubPage .club-league-summary > .league-setting-entry-placeholder,
  #clubPage .club-league-summary > .league-record-btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #clubPage .club-league-summary > .league-summary-id {
    grid-area: league-info !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #clubPage .club-league-summary > .league-summary-actions {
    display: contents !important;
  }

  #clubPage .club-league-summary > .league-summary-actions > .league-setting-entry-btn {
    grid-area: league-setting !important;
    grid-column: league-setting !important;
    grid-row: league-setting !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #clubPage .club-league-summary > .league-summary-actions > .league-record-btn {
    grid-area: league-record !important;
    grid-column: league-record !important;
    grid-row: league-record !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(0, 1fr) 50px 52px !important;
  }
}

@media (max-width: 520px) {
  #clubPage.club-page {
    padding: 14px 10px 100px !important;
  }

  #clubPage .club-league-summary {
    grid-template-columns: 1fr !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    grid-column: auto !important;
  }

  #clubPage .club-league-summary .league-summary-name,
  #clubPage .club-league-summary .league-switch-shell,
  #clubPage .club-league-summary .league-switch-trigger,
  #clubPage .club-league-summary .league-summary-id,
  #clubPage .club-league-summary .league-setting-entry-btn,
  #clubPage .club-league-summary .league-record-btn {
    height: 58px !important;
    min-height: 58px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span,
  #clubPage .club-league-summary .league-switch-trigger strong,
  #clubPage .club-league-summary .league-summary-id {
    font-size: 16px !important;
  }

  #clubPage .club-league-summary .league-summary-id b,
  #clubPage .club-league-summary .league-points-log-btn {
    font-size: 18px !important;
  }

  #clubPage .club-empty strong {
    font-size: 36px !important;
    letter-spacing: 3px !important;
  }

  #clubPage .club-empty span:nth-of-type(1) {
    font-size: 20px !important;
  }

#clubPage .club-empty span {
    font-size: 16px !important;
  }
}

/* TRUE EOF 274: repair source layout overlap; keep league source layout in one clean row. */
#clubPage .club-panel {
  max-width: 860px !important;
  display: block !important;
}

#clubPage .club-league-summary {
  grid-template-columns: minmax(190px, 230px) minmax(190px, 1fr) 110px 110px !important;
  grid-auto-flow: column !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 94px !important;
  padding: 14px !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
}

#clubPage .league-summary-id {
  grid-column: auto !important;
  order: initial !important;
}

#clubPage .league-summary-actions {
  display: contents !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}

#clubPage .club-game-tabs {
  position: relative !important;
  z-index: 3 !important;
  grid-template-columns: 1.05fr 1fr 1fr 1fr !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px !important;
  margin: 0 0 18px !important;
  overflow: visible !important;
}

#clubPage .club-game-tabs button {
  height: 78px !important;
  min-height: 78px !important;
  transform: none !important;
}

#clubPage .club-list {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

#clubPage .club-empty {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 620px) {
  #clubPage.club-page {
    padding: 18px 18px 104px !important;
  }

  #clubPage .club-league-summary {
    grid-template-columns: minmax(150px, 1fr) minmax(112px, 0.8fr) 74px 74px !important;
    gap: 8px !important;
    min-height: 78px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  #clubPage .league-summary-name,
  #clubPage .league-switch-shell,
  #clubPage .league-switch-trigger,
  #clubPage .league-summary-id,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  #clubPage .league-switch-trigger {
    gap: 7px !important;
    padding: 0 10px !important;
  }

  #clubPage .league-switch-trigger::before {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  #clubPage .league-switch-trigger span {
    font-size: 12px !important;
  }

  #clubPage .league-switch-trigger span::after {
    height: 16px !important;
    margin-left: 7px !important;
    margin-bottom: -4px !important;
  }

  #clubPage .league-switch-trigger strong {
    font-size: 13px !important;
  }

  #clubPage .league-summary-id {
    gap: 4px !important;
    padding: 0 7px !important;
    font-size: 0 !important;
  }

  #clubPage .league-summary-id::before {
    content: "联盟ID:" !important;
    color: #d7dcff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  #clubPage .league-summary-id b {
    font-size: 12px !important;
  }

  #clubPage .league-points-log-btn {
    display: none !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  #clubPage .club-game-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 6px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }

  #clubPage .club-game-tabs button {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  #clubPage .club-game-tabs button:not(:last-child)::after {
    display: block !important;
    height: 22px !important;
  }

  #clubPage .club-list,
  #clubPage .club-empty {
    min-height: calc(100vh - 210px) !important;
  }

  #clubPage .club-empty {
    padding-top: 58px !important;
  }

  #clubPage .club-empty::before {
    width: 136px !important;
    height: 136px !important;
    margin-bottom: 32px !important;
    font-size: 20px !important;
  }

  #clubPage .club-empty strong {
    font-size: 32px !important;
  }
}

.league-settings-fullpage {
  align-items: stretch !important;
  justify-items: stretch !important;
  place-items: stretch !important;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(130, 74, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(12, 8, 58, 0.96), rgba(9, 6, 44, 0.98)) !important;
}

.league-settings-fullpage .league-settings-card {
  position: relative !important;
  align-content: start !important;
  width: min(560px, 100%) !important;
  min-height: calc(100vh - 28px) !important;
  margin: 0 auto !important;
  padding: 18px 16px 20px !important;
  border-color: rgba(126, 96, 255, 0.72) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(128, 82, 255, 0.42), transparent 38%),
    linear-gradient(180deg, rgba(50, 35, 137, 0.98), rgba(18, 10, 73, 0.98)) !important;
  box-shadow: 0 0 34px rgba(126, 82, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.league-settings-fullpage .league-settings-card > strong {
  font-size: 28px !important;
}

.league-settings-fullpage .league-settings-card > em {
  margin-bottom: 8px !important;
}

.league-settings-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.league-settings-home {
  display: grid !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

.league-settings-tile {
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  min-height: 118px !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 222, 119, 0.58) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(255, 225, 112, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(47, 38, 139, 0.98), rgba(25, 19, 82, 0.98)) !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 22px rgba(0, 0, 0, 0.22) !important;
}

.league-settings-tile span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff8e8 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

.league-settings-tile span b {
  display: grid !important;
  min-width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #ff2e3d !important;
  color: #fff !important;
  font-size: 12px !important;
}

.league-settings-tile em {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 850 !important;
}

.league-settings-subpage {
  min-height: 0 !important;
  overflow: hidden !important;
}

.league-settings-back {
  justify-self: start !important;
  width: auto !important;
  min-width: 92px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff8e8 !important;
  font-size: 13px !important;
}

.league-settings-fullpage .league-audit-list,
.league-settings-fullpage .league-setting-members {
  max-height: calc(100vh - 250px) !important;
  padding-right: 3px !important;
}

.league-settings-card .league-point-form {
  grid-template-columns: 1fr 76px 58px 58px;
}

.league-setting-members {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.league-setting-member {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff8e8;
  text-align: left;
}

.league-setting-member i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #221504;
  font-style: normal;
  font-weight: 950;
}

.league-setting-member span {
  display: grid;
  color: #fff8e8;
  font-size: 13px;
  font-weight: 950;
}

.league-setting-member small {
  color: rgba(255, 248, 232, 0.6);
  font-size: 10px;
}

.league-setting-member b {
  color: #ffdf78;
  font-size: 15px;
}

@media (max-width: 430px) {
  .league-point-form {
    grid-template-columns: 1fr 78px;
  }

  .league-settings-card .league-point-form {
    grid-template-columns: 1fr 78px;
  }
}

.club-table-card {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 7px;
  min-height: 128px;
  padding: 16px;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 224, 138, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(31, 92, 73, 0.96), rgba(47, 46, 127, 0.94));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.club-table-card::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 22px;
  width: 62px;
  height: 82px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff;
  transform: rotate(8deg);
  box-shadow: -18px 14px 0 -8px rgba(255, 255, 255, 0.86), 0 12px 18px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.club-table-card span,
.club-table-card strong,
.club-table-card em,
.club-table-card i {
  position: relative;
  z-index: 1;
}

.club-table-card span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.club-table-card strong {
  max-width: 230px;
  font-size: 22px;
  line-height: 1.12;
}

.club-table-card em {
  max-width: 240px;
  color: rgba(255, 248, 232, 0.78);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.4;
}

.club-table-card i {
  display: grid;
  place-items: center;
  min-width: 132px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.lounge-hero {
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 330px;
  padding: 22px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 18%, rgba(255, 224, 138, 0.26), transparent 34%),
    radial-gradient(ellipse at 42% 48%, rgba(86, 111, 255, 0.35), transparent 46%),
    linear-gradient(145deg, rgba(42, 64, 128, 0.96), rgba(54, 34, 117, 0.94));
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lounge-hero::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 48px;
  width: 112px;
  height: 148px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff;
  transform: rotate(8deg);
  box-shadow: -28px 22px 0 -10px rgba(255, 255, 255, 0.84), 0 16px 24px rgba(0, 0, 0, 0.26);
}

.lounge-hero span,
.lounge-hero strong,
.lounge-hero em {
  position: relative;
  z-index: 1;
}

.lounge-hero span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.lounge-hero strong {
  font-size: 46px;
  line-height: 1;
}

.lounge-hero em {
  max-width: 220px;
  color: rgba(255, 248, 232, 0.78);
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.lounge-action {
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 248, 232, 0.86);
  font-size: 17px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lounge-action.primary {
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.26);
}

.create-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 26%, rgba(255, 224, 138, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(39, 73, 126, 0.96), rgba(44, 29, 100, 0.94));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.create-card::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 86px;
  height: 110px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff;
  transform: rotate(8deg);
  box-shadow: -22px 17px 0 -9px rgba(255, 255, 255, 0.86), 0 12px 18px rgba(0, 0, 0, 0.24);
}

.create-card span,
.create-card strong,
.create-card em {
  position: relative;
  z-index: 1;
}

.create-card span {
  display: inline-grid;
  place-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.create-card strong {
  display: block;
  margin-top: 10px;
  font-size: 38px;
  line-height: 1.05;
}

.create-card em {
  display: block;
  max-width: 210px;
  margin-top: 6px;
  color: rgba(255, 248, 232, 0.76);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.setting-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.setting-group label {
  color: rgba(255, 248, 232, 0.78);
  font-size: 13px;
  font-weight: 950;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.segmented button,
.rule-option {
  min-height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 248, 232, 0.78);
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.segmented button.active,
.rule-option.active {
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
}

.bet-range-config {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bet-range-config div {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.bet-range-config span {
  color: rgba(255, 248, 232, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.bet-range-config input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #151729;
  font-size: 16px;
  font-weight: 950;
  outline: none;
}

.rule-list {
  display: grid;
  gap: 8px;
}

.rule-option {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 10px 12px;
  text-align: left;
}

.rule-option strong {
  font-size: 15px;
}

.rule-option span {
  color: inherit;
  opacity: 0.78;
  font-size: 12px;
  font-weight: 800;
}

.create-btn {
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.26);
}

.sangong-rules {
  display: grid;
  grid-template-rows: repeat(7, auto);
  align-content: start;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 6px;
  color: #143966;
}

.sangong-rules .rules-title-area {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: -18px;
}

.sangong-rules .rules-sub-title {
  color: #183f73;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1px;
}

.sangong-rules .rules-sub-title::before,
.sangong-rules .rules-sub-title::after {
  content: "鉁?;
  margin: 0 7px;
  color: #e9bd55;
  font-size: 9px;
}

.sangong-rules .rules-main-title {
  color: #16497b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 950;
  line-height: 0.95;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.86), 0 6px 14px rgba(20, 73, 124, 0.12);
}

.sangong-rules .rules-title-line {
  position: relative;
  width: 66px;
  height: 6px;
}

.sangong-rules .rules-title-line::before,
.sangong-rules .rules-title-line::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 33px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d7a33a);
}

.sangong-rules .rules-title-line::before {
  left: 0;
}

.sangong-rules .rules-title-line::after {
  right: 0;
  transform: scaleX(-1);
}

.sangong-rules .rules-title-line div {
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border-radius: 2px;
  background: linear-gradient(135deg, #50d3c7, #ffffff, #d9a039);
  transform: rotate(45deg);
}

.sangong-rules .create-card {
  display: grid;
  align-content: center;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid rgba(238, 204, 131, 0.78);
  border-radius: 13px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 253, 255, 0.88) 100%);
  box-shadow: 0 8px 16px rgba(91, 151, 191, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.sangong-rules .create-card::before {
  display: none;
}

.sangong-rules .create-card::after {
  display: none;
}

.sangong-rules .create-card span {
  display: none;
}

.sangong-rules .create-card span::before {
  content: "鈾?;
  margin-right: 4px;
  color: #d79f35;
}

.sangong-rules .create-card .decor-line {
  display: none;
}

.sangong-rules .create-card .decor-line::before,
.sangong-rules .create-card .decor-line::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: #d9a642;
  transform: rotate(45deg);
}

.sangong-rules .create-card .decor-line::before {
  left: -7px;
}

.sangong-rules .create-card .decor-line::after {
  left: 12px;
  border: 1px solid #d9a642;
  background: #fff;
}

.sangong-rules .create-card strong {
  display: none;
}

.sangong-rules .create-card em {
  max-width: none;
  margin-top: 0;
  color: #244160;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.sangong-rules .card-stack {
  display: none;
}

.sangong-rules .card-back {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 38px;
  height: 56px;
  border: 2px solid #e6c46d;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(34, 138, 145, 0.95), rgba(167, 231, 221, 0.9)),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.18) 6px 7px);
  box-shadow: 0 10px 18px rgba(37, 99, 132, 0.2);
  transform: rotate(-4deg);
}

.sangong-rules .play-card {
  position: absolute;
  right: 0;
  top: 0;
  width: 46px;
  height: 68px;
  border: 1px solid rgba(222, 194, 130, 0.75);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 9px 18px rgba(38, 91, 122, 0.23), inset 0 0 0 1px rgba(226, 219, 202, 0.9);
  transform: rotate(8deg);
}

.sangong-rules .play-card div,
.sangong-rules .play-card span {
  position: absolute;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #143966;
  font-family: Georgia, serif;
}

.sangong-rules .play-card div {
  left: 6px;
  top: 5px;
  font-size: 12px;
}

.sangong-rules .play-card strong {
  position: absolute;
  left: 11px;
  top: 19px;
  margin: 0;
  color: #16497b;
  font-size: 28px;
  letter-spacing: 0;
  text-shadow: 0 1px 0 #f7d77e, 0 0 8px rgba(221, 163, 47, 0.35);
}

.sangong-rules .play-card span {
  right: 6px;
  bottom: 5px;
  font-size: 12px;
  transform: rotate(180deg);
}

.sangong-rules .setting-group {
  gap: 7px;
  padding: 8px 10px 9px;
  border: 1px solid rgba(167, 207, 229, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 8px 20px rgba(86, 151, 190, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.sangong-rules .setting-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #167c7a;
  font-size: 15px;
  font-weight: 950;
}

.sangong-rules .setting-group label::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid #21a893;
  border-radius: 2px;
  background: linear-gradient(135deg, #49d3bd, #fff, #d7a341);
  transform: rotate(45deg);
}

.sangong-rules .bet-range-config {
  gap: 8px;
}

.sangong-rules .bet-range-config > div {
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid rgba(191, 211, 223, 0.88);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 15px rgba(90, 150, 188, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sangong-rules .bet-range-config > div > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #406385;
  font-size: 12px;
  font-weight: 900;
}

.sangong-rules .bet-range-config > div > span::before {
  content: "鈼?;
  color: #d8a044;
}

.sangong-rules .input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin-top: 3px;
  padding: 0 8px;
  border: 1px solid rgba(226, 190, 135, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.sangong-rules .input-value {
  width: min(100%, 82px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #082d57;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 950;
}

.sangong-rules .stepper {
  position: relative;
  width: 12px;
  height: 24px;
}

.sangong-rules .stepper::before,
.sangong-rules .stepper::after {
  content: "";
  position: absolute;
  left: 1px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.sangong-rules .stepper::before {
  top: 2px;
  border-bottom: 6px solid #6c9ccc;
}

.sangong-rules .stepper::after {
  bottom: 2px;
  border-top: 6px solid #6c9ccc;
}

.sangong-rules .segmented {
  gap: 7px;
}

.sangong-rules .segmented button {
  position: relative;
  height: 40px;
  border: 1px solid #75b4f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #245486;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 12px rgba(102, 162, 202, 0.12);
}

.sangong-rules .segmented button.active {
  border-color: rgba(229, 181, 70, 0.95);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.46), transparent 50%),
    linear-gradient(180deg, #6ee6c9 0%, #27b99e 100%);
  color: #fff;
  box-shadow: 0 9px 18px rgba(34, 173, 150, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(18, 125, 113, 0.25);
}

.sangong-rules .segmented button.active::before {
  content: "鈾?;
  position: absolute;
  top: -11px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #f9d98a;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff0a2, #d9a13b);
  color: #956912;
  font-size: 10px;
  transform: translateX(-50%);
}

.companion-input-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(117, 180, 247, 0.85);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
  color: #245486;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 12px rgba(102, 162, 202, 0.12);
}

.companion-input-box span,
.companion-input-box em {
  color: #167c7a;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.companion-input-box input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(226, 190, 135, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #082d57;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 950;
  text-align: center;
  outline: 0;
}

.sangong-rules .setting-group:has(#companionOptions) {
  gap: 4px;
  padding: 6px 10px;
  border-radius: 13px;
}

.sangong-rules .setting-group:has(#companionOptions) label {
  font-size: 14px;
  line-height: 1;
}

.sangong-rules .setting-group:has(#companionOptions) label::before {
  width: 7px;
  height: 7px;
}

.sangong-rules .setting-group:has(#companionOptions) .companion-input-box {
  min-height: 34px;
  padding: 3px 10px;
  border-radius: 12px;
}

.sangong-rules .setting-group:has(#companionOptions) .companion-input-box input {
  height: 26px;
  font-size: 18px;
  border-radius: 10px;
}

.sangong-rules .setting-group:has(#companionOptions) .companion-input-box span,
.sangong-rules .setting-group:has(#companionOptions) .companion-input-box em {
  font-size: 12px;
}

.sangong-rules .rule-list {
  gap: 7px;
}

.sangong-rules .rule-option {
  display: grid;
  grid-template-columns: 40px 1fr 12px;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid rgba(195, 215, 228, 0.92);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
  color: #143d6d;
  text-align: left;
  box-shadow: 0 8px 15px rgba(90, 150, 188, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.sangong-rules .rule-option i {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #edd07b;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #91f0df, #35b69d 48%, #178778 100%);
  color: #ffe899;
  font-size: 17px;
  font-style: normal;
  box-shadow: 0 5px 12px rgba(42, 155, 142, 0.22);
}

.sangong-rules .rule-option strong {
  grid-column: 2;
  grid-row: 1;
  padding-left: 8px;
  color: #143d6d;
  font-size: 15px;
  font-weight: 950;
}

.sangong-rules .rule-option span {
  grid-column: 2;
  grid-row: 2;
  padding-left: 8px;
  color: #496784;
  font-size: 10px;
  opacity: 1;
}

.sangong-rules .rule-option::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / 3;
  width: 9px;
  height: 9px;
  border-top: 2px solid #d39a37;
  border-right: 2px solid #d39a37;
  transform: rotate(45deg);
}

.sangong-rules .rule-option.active {
  border-color: rgba(229, 181, 70, 0.9);
  background: rgba(232, 255, 250, 0.94);
}

.sangong-rules .create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 0;
  border: 2px solid #eed17f;
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.34), transparent 55%),
    linear-gradient(180deg, #73e6ca 0%, #27b89d 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 3px;
  box-shadow: 0 10px 20px rgba(37, 170, 150, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(16, 118, 105, 0.28);
}

.sangong-rules .create-btn::before,
.sangong-rules .create-btn::after {
  content: "鈼?;
  color: #f8d982;
  font-size: 14px;
}

.sangong-rules .create-btn span {
  margin: 0 20px;
  text-shadow: 0 2px 4px rgba(0, 80, 70, 0.2);
}

.room-card {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(ellipse at 78% 38%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(37, 72, 115, 0.98), rgba(17, 82, 69, 0.96));
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.room-card::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 224, 138, 0.95), rgba(189, 126, 42, 0.92) 62%, rgba(74, 43, 12, 0.7) 64%);
  transform: translateY(-50%);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.room-card::after {
  content: "妗?;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  color: #3a2207;
  font-size: 30px;
  font-weight: 950;
  pointer-events: none;
}

.room-card.mid {
  background:
    radial-gradient(ellipse at 78% 38%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(85, 58, 26, 0.98), rgba(168, 105, 24, 0.96));
}

.room-card.high {
  background:
    radial-gradient(ellipse at 78% 38%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(61, 38, 98, 0.98), rgba(117, 62, 177, 0.96));
}

.room-card span,
.room-card strong,
.room-card em,
.room-card i {
  position: relative;
  z-index: 1;
}

.room-card span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 12px;
  font-weight: 950;
}

.room-card strong {
  font-size: 30px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.room-card em {
  color: rgba(255, 248, 232, 0.82);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.room-card i {
  display: grid;
  place-items: center;
  width: 96px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.game-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 82px;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: visible;
}

.game-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: start;
  gap: 2px 10px;
  min-height: 82px;
  padding: 10px 12px;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.game-card::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 50px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, #fff 0 72%, #ece6d9 73%),
    #fff;
  transform: rotate(9deg);
  box-shadow: -13px 10px 0 -6px rgba(255, 255, 255, 0.88), 0 8px 14px rgba(0, 0, 0, 0.2);
  opacity: 0.92;
  pointer-events: none;
}

.game-card::after {
  content: "A";
  position: absolute;
  top: 19px;
  right: 28px;
  color: #d33131;
  font-size: 20px;
  font-weight: 950;
  transform: rotate(9deg);
  pointer-events: none;
}

.game-card.niu {
  background:
    radial-gradient(ellipse at 88% 48%, rgba(255, 230, 144, 0.22), transparent 30%),
    linear-gradient(135deg, #17563e, #0d7a55);
}

.game-card.gold {
  background:
    radial-gradient(ellipse at 88% 48%, rgba(255, 230, 144, 0.2), transparent 30%),
    linear-gradient(135deg, #6c3d12, #a06a18);
}

.game-card.palace {
  background:
    radial-gradient(ellipse at 88% 48%, rgba(255, 230, 144, 0.18), transparent 30%),
    linear-gradient(135deg, #3b2a6b, #7640b7);
  grid-column: 1 / -1;
}

.game-card span,
.game-card strong,
.game-card em,
.game-card i {
  position: relative;
  z-index: 1;
}

.game-card span {
  grid-column: 1;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 211, 107, 0.92);
  color: #2a1a03;
  font-size: 10px;
  font-weight: 950;
}

.game-card strong {
  grid-column: 1;
  max-width: 122px;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}

.game-card em {
  grid-column: 1;
  color: rgba(255, 248, 232, 0.82);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.game-card i {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  display: grid;
  place-items: center;
  width: 66px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.bottom-nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(12, 10, 38, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 -8px 18px rgba(0, 0, 0, 0.18);
}

.bottom-nav button {
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 248, 232, 0.78);
  font-size: 14px;
  font-weight: 950;
}

.bottom-nav button.active {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 248, 232, 0.86);
}

.bottom-nav button.league-main {
  height: 48px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 18px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.room {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  padding: max(6px, env(safe-area-inset-top)) 4px max(6px, env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 34%, rgba(20, 180, 238, 0.22), transparent 48%),
    linear-gradient(180deg, #1a1b2d 0%, #242033 38%, #18182a 100%);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.room::before {
  display: none;
}

.room-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 8px;
}

.room-head button {
  width: 58px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 950;
}

.room-head div:nth-child(2) {
  min-width: 0;
  text-align: center;
}

/* Source-inspired top frame: green panel with gold inward curved rail. */
.room-head {
  margin: 0 6px 4px !important;
  min-height: 74px !important;
  padding: 12px 16px 20px !important;
  grid-template-columns: 62px minmax(0, 1fr) 62px !important;
  isolation: isolate;
}

.room-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1120 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23063d2c'/%3E%3Cstop offset='45%25' stop-color='%2308703d'/%3E%3Cstop offset='100%25' stop-color='%23043323'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M45 25Q25 25 25 45L25 165Q25 190 50 190L315 190Q342 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q778 190 805 190L1070 190Q1095 190 1095 165L1095 45Q1095 25 1075 25Z'/%3E%3Cpath fill='none' stroke='%23d6a23a' stroke-width='7' stroke-linejoin='round' stroke-linecap='round' d='M45 25Q25 25 25 45L25 165Q25 190 50 190L315 190Q342 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q778 190 805 190L1070 190Q1095 190 1095 165L1095 45Q1095 25 1075 25Z'/%3E%3Cpath fill='none' stroke='%238d651b' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' d='M45 25Q25 25 25 45L25 165Q25 190 50 190L315 190Q342 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q778 190 805 190L1070 190Q1095 190 1095 165L1095 45Q1095 25 1075 25Z'/%3E%3Cpath fill='none' stroke='%23e1b650' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' d='M52 35Q36 35 36 51L36 158Q36 178 56 178L308 178Q331 178 344 158L378 108Q395 84 424 84L696 84Q725 84 742 108L776 158Q789 178 812 178L1064 178Q1084 178 1084 158L1084 51Q1084 35 1068 35Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.room-head::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  bottom: 18px;
  z-index: -1;
  border-radius: 18px 18px 30px 30px;
  background:
    radial-gradient(circle at 12% 80%, rgba(217, 164, 65, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 80%, rgba(217, 164, 65, 0.28) 0 1px, transparent 2px),
    linear-gradient(135deg, transparent 0 12%, rgba(217, 164, 65, 0.12) 12.5% 13%, transparent 13.5%),
    linear-gradient(225deg, transparent 0 12%, rgba(217, 164, 65, 0.12) 12.5% 13%, transparent 13.5%);
  opacity: 0.85;
  pointer-events: none;
}

.room-head > div:nth-child(2) {
  align-self: start;
  padding-top: 2px;
}

.room-head span {
  color: rgba(255, 225, 134, 0.92) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.room-head h2 {
  color: #fff5ca;
  font-size: 27px;
  line-height: 1.02;
  text-shadow:
    0 1px 0 rgba(107, 64, 9, 0.8),
    0 5px 10px rgba(0, 0, 0, 0.28);
}

.room-head button {
  align-self: start;
  width: 58px !important;
  height: 34px !important;
  border: 1px solid rgba(239, 193, 86, 0.76) !important;
  background:
    linear-gradient(180deg, rgba(16, 93, 58, 0.95), rgba(5, 47, 33, 0.94)) !important;
  color: #fff2ba !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 188, 0.25),
    0 5px 10px rgba(0, 0, 0, 0.18) !important;
}

.table {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  margin: 2px 4px 0;
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(235, 190, 83, 0.24), transparent 46%);
}

.table::before {
  content: "";
  position: absolute;
  inset: 18px 18px 16px;
  border: 10px solid #cfa04a;
  border-radius: 44px;
  background:
    radial-gradient(circle at 17% 12%, rgba(255, 230, 146, 0.52) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 12%, rgba(255, 230, 146, 0.52) 0 2px, transparent 3px),
    radial-gradient(circle at 17% 88%, rgba(255, 230, 146, 0.52) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 88%, rgba(255, 230, 146, 0.52) 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255, 232, 156, 0.12) 24px 26px, transparent 26px 50px),
    linear-gradient(90deg, rgba(255, 228, 147, 0.42) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 228, 147, 0.42) calc(100% - 2px)),
    radial-gradient(ellipse at 50% 16%, rgba(97, 231, 255, 0.68), transparent 32%),
    radial-gradient(ellipse at 50% 86%, rgba(28, 141, 124, 0.38), transparent 34%),
    linear-gradient(180deg, #1fbbef 0%, #069bd4 42%, #047dbd 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 226, 137, 0.56),
    inset 0 0 0 8px rgba(97, 62, 18, 0.3),
    inset 0 20px 46px rgba(255, 255, 255, 0.18),
    inset 0 -34px 54px rgba(0, 35, 78, 0.42),
    0 0 0 4px rgba(255, 205, 99, 0.72),
    0 0 0 8px rgba(77, 49, 16, 0.88),
    0 16px 30px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(255, 196, 75, 0.28);
}

.table::after {
  content: "";
  position: absolute;
  inset: 30px 30px 28px;
  border-radius: 32px;
  border: 1px solid rgba(255, 220, 136, 0.5);
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255, 225, 130, 0.08) 18px 20px, transparent 20px 38px);
  box-shadow:
    inset 0 0 24px rgba(255, 214, 105, 0.18),
    inset 0 0 0 1px rgba(129, 85, 22, 0.34);
  pointer-events: none;
}

.player {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 3px;
  z-index: 3;
  width: 112px;
  transform: translate(-50%, -50%) scale(0.62);
}

.player::before {
  display: none;
}

.player.self {
  width: 210px;
  transform: translate(-50%, -50%) scale(0.9);
}

.player.seat-0 { left: 50%; top: 82.8%; }
.player.seat-1 { left: 16.4%; top: 80%; }
.player.seat-2 { left: 16.4%; top: 61%; }
.player.seat-3 { left: 16.4%; top: 42%; }
.player.seat-4 { left: 16.4%; top: 23%; }
.player.seat-5 { left: 50%; top: 14%; }
.player.seat-6 { left: 83.6%; top: 23%; }
.player.seat-7 { left: 83.6%; top: 42%; }
.player.seat-8 { left: 83.6%; top: 61%; }
.player.seat-9 { left: 83.6%; top: 80%; }
.player.seat-10,
.player.seat-11 { display: none; }

.player.seat-0::before {
  top: -10px;
}

.player.seat-5::before {
  bottom: -9px;
}

.player.seat-1::before,
.player.seat-2::before,
.player.seat-3::before,
.player.seat-4::before {
  right: -8px;
  top: 38px;
  transform: rotate(90deg);
}

.player.seat-6::before,
.player.seat-7::before,
.player.seat-8::before,
.player.seat-9::before {
  left: -8px;
  top: 38px;
  transform: rotate(90deg);
}

.player.empty-seat {
  opacity: 0.78;
}

.seat-card {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 4px;
  border: 1px solid rgba(238, 211, 132, 0.58);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 226, 142, 0.94), rgba(145, 91, 34, 0.96));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.38), 0 7px 14px rgba(0, 0, 0, 0.24);
}

.seat-card.empty-chair {
  padding: 3px;
  border-color: rgba(191, 255, 219, 0.35);
  background:
    linear-gradient(145deg, rgba(39, 105, 78, 0.72), rgba(24, 70, 58, 0.82));
  box-shadow: inset 0 0 0 1px rgba(210, 255, 228, 0.08), 0 6px 12px rgba(0, 0, 0, 0.2);
}

.seat-card.empty-chair span {
  color: rgba(219, 255, 236, 0.78);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
}

.avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.62), transparent 20%),
    linear-gradient(145deg, #ffe08a, #b96c24);
  color: #2b1905;
  font-size: 17px;
  font-weight: 950;
}

.self .avatar {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.62), transparent 20%),
    linear-gradient(145deg, #78f0bd, #16845f);
  color: #052015;
}

.nameplate {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 5px;
  min-width: 90px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(5, 13, 27, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  justify-content: center;
}

.nameplate strong {
  color: var(--text);
  font-size: 13px;
}

.nameplate span {
  color: rgba(255, 211, 107, 0.9);
  font-size: 10px;
}

.nameplate em {
  grid-column: 1 / -1;
  color: rgba(255, 248, 232, 0.76);
  font-style: normal;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
}

.player.self .cards {
  width: 200px;
  justify-self: center;
  align-items: center;
}

.player.self .seat-card,
.player.self .nameplate,
.player.self .result {
  justify-self: center;
}

.card {
  position: relative;
  width: clamp(42px, 13vw, 56px);
  height: clamp(62px, 18vw, 82px);
  border-radius: 8px;
  background: #fffbf0;
  color: #181818;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
  display: grid;
  align-content: space-between;
  padding: 6px;
  font-weight: 950;
}

.opponent .card {
  width: 38px;
  height: 54px;
  border-radius: 6px;
  padding: 4px;
}

.card.red {
  color: var(--red);
}

.card.back {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.78) 0 13%, transparent 14%),
    linear-gradient(135deg, transparent 0 42%, rgba(255, 236, 168, 0.72) 43% 49%, transparent 50%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #eaffff 0%, #62d6df 46%, #167cae 100%);
  color: transparent;
  border: 2px solid rgba(255, 229, 150, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.44),
    inset 0 -10px 18px rgba(12, 83, 134, 0.26),
    0 7px 14px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card.back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 248, 217, 0.86);
  border-radius: inherit;
}

.card.back::after {
  content: "鈼?;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(13, 84, 128, 0.7);
  font-size: 19px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.rank {
  font-size: 18px;
  line-height: 1;
}

.suit {
  justify-self: end;
  font-size: 22px;
  line-height: 1;
}

.opponent .rank {
  font-size: 14px;
}

.opponent .suit {
  font-size: 17px;
}

.result {
  min-height: 21px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  color: #ffe08a;
  font-size: 12px;
  font-weight: 950;
}

.dealer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(260px, 68vw);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  z-index: 4;
}

.deck-stack {
  display: none !important;
}

.deck-stack {
  width: 58px;
  height: 76px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.78) 0 13%, transparent 14%),
    linear-gradient(135deg, transparent 0 42%, rgba(255, 236, 168, 0.72) 43% 49%, transparent 50%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, #eaffff 0%, #62d6df 46%, #167cae 100%);
  border: 2px solid rgba(255, 229, 150, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.44),
    inset 0 -10px 18px rgba(12, 83, 134, 0.26),
    7px 5px 0 rgba(255, 255, 255, 0.2),
    12px 9px 0 rgba(255, 255, 255, 0.12),
    0 14px 22px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}

.deck-stack::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 248, 217, 0.86);
  border-radius: inherit;
}

.deck-stack::after {
  content: "鈼?;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(13, 84, 128, 0.7);
  font-size: 22px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.dealer p,
.round-log {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(99, 45, 178, 0.78) 22%, rgba(62, 93, 215, 0.82) 78%, transparent);
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 3px rgba(25, 12, 70, 0.56), 0 0 8px rgba(255, 255, 255, 0.4);
}

.dealer p.ready-action {
  min-width: 126px;
  padding: 9px 22px;
  border: 1px solid rgba(255, 232, 154, 0.92);
  background:
    linear-gradient(180deg, #ffe28e 0%, #d79a38 58%, #9d641c 100%);
  color: #211504;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 241, 178, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 8px 16px rgba(0, 0, 0, 0.28);
}

.round-log {
  max-width: 92vw;
  color: rgba(255, 248, 232, 0.92);
  border-radius: 14px;
  line-height: 1.45;
  background: rgba(3, 47, 80, 0.48);
  box-shadow: inset 0 0 0 1px rgba(137, 224, 255, 0.12);
}

.actions {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  pointer-events: auto;
}

.actions.hidden {
  display: none !important;
}

.bet-slider {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(12, 19, 39, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.actions:not([data-phase="betting"]) .bet-slider {
  display: none;
}

.actions[data-phase="ready"],
.actions[data-phase="dealt"],
.actions[data-phase="spectator"] {
  grid-template-columns: minmax(0, 1fr);
  left: 50%;
  right: auto;
  width: min(220px, 70vw);
  transform: translateX(-50%);
}

.actions[data-phase="ready"] #betBtn,
.actions[data-phase="ready"] #callBtn,
.actions[data-phase="ready"] #showBtn,
.actions[data-phase="dealt"] #dealBtn,
.actions[data-phase="dealt"] #betBtn,
.actions[data-phase="dealt"] #callBtn,
.actions[data-phase="spectator"] #betBtn,
.actions[data-phase="spectator"] #callBtn,
.actions[data-phase="spectator"] #showBtn {
  display: none;
}

.bet-slider div {
  display: grid;
  gap: 2px;
}

.bet-slider span {
  color: rgba(255, 248, 232, 0.66);
  font-size: 12px;
  font-weight: 900;
}

.bet-slider strong {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.bet-slider input {
  width: 100%;
  min-width: 0;
  accent-color: #f3c85d;
}

.bet-slider.disabled {
  opacity: 0.48;
}

.actions button {
  min-width: 0;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.actions button:nth-of-type(1),
.actions button:not(:disabled):last-child {
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
}

.actions button:disabled {
  opacity: 0.38;
}

.spectator-sit-btn {
  position: absolute;
  right: 18px;
  bottom: 86px;
  z-index: 24;
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 0;
  height: 112px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 232, 154, 0.95);
  border-radius: 13px;
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.58), transparent 17%),
    linear-gradient(180deg, #ffe999 0%, #d89b37 55%, #945b18 100%);
  color: #2a1702;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 14px rgba(92, 48, 5, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.32);
}

.spectator-sit-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 34px;
  height: 11px;
  border-radius: 50%;
  background: rgba(38, 22, 6, 0.5);
  filter: blur(2px);
  transform: translateX(-50%);
}

/* Final spectator sit sign: desktop tent card, kept inside the table border. */
.spectator-sit-btn {
  right: 48px !important;
  bottom: 54px !important;
  width: 122px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 3px solid #d9d9d4 !important;
  border-radius: 5px !important;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.36), transparent 18% 78%, rgba(122, 82, 11, 0.16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #ffe487 0%, #d6a735 54%, #a97619 100%) !important;
  color: #14110b !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-shadow: 0 1px 0 rgba(255, 238, 170, 0.5);
  box-shadow:
    inset 0 0 0 2px rgba(127, 81, 9, 0.7),
    inset 0 0 0 4px rgba(255, 239, 167, 0.38),
    0 8px 0 rgba(53, 47, 42, 0.72),
    0 13px 16px rgba(0, 0, 0, 0.32) !important;
  transform: perspective(180px) rotateX(8deg) skewX(-5deg) !important;
}

.spectator-sit-btn::before {
  left: auto !important;
  right: -18px !important;
  bottom: -10px !important;
  width: 22px !important;
  height: 58px !important;
  border-radius: 0 8px 8px 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(92, 89, 86, 0.92) 44%, #252321 100%) !important;
  filter: none !important;
  clip-path: polygon(0 0, 100% 12%, 100% 92%, 0 100%) !important;
  transform: skewY(8deg) !important;
  box-shadow:
    inset -2px 0 0 rgba(255, 255, 255, 0.28),
    5px 8px 12px rgba(0, 0, 0, 0.24);
}

.spectator-sit-btn::after {
  content: "";
  position: absolute;
  left: 8px;
  right: -12px;
  bottom: -14px;
  height: 10px;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.32);
  filter: blur(4px);
  z-index: -1;
}

/* Polish the right folded edge so the sign looks lighter and stays off the rail. */
.spectator-sit-btn {
  right: 60px !important;
  width: 116px !important;
  height: 48px !important;
  transform: perspective(190px) rotateX(7deg) skewX(-4deg) !important;
}

.spectator-sit-btn::before {
  right: -10px !important;
  bottom: -6px !important;
  width: 14px !important;
  height: 54px !important;
  border-radius: 0 7px 7px 0 !important;
  background:
    linear-gradient(90deg, rgba(245, 244, 238, 0.92) 0%, rgba(156, 152, 145, 0.96) 38%, rgba(55, 53, 50, 0.96) 100%) !important;
  clip-path: polygon(0 4%, 100% 17%, 100% 86%, 0 100%) !important;
  transform: skewY(6deg) !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.48),
    3px 5px 9px rgba(0, 0, 0, 0.22) !important;
}

.spectator-sit-btn::after {
  right: 0 !important;
  bottom: -11px !important;
  height: 8px !important;
  opacity: 0.78;
}

/* Final cleanup: use a slim metal rim instead of a bulky right fold. */
.spectator-sit-btn {
  right: 62px !important;
  width: 118px !important;
  height: 48px !important;
  border-right-width: 5px !important;
  transform: perspective(160px) rotateX(5deg) skewX(-3deg) !important;
}

.spectator-sit-btn::before {
  right: -7px !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 7px !important;
  height: auto !important;
  border-radius: 0 4px 4px 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(180, 177, 168, 0.92) 45%, rgba(92, 88, 80, 0.88)) !important;
  clip-path: none !important;
  transform: none !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.42),
    2px 3px 5px rgba(0, 0, 0, 0.18) !important;
}

.spectator-sit-btn::after {
  left: 8px !important;
  right: 2px !important;
  bottom: -9px !important;
  height: 7px !important;
}

/* Remove the remaining protruding right lip. */
.spectator-sit-btn::before {
  display: none !important;
}

/* Final center prompt style: gold framed, no purple gradient. */
.dealer p,
.round-log,
.dealer p.ready-action {
  border: 1px solid rgba(255, 232, 154, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 226, 142, 0.96) 0%, rgba(215, 154, 56, 0.96) 58%, rgba(157, 100, 28, 0.96) 100%) !important;
  color: #211504 !important;
  text-shadow: 0 1px 0 rgba(255, 241, 178, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -5px 10px rgba(92, 48, 5, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.28) !important;
}

.dealer p {
  min-width: 116px;
  padding: 8px 20px !important;
}

.round-log {
  max-width: min(290px, 78vw) !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Floating flip/reveal action, placed where the spectator sit sign lives. */
.table-show-btn {
  position: absolute;
  right: 62px;
  bottom: 54px;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 104px;
  height: 48px;
  padding: 0 12px;
  border: 2px solid rgba(255, 244, 205, 0.94);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.56), transparent 18%),
    linear-gradient(180deg, #fff0a3 0%, #d99b36 55%, #9f641d 100%);
  color: #231404;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 242, 180, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(132, 83, 11, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 12px rgba(92, 48, 5, 0.22),
    0 8px 0 rgba(52, 43, 31, 0.58),
    0 12px 16px rgba(0, 0, 0, 0.3);
  transform: perspective(160px) rotateX(5deg) skewX(-3deg);
}

.table-show-btn::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(119, 73, 7, 0.55);
  border-radius: 4px;
  pointer-events: none;
}

.table-show-btn::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 5px;
  bottom: -9px;
  height: 7px;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.3);
  filter: blur(4px);
  z-index: -1;
}

/* Center the bet slider under the table countdown while betting. */
.dealer .bet-slider {
  width: min(360px, 84vw);
  grid-template-columns: 64px minmax(0, 1fr) 76px;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 232, 154, 0.34);
  border-radius: 14px;
  background: rgba(8, 20, 30, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.24);
}

.dealer .bet-slider span {
  font-size: 11px;
  color: rgba(255, 248, 232, 0.75);
}

.dealer .bet-slider strong {
  font-size: 18px;
}

.dealer .bet-slider input {
  height: 18px;
}

.dealer .bet-slider #betBtn {
  display: block !important;
  width: 76px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff0a3 0%, #d99b36 56%, #9f641d 100%);
  color: #231404;
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -4px 8px rgba(92, 48, 5, 0.22),
    0 5px 10px rgba(0, 0, 0, 0.24);
}

.dealer .bet-slider #betBtn:disabled {
  opacity: 0.5;
}

/* Source-inspired center countdown button. */
#statusText {
  position: relative;
  display: grid;
  place-items: center;
  width: min(230px, 58vw);
  height: 50px;
  min-width: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #fff5a8 0%, #f7c243 16%, #c57a08 50%, #8f5200 100%) !important;
  box-shadow:
    0 7px 13px rgba(28, 13, 0, 0.36),
    inset 0 3px 4px rgba(255, 255, 255, 0.85),
    inset 0 -5px 8px rgba(86, 38, 0, 0.52) !important;
  overflow: hidden;
}

#statusText::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffe77a 0%, #d18b15 48%, #703600 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -4px 6px rgba(55, 23, 0, 0.62);
}

#statusText .status-inner {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid #5d2c00;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 18%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #fff3a8 0%, #ffd55e 20%, #f5a826 58%, #dc8c13 100%);
  box-shadow:
    inset 0 5px 12px rgba(255, 255, 255, 0.78),
    inset 0 -5px 12px rgba(116, 54, 0, 0.43),
    0 0 0 2px rgba(255, 234, 120, 0.86);
  overflow: hidden;
}

#statusText .status-inner::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 5px;
  height: 17px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.16), rgba(255,255,255,0));
}

#statusText .status-inner::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 6px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,237,115,0.55));
  filter: blur(1px);
}

#statusText .status-label,
#statusText .status-number {
  position: relative;
  z-index: 4;
  color: #221100;
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 1px 0 #ffe58a,
    0 2px 0 #6f3a00,
    2px 3px 4px rgba(0, 0, 0, 0.32);
}

#statusText .status-label {
  font-size: 16px;
  letter-spacing: 0;
}

#statusText .status-number {
  margin-left: 8px;
  font-size: 24px;
}

#statusText .status-light {
  position: absolute;
  top: 4px;
  left: 45%;
  z-index: 5;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  filter: blur(4px);
}

/* Final readability pass for center status and betting controls. */
#statusText {
  width: auto !important;
  min-width: 132px !important;
  max-width: 84vw !important;
  height: 48px !important;
  padding: 4px 10px !important;
}

#statusText .status-inner {
  width: auto !important;
  min-width: 100% !important;
  padding: 0 22px !important;
}

#statusText .status-label,
#statusText .status-number {
  text-shadow: 0 1px 0 rgba(255, 236, 150, 0.78) !important;
}

#statusText .status-label {
  white-space: nowrap;
  font-size: 15px !important;
}

#statusText .status-number {
  font-size: 23px !important;
}

.dealer .bet-slider.disabled {
  display: none !important;
}

/* Keep the center countdown aligned when the bet slider appears. */
.dealer {
  left: 50% !important;
  width: min(360px, calc(100% - 96px)) !important;
  justify-items: center !important;
  transform: translateX(-50%) translateY(-50%) !important;
}

#statusText {
  justify-self: center !important;
}

.dealer .bet-slider {
  justify-self: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Premium betting bar: dark emerald base, gold rail and button. */
.dealer {
  width: min(430px, calc(100% - 40px)) !important;
}

.dealer .bet-slider {
  position: relative !important;
  grid-template-columns: 82px minmax(96px, 1fr) 86px !important;
  gap: 12px !important;
  align-items: center !important;
  width: min(420px, 100%) !important;
  min-height: 66px !important;
  padding: 8px 10px 8px 16px !important;
  border: 2px solid rgba(250, 214, 117, 0.82) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 238, 166, 0.16), transparent 30%),
    linear-gradient(180deg, #0b4a38 0%, #062f29 54%, #031c18 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 180, 0.22),
    inset 0 10px 22px rgba(255, 255, 255, 0.06),
    inset 0 -10px 18px rgba(0, 0, 0, 0.34),
    0 8px 16px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
}

.dealer .bet-slider::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 17px;
  border: 1px solid rgba(255, 224, 139, 0.38);
  pointer-events: none;
}

.dealer .bet-slider::after {
  content: "";
  position: absolute;
  left: 96px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 225, 143, 0.45), transparent);
  pointer-events: none;
}

.dealer .bet-slider > div {
  position: relative;
  z-index: 1;
  display: grid !important;
  gap: 1px !important;
  justify-items: start !important;
}

.dealer .bet-slider span {
  color: #ffe8a4 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
}

.dealer .bet-slider strong {
  color: #fff2a9 !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 #82510e,
    0 3px 8px rgba(255, 218, 95, 0.35) !important;
}

.dealer .bet-slider input[type="range"] {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 22px !important;
  margin: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  accent-color: #f6ca58;
}

.dealer .bet-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid rgba(255, 205, 92, 0.88);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 230, 150, 0.18) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #123f36 0%, #082c27 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.18);
}

.dealer .bet-slider input[type="range"]::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 2px solid #fff0a2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #fff8bd 0%, #f7d56a 24%, #d99a25 56%, #8f5607 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.74),
    inset 0 -4px 7px rgba(90, 44, 0, 0.34),
    0 3px 7px rgba(0, 0, 0, 0.4);
  -webkit-appearance: none;
}

.dealer .bet-slider input[type="range"]::-moz-range-track {
  height: 12px;
  border: 2px solid rgba(255, 205, 92, 0.88);
  border-radius: 999px;
  background: linear-gradient(180deg, #123f36 0%, #082c27 100%);
}

.dealer .bet-slider input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 2px solid #fff0a2;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fff8bd 0%, #f7d56a 24%, #d99a25 56%, #8f5607 100%);
}

.dealer .bet-slider #betBtn {
  position: relative;
  z-index: 1;
  width: 86px !important;
  height: 44px !important;
  border: 2px solid #6a3900 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.65), transparent 30%),
    linear-gradient(180deg, #fff2a2 0%, #f2c54c 28%, #c77b08 100%) !important;
  color: #241100 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.72),
    inset 0 -5px 9px rgba(86, 39, 0, 0.42),
    0 3px 0 #5f3300,
    0 7px 13px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 430px) {
  .dealer .bet-slider {
    grid-template-columns: 74px minmax(82px, 1fr) 78px !important;
    gap: 9px !important;
    min-height: 62px !important;
    padding-left: 13px !important;
  }

  .dealer .bet-slider::after {
    left: 86px;
  }

  .dealer .bet-slider strong {
    font-size: 27px !important;
  }

  .dealer .bet-slider #betBtn {
    width: 78px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* The betting panel must not stretch the countdown pill above it. */
.dealer {
  align-items: center !important;
  grid-auto-rows: max-content !important;
  row-gap: 8px !important;
}

#statusText,
#statusText.ready-action {
  align-self: center !important;
  box-sizing: border-box !important;
  width: max-content !important;
  min-width: 148px !important;
  max-width: calc(100vw - 96px) !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 4px !important;
  overflow: hidden !important;
}

#statusText .status-inner {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 20px !important;
  flex: 0 0 auto !important;
}

#statusText .status-light {
  pointer-events: none !important;
}

.dealer .bet-slider {
  align-self: center !important;
  flex: 0 0 auto !important;
}

/* Remove the bottom drop shadow from the betting bar and button. */
.dealer .bet-slider {
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 180, 0.22),
    inset 0 10px 22px rgba(255, 255, 255, 0.06),
    inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important;
}

.dealer .bet-slider #betBtn {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.72),
    inset 0 -5px 9px rgba(86, 39, 0, 0.36) !important;
}

/* Hard-lock the countdown pill height so the betting bar cannot affect it. */
.dealer > #statusText,
.dealer > #statusText.ready-action {
  display: inline-grid !important;
  place-items: center !important;
  contain: layout paint !important;
  inline-size: max-content !important;
  block-size: 40px !important;
  min-block-size: 40px !important;
  max-block-size: 40px !important;
  min-inline-size: 146px !important;
  max-inline-size: calc(100vw - 110px) !important;
  margin: 0 !important;
  padding: 3px !important;
  line-height: 1 !important;
  border: 0 !important;
  flex: 0 0 40px !important;
}

.dealer > #statusText::before {
  inset: 3px !important;
}

.dealer > #statusText .status-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  block-size: 100% !important;
  max-block-size: 34px !important;
  min-block-size: 0 !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

.dealer > #statusText .status-inner::before {
  top: 4px !important;
  height: 12px !important;
}

.dealer > #statusText .status-inner::after {
  bottom: 4px !important;
  height: 6px !important;
}

.dealer > #statusText .status-label,
.dealer > #statusText .status-number {
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.dealer > #statusText .status-label {
  font-size: 14px !important;
}

.dealer > #statusText .status-number {
  font-size: 22px !important;
}

/* Let short countdown text use a shorter gold frame. */
.dealer > #statusText,
.dealer > #statusText.ready-action {
  width: fit-content !important;
  inline-size: fit-content !important;
  min-width: 96px !important;
  min-inline-size: 96px !important;
}

.dealer > #statusText .status-inner {
  min-width: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Compact the premium betting bar so it takes less table space. */
.dealer .bet-slider {
  grid-template-columns: 66px minmax(84px, 1fr) 72px !important;
  gap: 8px !important;
  width: min(340px, 100%) !important;
  min-height: 52px !important;
  padding: 6px 8px 6px 12px !important;
  border-width: 1px !important;
  border-radius: 18px !important;
}

.dealer .bet-slider::before {
  inset: 4px !important;
  border-radius: 14px !important;
}

.dealer .bet-slider::after {
  left: 76px !important;
  top: 10px !important;
  bottom: 10px !important;
}

.dealer .bet-slider span {
  font-size: 10px !important;
}

.dealer .bet-slider strong {
  font-size: 24px !important;
}

.dealer .bet-slider input[type="range"] {
  height: 18px !important;
}

.dealer .bet-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 9px !important;
  border-width: 1px !important;
}

.dealer .bet-slider input[type="range"]::-webkit-slider-thumb {
  width: 23px !important;
  height: 23px !important;
  margin-top: -8px !important;
}

.dealer .bet-slider input[type="range"]::-moz-range-track {
  height: 9px !important;
  border-width: 1px !important;
}

.dealer .bet-slider input[type="range"]::-moz-range-thumb {
  width: 21px !important;
  height: 21px !important;
}

.dealer .bet-slider #betBtn {
  width: 72px !important;
  height: 34px !important;
  border-width: 1px !important;
  font-size: 13px !important;
}

@media (max-width: 430px) {
  .dealer .bet-slider {
    grid-template-columns: 60px minmax(74px, 1fr) 66px !important;
    width: min(318px, 100%) !important;
    min-height: 50px !important;
    gap: 7px !important;
    padding-left: 10px !important;
  }

  .dealer .bet-slider::after {
    left: 69px !important;
  }

  .dealer .bet-slider strong {
    font-size: 22px !important;
  }

.dealer .bet-slider #betBtn {
    width: 66px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
}

/* Source-built poker back: dark emerald deck with gold compass ornaments. */
.card.back {
  --src-gold: #f2cf70;
  --src-gold-deep: #745114;
  --src-green: #07504a;
  --src-green-dark: #032e2b;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  color: transparent !important;
  border: 2px solid #064641 !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(26, 147, 137, 0.34), transparent 36%),
    linear-gradient(135deg, #07504a 0%, #053d39 48%, #032e2b 100%) !important;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.26),
    inset 0 0 12px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.card.back::before,
.card.back::after {
  content: none !important;
}

.card.back > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.card.back .back-rays {
  left: 50%;
  top: 50%;
  width: 96%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 110, 0.22) 0deg 1deg, transparent 1deg 4deg);
  opacity: 0.48;
  z-index: 1;
}

.card.back .back-gold-frame {
  inset: 7%;
  border: 2px solid #f6d980;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px #825815,
    inset 0 0 0 3px #ffd978,
    inset 0 0 0 4px #3b2807;
  z-index: 3;
}

.card.back .back-inner-frame {
  inset: 17%;
  border: 1px solid #dcb95f;
  border-radius: 4px;
  z-index: 4;
}

.card.back .back-inner-frame::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 226, 134, 0.74);
  border-radius: 3px;
}

.card.back .back-line-v {
  left: 50%;
  top: 9%;
  width: 1px;
  height: 82%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #f4d77a, transparent);
  z-index: 4;
  opacity: 0.85;
}

.card.back .back-line-h {
  left: 12%;
  top: 50%;
  width: 76%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #f4d77a, transparent);
  z-index: 4;
  opacity: 0.85;
}

.card.back .back-dot-row {
  left: 22%;
  right: 22%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #e8c46b 0 2px, transparent 2px 5px);
  opacity: 0.75;
  z-index: 6;
}

.card.back .back-dot-row.top {
  top: 11%;
}

.card.back .back-dot-row.bottom {
  bottom: 11%;
}

.card.back .back-corner {
  width: 22%;
  aspect-ratio: 1;
  z-index: 5;
}

.card.back .back-corner::before,
.card.back .back-corner::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #e6c168;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 80% 0;
}

.card.back .back-corner::after {
  inset: 24%;
  opacity: 0.9;
}

.card.back .back-corner.tl {
  left: 12%;
  top: 9%;
}

.card.back .back-corner.tr {
  right: 12%;
  top: 9%;
  transform: rotate(90deg);
}

.card.back .back-corner.bl {
  left: 12%;
  bottom: 9%;
  transform: rotate(-90deg);
}

.card.back .back-corner.br {
  right: 12%;
  bottom: 9%;
  transform: rotate(180deg);
}

.card.back .back-ornament {
  left: 50%;
  width: 46%;
  height: 20%;
  transform: translateX(-50%);
  z-index: 6;
}

.card.back .back-ornament.top {
  top: 22%;
}

.card.back .back-ornament.bottom {
  bottom: 22%;
  transform: translateX(-50%) rotate(180deg);
}

.card.back .back-ornament::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 22%;
  height: 46%;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #f1ca6d;
  border-radius: 45% 45% 0 45%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card.back .back-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 24%;
  transform: translateX(-50%);
  border-top: 1px solid #f1ca6d;
  border-radius: 50%;
}

.card.back .back-diamond {
  width: 6%;
  aspect-ratio: 1;
  background: #07504a;
  border: 1px solid #f4d77a;
  transform: rotate(45deg);
  z-index: 8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card.back .back-diamond.top {
  top: 4%;
  left: 47%;
}

.card.back .back-diamond.bottom {
  bottom: 4%;
  left: 47%;
}

.card.back .back-diamond.left {
  left: 4%;
  top: 47%;
}

.card.back .back-diamond.right {
  right: 4%;
  top: 47%;
}

.card.back .back-compass {
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 7;
}

.card.back .back-compass-ring,
.card.back .back-compass-star,
.card.back .back-center-dot {
  position: absolute;
  display: block;
  pointer-events: none;
}

.card.back .back-compass-ring {
  inset: 0;
  border-radius: 50%;
  border: 2px solid #f5d47a;
  background:
    radial-gradient(circle, #063d38 0 18%, transparent 19%),
    conic-gradient(from 45deg, #ffe99c, #b8781b, #f7d777, #8c5510, #ffe99c);
  box-shadow:
    0 0 0 1px #745114,
    0 0 0 3px #f6d36e,
    0 0 8px rgba(255, 220, 110, 0.55);
}

.card.back .back-compass-ring::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dotted #073c38;
}

.card.back .back-compass-star {
  left: 50%;
  top: 50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0%, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0% 50%, 40% 38%);
  background: conic-gradient(from 45deg, #ffe99a, #bc7a1a, #f8d77b, #9d6011, #ffe99a);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.card.back .back-center-dot {
  left: 50%;
  top: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #07504a;
  border: 2px solid #f1cf72;
  z-index: 8;
}

.card.back .back-center-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #f7d87b;
  border-left: 0;
  border-bottom: 0;
}

/* Clean up the source-built card back: no green outer stroke or edge dots. */
.card.back {
  border-color: transparent !important;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(242, 207, 112, 0.46),
    inset 0 0 12px rgba(255, 255, 255, 0.08) !important;
}

.card.back .back-diamond {
  display: none !important;
}

/* Remove the remaining green rim outside the gold card frame. */
.card.back {
  border: 0 !important;
  background: linear-gradient(135deg, #07504a 0%, #053d39 48%, #032e2b 100%) !important;
}

.card.back .back-gold-frame {
  inset: 2px !important;
  border-radius: 6px !important;
  border-width: 2px !important;
}

/* Keep the countdown fixed at table center; float the bet bar below it. */
.dealer {
  width: max-content !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  overflow: visible !important;
}

.dealer > #statusText {
  grid-area: 1 / 1 !important;
}

.dealer .bet-slider {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 8px) !important;
  width: min(340px, calc(100vw - 58px)) !important;
  max-width: calc(100vw - 58px) !important;
  min-width: min(300px, calc(100vw - 58px)) !important;
  inline-size: min(340px, calc(100vw - 58px)) !important;
  max-inline-size: calc(100vw - 58px) !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

@media (max-width: 430px) {
.dealer .bet-slider {
    width: min(318px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: min(286px, calc(100vw - 48px)) !important;
    inline-size: min(318px, calc(100vw - 48px)) !important;
    max-inline-size: calc(100vw - 48px) !important;
  }
}

/* Slimmer gold strokes on the source-built card back. */
.card.back .back-gold-frame {
  border-width: 1px !important;
  box-shadow:
    inset 0 0 0 1px #8f6619,
    inset 0 0 0 2px rgba(255, 217, 120, 0.82),
    inset 0 0 0 3px rgba(59, 40, 7, 0.82) !important;
}

.card.back .back-inner-frame,
.card.back .back-inner-frame::before,
.card.back .back-corner::before,
.card.back .back-corner::after {
  border-width: 1px !important;
}

.card.back .back-compass-ring {
  border-width: 1px !important;
  box-shadow:
    0 0 0 1px #745114,
    0 0 0 2px #f6d36e,
    0 0 6px rgba(255, 220, 110, 0.5) !important;
}

.card.back .back-center-dot {
  border-width: 1px !important;
}

/* Final room proportions: header spans table width and table hugs the top frame. */
.room {
  grid-template-rows: 66px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: max(4px, env(safe-area-inset-top)) 4px max(4px, env(safe-area-inset-bottom)) !important;
}

.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 12px 14px 18px !important;
}

.table {
  width: calc(100% - 8px) !important;
  height: calc(100vh - 64px - max(4px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom))) !important;
  margin: 0 4px !important;
  align-self: stretch !important;
}

.table::before {
  inset: 8px 8px 8px !important;
}

.table::after {
  inset: 20px 20px 20px !important;
}

@media (max-height: 700px) {
  .room {
    grid-template-rows: 58px minmax(0, 1fr) !important;
  }

  .room-head {
    min-height: 70px !important;
    margin-bottom: -13px !important;
  }

  .table {
    height: calc(100vh - 56px - max(4px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom))) !important;
  }
}

/* Center table branding printed on the felt. */
.table-brand {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 2;
  width: min(260px, 58vw);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  pointer-events: none;
  opacity: 0.72;
}

.table-brand strong {
  color: rgba(255, 222, 123, 0.9);
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(82, 42, 0, 0.76),
    0 5px 16px rgba(0, 0, 0, 0.24);
}

.table-brand span {
  max-width: 100%;
  color: rgba(255, 238, 174, 0.78);
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
}

.table-brand::before,
.table-brand::after {
  content: "";
  width: 74%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 125, 0.54), transparent);
}

/* Put room/rules buttons inside the top frame and hide the center header text. */
.room-head {
  grid-template-columns: 70px 1fr 70px !important;
  align-items: start !important;
  padding: 15px 18px 18px !important;
}

.room-head > div:nth-child(2) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.room-head #roomSub,
.room-head #roomTitle {
  display: none !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  align-self: start !important;
  justify-self: center !important;
  width: 58px !important;
  height: 30px !important;
  margin-top: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(20, 114, 67, 0.98), rgba(5, 52, 35, 0.96)) !important;
}

.room-head #backBtn {
  grid-column: 1;
}

.room-head #ruleBtn {
  grid-column: 3;
}

/* Final top frame alignment: stretch rail full width and keep buttons inside it. */
.room-head {
  width: 100% !important;
  margin: 0 0 -11px !important;
  padding: 14px 18px 18px !important;
}

.room-head::before {
  inset: 0 !important;
  background-size: 108% 100% !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  position: absolute !important;
  top: 15px !important;
  z-index: 2 !important;
  width: 56px !important;
  height: 30px !important;
}

.room-head #backBtn {
  left: 24px !important;
}

.room-head #ruleBtn {
  right: 24px !important;
}

/* Make the top frame match the table outer width exactly. */
.room-head {
  width: calc(100% - 8px) !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.room-head::before {
  left: -18px !important;
  right: -18px !important;
  background-size: 100% 100% !important;
}

.room-head #backBtn {
  left: 8px !important;
}

.room-head #ruleBtn {
  right: 8px !important;
}

/* Replace the original inset SVG with a true full-width rail. */
.room-head::before {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1120 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23063d2c'/%3E%3Cstop offset='45%25' stop-color='%2308703d'/%3E%3Cstop offset='100%25' stop-color='%23043323'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M18 25Q4 25 4 39L4 166Q4 190 30 190L320 190Q344 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q776 190 800 190L1090 190Q1116 190 1116 166L1116 39Q1116 25 1102 25Z'/%3E%3Cpath fill='none' stroke='%23d6a23a' stroke-width='7' stroke-linejoin='round' stroke-linecap='round' d='M18 25Q4 25 4 39L4 166Q4 190 30 190L320 190Q344 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q776 190 800 190L1090 190Q1116 190 1116 166L1116 39Q1116 25 1102 25Z'/%3E%3Cpath fill='none' stroke='%238d651b' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' d='M18 25Q4 25 4 39L4 166Q4 190 30 190L320 190Q344 190 358 166L390 118Q404 96 430 96L690 96Q716 96 730 118L762 166Q776 190 800 190L1090 190Q1116 190 1116 166L1116 39Q1116 25 1102 25Z'/%3E%3Cpath fill='none' stroke='%23e1b650' stroke-width='2' stroke-linejoin='round' stroke-linecap='round' d='M25 35Q14 35 14 46L14 158Q14 178 36 178L310 178Q332 178 344 158L378 108Q395 84 424 84L696 84Q725 84 742 108L776 158Q788 178 810 178L1084 178Q1106 178 1106 158L1106 46Q1106 35 1095 35Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat !important;
}

.room-head::after {
  left: 8px !important;
  right: 8px !important;
}

.room-head #backBtn {
  left: 18px !important;
}

.room-head #ruleBtn {
  right: 18px !important;
}

.table-manage-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 8, 18, 0.58);
  backdrop-filter: blur(4px);
}

.table-manage-card {
  display: grid;
  gap: 10px;
  width: min(330px, 88vw);
  padding: 20px;
  border: 1px solid rgba(255, 222, 139, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 221, 126, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(30, 76, 64, 0.98), rgba(10, 36, 34, 0.98));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-align: center;
}

.table-manage-card span {
  color: #ffdf78;
  font-size: 13px;
  font-weight: 950;
}

.table-manage-card strong {
  color: #fff6db;
  font-size: 28px;
  line-height: 1.1;
}

.table-manage-card em {
  margin-bottom: 4px;
  color: rgba(255, 248, 232, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.table-manage-card button {
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff8e8;
  font-size: 15px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.table-manage-card button.primary {
  background: linear-gradient(180deg, #ffe38d, #c9872d);
  color: #231504;
}

.table-manage-card button.danger {
  background: linear-gradient(180deg, #ff8585, #bc2631);
  color: #fff;
}

.table-manage-card button.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.72);
}

.settlement-modal {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 9, 24, 0.54);
  backdrop-filter: blur(3px);
}

.settlement-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(330px, 86vw);
  padding: 22px 18px 18px;
  border: 2px solid rgba(255, 217, 126, 0.92);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 235, 165, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(42, 55, 106, 0.98), rgba(16, 25, 60, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  text-align: center;
}

.settlement-card span {
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 12px;
  font-weight: 950;
}

.settlement-card strong {
  color: #fff7d8;
  font-size: 30px;
  text-shadow: 0 3px 10px rgba(255, 203, 91, 0.28);
}

.settlement-card em {
  color: #77f0b0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(119, 240, 176, 0.34);
}

.settlement-card em.lose {
  color: #ff8c8c;
  text-shadow: 0 0 18px rgba(255, 112, 112, 0.34);
}

.settlement-card p {
  max-width: 260px;
  margin: 0;
  color: rgba(255, 248, 232, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.settlement-card button {
  width: 100%;
  height: 42px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-size: 15px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 18px rgba(0, 0, 0, 0.28);
}

.admin-permission {
  display: inline-grid;
  min-width: 54px;
  padding: 4px 8px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 248, 232, 0.78);
  font-style: normal;
  font-weight: 900;
}

.admin-permission.enabled {
  background: rgba(50, 214, 132, 0.2);
  color: #7cffb6;
}

.admin-row-action {
  display: inline-grid;
  min-width: 48px;
  padding: 6px 9px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #c2842f);
  color: #271802;
  font-style: normal;
  font-weight: 950;
}

.exit-confirm-modal {
  position: absolute;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 8, 18, 0.58);
  backdrop-filter: blur(4px);
}

.exit-confirm-card {
  position: relative;
  width: min(540px, 92vw);
  min-height: 178px;
  padding: 52px 28px 28px;
  border: 2px solid rgba(193, 139, 69, 0.88);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 50%, rgba(116, 156, 190, 0.16), transparent 34%),
    radial-gradient(circle at 84% 48%, rgba(116, 156, 190, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(252, 255, 255, 0.98), rgba(226, 237, 247, 0.96));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  text-align: center;
}

.exit-confirm-card::before,
.exit-confirm-card::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 34%;
  height: 22px;
  border-top: 2px solid rgba(123, 151, 176, 0.48);
  opacity: 0.72;
}

.exit-confirm-card::before {
  left: 18px;
  transform: skewX(22deg);
}

.exit-confirm-card::after {
  right: 18px;
  transform: skewX(-22deg);
}

.exit-confirm-title {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  min-width: 190px;
  padding: 8px 36px 10px;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background: linear-gradient(180deg, #4b769d, #214566);
  border: 1px solid rgba(209, 149, 74, 0.9);
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 4px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.22);
}

.exit-confirm-close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #41698b;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  box-shadow: none;
}

.exit-confirm-card p {
  margin: 12px 0 28px;
  color: #314e70;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 950;
  letter-spacing: 2px;
}

.exit-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.exit-confirm-actions.notice-only {
  grid-template-columns: minmax(160px, 0.55fr);
  justify-content: center;
}

.exit-confirm-actions button {
  height: 56px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  color: #29496a;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 950;
  letter-spacing: 3px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    0 8px 16px rgba(0, 0, 0, 0.18);
}

.exit-confirm-actions .exit-cancel {
  background: linear-gradient(180deg, #edf7ff, #c7d8e7);
}

.exit-confirm-actions .exit-ok {
  color: #fff;
  background: linear-gradient(180deg, #ff763a, #f04214 58%, #d92b0d);
  text-shadow: 0 2px 3px rgba(117, 21, 0, 0.45);
  box-shadow:
    inset 0 2px 0 rgba(255, 225, 198, 0.7),
    0 0 18px rgba(255, 77, 26, 0.28),
    0 8px 16px rgba(0, 0, 0, 0.18);
}

@media (max-width: 430px) {
  .exit-confirm-card {
    width: min(340px, 92vw);
    min-height: 156px;
    padding: 42px 16px 20px;
  }

  .exit-confirm-title {
    min-width: 142px;
    padding: 7px 24px 8px;
    font-size: 19px;
    letter-spacing: 2px;
  }

  .exit-confirm-card p {
    margin: 8px 0 20px;
    font-size: 22px;
  }

  .exit-confirm-actions {
    gap: 12px;
  }

  .exit-confirm-actions button {
    height: 44px;
    font-size: 18px;
    letter-spacing: 1px;
  }
}

.banker-choice-modal {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
}

.banker-choice-card {
  width: min(272px, 76vw);
  padding: 12px 13px 13px;
  border: 1px solid rgba(192, 224, 255, 0.9);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -12%, rgba(114, 205, 255, 0.3), transparent 47%),
    linear-gradient(155deg, #1c569d, #0f2e66 55%, #142652);
  box-shadow:
    0 12px 28px rgba(6, 23, 60, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(5, 18, 52, 0.45);
  color: #f4f9ff;
  text-align: center;
  pointer-events: auto;
}

.banker-choice-card span {
  display: inline-grid;
  place-items: center;
  min-width: 66px;
  height: 21px;
  padding: 0 10px;
  border: 1px solid rgba(255, 231, 151, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1a9, #e6ad3b);
  color: #533000;
  font-size: 11px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.banker-choice-card strong {
  display: block;
  margin-top: 7px;
  color: #fff2bd;
  font-size: 23px;
  font-weight: 950;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(255, 188, 52, 0.22);
}

.banker-choice-card p {
  margin: 5px 0 10px;
  color: rgba(231, 243, 255, 0.86);
  font-size: 11px;
  font-weight: 800;
}

.banker-choice-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.banker-choice-card button {
  height: 35px;
  border: 1px solid rgba(220, 240, 255, 0.86);
  border-radius: 999px;
  color: #17345b;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(180deg, #f6fbff, #c7e2f5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 10px rgba(5, 24, 61, 0.2);
}

.banker-choice-card button:last-child {
  border-color: rgba(255, 221, 112, 0.9);
  color: #4d2900;
  background: linear-gradient(180deg, #fff0a2, #f3c047 58%, #d99420);
}

.banker-choice-card button:disabled {
  opacity: 0.78;
}

.seat-card {
  position: relative;
}

.banker-mark {
  position: absolute;
  right: -8px;
  top: -9px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255, 239, 160, 0.95);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(180deg, #ff5b4c, #d4141f 58%, #850012);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(89, 0, 0, 0.86);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32), 0 0 12px rgba(255, 40, 40, 0.38);
}

.player.active-seat .banker-choice-badge {
  position: absolute;
  left: calc(50% + 27px);
  top: 9px;
  z-index: 5;
  min-width: 36px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 229, 129, 0.86);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.42), transparent 26%),
    linear-gradient(180deg, rgba(255, 219, 91, 0.96), rgba(176, 94, 10, 0.96));
  color: #fff7c8;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(76, 31, 0, 0.75);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  white-space: nowrap;
}

.player.active-seat .banker-choice-badge:empty {
  display: none;
}

.player.active-seat .banker-choice-badge.slot-hidden {
  visibility: hidden !important;
}

@media (max-height: 700px) {
  .app,
  .lobby,
  .rooms,
  .club-page,
  .admin-page,
  .room {
    min-height: 560px;
  }

  h1 {
    font-size: 29px;
  }

  .game-grid {
    gap: 8px;
  }

  .game-card {
    min-height: 76px;
    padding: 9px 10px;
  }

  .room-list {
    gap: 9px;
  }

  .create-table {
    gap: 9px;
  }

  .game-lounge {
    gap: 10px;
  }

  .club-panel {
    gap: 9px;
  }

  .admin-panel {
    gap: 9px;
  }

  .admin-card,
  .league-create-card {
    padding: 15px;
  }

  .club-title {
    padding: 12px 14px;
  }

  .club-table-card {
    min-height: 116px;
    padding: 14px;
  }

  .lounge-hero {
    min-height: 270px;
    padding: 18px;
  }

  .lounge-hero strong {
    font-size: 38px;
  }

  .create-card {
    padding: 16px;
  }

  .create-card strong {
    font-size: 31px;
  }

  .setting-group {
    padding: 10px;
  }

  .room-card {
    padding: 14px;
  }

  .room-card strong {
    font-size: 26px;
  }

  .game-card strong {
    font-size: 20px;
  }

  .game-card::before {
    width: 34px;
    height: 46px;
  }

  .player.top {
    transform: translateX(-50%) scale(0.72);
  }

  .player.left,
  .player.right {
    top: 28%;
    transform: translateY(-50%) scale(0.68);
  }

  .seat-card {
    width: 44px;
    height: 44px;
  }

  .dealer {
    top: 36%;
  }

  .card {
    width: 40px;
    height: 58px;
  }

  .actions button {
    height: 38px;
    font-size: 13px;
  }
}

@media (min-width: 760px) {
  .admin-page {
    justify-items: center;
  }

  .admin-page .topbar,
  .admin-panel {
    width: min(960px, calc(100vw - 48px));
  }

  .admin-panel {
    grid-template-columns: 1fr 1fr;
    align-content: start;
  }

  .admin-card,
  .admin-note,
  .admin-users {
    grid-column: 1 / -1;
  }

  .admin-users {
    max-height: 42vh;
  }

  .admin-row {
    min-width: 0;
    font-size: 13px;
  }
}

/* Final player amount, bet, point and win/loss skin. */
.nameplate {
  min-width: 96px;
  padding: 4px 8px 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(45, 83, 95, 0.84), rgba(13, 37, 48, 0.9));
  box-shadow: inset 0 0 0 1px rgba(130, 205, 218, 0.2), 0 3px 8px rgba(0, 0, 0, 0.26);
}

.nameplate strong {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.nameplate span {
  color: #ffd862;
  font-size: 10px;
}

.nameplate em {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.bet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  height: 24px;
  padding: 0 9px 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 84, 91, 0.88), rgba(8, 45, 58, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 227, 133, 0.22), 0 3px 8px rgba(0, 0, 0, 0.25);
  color: #ffcf52;
  font-weight: 950;
}

.bet-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff6b1 0 15%, transparent 16%),
    radial-gradient(circle, #f8d557 0 34%, #cc8f1f 35% 64%, #8d5b11 65% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 239, 144, 0.68);
}

.bet-chip strong {
  color: #ffcf52;
  font-size: 14px;
  font-style: italic;
  text-shadow: 0 1px 0 #6b260b, 0 0 5px rgba(255, 116, 40, 0.7);
}

.round-delta {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 7;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: #ff9a3b;
  font-size: 28px;
  font-weight: 950;
  font-style: italic;
  line-height: 1;
  text-shadow: 0 2px 0 #7d1e0a, 0 0 3px #fff5a4, 0 4px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.round-delta.lose {
  color: #56d5ff;
  text-shadow: 0 2px 0 #063a5d, 0 0 3px #d6fbff, 0 4px 8px rgba(0, 0, 0, 0.55);
}

.result.hand-result {
  min-width: 84px;
  height: 26px;
  margin-top: -18px;
  padding: 2px 14px;
  border: 1px solid rgba(255, 226, 126, 0.86);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 14%, transparent 86%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, #f7a6b2 0%, #cf174d 45%, #8e0d35 100%);
  color: #fff48d;
  font-size: 18px;
  font-weight: 950;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 2px 0 #7a1e16, 0 0 4px rgba(255, 247, 163, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 4px 8px rgba(0, 0, 0, 0.28);
  z-index: 5;
}

.player.self .nameplate {
  min-width: 112px;
}

.player.self .bet-chip {
  height: 28px;
  min-width: 72px;
}

.player.self .bet-chip i {
  width: 21px;
  height: 21px;
}

.player.self .bet-chip strong {
  font-size: 17px;
}

.player.self .round-delta {
  top: 42px;
  font-size: 38px;
}

.player.self .result.hand-result {
  min-width: 136px;
  height: 34px;
  margin-top: -23px;
  font-size: 26px;
  line-height: 28px;
}

/* Final card-back skin: aqua, ivory and gold compass style. */
.card.back,
.deck-stack {
  --back-gold: #d9b76b;
  --back-cream: #fff7df;
  --back-ink: #1b6f64;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 247, 223, 0.96) 0 10%, transparent 11%),
    conic-gradient(from 45deg at 50% 50%, transparent 0 10%, rgba(255, 244, 210, 0.96) 10% 15%, transparent 15% 25%, rgba(255, 244, 210, 0.96) 25% 30%, transparent 30% 100%),
    radial-gradient(circle at 50% 50%, transparent 0 23%, rgba(217, 183, 107, 0.95) 24% 26%, rgba(255, 247, 223, 0.82) 27% 30%, transparent 31%),
    linear-gradient(135deg, transparent 0 47%, rgba(255, 247, 223, 0.76) 48% 50%, transparent 51%),
    linear-gradient(45deg, transparent 0 47%, rgba(255, 247, 223, 0.58) 48% 50%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgba(89, 82, 48, 0.1) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, #fbfff2 0%, #cfead6 22%, #6ebea8 58%, var(--back-ink) 100%);
  border: 2px solid var(--back-gold);
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 223, 0.96),
    inset 0 0 0 5px rgba(217, 183, 107, 0.36),
    inset 0 -10px 18px rgba(9, 82, 70, 0.22),
    0 7px 14px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.deck-stack {
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 223, 0.96),
    inset 0 0 0 5px rgba(217, 183, 107, 0.36),
    inset 0 -10px 18px rgba(9, 82, 70, 0.22),
    7px 5px 0 rgba(255, 255, 255, 0.2),
    12px 9px 0 rgba(255, 255, 255, 0.12),
    0 14px 22px rgba(0, 0, 0, 0.28);
}

.card.back::before,
.deck-stack::before {
  content: "";
  position: absolute;
  inset: 9px 7px;
  border: 1px solid rgba(255, 247, 223, 0.9);
  border-radius: 6px;
  background:
    radial-gradient(circle at 18% 18%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 18%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 18% 82%, var(--back-cream) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 82%, var(--back-cream) 0 3%, transparent 4%),
    linear-gradient(90deg, transparent 0 42%, rgba(217, 183, 107, 0.78) 43% 57%, transparent 58%),
    linear-gradient(0deg, transparent 0 42%, rgba(217, 183, 107, 0.62) 43% 57%, transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(217, 183, 107, 0.46),
    inset 0 0 0 4px rgba(255, 247, 223, 0.28);
}

.card.back::after,
.deck-stack::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #4bbccd 0 20%, transparent 22%),
    conic-gradient(from 45deg, var(--back-cream) 0 12.5%, var(--back-gold) 12.5% 25%, var(--back-cream) 25% 37.5%, var(--back-gold) 37.5% 50%, var(--back-cream) 50% 62.5%, var(--back-gold) 62.5% 75%, var(--back-cream) 75% 87.5%, var(--back-gold) 87.5% 100%);
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  filter: drop-shadow(0 1px 1px rgba(79, 63, 29, 0.45));
  transform: translate(-50%, -50%);
}
/* EOF final centering for round win/loss numbers. */
.player.active-seat > .round-delta {
  top: 142px !important;
  left: 50% !important;
  width: 124px !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 14 !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  font-size: 30px !important;
}

.player.self.active-seat > .round-delta {
  top: 182px !important;
  left: 50% !important;
  width: 210px !important;
  font-size: 46px !important;
}

/* EOF rules drawer override. */
.rules-drawer.hidden {
  display: block !important;
  pointer-events: none !important;
}

/* EOF absolute final top frame: real full-width CSS rail, after every room-head rule. */
.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 14px 18px 18px !important;
  overflow: visible !important;
}

.room-head::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 8px !important;
  bottom: 4px !important;
  z-index: -2 !important;
  width: auto !important;
  background: linear-gradient(180deg, #f7d36a 0%, #b87922 48%, #6d4312 100%) !important;
  clip-path: polygon(0 14%, 100% 14%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28)) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  right: 5px !important;
  top: 14px !important;
  bottom: 11px !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.3) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 116, 0.78),
    inset 0 0 0 3px rgba(28, 82, 42, 0.56) !important;
  pointer-events: none !important;
}

.room-head #backBtn {
  left: 16px !important;
  top: 18px !important;
}

.room-head #ruleBtn {
  right: 16px !important;
  top: 18px !important;
}

/* EOF REAL FINAL top frame polish: full width with smooth ornate rail. */
.room-head::before {
  top: 7px !important;
  bottom: 5px !important;
  background:
    linear-gradient(180deg, #f8d66e 0%, #d09b34 34%, #8b5b17 100%) !important;
  clip-path: path("M 10 15 Q 10 8 18 8 L 1102 8 Q 1110 8 1110 15 L 1110 160 Q 1110 183 1086 183 L 800 183 Q 774 183 759 160 L 727 112 Q 713 91 688 91 L 432 91 Q 407 91 393 112 L 361 160 Q 346 183 320 183 L 34 183 Q 10 183 10 160 Z") !important;
}

.room-head::after {
  left: 8px !important;
  right: 8px !important;
  top: 13px !important;
  bottom: 12px !important;
  background:
    radial-gradient(circle at 10% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 76%, rgba(236, 187, 76, 0.25) 0 1px, transparent 2px),
    linear-gradient(135deg, #063d2c 0%, #08703d 45%, #043323 100%) !important;
  clip-path: path("M 10 14 Q 10 8 17 8 L 1087 8 Q 1094 8 1094 14 L 1094 145 Q 1094 166 1072 166 L 790 166 Q 766 166 752 145 L 719 97 Q 705 78 682 78 L 428 78 Q 405 78 391 97 L 358 145 Q 344 166 320 166 L 32 166 Q 10 166 10 145 Z") !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 130, 0.88),
    inset 0 0 0 3px rgba(9, 62, 38, 0.7),
    inset 0 10px 18px rgba(255, 255, 255, 0.08),
    inset 0 -12px 18px rgba(0, 0, 0, 0.18) !important;
}

@supports not (clip-path: path("M 0 0")) {
  .room-head::before {
    border-radius: 18px 18px 24px 24px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 78%, 78% 78%, 74% 77%, 71% 66%, 66% 40%, 63% 35%, 37% 35%, 34% 40%, 29% 66%, 26% 77%, 22% 78%, 0 78%) !important;
  }

  .room-head::after {
    border-radius: 14px 14px 20px 20px !important;
    clip-path: polygon(0 12%, 100% 12%, 100% 76%, 78% 76%, 74% 75%, 71% 64%, 66% 38%, 63% 33%, 37% 33%, 34% 38%, 29% 64%, 26% 75%, 22% 76%, 0 76%) !important;
  }
}

/* TRUE EOF: top room frame uses the provided source-code SVG, not CSS clip-path rails. */
.room-head {
  width: calc(100% - 8px) !important;
  margin: 0 4px -11px !important;
  min-height: 76px !important;
  padding: 14px 18px 18px !important;
  overflow: visible !important;
}

.room-head::before,
.room-head::after {
  display: none !important;
  content: none !important;
}

.room-head-art {
  position: absolute !important;
  left: -4px !important;
  right: -4px !important;
  top: -2px !important;
  bottom: -8px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.26)) !important;
}

.room-head-art svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.room-head-green-bg {
  fill: url(#roomHeadGreenGradient) !important;
}

.room-head-gold-line {
  fill: none !important;
  stroke: #d6a23a !important;
  stroke-width: 7 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head-gold-line-dark {
  fill: none !important;
  stroke: #8d651b !important;
  stroke-width: 2 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head-inner-line {
  fill: none !important;
  stroke: #e1b650 !important;
  stroke-width: 2 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}

.room-head #backBtn {
  left: 16px !important;
  top: 18px !important;
}

.room-head #ruleBtn {
  right: 16px !important;
  top: 18px !important;
}

/* TRUE EOF 146: stretch source SVG top rail to the same visual width as the table. */
.room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100vw - 8px) !important;
  max-width: 548px !important;
  margin: 0 0 -11px !important;
  transform: translateX(-50%) !important;
  min-height: 76px !important;
  padding: 14px 22px 18px !important;
  overflow: visible !important;
}

.room-head::before,
.room-head::after {
  display: none !important;
  content: none !important;
}

.room-head-art {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -2px !important;
  bottom: -8px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.26)) !important;
}

.room-head-art svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  position: absolute !important;
  top: 19px !important;
  z-index: 3 !important;
}

.room-head #backBtn {
  left: 28px !important;
}

.room-head #ruleBtn {
  right: 28px !important;
}

/* TRUE EOF 147: redesigned full-width emerald top rail, matching the table style. */
.room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100vw - 8px) !important;
  max-width: none !important;
  min-height: 62px !important;
  margin: 0 0 -8px !important;
  padding: 10px 18px 12px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 72px 1fr 72px !important;
  align-items: center !important;
}

.room-head-art {
  display: none !important;
}

.room-head::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  top: 7px !important;
  bottom: 7px !important;
  z-index: -2 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f7d876 0%, #c69230 42%, #815317 100%) !important;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 244, 174, 0.85),
    inset 0 -2px 5px rgba(77, 40, 0, 0.42) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  top: 12px !important;
  bottom: 12px !important;
  z-index: -1 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 231, 139, 0.16), transparent 52%),
    linear-gradient(90deg, rgba(255, 220, 118, 0.16), transparent 18%, transparent 82%, rgba(255, 220, 118, 0.16)),
    linear-gradient(135deg, #063b2b 0%, #0e6a3e 48%, #042b22 100%) !important;
  border: 1px solid rgba(255, 231, 143, 0.82) !important;
  box-shadow:
    inset 0 0 0 2px rgba(8, 82, 48, 0.68),
    inset 0 9px 16px rgba(255, 255, 255, 0.07),
    inset 0 -12px 22px rgba(0, 0, 0, 0.18) !important;
  pointer-events: none !important;
}

.room-head > div:nth-child(3),
.room-head > div:nth-child(2) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.room-head #roomSub,
.room-head #roomTitle {
  display: none !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  position: static !important;
  width: 58px !important;
  height: 34px !important;
  align-self: center !important;
  justify-self: center !important;
  z-index: 3 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 226, 126, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(17, 111, 60, 0.96), rgba(4, 69, 43, 0.98)) !important;
  color: #fff1b9 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 7px rgba(0, 0, 0, 0.25) !important;
}

.room-head #backBtn {
  grid-column: 1 !important;
}

.room-head #ruleBtn {
  grid-column: 3 !important;
}

/* TRUE EOF 148: integrated arched table canopy header. */
.room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100vw - 24px) !important;
  max-width: 528px !important;
  min-height: 72px !important;
  margin: 0 0 -21px !important;
  padding: 12px 24px 20px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 82px 1fr 82px !important;
  align-items: start !important;
  background: transparent !important;
}

.room-head-art {
  display: none !important;
}

.room-head::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 8px !important;
  height: 58px !important;
  z-index: -3 !important;
  border-radius: 28px 28px 22px 22px !important;
  background:
    linear-gradient(180deg, #ffe28a 0%, #d4a342 28%, #9b691d 72%, #64400f 100%) !important;
  box-shadow:
    0 10px 14px rgba(0, 0, 0, 0.34),
    inset 0 2px 0 rgba(255, 246, 183, 0.9),
    inset 0 -5px 8px rgba(71, 36, 0, 0.48) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  top: 15px !important;
  height: 43px !important;
  z-index: -2 !important;
  border-radius: 22px 22px 17px 17px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 224, 128, 0.2), transparent 56%),
    linear-gradient(90deg, rgba(255, 215, 112, 0.18), transparent 22%, transparent 78%, rgba(255, 215, 112, 0.18)),
    linear-gradient(180deg, #127344 0%, #075334 52%, #033624 100%) !important;
  border: 1px solid rgba(255, 229, 143, 0.88) !important;
  box-shadow:
    inset 0 0 0 2px rgba(5, 66, 39, 0.76),
    inset 0 9px 14px rgba(255, 255, 255, 0.08),
    inset 0 -12px 16px rgba(0, 0, 0, 0.18) !important;
  pointer-events: none !important;
}

.room-head > div:nth-child(2) {
  visibility: visible !important;
  position: relative !important;
  align-self: end !important;
  justify-self: center !important;
  width: 156px !important;
  height: 24px !important;
  margin-top: 32px !important;
  border-radius: 0 0 24px 24px !important;
  background:
    linear-gradient(180deg, #d4a342 0%, #8e5f1a 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 232, 142, 0.78),
    0 7px 10px rgba(0, 0, 0, 0.24) !important;
  pointer-events: none !important;
}

.room-head > div:nth-child(2)::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 5px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 153, 0.62), transparent);
}

.room-head #roomSub,
.room-head #roomTitle {
  display: none !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  position: static !important;
  width: 62px !important;
  height: 36px !important;
  align-self: start !important;
  justify-self: center !important;
  z-index: 3 !important;
  margin-top: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 230, 128, 0.95) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 239, 170, 0.2), transparent 60%),
    linear-gradient(180deg, #117441 0%, #074f32 58%, #043320 100%) !important;
  color: #fff0b3 !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.room-head #backBtn {
  grid-column: 1 !important;
}

.room-head #ruleBtn {
  grid-column: 3 !important;
}

.table {
  margin-top: 0 !important;
}

/* TRUE EOF 149: lighter table-crown header, no heavy full bar. */
.room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100vw - 28px) !important;
  max-width: 520px !important;
  min-height: 48px !important;
  margin: 0 0 -18px !important;
  padding: 0 22px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 74px 1fr 74px !important;
  align-items: center !important;
  background: transparent !important;
}

.room-head-art {
  display: none !important;
}

.room-head::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 42px !important;
  right: 42px !important;
  top: 25px !important;
  height: 10px !important;
  z-index: -2 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #ffe79a 0%, #c9902d 50%, #6f4411 100%) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 249, 202, 0.86) !important;
  pointer-events: none !important;
}

.room-head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 54px !important;
  right: 54px !important;
  top: 28px !important;
  height: 3px !important;
  z-index: -1 !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 150, 0.85), transparent) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.room-head > div:nth-child(2) {
  visibility: visible !important;
  position: relative !important;
  align-self: center !important;
  justify-self: center !important;
  width: 96px !important;
  height: 28px !important;
  margin-top: 18px !important;
  border-radius: 0 0 18px 18px !important;
  background:
    linear-gradient(180deg, #d8a13a 0%, #7c5017 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 234, 146, 0.75),
    0 5px 8px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
}

.room-head > div:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 7px;
  height: 5px;
  border-radius: 8px;
  background: rgba(255, 232, 139, 0.55);
}

.room-head > div:nth-child(2)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 35% 28%, #fff5b4, #d8a13a 48%, #7a4e15 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.room-head #roomSub,
.room-head #roomTitle {
  display: none !important;
}

.room-head #backBtn,
.room-head #ruleBtn {
  position: static !important;
  width: 62px !important;
  height: 34px !important;
  align-self: center !important;
  justify-self: center !important;
  z-index: 3 !important;
  margin-top: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 226, 126, 0.95) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 238, 164, 0.22), transparent 62%),
    linear-gradient(180deg, #116f42 0%, #075133 56%, #032f20 100%) !important;
  color: #fff0b8 !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.28) !important;
}

.room-head #backBtn {
  grid-column: 1 !important;
}

.room-head #ruleBtn {
  grid-column: 3 !important;
}

.table {
  margin-top: 0 !important;
}

/* TRUE EOF 151: premium crown header attached to the golden table rim. */
#room .room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100% - 20px) !important;
  max-width: 526px !important;
  min-height: 76px !important;
  margin: 0 0 -28px !important;
  padding: 0 18px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: 82px 1fr 82px !important;
  align-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 8 !important;
}

#room .room-head-art {
  display: none !important;
}

#room .room-head::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 68px !important;
  right: 68px !important;
  top: 32px !important;
  height: 18px !important;
  z-index: -2 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 242, 164, 0.95), rgba(207, 151, 45, 0.95) 42%, rgba(96, 58, 15, 0.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 220, 0.8),
    inset 0 -3px 4px rgba(72, 34, 0, 0.36),
    0 5px 9px rgba(0, 0, 0, 0.26) !important;
  pointer-events: none !important;
}

#room .room-head::after {
  content: "" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 18px !important;
  width: 48px !important;
  height: 48px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 230, 135, 0.96) !important;
  color: #1d5b3a !important;
  font-size: 23px !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 34% 24%, #fff7c6 0 12%, transparent 13%),
    linear-gradient(180deg, #ffe48e 0%, #d59b34 45%, #8a5a18 100%) !important;
  box-shadow:
    0 0 0 3px rgba(84, 52, 12, 0.62),
    0 8px 14px rgba(0, 0, 0, 0.34),
    inset 0 2px 0 rgba(255, 255, 230, 0.78),
    inset 0 -5px 7px rgba(87, 43, 0, 0.36) !important;
  pointer-events: none !important;
}

#room .room-head > div:nth-child(2) {
  visibility: visible !important;
  position: relative !important;
  justify-self: stretch !important;
  align-self: center !important;
  height: 36px !important;
  margin: 19px 16px 0 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(255, 221, 121, 0.34) 18%, rgba(255, 239, 170, 0.52) 50%, rgba(255, 221, 121, 0.34) 82%, transparent 94%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

#room .room-head > div:nth-child(2)::before,
#room .room-head > div:nth-child(2)::after {
  content: "" !important;
  position: absolute !important;
  top: 17px !important;
  width: 36% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 229, 134, 0.72), transparent) !important;
}

#room .room-head > div:nth-child(2)::before {
  left: 0 !important;
}

#room .room-head > div:nth-child(2)::after {
  right: 0 !important;
}

#room .room-head #roomSub,
#room .room-head #roomTitle {
  display: none !important;
}

#room .room-head #backBtn,
#room .room-head #ruleBtn {
  position: relative !important;
  width: 64px !important;
  height: 36px !important;
  margin: 20px 0 0 !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 4 !important;
  border-radius: 19px !important;
  border: 1px solid rgba(255, 231, 132, 0.95) !important;
  color: #fff3bd !important;
  font-weight: 900 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 236, 160, 0.24), transparent 62%),
    linear-gradient(180deg, #16844b 0%, #075b38 54%, #032f20 100%) !important;
  box-shadow:
    0 0 0 2px rgba(82, 52, 13, 0.82),
    0 6px 10px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2) !important;
}

#room .room-head #backBtn::before,
#room .room-head #ruleBtn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 15px;
  border: 1px solid rgba(255, 235, 146, 0.24);
  pointer-events: none;
}

#room .room-head #backBtn {
  grid-column: 1 !important;
}

#room .room-head #ruleBtn {
  grid-column: 3 !important;
}

#room .table {
  margin-top: 0 !important;
}


/* TRUE EOF 152: clean corner-tab header, no top bar or center ornament. */
#room .room-head {
  position: relative !important;
  left: 50% !important;
  width: calc(100% - 18px) !important;
  max-width: 532px !important;
  min-height: 46px !important;
  margin: 0 0 -39px !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

#room .room-head-art,
#room .room-head > div:nth-child(2),
#room .room-head::before,
#room .room-head::after {
  display: none !important;
  content: none !important;
}

#room .room-head #roomSub,
#room .room-head #roomTitle {
  display: none !important;
}

#room .room-head #backBtn,
#room .room-head #ruleBtn {
  position: absolute !important;
  top: 12px !important;
  width: 66px !important;
  height: 34px !important;
  margin: 0 !important;
  z-index: 4 !important;
  pointer-events: auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 232, 142, 0.96) !important;
  color: #fff2bd !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 185, 0.22), transparent 58%),
    linear-gradient(180deg, #16834b 0%, #075537 56%, #032d20 100%) !important;
  box-shadow:
    0 0 0 2px rgba(92, 59, 15, 0.9),
    0 5px 9px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2) !important;
}

#room .room-head #backBtn {
  left: 32px !important;
}

#room .room-head #ruleBtn {
  right: 32px !important;
}

#room .room-head #backBtn::before,
#room .room-head #ruleBtn::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 235, 152, 0.22) !important;
  pointer-events: none !important;
}

#room .room-head #backBtn::after,
#room .room-head #ruleBtn::after {
  content: "" !important;
  position: absolute !important;
  left: 13px !important;
  right: 13px !important;
  top: 5px !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 230, 0.3), transparent) !important;
  pointer-events: none !important;
}

#room .table {
  margin-top: 0 !important;
}

/* TRUE EOF 153: bottom self seat uses player-facing reversed layout. */
#room .player.self.active-seat {
  height: 260px !important;
}

#room .player.self.active-seat .cards {
  top: 8px !important;
  width: 210px !important;
  z-index: 8 !important;
}

#room .player.self.active-seat .result.hand-result {
  top: 74px !important;
  margin-top: 0 !important;
  z-index: 13 !important;
}

#room .player.self.active-seat > .round-delta {
  top: 52px !important;
  left: 50% !important;
  width: 210px !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 15 !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  font-size: 46px !important;
  pointer-events: none !important;
}

#room .player.self.active-seat .bet-chip {
  top: 104px !important;
  z-index: 12 !important;
}

#room .player.self.active-seat .seat-card {
  top: 133px !important;
  z-index: 10 !important;
}

#room .player.self.active-seat .nameplate {
  top: 178px !important;
  z-index: 9 !important;
}

#room .player.self.active-seat .ready-badge {
  top: 216px !important;
  z-index: 11 !important;
}

#room .player.self.active-seat .slot-hidden.ready-badge {
  visibility: hidden !important;
}

/* TRUE EOF 154: mobile room brand and bottom-right show button adjustments. */
#room .table-brand span {
  display: none !important;
}

#room .table-brand {
  top: 40% !important;
  width: min(58%, 280px) !important;
}

#room .table-brand strong {
  font-size: clamp(34px, 9vw, 48px) !important;
  white-space: nowrap !important;
}

#room .table-show-btn {
  right: 28px !important;
  bottom: 54px !important;
  width: 124px !important;
  height: 52px !important;
  transform: perspective(180px) rotateY(-7deg) scale(0.86) !important;
  transform-origin: right bottom !important;
  z-index: 14 !important;
}

#room .table-show-btn span,
#room .table-show-btn {
  font-size: 18px !important;
}

@media (max-width: 430px) {
  #room .table-brand {
    top: 39% !important;
  }

  #room .table-brand strong {
    font-size: 40px !important;
  }

  #room .table-show-btn {
    right: 18px !important;
    bottom: 48px !important;
    width: 112px !important;
    height: 48px !important;
    transform: perspective(180px) rotateY(-7deg) scale(0.82) !important;
  }
}

/* TRUE EOF 155: show round count in the center of the room header. */
#room .room-head > div:nth-child(2) {
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 16px !important;
  width: 130px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 226, 126, 0.9) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 245, 190, 0.32), transparent 62%),
    linear-gradient(180deg, rgba(21, 124, 72, 0.96), rgba(5, 67, 42, 0.98)) !important;
  box-shadow:
    0 0 0 2px rgba(94, 60, 14, 0.78),
    0 5px 9px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#room .room-head #roomSub {
  display: block !important;
  color: #ffe891 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48) !important;
}

#room .room-head #roomTitle {
  display: none !important;
}

/* TRUE EOF 156: fix round badge target, room info is the third child after room-head-art and back button. */
#room .room-head > div:nth-child(3) {
  display: flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 16px !important;
  width: 130px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 226, 126, 0.9) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 245, 190, 0.32), transparent 62%),
    linear-gradient(180deg, rgba(21, 124, 72, 0.96), rgba(5, 67, 42, 0.98)) !important;
  box-shadow:
    0 0 0 2px rgba(94, 60, 14, 0.78),
    0 5px 9px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#room .room-head > div:nth-child(3)::before,
#room .room-head > div:nth-child(3)::after {
  display: none !important;
}

#room .room-head > div:nth-child(2) {
  display: block !important;
  visibility: visible !important;
}

#room .room-head #roomSub {
  display: block !important;
  visibility: visible !important;
  color: #ffe891 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48) !important;
}

#room .room-head #roomTitle {
  display: none !important;
}

/* TRUE EOF 157: make round win/loss numbers slightly larger and bold. */
#room .player.active-seat > .round-delta {
  font-size: 33px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#room .player.self.active-seat > .round-delta {
  font-weight: 950 !important;
}

/* TRUE EOF 158: unify top three header badges height and alignment. */
#room .room-head #backBtn,
#room .room-head #ruleBtn,
#room .room-head > div:nth-child(3) {
  top: 12px !important;
  width: 66px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 232, 142, 0.96) !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 185, 0.22), transparent 58%),
    linear-gradient(180deg, #16834b 0%, #075537 56%, #032d20 100%) !important;
  box-shadow:
    0 0 0 2px rgba(92, 59, 15, 0.9),
    0 5px 9px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2) !important;
}

#room .room-head #backBtn,
#room .room-head #ruleBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#room .room-head > div:nth-child(3) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

#room .room-head #roomSub {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* TRUE EOF 159: make center brand look embossed into the felt as a subtle watermark. */
#room .table-brand {
  top: 40% !important;
  opacity: 0.64 !important;
  mix-blend-mode: screen !important;
  filter: saturate(0.72) contrast(0.88) !important;
  pointer-events: none !important;
}

#room .table-brand strong {
  color: rgba(221, 190, 95, 0.58) !important;
  font-size: clamp(34px, 8.6vw, 46px) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 1px 0 rgba(255, 239, 168, 0.1),
    0 -1px 0 rgba(0, 42, 25, 0.34),
    0 0 10px rgba(255, 223, 119, 0.06) !important;
}

#room .table-brand::before,
#room .table-brand::after {
  opacity: 0.28 !important;
}

/* TRUE EOF 160: normalize bottom-right table show button proportions. */
#room .table-show-btn {
  right: 24px !important;
  bottom: 50px !important;
  width: 108px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  transform-origin: center !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(180deg, #fff2af 0%, #efc65b 18%, #c8891f 62%, #8e5b15 100%) !important;
  border: 2px solid #f9df8c !important;
  box-shadow:
    0 0 0 2px rgba(89, 58, 16, 0.82),
    0 7px 10px rgba(0, 0, 0, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.68),
    inset 0 -4px 7px rgba(95, 45, 0, 0.32) !important;
}

#room .table-show-btn::before {
  inset: 5px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(108, 67, 8, 0.48) !important;
}

#room .table-show-btn::after {
  display: none !important;
}

#room .table-show-btn span,
#room .table-show-btn {
  color: #2b1700 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  #room .table-show-btn {
    right: 18px !important;
    bottom: 48px !important;
    width: 104px !important;
    height: 42px !important;
    transform: none !important;
  }
}

/* TRUE EOF 161: force hidden table show button to stay hidden while spectating. */
#room .table-show-btn.hidden {
  display: none !important;
}

/* TRUE EOF 162: compact entry and elimination amount controls on the Sangong create page. */
.sangong-rules .table-limit-group {
  gap: 5px !important;
  padding: 6px 10px 8px !important;
  border-radius: 13px !important;
}

.sangong-rules .table-limit-group > label {
  font-size: 14px !important;
  line-height: 1 !important;
}

.sangong-rules .table-limit-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sangong-rules .table-limit-config > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(117, 180, 247, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 5px 12px rgba(102, 162, 202, 0.1);
}

.sangong-rules .table-limit-config span,
.sangong-rules .table-limit-config em {
  display: block;
  color: #167c7a;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.sangong-rules .table-limit-config em {
  margin-top: 4px;
  color: rgba(36, 84, 134, 0.78);
  font-size: 10px;
}

.sangong-rules .table-limit-config input {
  width: 100%;
  height: 28px;
  margin-top: 5px;
  border: 1px solid rgba(226, 190, 135, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #082d57;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  outline: 0;
}

/* TRUE EOF 163: empty seats match the dark green vertical "waiting" badge reference. */
#room .player.empty-seat {
  width: 54px !important;
  height: 78px !important;
}

#room .seat-card.empty-chair {
  width: 46px !important;
  height: 68px !important;
  min-width: 46px !important;
  min-height: 68px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid rgba(143, 215, 174, 0.36) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(121, 210, 153, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(26, 117, 74, 0.24), rgba(8, 66, 46, 0.36)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}

#room .seat-card.empty-chair::before,
#room .seat-card.empty-chair::after {
  display: none !important;
}

#room .seat-card.empty-chair i {
  position: relative;
  display: block;
  width: 19px;
  height: 18px;
  opacity: 0.56;
}

#room .seat-card.empty-chair i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(143, 215, 174, 0.78);
  transform: translateX(-50%);
}

#room .seat-card.empty-chair i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 17px;
  height: 10px;
  border-radius: 9px 9px 4px 4px;
  background: rgba(143, 215, 174, 0.72);
  transform: translateX(-50%);
}

#room .seat-card.empty-chair span {
  display: block !important;
  color: rgba(226, 255, 236, 0.78) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  transform: none !important;
  letter-spacing: 0 !important;
}

@media (max-width: 430px) {
  #room .player.empty-seat {
    width: 50px !important;
    height: 72px !important;
  }

  #room .seat-card.empty-chair {
    width: 42px !important;
    height: 62px !important;
    min-width: 42px !important;
    min-height: 62px !important;
  }

#room .seat-card.empty-chair span {
    font-size: 9px !important;
  }
}

/* TRUE EOF 166: smaller lobby typography and shared bottom nav on League/Mine pages. */
#lobby .lobby-title span {
  font-size: 15px !important;
}

#lobby .lobby-title h1 {
  font-size: 34px !important;
  text-shadow:
    0 2px 0 rgba(96, 69, 194, 0.62),
    0 0 16px rgba(190, 123, 255, 0.72),
    0 0 26px rgba(255, 255, 255, 0.22) !important;
}

#lobby .game-card span {
  padding: 6px 13px !important;
  font-size: 13px !important;
}

#lobby .game-card strong {
  margin-top: 11px !important;
  font-size: 32px !important;
}

#lobby .game-card em {
  font-size: 14px !important;
}

#lobby .game-card i {
  width: 122px !important;
  height: 40px !important;
  font-size: 16px !important;
}

#lobby .game-card i::after {
  width: 22px !important;
  height: 22px !important;
  font-size: 28px !important;
}

#clubPage.club-page,
#adminPage.admin-page {
  grid-template-rows: auto 1fr auto !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

#clubPage .bottom-nav,
#adminPage .bottom-nav {
  position: relative !important;
  z-index: 4 !important;
  grid-template-columns: 1fr 1.28fr 1fr !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  border: 1px solid rgba(129, 93, 255, 0.72) !important;
  border-radius: 38px !important;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(128, 82, 255, 0.36), transparent 45%),
    linear-gradient(180deg, rgba(35, 28, 112, 0.94), rgba(21, 16, 72, 0.94)) !important;
  box-shadow:
    0 -2px 20px rgba(125, 75, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(146, 101, 255, 0.22) !important;
}

#clubPage .bottom-nav button,
#adminPage .bottom-nav button {
  height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9f91ff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  transform: none !important;
}

#clubPage .bottom-nav button::before,
#adminPage .bottom-nav button::before {
  display: block;
  color: #9388ff;
  font-size: 24px;
  line-height: 1;
}

#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before {
  content: "⌂";
}

#clubPage .bottom-nav button:nth-child(2)::before,
#adminPage .bottom-nav button:nth-child(2)::before {
  content: "♛";
  color: #ffd66d;
  font-size: 34px;
}

#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  content: "●";
  font-size: 23px;
}

#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main {
  position: relative !important;
  height: 92px !important;
  margin-top: -30px !important;
  border-radius: 50% 50% 32px 32px !important;
  color: #ffd66d !important;
  font-size: 18px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(112, 91, 255, 0.92), rgba(33, 24, 116, 0.96) 62%, rgba(20, 15, 67, 0.98) 100%) !important;
  border: 2px solid rgba(98, 75, 185, 0.88) !important;
  box-shadow:
    0 0 0 4px rgba(18, 13, 65, 0.58),
    0 0 22px rgba(136, 83, 255, 0.36),
    inset 0 2px 0 rgba(255, 255, 255, 0.08) !important;
}

#clubPage .bottom-nav button.active,
#adminPage .bottom-nav button.active {
  color: #fff2bb !important;
  text-shadow: 0 0 12px rgba(255, 226, 112, 0.5) !important;
}

#clubPage .bottom-nav button.active::after,
#adminPage .bottom-nav button.active::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffe37f, transparent);
  box-shadow: 0 0 10px rgba(255, 220, 90, 0.75);
}

@media (max-width: 430px) {
  #lobby .lobby-title span {
    font-size: 14px !important;
  }

  #lobby .lobby-title h1 {
    font-size: 32px !important;
  }

  #lobby .game-card strong {
    font-size: 30px !important;
  }

  #lobby .game-card em {
    font-size: 13px !important;
  }

  #lobby .game-card i {
    width: 112px !important;
    height: 38px !important;
    font-size: 15px !important;
  }

  #clubPage .bottom-nav,
  #adminPage .bottom-nav {
    min-height: 78px !important;
    padding: 7px 16px !important;
  }

  #clubPage .bottom-nav button.league-main,
  #adminPage .bottom-nav button.league-main {
    height: 88px !important;
    margin-top: -28px !important;
  }
}

/* TRUE EOF 164: make the selected bottom navigation tab unmistakable. */
.bottom-nav {
  overflow: visible !important;
}

.bottom-nav button {
  position: relative !important;
  transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.bottom-nav button.active {
  color: #fff4bd !important;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.46), transparent 46%),
    linear-gradient(180deg, #ffe895 0%, #d69b33 52%, #8c5817 100%) !important;
  border: 1px solid rgba(255, 236, 151, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(88, 52, 8, 0.68),
    0 0 16px rgba(255, 214, 91, 0.58),
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 2px 0 rgba(255, 255, 255, 0.52),
    inset 0 -5px 8px rgba(97, 47, 0, 0.36) !important;
  transform: translateY(-4px) !important;
  text-shadow: 0 1px 0 rgba(80, 42, 0, 0.38) !important;
}

.bottom-nav button.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff9ce 0 18%, #ffd66b 42%, #b77717 78%);
  box-shadow:
    0 0 0 2px rgba(74, 43, 7, 0.72),
    0 0 12px rgba(255, 226, 109, 0.82);
  transform: translateX(-50%);
}

.bottom-nav button.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffe37f, transparent);
  box-shadow: 0 0 10px rgba(255, 220, 90, 0.78);
}

.bottom-nav button.league-main.active,
.bottom-nav button.league-main {
  transform: translateY(-8px) scale(1.04) !important;
}

/* TRUE EOF 165: rebuild lobby to match the supplied neon casino home screen. */
#lobby.lobby {
  grid-template-rows: auto auto 1fr auto !important;
  gap: 18px !important;
  padding: max(20px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 2%, rgba(99, 92, 255, 0.34), transparent 25%),
    radial-gradient(ellipse at 50% 30%, rgba(119, 57, 255, 0.34), transparent 36%),
    radial-gradient(ellipse at 50% 86%, rgba(93, 54, 208, 0.36), transparent 42%),
    linear-gradient(180deg, #090a2a 0%, #151060 45%, #070926 100%) !important;
}

#lobby.lobby::before {
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 24%, rgba(171, 92, 255, 0.2), transparent 42%) !important;
  background-size: 26px 26px, 26px 26px, auto !important;
  opacity: 1 !important;
}

#lobby .lobby-profile {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 84px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(144, 106, 255, 0.96) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(ellipse at 46% 0%, rgba(176, 111, 255, 0.33), transparent 52%),
    linear-gradient(90deg, rgba(30, 25, 101, 0.96), rgba(42, 26, 126, 0.94) 52%, rgba(26, 22, 91, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(104, 72, 255, 0.52),
    0 0 24px rgba(126, 70, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(183, 102, 255, 0.22) !important;
}

#lobby .profile-card {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#lobby .profile-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #4b2500 !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  background:
    radial-gradient(circle at 34% 25%, #fff1a7 0 12%, transparent 28%),
    radial-gradient(circle at 50% 54%, #f5c65d 0 42%, #b77417 74%, #6c3e00 100%) !important;
  border: 3px solid rgba(255, 232, 139, 0.9) !important;
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, 0.62),
    inset 0 -5px 10px rgba(93, 39, 0, 0.35),
    0 5px 12px rgba(0, 0, 0, 0.24) !important;
}

#lobby .profile-card strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  text-shadow: 0 3px 12px rgba(116, 74, 255, 0.55) !important;
}

#lobby .profile-card span {
  position: relative !important;
  display: inline-block !important;
  margin-top: 8px !important;
  color: rgba(232, 224, 255, 0.88) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

#lobby .profile-card span::after {
  content: "▣";
  margin-left: 7px;
  color: #b8b4ff;
  font-size: 14px;
}

#lobby .profile-balance {
  position: relative !important;
  min-width: 92px !important;
  height: 56px !important;
  padding: 9px 12px 8px 46px !important;
  border-radius: 15px !important;
  background: rgba(18, 13, 83, 0.42) !important;
  color: #ccb6ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.14) !important;
}

#lobby .profile-balance::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #fff3a0 0 13%, transparent 24%),
    conic-gradient(from 20deg, #ffd96b, #b97418, #ffe88d, #d89520, #ffd96b);
  box-shadow: 0 0 0 3px rgba(255, 219, 94, 0.14);
  transform: translateY(-50%);
}

#lobby .profile-balance.room-card-balance::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 58% 48%, #0e275e 0 16%, transparent 17%),
    linear-gradient(145deg, #64ffd5, #21c78e);
  transform: translateY(-50%) rotate(8deg);
}

#lobby .profile-balance span {
  display: block !important;
  color: #c8b7ff !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#lobby .profile-balance strong {
  display: block !important;
  margin-top: 4px !important;
  color: #ffe372 !important;
  font-size: 23px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#lobby .room-card-balance strong {
  color: #65ffdc !important;
}

#lobby .lobby-title {
  position: relative !important;
  z-index: 2 !important;
  margin: 22px 0 18px !important;
  text-align: center !important;
}

#lobby .lobby-title::before,
#lobby .lobby-title::after {
  content: "";
  position: absolute;
  top: 72px;
  width: 125px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 208, 89, 0.85), transparent);
}

#lobby .lobby-title::before {
  left: 26px;
}

#lobby .lobby-title::after {
  right: 26px;
}

#lobby .lobby-title span {
  display: block !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 14px rgba(156, 105, 255, 0.68) !important;
}

#lobby .lobby-title h1 {
  position: relative !important;
  display: inline-block !important;
  margin: 8px 0 0 !important;
  color: #fff !important;
  font-size: 46px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 3px 0 rgba(96, 69, 194, 0.7),
    0 0 20px rgba(190, 123, 255, 0.82),
    0 0 34px rgba(255, 255, 255, 0.28) !important;
}

#lobby .lobby-title h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 310px;
  max-width: 86vw;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(134, 95, 255, 0.54), #fff, rgba(165, 92, 255, 0.7), transparent);
  box-shadow: 0 0 17px rgba(199, 93, 255, 0.88);
  transform: translateX(-50%);
}

#lobby .game-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 148px !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 0 24px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#lobby .game-card {
  min-height: 148px !important;
  padding: 25px 28px !important;
  grid-template-columns: minmax(0, 1fr) 172px !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: center !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  overflow: hidden !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(255, 255, 255, 0.06) !important;
}

#lobby .game-card.niu {
  background:
    radial-gradient(ellipse at 61% 50%, rgba(0, 255, 167, 0.26), transparent 24%),
    radial-gradient(ellipse at 86% 32%, rgba(90, 255, 181, 0.34), transparent 34%),
    linear-gradient(90deg, #064a36 0%, #087145 50%, #0dbb67 100%) !important;
  border-color: rgba(45, 247, 139, 0.72) !important;
}

#lobby .game-card.gold {
  background:
    radial-gradient(ellipse at 62% 54%, rgba(255, 213, 98, 0.28), transparent 30%),
    radial-gradient(ellipse at 91% 30%, rgba(255, 172, 70, 0.36), transparent 36%),
    linear-gradient(90deg, #653100 0%, #9a5b13 52%, #ef9f36 100%) !important;
  border-color: rgba(255, 174, 58, 0.78) !important;
}

#lobby .game-card.palace {
  grid-column: auto !important;
  background:
    radial-gradient(ellipse at 62% 54%, rgba(255, 205, 119, 0.2), transparent 28%),
    radial-gradient(ellipse at 92% 34%, rgba(205, 98, 255, 0.45), transparent 38%),
    linear-gradient(90deg, #35106f 0%, #6723bd 54%, #b43bff 100%) !important;
  border-color: rgba(190, 75, 255, 0.8) !important;
}

#lobby .game-card::before {
  top: 28px !important;
  right: 58px !important;
  width: 62px !important;
  height: 84px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, #ffffff 0 72%, #efe8dc 73%) !important;
  box-shadow:
    44px 18px 0 -3px rgba(255, 255, 255, 0.96),
    0 13px 20px rgba(0, 0, 0, 0.28) !important;
  opacity: 0.98 !important;
  transform: rotate(12deg) !important;
}

#lobby .game-card::after {
  top: 39px !important;
  right: 88px !important;
  color: #1b3c32 !important;
  font-size: 25px !important;
  transform: rotate(12deg) !important;
  text-shadow: none !important;
}

#lobby .game-card.gold::after {
  color: #3f2d1a !important;
}

#lobby .game-card.palace::after {
  color: #d9283c !important;
}

#lobby .game-card span {
  padding: 8px 15px !important;
  border-radius: 999px !important;
  color: #2d1800 !important;
  background: linear-gradient(180deg, #fff3a4, #f0c453) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14) !important;
}

#lobby .game-card strong {
  margin-top: 14px !important;
  max-width: none !important;
  color: #fff !important;
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-shadow: 0 5px 16px rgba(0, 0, 0, 0.36) !important;
}

#lobby .game-card em {
  align-self: end !important;
  margin-bottom: 3px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

#lobby .game-card em::before {
  content: "✦";
  margin-right: 8px;
  color: #63ffc0;
}

#lobby .game-card.gold em::before {
  color: #ffc14a;
}

#lobby .game-card.palace em::before {
  color: #b66cff;
}

#lobby .game-card i {
  position: absolute !important;
  right: 28px !important;
  bottom: 29px !important;
  width: 142px !important;
  height: 46px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-right: 26px !important;
  color: #3d2100 !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.74), transparent 48%),
    linear-gradient(180deg, #fff0a8 0%, #f6c854 48%, #ce871e 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -4px 8px rgba(103, 49, 0, 0.24),
    0 7px 14px rgba(0, 0, 0, 0.24) !important;
}

#lobby .game-card i::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff9df;
  color: #7f4d07;
  font-size: 34px;
  line-height: 1;
  transform: translateY(-50%);
}

#lobby .game-card.niu strong::after,
#lobby .game-card.gold strong::after,
#lobby .game-card.palace strong::after {
  content: "";
  position: absolute;
  right: 250px;
  top: 46%;
  width: 112px;
  height: 82px;
  opacity: 0.16;
  background: currentColor;
  filter: blur(0.1px);
  transform: translateY(-50%);
}

#lobby .game-card.niu strong::after {
  clip-path: polygon(50% 6%, 70% 21%, 91% 19%, 80% 38%, 86% 62%, 62% 60%, 50% 82%, 38% 60%, 14% 62%, 20% 38%, 9% 19%, 30% 21%);
}

#lobby .game-card.gold strong::after,
#lobby .game-card.palace strong::after {
  border-radius: 50% 50% 18px 18px;
  clip-path: polygon(10% 82%, 90% 82%, 84% 34%, 66% 54%, 50% 16%, 34% 54%, 16% 34%);
}

#lobby .bottom-nav {
  position: relative !important;
  z-index: 4 !important;
  grid-template-columns: 1fr 1.28fr 1fr !important;
  min-height: 88px !important;
  margin: 2px 0 0 !important;
  padding: 9px 20px !important;
  border: 1px solid rgba(129, 93, 255, 0.72) !important;
  border-radius: 42px !important;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(128, 82, 255, 0.42), transparent 45%),
    linear-gradient(180deg, rgba(35, 28, 112, 0.94), rgba(21, 16, 72, 0.94)) !important;
  box-shadow:
    0 -2px 22px rgba(125, 75, 255, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(146, 101, 255, 0.22) !important;
}

#lobby .bottom-nav button {
  height: 68px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9f91ff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  transform: none !important;
}

#lobby .bottom-nav button::before {
  display: block;
  color: #9388ff;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(149, 118, 255, 0.42);
}

#lobby .bottom-nav button:nth-child(1)::before {
  content: "⌂";
}

#lobby .bottom-nav button:nth-child(2)::before {
  content: "♛";
  color: #ffd66d;
  font-size: 38px;
}

#lobby .bottom-nav button:nth-child(3)::before {
  content: "●";
  font-size: 24px;
}

#lobby .bottom-nav button.league-main {
  position: relative !important;
  height: 104px !important;
  margin-top: -38px !important;
  border-radius: 50% 50% 36px 36px !important;
  color: #ffd66d !important;
  font-size: 20px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(112, 91, 255, 0.92), rgba(33, 24, 116, 0.96) 62%, rgba(20, 15, 67, 0.98) 100%) !important;
  border: 2px solid rgba(98, 75, 185, 0.92) !important;
  box-shadow:
    0 0 0 4px rgba(18, 13, 65, 0.68),
    0 0 24px rgba(136, 83, 255, 0.44),
    inset 0 2px 0 rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

#lobby .bottom-nav button.active {
  color: #fff2bb !important;
  text-shadow: 0 0 12px rgba(255, 226, 112, 0.52) !important;
}

#lobby .bottom-nav button.active::after {
  left: 28% !important;
  right: 28% !important;
  bottom: 5px !important;
  height: 3px !important;
}

@media (max-width: 430px) {
  #lobby.lobby {
    gap: 13px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #lobby .lobby-profile {
    min-height: 80px !important;
    padding: 12px 12px !important;
    gap: 7px !important;
    border-radius: 21px !important;
  }

  #lobby .profile-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #lobby .profile-avatar {
    width: 54px !important;
    height: 54px !important;
    font-size: 28px !important;
  }

  #lobby .profile-card strong {
    font-size: 18px !important;
  }

  #lobby .profile-card span {
    font-size: 13px !important;
  }

  #lobby .profile-balance {
    min-width: 74px !important;
    height: 50px !important;
    padding: 7px 8px 7px 34px !important;
  }

  #lobby .profile-balance::before {
    left: 8px !important;
    width: 22px !important;
    height: 22px !important;
  }

  #lobby .profile-balance span {
    font-size: 13px !important;
  }

  #lobby .profile-balance strong {
    font-size: 20px !important;
  }

  #lobby .lobby-title {
    margin: 14px 0 12px !important;
  }

  #lobby .lobby-title span {
    font-size: 16px !important;
  }

  #lobby .lobby-title h1 {
    font-size: 40px !important;
  }

  #lobby .game-grid {
    grid-auto-rows: 137px !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  #lobby .game-card {
    min-height: 137px !important;
    padding: 20px 20px !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
  }

  #lobby .game-card strong {
    font-size: 38px !important;
  }

  #lobby .game-card em {
    font-size: 16px !important;
  }

  #lobby .game-card::before {
    right: 44px !important;
    width: 52px !important;
    height: 72px !important;
  }

  #lobby .game-card::after {
    right: 69px !important;
  }

  #lobby .game-card i {
    right: 19px !important;
    bottom: 23px !important;
    width: 126px !important;
    height: 42px !important;
    font-size: 18px !important;
  }

  #lobby .bottom-nav {
    min-height: 80px !important;
    padding: 7px 16px !important;
  }

  #lobby .bottom-nav button.league-main {
    height: 96px !important;
    margin-top: -34px !important;
  }
}

/* TRUE EOF 167: final lobby text scale and stable bottom nav dimensions. */
#lobby .lobby-title span {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

#lobby .lobby-title h1 {
  font-size: 30px !important;
  line-height: 1 !important;
}

#lobby .game-card span {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

#lobby .game-card strong {
  margin-top: 9px !important;
  font-size: 28px !important;
}

#lobby .game-card em {
  font-size: 12px !important;
}

#lobby .game-card i {
  width: 108px !important;
  height: 36px !important;
  font-size: 14px !important;
}

#lobby .game-card i::after {
  width: 20px !important;
  height: 20px !important;
  font-size: 25px !important;
}

#lobby .bottom-nav,
#clubPage .bottom-nav,
#adminPage .bottom-nav {
  min-height: 80px !important;
  height: 80px !important;
  padding: 7px 16px !important;
  box-sizing: border-box !important;
}

#lobby .bottom-nav button,
#clubPage .bottom-nav button,
#adminPage .bottom-nav button,
#lobby .bottom-nav button.active,
#clubPage .bottom-nav button.active,
#adminPage .bottom-nav button.active {
  height: 64px !important;
  transform: none !important;
  transition: color 0.16s ease, text-shadow 0.16s ease !important;
}

#lobby .bottom-nav button.league-main,
#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main,
#lobby .bottom-nav button.league-main.active,
#clubPage .bottom-nav button.league-main.active,
#adminPage .bottom-nav button.league-main.active {
  height: 92px !important;
  margin-top: -30px !important;
  transform: none !important;
}

@media (max-width: 430px) {
  #lobby .lobby-title h1 {
    font-size: 29px !important;
  }

  #lobby .game-card strong {
    font-size: 27px !important;
  }

  #lobby .game-card em {
    font-size: 12px !important;
  }

  #lobby .game-card i {
    width: 104px !important;
    height: 34px !important;
    font-size: 13px !important;
  }
}

/* TRUE EOF 168: smaller top profile text and fixed bottom nav to stop vertical jitter. */
#lobby .profile-card strong {
  font-size: 15px !important;
  line-height: 1.05 !important;
}

#lobby .profile-card span {
  margin-top: 6px !important;
  font-size: 11px !important;
}

#lobby .profile-balance span {
  font-size: 11px !important;
}

#lobby .profile-balance strong {
  margin-top: 3px !important;
  font-size: 17px !important;
}

#lobby .profile-avatar {
  width: 48px !important;
  height: 48px !important;
  font-size: 25px !important;
}

#lobby .profile-card {
  grid-template-columns: 48px minmax(0, 1fr) !important;
}

#lobby.lobby,
#clubPage.club-page,
#adminPage.admin-page {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

#lobby .bottom-nav,
#clubPage .bottom-nav,
#adminPage .bottom-nav {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 40 !important;
}

/* TRUE EOF 169: fixed CSS nav icons so they do not change between page switches. */
#lobby .bottom-nav button::before,
#clubPage .bottom-nav button::before,
#adminPage .bottom-nav button::before {
  content: "" !important;
  position: relative !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 2px !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#lobby .bottom-nav button:nth-child(1)::before,
#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before {
  width: 27px !important;
  height: 25px !important;
  background:
    linear-gradient(currentColor 0 0) 50% 78% / 15px 12px no-repeat,
    linear-gradient(135deg, transparent 42%, currentColor 43% 57%, transparent 58%) 50% 15% / 23px 23px no-repeat !important;
  clip-path: polygon(50% 0, 98% 40%, 86% 40%, 86% 100%, 61% 100%, 61% 66%, 39% 66%, 39% 100%, 14% 100%, 14% 40%, 2% 40%) !important;
}

#lobby .bottom-nav button:nth-child(2)::before,
#clubPage .bottom-nav button:nth-child(2)::before,
#adminPage .bottom-nav button:nth-child(2)::before {
  width: 34px !important;
  height: 28px !important;
  color: #ffd66d !important;
  background:
    radial-gradient(circle at 18% 34%, currentColor 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 15%, currentColor 0 3px, transparent 3.5px),
    radial-gradient(circle at 82% 34%, currentColor 0 3px, transparent 3.5px),
    linear-gradient(135deg, transparent 0 22%, currentColor 23% 45%, transparent 46%) 4px 6px / 11px 16px no-repeat,
    linear-gradient(225deg, transparent 0 22%, currentColor 23% 45%, transparent 46%) 19px 6px / 11px 16px no-repeat,
    linear-gradient(currentColor 0 0) 6px 17px / 22px 9px no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(255, 214, 109, 0.45)) !important;
}

#lobby .bottom-nav button:nth-child(3)::before,
#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  width: 27px !important;
  height: 27px !important;
  background:
    radial-gradient(circle at 50% 29%, currentColor 0 6px, transparent 6.5px),
    radial-gradient(ellipse at 50% 92%, currentColor 0 13px, transparent 13.5px) !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
}

#lobby .bottom-nav button.active::before,
#clubPage .bottom-nav button.active::before,
#adminPage .bottom-nav button.active::before {
  color: #fff2bb !important;
  filter: drop-shadow(0 0 8px rgba(255, 226, 112, 0.54)) !important;
}

#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before {
  color: #ffd66d !important;
}

/* TRUE EOF 171: bottom navigation rebuilt from the provided source style. */
#lobby .bottom-nav,
#clubPage .bottom-nav,
#adminPage .bottom-nav {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: 76px !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  border: 1.5px solid rgba(132, 101, 255, 0.78) !important;
  border-radius: 42px !important;
  background:
    linear-gradient(180deg, rgba(36, 31, 111, 0.92), rgba(18, 15, 62, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(118, 82, 255, 0.58),
    inset 0 0 18px rgba(255, 255, 255, 0.04) !important;
  overflow: visible !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
}

#lobby .bottom-nav::after,
#clubPage .bottom-nav::after,
#adminPage .bottom-nav::after {
  content: "" !important;
  position: absolute !important;
  left: 92px !important;
  right: 92px !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(122, 86, 255, 0.5), #b66cff, rgba(122, 86, 255, 0.5), transparent) !important;
  box-shadow:
    0 0 8px #9b5cff,
    0 0 16px #7b4dff,
    0 0 26px rgba(180, 98, 255, 0.8) !important;
}

#lobby .bottom-nav button,
#clubPage .bottom-nav button,
#adminPage .bottom-nav button {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 31% !important;
  width: 31% !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 32px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9d91ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(151, 125, 255, 0.6) !important;
  transform: none !important;
  transition: color 0.16s ease, text-shadow 0.16s ease !important;
}

#lobby .bottom-nav button::before,
#clubPage .bottom-nav button::before,
#adminPage .bottom-nav button::before {
  content: "" !important;
  position: relative !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #b7a5ff, #745dff) !important;
  box-shadow:
    0 0 10px rgba(146, 116, 255, 0.95),
    inset 0 2px 3px rgba(255, 255, 255, 0.35) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}

#lobby .bottom-nav button:nth-child(1)::before,
#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before {
  border-radius: 8px !important;
  clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 63% 100%, 63% 58%, 37% 58%, 37% 100%, 0 100%, 0 38%) !important;
}

#lobby .bottom-nav button:nth-child(3)::before,
#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  width: 34px !important;
  height: 34px !important;
  background:
    radial-gradient(circle at 50% 32%, #c4b4ff 0 31%, transparent 32%),
    radial-gradient(ellipse at 50% 90%, #a996ff 0 57%, transparent 58%) !important;
  box-shadow:
    0 0 10px rgba(146, 116, 255, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.28) !important;
  clip-path: none !important;
}

#lobby .bottom-nav button.league-main,
#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main {
  position: absolute !important;
  left: 50% !important;
  top: -36px !important;
  width: 116px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex: 0 0 116px !important;
  border-radius: 50% !important;
  z-index: 8 !important;
  gap: 4px !important;
  color: #ffe170 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(88, 70, 245, 1), rgba(23, 20, 83, 1) 68%) !important;
  border: 2px solid rgba(139, 105, 255, 0.88) !important;
  box-shadow:
    0 0 18px rgba(132, 91, 255, 0.75),
    inset 0 0 20px rgba(255, 255, 255, 0.08) !important;
  text-shadow:
    0 0 6px rgba(255, 219, 91, 0.7),
    0 2px 2px rgba(0, 0, 0, 0.35) !important;
  transform: translateX(-50%) !important;
}

#lobby .bottom-nav button.league-main::after,
#clubPage .bottom-nav button.league-main::after,
#adminPage .bottom-nav button.league-main::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: -2px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #d58cff, transparent) !important;
  box-shadow:
    0 0 8px #c27aff,
    0 0 20px #7b4cff !important;
}

#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before {
  width: 48px !important;
  height: 42px !important;
  margin-bottom: 6px !important;
  background:
    radial-gradient(circle at 50% 50%, #ffd963 0 12%, transparent 13%),
    linear-gradient(145deg, #2d2588, #15134d) 50% 50% / 28px 28px no-repeat,
    linear-gradient(145deg, #fff2a8, #f1bd38 42%, #b86b12 100%) !important;
  clip-path: polygon(50% 0%, 92% 18%, 82% 70%, 50% 100%, 18% 70%, 8% 18%) !important;
  box-shadow:
    0 0 10px rgba(255, 200, 64, 0.75),
    inset 0 2px 3px rgba(255, 255, 255, 0.65) !important;
}

#lobby .bottom-nav button.league-main.active,
#clubPage .bottom-nav button.league-main.active,
#adminPage .bottom-nav button.league-main.active,
#lobby .bottom-nav button.active,
#clubPage .bottom-nav button.active,
#adminPage .bottom-nav button.active {
  color: #ffe170 !important;
}

#lobby .bottom-nav button.active:not(.league-main)::after,
#clubPage .bottom-nav button.active:not(.league-main)::after,
#adminPage .bottom-nav button.active:not(.league-main)::after {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 3px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #f6db6d, transparent) !important;
  box-shadow: 0 0 9px rgba(255, 219, 91, 0.75) !important;
}

#lobby.lobby,
#clubPage.club-page,
#adminPage.admin-page {
  padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}

/* TRUE EOF 172: repair bottom nav icon sizing and center badge artwork. */
#lobby .bottom-nav button:nth-child(1)::before,
#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before {
  width: 30px !important;
  height: 28px !important;
  margin-bottom: 5px !important;
  background: linear-gradient(180deg, #d5c8ff, #7d67ff) !important;
  clip-path: polygon(50% 0, 94% 35%, 84% 35%, 84% 100%, 60% 100%, 60% 64%, 40% 64%, 40% 100%, 16% 100%, 16% 35%, 6% 35%) !important;
  box-shadow:
    0 0 12px rgba(146, 116, 255, 0.9),
    inset 0 2px 3px rgba(255, 255, 255, 0.35) !important;
  transform: none !important;
}

#lobby .bottom-nav button:nth-child(3)::before,
#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 4px !important;
  background:
    radial-gradient(circle at 50% 28%, #d7ccff 0 24%, transparent 25%),
    radial-gradient(ellipse at 50% 88%, #9b87ff 0 48%, transparent 49%) !important;
  box-shadow: 0 0 12px rgba(146, 116, 255, 0.7) !important;
}

#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before {
  width: 54px !important;
  height: 48px !important;
  margin: 0 auto 7px !important;
  background:
    radial-gradient(circle at 50% 48%, #ffd963 0 10%, transparent 11%),
    linear-gradient(145deg, #2d2588, #15134d) center / 34px 34px no-repeat,
    linear-gradient(145deg, #fff2a8 0%, #f1bd38 42%, #b86b12 100%) !important;
  clip-path: polygon(50% 0%, 92% 18%, 82% 70%, 50% 100%, 18% 70%, 8% 18%) !important;
  box-shadow:
    0 0 14px rgba(255, 200, 64, 0.82),
    inset 0 2px 4px rgba(255, 255, 255, 0.65) !important;
  transform: none !important;
}

#lobby .bottom-nav button.league-main {
  justify-content: center !important;
  padding-top: 6px !important;
}

/* TRUE EOF 173: center side icons and make the league crown gold. */
#lobby .bottom-nav button:not(.league-main),
#clubPage .bottom-nav button:not(.league-main),
#adminPage .bottom-nav button:not(.league-main) {
  justify-content: center !important;
  padding-top: 2px !important;
  gap: 6px !important;
}

#lobby .bottom-nav button:nth-child(1)::before,
#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before,
#lobby .bottom-nav button:nth-child(3)::before,
#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  margin: 0 auto 4px !important;
  align-self: center !important;
}

#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before {
  width: 48px !important;
  height: 38px !important;
  margin-bottom: 8px !important;
  background:
    radial-gradient(circle at 14% 20%, #fff1a5 0 4px, transparent 4.5px),
    radial-gradient(circle at 50% 4%, #fff1a5 0 4px, transparent 4.5px),
    radial-gradient(circle at 86% 20%, #fff1a5 0 4px, transparent 4.5px),
    linear-gradient(180deg, #fff0a0 0%, #ffd34d 38%, #bd7415 100%) !important;
  clip-path: polygon(5% 92%, 95% 92%, 88% 28%, 66% 53%, 50% 12%, 34% 53%, 12% 28%) !important;
  box-shadow:
    0 0 12px rgba(255, 211, 77, 0.86),
    inset 0 2px 4px rgba(255, 255, 255, 0.58) !important;
}

/* TRUE EOF 174: lock side nav icons to the horizontal center of their buttons. */
#lobby .bottom-nav button:not(.league-main),
#clubPage .bottom-nav button:not(.league-main),
#adminPage .bottom-nav button:not(.league-main) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 0 10px !important;
  text-align: center !important;
}

#lobby .bottom-nav button:not(.league-main)::before,
#clubPage .bottom-nav button:not(.league-main)::before,
#adminPage .bottom-nav button:not(.league-main)::before {
  position: absolute !important;
  left: 50% !important;
  top: 7px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

/* TRUE EOF 175: add breathing room between side nav icons and labels. */
#lobby .bottom-nav button:not(.league-main),
#clubPage .bottom-nav button:not(.league-main),
#adminPage .bottom-nav button:not(.league-main) {
  padding-bottom: 6px !important;
  justify-content: flex-end !important;
}

/* TRUE EOF 170: replace crude CSS nav glyphs with clean mask icons. */
#lobby .bottom-nav button::before,
#clubPage .bottom-nav button::before,
#adminPage .bottom-nav button::before {
  width: 28px !important;
  height: 28px !important;
  background: currentColor !important;
  clip-path: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

#lobby .bottom-nav button:nth-child(1)::before,
#clubPage .bottom-nav button:nth-child(1)::before,
#adminPage .bottom-nav button:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 30.5 32 10l24 20.5v23A4.5 4.5 0 0 1 51.5 58h-11V40h-17v18h-11A4.5 4.5 0 0 1 8 53.5v-23Z'/%3E%3Cpath fill='black' d='M4 30.5 32 6l28 24.5-5.5 6.2L32 17 9.5 36.7 4 30.5Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 30.5 32 10l24 20.5v23A4.5 4.5 0 0 1 51.5 58h-11V40h-17v18h-11A4.5 4.5 0 0 1 8 53.5v-23Z'/%3E%3Cpath fill='black' d='M4 30.5 32 6l28 24.5-5.5 6.2L32 17 9.5 36.7 4 30.5Z'/%3E%3C/svg%3E") !important;
}

#lobby .bottom-nav button:nth-child(2)::before,
#clubPage .bottom-nav button:nth-child(2)::before,
#adminPage .bottom-nav button:nth-child(2)::before {
  width: 36px !important;
  height: 30px !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 51h56v7H8zM11 46 7 18l17 12L36 4l12 26 17-12-4 28H11Z'/%3E%3Ccircle fill='black' cx='7' cy='15' r='5'/%3E%3Ccircle fill='black' cx='36' cy='5' r='5'/%3E%3Ccircle fill='black' cx='65' cy='15' r='5'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 72 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 51h56v7H8zM11 46 7 18l17 12L36 4l12 26 17-12-4 28H11Z'/%3E%3Ccircle fill='black' cx='7' cy='15' r='5'/%3E%3Ccircle fill='black' cx='36' cy='5' r='5'/%3E%3Ccircle fill='black' cx='65' cy='15' r='5'/%3E%3C/svg%3E") !important;
}

#lobby .bottom-nav button:nth-child(3)::before,
#clubPage .bottom-nav button:nth-child(3)::before,
#adminPage .bottom-nav button:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='black' cx='32' cy='20' r='13'/%3E%3Cpath fill='black' d='M10 58c2.5-15 11-23 22-23s19.5 8 22 23H10Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='black' cx='32' cy='20' r='13'/%3E%3Cpath fill='black' d='M10 58c2.5-15 11-23 22-23s19.5 8 22 23H10Z'/%3E%3C/svg%3E") !important;
}

/* TRUE EOF 176: final lock for the center league tab so active state cannot shift it. */
#lobby .bottom-nav button.league-main,
#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main,
#lobby .bottom-nav button.league-main.active,
#clubPage .bottom-nav button.league-main.active,
#adminPage .bottom-nav button.league-main.active {
  position: absolute !important;
  left: 50% !important;
  top: -36px !important;
  width: 116px !important;
  height: 116px !important;
  min-height: 116px !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transform: translateX(-50%) !important;
  color: #ffe170 !important;
}

#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before,
#lobby .bottom-nav button.league-main.active::before,
#clubPage .bottom-nav button.league-main.active::before,
#adminPage .bottom-nav button.league-main.active::before {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 38px !important;
  margin: 0 0 8px !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background:
    radial-gradient(circle at 14% 20%, #fff1a5 0 4px, transparent 4.5px),
    radial-gradient(circle at 50% 4%, #fff1a5 0 4px, transparent 4.5px),
    radial-gradient(circle at 86% 20%, #fff1a5 0 4px, transparent 4.5px),
    linear-gradient(180deg, #fff0a0 0%, #ffd34d 38%, #bd7415 100%) !important;
  clip-path: polygon(5% 92%, 95% 92%, 88% 28%, 66% 53%, 50% 12%, 34% 53%, 12% 28%) !important;
  box-shadow:
    0 0 12px rgba(255, 211, 77, 0.86),
    inset 0 2px 4px rgba(255, 255, 255, 0.58) !important;
  filter: none !important;
}

/* TRUE EOF 177: golden league ring with flowing highlight when selected. */
#lobby .bottom-nav button.league-main,
#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main,
#lobby .bottom-nav button.league-main.active,
#clubPage .bottom-nav button.league-main.active,
#adminPage .bottom-nav button.league-main.active {
  border: 2px solid rgba(255, 216, 93, 0.96) !important;
  box-shadow:
    0 0 0 2px rgba(107, 65, 10, 0.85),
    0 0 22px rgba(255, 207, 72, 0.48),
    0 0 34px rgba(137, 87, 255, 0.44),
    inset 0 0 20px rgba(255, 239, 155, 0.08) !important;
  overflow: hidden !important;
}

#lobby .bottom-nav button.league-main.active::after,
#clubPage .bottom-nav button.league-main.active::after,
#adminPage .bottom-nav button.league-main.active::after {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  left: -3px !important;
  right: -3px !important;
  bottom: -3px !important;
  height: auto !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, 0.9) 22%, #ffe56f 26%, transparent 34% 100%) !important;
  box-shadow: none !important;
  animation: leagueRingFlow 2.4s linear infinite !important;
  -webkit-mask: radial-gradient(circle, transparent 0 57px, #000 58px 61px, transparent 62px) !important;
  mask: radial-gradient(circle, transparent 0 57px, #000 58px 61px, transparent 62px) !important;
  pointer-events: none !important;
}

@keyframes leagueRingFlow {
  to {
    transform: rotate(360deg);
  }
}

/* TRUE EOF 178: keep crown untouched; flow only on the outer golden ring. */
#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before,
#lobby .bottom-nav button.league-main.active::before,
#clubPage .bottom-nav button.league-main.active::before,
#adminPage .bottom-nav button.league-main.active::before {
  z-index: 3 !important;
}

#lobby .bottom-nav button.league-main,
#clubPage .bottom-nav button.league-main,
#adminPage .bottom-nav button.league-main {
  overflow: visible !important;
}

#lobby .bottom-nav button.league-main.active::after,
#clubPage .bottom-nav button.league-main.active::after,
#adminPage .bottom-nav button.league-main.active::after {
  inset: -5px !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(255, 255, 255, 0.95) 16%, #ffe56f 21%, #ff8ef8 26%, transparent 34% 100%) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 59px, #000 60px 64px, transparent 65px) !important;
  mask: radial-gradient(circle, transparent 0 59px, #000 60px 64px, transparent 65px) !important;
}

/* TRUE EOF 179: redraw the league crown as a fixed solid shape, unaffected by selection. */
#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before,
#lobby .bottom-nav button.league-main.active::before,
#clubPage .bottom-nav button.league-main.active::before,
#adminPage .bottom-nav button.league-main.active::before {
  width: 46px !important;
  height: 34px !important;
  margin: 0 0 9px !important;
  background:
    linear-gradient(180deg, #fff2a2 0%, #ffd94e 38%, #c87b16 100%) !important;
  clip-path: polygon(
    7% 88%,
    93% 88%,
    90% 34%,
    70% 52%,
    56% 16%,
    50% 5%,
    44% 16%,
    30% 52%,
    10% 34%
  ) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow:
    0 0 10px rgba(255, 216, 74, 0.72),
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -3px 4px rgba(116, 56, 0, 0.24) !important;
}

/* TRUE EOF 180: match league and mine pages to the lobby neon-purple theme. */
#clubPage.club-page,
#adminPage.admin-page {
  position: relative !important;
  overflow: hidden !important;
  color: #fff8ff !important;
  background:
    radial-gradient(ellipse at 50% -6%, rgba(143, 91, 255, 0.42), transparent 30%),
    radial-gradient(ellipse at 50% 28%, rgba(89, 44, 210, 0.52), transparent 42%),
    radial-gradient(ellipse at 50% 88%, rgba(62, 31, 180, 0.42), transparent 44%),
    linear-gradient(180deg, #09082b 0%, #14105d 45%, #070821 100%) !important;
}

#clubPage.club-page::before,
#adminPage.admin-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(126, 98, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 98, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
}

#clubPage.club-page::after,
#adminPage.admin-page::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 18%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 115, 0.44), transparent);
  box-shadow: 0 0 22px rgba(176, 107, 255, 0.52);
  pointer-events: none;
}

#clubPage > *,
#adminPage > * {
  position: relative;
  z-index: 1;
}

#clubPage .topbar,
#adminPage .topbar {
  min-height: 78px;
  padding: 12px 14px !important;
  border: 1.5px solid rgba(132, 93, 255, 0.9);
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255, 222, 120, 0.2), transparent 34%),
    radial-gradient(ellipse at 18% 0%, rgba(166, 111, 255, 0.3), transparent 48%),
    linear-gradient(135deg, rgba(54, 39, 145, 0.94), rgba(28, 18, 92, 0.92)) !important;
  box-shadow:
    0 0 24px rgba(102, 67, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#clubPage .topbar h1,
#adminPage .topbar h1 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(182, 132, 255, 0.72);
}

#clubPage .topbar span,
#adminPage .topbar span,
#clubPage .club-header-info,
#adminPage .club-header-info {
  color: rgba(229, 220, 255, 0.9) !important;
  background: rgba(13, 9, 52, 0.34) !important;
}

#clubPage .club-header-info b,
#adminPage .club-header-info b,
#clubPage .club-title strong,
#adminPage .admin-users-head strong {
  color: #ffe477 !important;
}

#clubPage .back-pill,
#adminPage .back-pill,
#clubPage .wallet,
#adminPage .wallet,
#clubPage #leagueTopSettingBtn {
  border: 1px solid rgba(173, 143, 255, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(61, 47, 151, 0.98), rgba(35, 28, 98, 0.96)) !important;
  color: #fff8ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

#clubPage #leagueTopSettingBtn,
#clubPage .club-game-tabs button.active,
#clubPage .create-league-btn,
#adminPage .admin-control button,
#adminPage .logout-btn {
  background: linear-gradient(180deg, #fff0a4 0%, #f2bf45 48%, #c17a18 100%) !important;
  color: #251405 !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}

#clubPage .club-panel,
#adminPage .admin-panel {
  z-index: 1;
}

#clubPage .club-title,
#clubPage .club-empty,
#clubPage .league-info-card,
#clubPage .league-owner-tools,
#clubPage .league-create-card,
#clubPage .league-entry-card,
#adminPage .admin-card,
#adminPage .admin-note,
#adminPage .my-stats div,
#adminPage .admin-empty,
#adminPage .admin-row {
  border: 1px solid rgba(139, 104, 255, 0.28) !important;
  background:
    radial-gradient(ellipse at 74% 18%, rgba(255, 221, 111, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(42, 32, 121, 0.78), rgba(20, 17, 70, 0.86)) !important;
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

#clubPage .club-game-tabs {
  border: 1px solid rgba(130, 97, 255, 0.36) !important;
  background: rgba(15, 10, 61, 0.62) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

#clubPage .club-game-tabs button {
  color: rgba(235, 226, 255, 0.82) !important;
}

#clubPage .club-game-tabs button.active {
  color: #251405 !important;
}

#clubPage .club-empty span,
#clubPage .league-entry-card em,
#clubPage .league-create-card em,
#adminPage .admin-card em,
#adminPage .admin-note,
#adminPage .my-stats span,
#adminPage .admin-row {
  color: rgba(235, 226, 255, 0.78) !important;
}

#clubPage .club-empty strong,
#clubPage .league-entry-card strong,
#clubPage .league-create-card strong,
#adminPage .admin-card strong,
#adminPage .my-stats strong {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.45);
}

#clubPage .league-message,
#clubPage .league-cost,
#adminPage .admin-row-head {
  border: 1px solid rgba(130, 97, 255, 0.26) !important;
  background: rgba(13, 9, 52, 0.5) !important;
  color: rgba(235, 226, 255, 0.84) !important;
}

#clubPage input,
#adminPage input {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #171233 !important;
}

/* TRUE EOF 185: final league tabs layout for the current lobby games. */
#clubPage .club-game-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 6px !important;
}

#clubPage .club-game-tabs button {
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* TRUE EOF 181: lobby cards use a clean three-card stack and create-room wording. */
#lobby .game-card::before,
#lobby .game-card::after {
  display: none !important;
}

#lobby .game-card {
  isolation: isolate !important;
}

#lobby .lobby-card-stack {
  position: absolute !important;
  right: 25px !important;
  top: 25px !important;
  width: 126px !important;
  height: 92px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  font-style: normal !important;
}

#lobby .lobby-card-stack small {
  position: absolute;
  top: 12px;
  left: 38px;
  display: block;
  width: 48px;
  height: 68px;
  padding: 8px 0 0 8px;
  border-radius: 9px;
  background:
    linear-gradient(135deg, #ffffff 0 70%, #efe8dc 71% 100%);
  color: #193a31;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  text-align: left;
}

#lobby .lobby-card-stack small:nth-child(1) {
  left: 17px;
  top: 20px;
  transform: rotate(-13deg);
  opacity: 0.96;
}

#lobby .lobby-card-stack small:nth-child(2) {
  left: 39px;
  top: 10px;
  transform: rotate(4deg);
  z-index: 2;
}

#lobby .lobby-card-stack small:nth-child(3) {
  left: 64px;
  top: 23px;
  transform: rotate(15deg);
  z-index: 3;
}

#lobby .game-card .lobby-card-stack small:nth-child(2),
#lobby .game-card .lobby-card-stack small:nth-child(3) {
  color: #d7293b;
}

#lobby .game-card.gold .lobby-card-stack small:nth-child(1),
#lobby .game-card.gold .lobby-card-stack small:nth-child(2) {
  color: #2c2b25;
}

#lobby .game-card.palace .lobby-card-stack small:nth-child(1),
#lobby .game-card.palace .lobby-card-stack small:nth-child(2) {
  color: #2c2b25;
}

#lobby .game-card i {
  z-index: 3 !important;
  width: 112px !important;
  padding-right: 22px !important;
  font-size: 13px !important;
}

@media (max-width: 430px) {
  #lobby .lobby-card-stack {
    right: 20px !important;
    top: 22px !important;
    width: 112px !important;
    height: 84px !important;
  }

  #lobby .lobby-card-stack small {
    width: 43px;
    height: 62px;
    padding: 7px 0 0 7px;
    font-size: 17px;
  }

  #lobby .lobby-card-stack small:nth-child(1) {
    left: 14px;
    top: 18px;
  }

  #lobby .lobby-card-stack small:nth-child(2) {
    left: 34px;
    top: 9px;
  }

  #lobby .lobby-card-stack small:nth-child(3) {
    left: 57px;
    top: 21px;
  }

  #lobby .game-card i {
    right: 18px !important;
    width: 104px !important;
    font-size: 12px !important;
  }
}

/* TRUE EOF 182: remove lobby profile strip and add the Dragon Tiger entry. */
#lobby.lobby {
  grid-template-rows: auto 1fr auto !important;
  gap: 16px !important;
  padding-top: max(18px, env(safe-area-inset-top)) !important;
}

#lobby .lobby-profile {
  display: none !important;
}

#lobby .lobby-title {
  padding-top: 4px !important;
}

#lobby .game-grid {
  grid-auto-rows: 132px !important;
  gap: 13px !important;
}

#lobby .game-card {
  min-height: 132px !important;
  padding-top: 19px !important;
  padding-bottom: 19px !important;
}

#lobby .game-card.dragon {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(255, 230, 120, 0.24), transparent 28%),
    radial-gradient(ellipse at 90% 30%, rgba(255, 81, 60, 0.42), transparent 38%),
    linear-gradient(90deg, #5d1712 0%, #9b281d 52%, #ee5835 100%) !important;
  border-color: rgba(255, 111, 74, 0.78) !important;
}

#lobby .game-card.dragon em::before {
  color: #ffda62;
}

#lobby .game-card.dragon .lobby-card-stack small:nth-child(1) {
  color: #2c2b25;
}

#lobby .game-card.dragon .lobby-card-stack small:nth-child(2),
#lobby .game-card.dragon .lobby-card-stack small:nth-child(3) {
  color: #d7293b;
}

@media (max-width: 430px) {
  #lobby.lobby {
    gap: 11px !important;
    padding-top: max(13px, env(safe-area-inset-top)) !important;
  }

  #lobby .lobby-title {
    padding-top: 0 !important;
  }

  #lobby .game-grid {
    grid-auto-rows: 122px !important;
    gap: 10px !important;
  }

  #lobby .game-card {
    min-height: 122px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* TRUE EOF 185: final league tabs layout for the current lobby games. */
#clubPage .club-game-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 6px !important;
}

#clubPage .club-game-tabs button {
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* TRUE EOF 186: remove the league top header and move owner points entry to Mine. */
#clubPage.club-page {
  grid-template-rows: 1fr auto !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  align-content: start !important;
}

#adminPage .admin-note:has(.mine-league-owner) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#adminPage .mine-league-owner {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.32);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.88), rgba(21, 16, 75, 0.92));
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#adminPage .mine-league-owner span {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4, #d89524);
  color: #251405;
  font-size: 12px;
  font-weight: 950;
}

#adminPage .mine-league-owner strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.45);
}

#adminPage .mine-league-owner em {
  color: rgba(235, 226, 255, 0.78);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

#adminPage .mine-league-owner button {
  justify-self: start;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0a4 0%, #f2bf45 48%, #c17a18 100%);
  color: #251405;
  font-size: 14px;
  font-weight: 950;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* TRUE EOF 187: remove the Mine page top header. */
#adminPage.admin-page {
  grid-template-rows: 1fr auto !important;
}

#adminPage > .topbar {
  display: none !important;
}

#adminPage .admin-panel {
  align-content: start !important;
}

/* TRUE EOF 188: league summary strip above game categories. */
#clubPage .club-panel {
  grid-template-rows: auto auto 1fr !important;
  gap: 10px !important;
}

#clubPage .club-league-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(139, 104, 255, 0.34);
  background:
    radial-gradient(ellipse at 70% 18%, rgba(255, 221, 111, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(47, 35, 137, 0.82), rgba(21, 16, 75, 0.88));
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .club-league-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#clubPage .club-league-summary span {
  color: #ffe477;
  font-size: 11px;
  font-weight: 950;
}

#clubPage .club-league-summary strong {
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(174, 114, 255, 0.5);
}

#clubPage .club-league-summary em {
  flex: 0 0 auto;
  max-width: 58%;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(11, 8, 48, 0.52);
  color: rgba(235, 226, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#clubPage .club-league-summary b {
  color: #ffe477;
}

/* TRUE EOF 189: keep league label and name on one line. */
#clubPage .club-league-summary div {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#clubPage .club-league-summary span {
  flex: 0 0 auto !important;
}

#clubPage .club-league-summary strong {
  min-width: 0 !important;
  font-size: 18px !important;
}

/* TRUE EOF 190: make empty waiting seats easier to read. */
#room .player.empty-seat {
  width: 68px !important;
  height: 96px !important;
}

#room .seat-card.empty-chair {
  width: 58px !important;
  height: 86px !important;
  min-width: 58px !important;
  min-height: 86px !important;
  gap: 9px !important;
  border-radius: 12px !important;
}

#room .seat-card.empty-chair i {
  width: 24px !important;
  height: 23px !important;
}

#room .seat-card.empty-chair i::before {
  width: 11px !important;
  height: 11px !important;
}

#room .seat-card.empty-chair i::after {
  width: 22px !important;
  height: 13px !important;
}

#room .seat-card.empty-chair span {
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 430px) {
  #room .player.empty-seat {
    width: 62px !important;
    height: 88px !important;
  }

  #room .seat-card.empty-chair {
    width: 54px !important;
    height: 80px !important;
    min-width: 54px !important;
    min-height: 80px !important;
  }

  #room .seat-card.empty-chair span {
    font-size: 11px !important;
  }
}

/* TRUE EOF 191: remove the four small decorative dots on the game table felt. */
#room .table::before {
  background:
    linear-gradient(90deg, rgba(255, 228, 147, 0.34) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 228, 147, 0.34) calc(100% - 2px)),
    radial-gradient(ellipse at 50% 18%, rgba(70, 170, 116, 0.45), transparent 34%),
    radial-gradient(ellipse at 50% 86%, rgba(5, 42, 31, 0.58), transparent 36%),
    linear-gradient(180deg, #176348 0%, #0e4b37 42%, #062a22 100%) !important;
}

/* TRUE EOF 192B: final boot screen override, kept at EOF to avoid login flash on refresh. */
body.app-booting {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(116, 70, 255, 0.28), transparent 30%),
    radial-gradient(ellipse at 50% 42%, rgba(25, 185, 122, 0.16), transparent 46%),
    linear-gradient(180deg, #090a2a 0%, #151060 44%, #070926 100%) !important;
}

body.app-booting main > section {
  visibility: hidden !important;
}

body.app-booting::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(116, 70, 255, 0.3), transparent 30%),
    radial-gradient(ellipse at 50% 42%, rgba(25, 185, 122, 0.16), transparent 46%),
    linear-gradient(180deg, #090a2a 0%, #151060 44%, #070926 100%);
  pointer-events: none;
}

/* TRUE EOF 193: Dragon Tiger lobby card styled like a red versus banner without online-count text. */
#lobby .game-card.dragon {
  min-height: 118px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 83, 82, 0.92) !important;
  background:
    radial-gradient(circle at 51% 48%, rgba(255, 255, 255, 0.34) 0 2px, rgba(185, 78, 255, 0.8) 3px 7px, rgba(78, 47, 255, 0.3) 8px 31px, transparent 32px),
    radial-gradient(ellipse at 39% 38%, rgba(63, 105, 255, 0.58), transparent 25%),
    radial-gradient(ellipse at 74% 42%, rgba(255, 112, 34, 0.66), transparent 30%),
    linear-gradient(90deg, #5a0918 0%, #9b1022 42%, #b51a22 60%, #5f0714 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 163, 153, 0.42),
    inset 0 -18px 34px rgba(42, 0, 11, 0.38),
    0 12px 24px rgba(23, 0, 16, 0.32) !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 9px !important;
  width: 124px !important;
  height: 86px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.28)) !important;
}

#lobby .game-card.dragon::before {
  left: 142px !important;
  background:
    radial-gradient(circle at 70% 35%, #d9f0ff 0 4px, transparent 5px),
    radial-gradient(circle at 68% 35%, #103dba 0 16px, transparent 17px),
    conic-gradient(from 215deg at 65% 38%, transparent 0 8%, #79d6ff 9% 14%, #2137c5 15% 26%, transparent 27% 100%),
    conic-gradient(from 145deg at 43% 55%, transparent 0 12%, #4087ff 13% 24%, #13208e 25% 38%, transparent 39% 100%),
    linear-gradient(135deg, transparent 18%, rgba(47, 95, 255, 0.95) 19% 33%, transparent 34% 100%);
  clip-path: polygon(0 55%, 15% 34%, 34% 29%, 46% 4%, 61% 27%, 82% 30%, 100% 12%, 88% 45%, 100% 77%, 70% 63%, 55% 93%, 38% 65%, 18% 72%);
}

#lobby .game-card.dragon::after {
  right: 96px !important;
  background:
    radial-gradient(circle at 32% 34%, #fff6b8 0 4px, transparent 5px),
    radial-gradient(circle at 33% 35%, #a83b08 0 16px, transparent 17px),
    conic-gradient(from 18deg at 36% 42%, transparent 0 7%, #ffcf51 8% 17%, #d95512 18% 35%, transparent 36% 100%),
    conic-gradient(from 210deg at 67% 55%, transparent 0 10%, #ff9b24 11% 25%, #80210c 26% 41%, transparent 42% 100%),
    linear-gradient(45deg, transparent 18%, rgba(255, 116, 24, 0.98) 19% 38%, transparent 39% 100%);
  clip-path: polygon(0 16%, 23% 28%, 42% 8%, 55% 31%, 78% 25%, 100% 48%, 76% 62%, 69% 93%, 48% 68%, 20% 78%, 28% 50%);
}

#lobby .game-card.dragon .lobby-card-stack {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
}

#lobby .game-card.dragon .lobby-card-stack small {
  display: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::before {
  content: "VS";
  position: absolute;
  left: 52%;
  top: 37%;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 2;
  color: #fff4ff;
  font-size: 28px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -1px;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 17px rgba(150, 65, 255, 0.95),
    2px 2px 0 rgba(153, 17, 32, 0.9);
}

#lobby .game-card.dragon .lobby-card-stack::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 20%;
  width: 2px;
  height: 70%;
  transform: rotate(24deg);
  background: linear-gradient(180deg, transparent, rgba(255, 221, 115, 0.85), transparent);
  box-shadow: 0 0 16px rgba(255, 83, 244, 0.9);
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em,
#lobby .game-card.dragon i {
  position: relative !important;
  z-index: 4 !important;
}

#lobby .game-card.dragon span {
  background: linear-gradient(180deg, #ff6d75, #b81c2d) !important;
  color: #fff7f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 5px 12px rgba(76, 0, 14, 0.28) !important;
}

#lobby .game-card.dragon strong {
  font-size: 30px !important;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.42), 0 0 14px rgba(255, 86, 86, 0.55) !important;
}

#lobby .game-card.dragon em {
  max-width: 170px !important;
  color: #fff4e7 !important;
}

#lobby .game-card.dragon i {
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(180deg, #fff0a7 0%, #ffc84e 54%, #d88a13 100%) !important;
  color: #5b2500 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    0 8px 16px rgba(68, 0, 10, 0.32) !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon {
    min-height: 116px !important;
  }

  #lobby .game-card.dragon::before {
    left: 116px !important;
    width: 104px !important;
    height: 76px !important;
  }

  #lobby .game-card.dragon::after {
    right: 74px !important;
    width: 104px !important;
    height: 76px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack::before {
    left: 53% !important;
    font-size: 24px !important;
  }

  #lobby .game-card.dragon strong {
    font-size: 25px !important;
  }

  #lobby .game-card.dragon em {
    max-width: 145px !important;
  }

  #lobby .game-card.dragon i {
    right: 18px !important;
    width: 104px !important;
  }
}

/* TRUE EOF 194: embed the supplied Dragon Tiger banner as a no-extra-request CSS data image. */
#lobby .game-card.dragon {
  background-image: url("./assets/embedded/css-92318d869b68f0b9.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(255, 72, 82, 0.95) !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after,
#lobby .game-card.dragon .lobby-card-stack {
  display: none !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  opacity: 0 !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon i {
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

#lobby .game-card.dragon i::before {
  content: "";
  position: absolute;
  left: -320px;
  bottom: -18px;
  width: 122px;
  height: 25px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(128, 12, 25, 0.96), rgba(119, 10, 23, 0.86));
  pointer-events: none;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon i {
    right: 18px !important;
  }

  #lobby .game-card.dragon i::before {
    left: -278px;
    bottom: -16px;
    width: 108px;
    height: 22px;
  }
}

/* TRUE EOF 194B: keep the banner's own button artwork and hide duplicate HTML button chrome. */
#lobby .game-card.dragon i {
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#lobby .game-card.dragon i::after {
  display: none !important;
}

/* TRUE EOF 195: use only the embedded dragon/tiger artwork while restoring local card text and button. */
#lobby .game-card.dragon {
  background-color: #8e1020 !important;
}

#lobby .game-card.dragon::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 174px !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, #7b0b1a 0%, #921021 58%, rgba(139, 14, 29, 0.96) 78%, rgba(139, 14, 29, 0) 100%) !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 145px !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(112, 8, 22, 0) 0%, rgba(115, 9, 22, 0.72) 28%, #811120 66%, #821021 100%) !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#lobby .game-card.dragon span {
  background: linear-gradient(180deg, #ff6d75, #b81c2d) !important;
  color: #fff7f0 !important;
}

#lobby .game-card.dragon strong {
  font-size: 30px !important;
  color: #fff !important;
}

#lobby .game-card.dragon em {
  color: #fff4e7 !important;
}

#lobby .game-card.dragon i {
  right: 24px !important;
  top: 50% !important;
  width: 112px !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  color: #5b2500 !important;
  background: linear-gradient(180deg, #fff0a7 0%, #ffc84e 54%, #d88a13 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    0 8px 16px rgba(68, 0, 10, 0.32) !important;
}

#lobby .game-card.dragon i::before {
  display: none !important;
}

#lobby .game-card.dragon i::after {
  display: block !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon::before {
    width: 150px !important;
  }

  #lobby .game-card.dragon::after {
    width: 126px !important;
  }

  #lobby .game-card.dragon strong {
    font-size: 25px !important;
  }

  #lobby .game-card.dragon i {
    right: 18px !important;
    width: 104px !important;
  }
}

/* TRUE EOF 196: replace Sangong lobby card stack with embedded crown-and-cards artwork. */
#lobby .game-card.palace .lobby-card-stack {
  right: 16px !important;
  top: 13px !important;
  width: 174px !important;
  height: 116px !important;
  z-index: 2 !important;
}

#lobby .game-card.palace .lobby-card-stack small {
  display: none !important;
}

#lobby .game-card.palace .lobby-card-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/embedded/css-9890079aa2bb04bb.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 18px rgba(25, 0, 48, 0.28));
  pointer-events: none;
}

#lobby .game-card.palace i {
  z-index: 5 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.palace .lobby-card-stack {
    right: 9px !important;
    top: 14px !important;
    width: 148px !important;
    height: 98px !important;
  }
}


/* TRUE EOF 197: replace Benz-Baoma lobby card stack with embedded racing artwork. */
#lobby .game-card.racing .lobby-card-stack {
  right: 10px !important;
  top: 24px !important;
  width: 190px !important;
  height: 92px !important;
  z-index: 2 !important;
  transform: none !important;
}

#lobby .game-card.racing .lobby-card-stack small {
  display: none !important;
}

#lobby .game-card.racing .lobby-card-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/embedded/css-cda1a80bdcbd247d.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 16px rgba(71, 30, 0, 0.34));
  pointer-events: none;
}

#lobby .game-card.racing i {
  z-index: 5 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.racing .lobby-card-stack {
    right: 7px !important;
    top: 26px !important;
    width: 158px !important;
    height: 76px !important;
  }
}


/* TRUE EOF 198: replace Hundred-Niuniu lobby card stack with embedded bull-card artwork. */
#lobby .game-card.hundred .lobby-card-stack {
  right: 8px !important;
  top: 10px !important;
  width: 176px !important;
  height: 135px !important;
  z-index: 2 !important;
  transform: none !important;
}

#lobby .game-card.hundred .lobby-card-stack small {
  display: none !important;
}

#lobby .game-card.hundred .lobby-card-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/embedded/css-2808f47761fb3daf.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0, 57, 42, 0.34));
  pointer-events: none;
}

#lobby .game-card.hundred i {
  z-index: 5 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.hundred .lobby-card-stack {
    right: 4px !important;
    top: 14px !important;
    width: 146px !important;
    height: 112px !important;
  }
}

/* TRUE EOF 199: restore Dragon Tiger lobby card to its original local card style. */
#lobby .game-card.dragon {
  min-height: 132px !important;
  padding: 19px 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 58% 50%, rgba(255, 230, 120, 0.24), transparent 28%),
    radial-gradient(ellipse at 90% 30%, rgba(255, 81, 60, 0.42), transparent 38%),
    linear-gradient(90deg, #5d1712 0%, #9b281d 52%, #ee5835 100%) !important;
  border-color: rgba(255, 111, 74, 0.78) !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after,
#lobby .game-card.dragon i::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 3 !important;
  text-align: left !important;
}

#lobby .game-card.dragon span {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  color: #5b2500 !important;
  background: linear-gradient(180deg, #fff0a7 0%, #ffc84e 54%, #d88a13 100%) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#lobby .game-card.dragon strong {
  display: block !important;
  margin-top: 10px !important;
  color: #fff !important;
  font-size: 27px !important;
  line-height: 1 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.32) !important;
}

#lobby .game-card.dragon em {
  display: block !important;
  margin-top: 9px !important;
  width: auto !important;
  color: #fff4e7 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#lobby .game-card.dragon em::before {
  color: #ffda62 !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  right: 25px !important;
  top: 25px !important;
  width: 126px !important;
  height: 92px !important;
  z-index: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::before,
#lobby .game-card.dragon .lobby-card-stack::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#lobby .game-card.dragon .lobby-card-stack small {
  position: absolute !important;
  top: 12px !important;
  left: 38px !important;
  display: block !important;
  width: 48px !important;
  height: 68px !important;
  padding: 8px 0 0 8px !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, #ffffff 0 70%, #efe8dc 71% 100%) !important;
  color: #193a31 !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
  text-align: left !important;
  opacity: 1 !important;
}

#lobby .game-card.dragon .lobby-card-stack small:nth-child(1) {
  left: 17px !important;
  top: 20px !important;
  transform: rotate(-13deg) !important;
  color: #2c2b25 !important;
  z-index: 1 !important;
}

#lobby .game-card.dragon .lobby-card-stack small:nth-child(2) {
  left: 39px !important;
  top: 10px !important;
  transform: rotate(4deg) !important;
  color: #d7293b !important;
  z-index: 2 !important;
}

#lobby .game-card.dragon .lobby-card-stack small:nth-child(3) {
  left: 64px !important;
  top: 23px !important;
  transform: rotate(15deg) !important;
  color: #d7293b !important;
  z-index: 3 !important;
}

#lobby .game-card.dragon i {
  display: inline-flex !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  width: 112px !important;
  height: auto !important;
  padding: 8px 25px 8px 18px !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  color: #5b2500 !important;
  background: linear-gradient(180deg, #fff0a7 0%, #ffc84e 54%, #d88a13 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    0 8px 16px rgba(68, 0, 10, 0.32) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}

#lobby .game-card.dragon i::after {
  display: block !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon {
    min-height: 122px !important;
    padding: 16px 16px !important;
  }

  #lobby .game-card.dragon strong {
    font-size: 25px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack {
    right: 20px !important;
    top: 22px !important;
    width: 114px !important;
    height: 82px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack small {
    width: 42px !important;
    height: 60px !important;
    font-size: 17px !important;
  }

  #lobby .game-card.dragon i {
    right: 18px !important;
    width: 104px !important;
  }
}


/* TRUE EOF 200: replace Dragon Tiger lobby poker stack with embedded dragon-tiger artwork. */
#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  right: 7px !important;
  top: 10px !important;
  width: 190px !important;
  height: 118px !important;
  z-index: 2 !important;
  transform: none !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon .lobby-card-stack small {
  display: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("./assets/embedded/css-42f021ede545d491.png") center / contain no-repeat !important;
  filter: drop-shadow(0 12px 18px rgba(80, 0, 20, 0.36));
  pointer-events: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::after {
  content: none !important;
  display: none !important;
}

#lobby .game-card.dragon i {
  z-index: 5 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    right: 3px !important;
    top: 15px !important;
    width: 158px !important;
    height: 98px !important;
  }
}

/* TRUE EOF 201: final lobby art placement and remove create-room pills. */
#lobby .game-card i,
#lobby .game-card i::before,
#lobby .game-card i::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: -6px !important;
  top: 50% !important;
  width: 225px !important;
  height: 138px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  z-index: 1 !important;
  opacity: 0.96 !important;
}

#lobby .game-card.dragon .lobby-card-stack small,
#lobby .game-card.dragon .lobby-card-stack::after {
  content: none !important;
  display: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 10px 16px rgba(92, 0, 24, 0.35)) !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    right: -18px !important;
    width: 196px !important;
    height: 120px !important;
  }
}

/* TRUE EOF 202: pin Dragon Tiger artwork to the right side of the lobby card. */
#lobby .game-card.dragon {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 58% 50%, rgba(255, 230, 120, 0.2), transparent 28%),
    radial-gradient(ellipse at 90% 30%, rgba(255, 81, 60, 0.36), transparent 38%),
    linear-gradient(90deg, #5d1712 0%, #9b281d 52%, #ee5835 100%) !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: 38% !important;
  right: -18px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
  opacity: 0.98 !important;
}

#lobby .game-card.dragon .lobby-card-stack::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px 0 -2px -10px !important;
  display: block !important;
  background-position: center right !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 10px 16px rgba(92, 0, 24, 0.32)) !important;
}

#lobby .game-card.dragon .lobby-card-stack::after,
#lobby .game-card.dragon .lobby-card-stack small {
  content: none !important;
  display: none !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    left: 40% !important;
    right: -22px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack::before {
    inset: 0 -2px 0 -18px !important;
  }
}

/* TRUE EOF 203: use a fixed right-side Dragon Tiger art box. */
#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 6px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 236px !important;
  height: 112px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  z-index: 1 !important;
  opacity: 0.98 !important;
}

#lobby .game-card.dragon .lobby-card-stack::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 9px 14px rgba(92, 0, 24, 0.34)) !important;
}

#lobby .game-card.dragon .lobby-card-stack::after,
#lobby .game-card.dragon .lobby-card-stack small {
  content: none !important;
  display: none !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  z-index: 3 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    right: -2px !important;
    width: 198px !important;
    height: 94px !important;
  }
}

/* TRUE EOF 204: render Dragon Tiger art directly on the right-side element. */
#lobby .game-card.dragon {
  overflow: hidden !important;
}

#lobby .game-card.dragon::before,
#lobby .game-card.dragon::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 8px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 224px !important;
  height: 118px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  z-index: 1 !important;
  opacity: 0.98 !important;
  pointer-events: none !important;
  background: url("./assets/embedded/css-42f021ede545d491.png") center center / contain no-repeat !important;
  filter: drop-shadow(0 10px 16px rgba(92, 0, 24, 0.36)) !important;
}

#lobby .game-card.dragon .lobby-card-stack::before,
#lobby .game-card.dragon .lobby-card-stack::after,
#lobby .game-card.dragon .lobby-card-stack small {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

#lobby .game-card.dragon span,
#lobby .game-card.dragon strong,
#lobby .game-card.dragon em {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    right: -2px !important;
    width: 188px !important;
    height: 102px !important;
  }
}

/* TRUE EOF 205: soften and blend Dragon Tiger lobby artwork. */
#lobby .game-card.dragon .lobby-card-stack {
  filter:
    blur(0.28px)
    saturate(0.94)
    contrast(0.94)
    drop-shadow(0 10px 16px rgba(92, 0, 24, 0.28)) !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 7%, rgba(0, 0, 0, 0.55) 18%, #000 34%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 7%, rgba(0, 0, 0, 0.55) 18%, #000 34%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%) !important;
  mask-composite: intersect !important;
}

/* TRUE EOF 206: stronger all-around feather for Dragon Tiger artwork. */
#lobby .game-card.dragon .lobby-card-stack {
  opacity: 0.93 !important;
  filter:
    blur(0.72px)
    saturate(0.9)
    contrast(0.9)
    drop-shadow(0 8px 14px rgba(92, 0, 24, 0.22)) !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 10%, rgba(0, 0, 0, 0.72) 24%, #000 38%, #000 68%, rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.18) 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.8) 26%, #000 42%, #000 62%, rgba(0, 0, 0, 0.78) 78%, rgba(0, 0, 0, 0.22) 90%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 10%, rgba(0, 0, 0, 0.72) 24%, #000 38%, #000 68%, rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.18) 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.8) 26%, #000 42%, #000 62%, rgba(0, 0, 0, 0.78) 78%, rgba(0, 0, 0, 0.22) 90%, transparent 100%) !important;
  mask-composite: intersect !important;
}

/* TRUE EOF 207: replace Dragon Tiger art with the supplied medallion, no blur. */
#lobby .game-card.dragon .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 30px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 122px !important;
  height: 122px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: url("./assets/embedded/css-9e33c991fd061dc3.png") center center / contain no-repeat !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#lobby .game-card.dragon .lobby-card-stack::before,
#lobby .game-card.dragon .lobby-card-stack::after,
#lobby .game-card.dragon .lobby-card-stack small {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

@media (max-width: 430px) {
  #lobby .game-card.dragon .lobby-card-stack {
    right: 24px !important;
    width: 112px !important;
    height: 112px !important;
  }
}

/* TRUE EOF 209: replace Hundred Niuniu lobby art with supplied bull icon. */
#lobby .game-card.hundred .lobby-card-stack {
  display: block !important;
  position: absolute !important;
  left: auto !important;
  right: 22px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 134px !important;
  height: 128px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  z-index: 1 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: url("./assets/embedded/css-0a819c84f7979500.png") center center / contain no-repeat !important;
  filter: drop-shadow(0 10px 14px rgba(0, 70, 35, 0.24)) !important;
}

#lobby .game-card.hundred .lobby-card-stack::before,
#lobby .game-card.hundred .lobby-card-stack::after,
#lobby .game-card.hundred .lobby-card-stack small {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
}

@media (max-width: 430px) {
  #lobby .game-card.hundred .lobby-card-stack {
    right: 16px !important;
    width: 124px !important;
    height: 118px !important;
  }
}

/* TRUE EOF 210: slightly smaller lobby card titles and remove subtitle stars. */
#lobby .game-card strong {
  font-size: 24px !important;
}

#lobby .game-card em::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 430px) {
  #lobby .game-card strong {
    font-size: 22px !important;
  }
}

/* TRUE EOF 211: reduce lobby game card height and fit contents. */
#lobby .game-card {
  min-height: 108px !important;
  padding-top: 18px !important;
  padding-bottom: 16px !important;
}

#lobby .game-card span {
  margin-bottom: 8px !important;
}

#lobby .game-card em {
  margin-top: 5px !important;
  line-height: 1.15 !important;
}

#lobby .game-card.hundred .lobby-card-stack,
#lobby .game-card.racing .lobby-card-stack,
#lobby .game-card.palace .lobby-card-stack,
#lobby .game-card.dragon .lobby-card-stack {
  max-height: 112px !important;
}

@media (max-width: 430px) {
  #lobby .game-card {
    min-height: 102px !important;
    padding-top: 15px !important;
    padding-bottom: 14px !important;
  }

  #lobby .game-card span {
    margin-bottom: 7px !important;
  }

  #lobby .game-card em {
    margin-top: 4px !important;
  }

  #lobby .game-card.hundred .lobby-card-stack,
  #lobby .game-card.racing .lobby-card-stack,
  #lobby .game-card.palace .lobby-card-stack,
  #lobby .game-card.dragon .lobby-card-stack {
    max-height: 104px !important;
  }
}

/* TRUE EOF 212: move lobby content up and compact game cards further. */
#lobby.lobby {
  padding-top: max(0px, calc(env(safe-area-inset-top) - 20px)) !important;
}

#lobby .lobby-title,
#lobby .game-grid {
  transform: translateY(-20px) !important;
}

#lobby .game-card {
  min-height: 98px !important;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

#lobby .game-card span {
  margin-bottom: 6px !important;
}

#lobby .game-card em {
  margin-top: 3px !important;
}

#lobby .game-card.hundred .lobby-card-stack,
#lobby .game-card.racing .lobby-card-stack,
#lobby .game-card.palace .lobby-card-stack,
#lobby .game-card.dragon .lobby-card-stack {
  max-height: 102px !important;
}

@media (max-width: 430px) {
  #lobby.lobby {
    padding-top: max(0px, calc(env(safe-area-inset-top) - 20px)) !important;
  }

  #lobby .game-card {
    min-height: 92px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  #lobby .game-card.hundred .lobby-card-stack,
  #lobby .game-card.racing .lobby-card-stack,
  #lobby .game-card.palace .lobby-card-stack,
  #lobby .game-card.dragon .lobby-card-stack {
    max-height: 94px !important;
  }
}


/* TRUE EOF 213: embed supplied crown artwork for the league bottom-nav icon. */
#lobby .bottom-nav button.league-main::before,
#clubPage .bottom-nav button.league-main::before,
#adminPage .bottom-nav button.league-main::before,
#lobby .bottom-nav button.league-main.active::before,
#clubPage .bottom-nav button.league-main.active::before,
#adminPage .bottom-nav button.league-main.active::before {
  content: "" !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 38px !important;
  margin: 0 0 7px !important;
  display: block !important;
  background: url("./assets/embedded/css-697f45fb3378c357.png") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
  filter: drop-shadow(0 4px 8px rgba(255, 192, 54, 0.38)) !important;
  z-index: 3 !important;
}

/* TRUE EOF 214: remove lobby welcome line space and let content move upward. */
#lobby .lobby-title {
  gap: 0 !important;
  margin-top: -8px !important;
  margin-bottom: 16px !important;
  min-height: 58px !important;
}

#lobby .lobby-title span {
  display: none !important;
}

#lobby .lobby-title h1 {
  margin-top: 0 !important;
}

/* TRUE EOF 215: reduce the four lobby game cards by another 20px. */
#lobby .game-grid {
  gap: 12px !important;
}

#lobby .game-card {
  min-height: 78px !important;
  padding-top: 9px !important;
  padding-bottom: 8px !important;
  border-radius: 18px !important;
}

#lobby .game-card span {
  margin-bottom: 4px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

#lobby .game-card strong {
  font-size: 29px !important;
  line-height: 1.05 !important;
}

#lobby .game-card em {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
}

#lobby .game-card.hundred .lobby-card-stack,
#lobby .game-card.racing .lobby-card-stack,
#lobby .game-card.palace .lobby-card-stack,
#lobby .game-card.dragon .lobby-card-stack {
  max-height: 82px !important;
  transform: translateY(-50%) scale(0.9) !important;
}

@media (max-width: 430px) {
  #lobby .game-grid {
    gap: 10px !important;
  }

  #lobby .game-card {
    min-height: 72px !important;
    padding-top: 8px !important;
    padding-bottom: 7px !important;
  }

  #lobby .game-card strong {
    font-size: 27px !important;
  }

  #lobby .game-card em {
    font-size: 12px !important;
  }

  #lobby .game-card.hundred .lobby-card-stack,
  #lobby .game-card.racing .lobby-card-stack,
  #lobby .game-card.palace .lobby-card-stack,
  #lobby .game-card.dragon .lobby-card-stack {
    max-height: 74px !important;
    transform: translateY(-50%) scale(0.84) !important;
  }
}

/* TRUE EOF 216: keep the lobby title visible after compacting the cards. */
#lobby .lobby-title {
  transform: translateY(0) !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  min-height: 64px !important;
  padding-top: 2px !important;
  overflow: visible !important;
}

#lobby .lobby-title h1 {
  line-height: 1.05 !important;
  overflow: visible !important;
}

#lobby .game-grid {
  transform: translateY(-12px) !important;
}

/* TRUE EOF 217: place lobby side divider lines directly under the title. */
#lobby .lobby-title::before,
#lobby .lobby-title::after {
  top: 52px !important;
  width: min(31vw, 132px) !important;
  height: 1px !important;
  opacity: 0.86 !important;
}

#lobby .lobby-title::before {
  left: 24px !important;
}

#lobby .lobby-title::after {
  right: 24px !important;
}

@media (max-width: 430px) {
  #lobby .lobby-title::before,
  #lobby .lobby-title::after {
    top: 50px !important;
    width: 29vw !important;
  }

  #lobby .lobby-title::before {
    left: 22px !important;
  }

  #lobby .lobby-title::after {
    right: 22px !important;
  }
}

/* TRUE EOF 218: align the center glow line with the title divider. */
#lobby .lobby-title h1::after {
  bottom: -7px !important;
  width: 248px !important;
  height: 2px !important;
}

@media (max-width: 430px) {
  #lobby .lobby-title h1::after {
    bottom: -6px !important;
    width: 232px !important;
  }
}

/* TRUE EOF 219: keep lobby artwork full sized after compacting cards. */
#lobby .game-card .lobby-card-stack {
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  max-height: none !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
}

#lobby .game-card.hundred .lobby-card-stack {
  right: 24px !important;
  width: 132px !important;
  height: 104px !important;
}

#lobby .game-card.racing .lobby-card-stack {
  right: 18px !important;
  width: 152px !important;
  height: 92px !important;
}

#lobby .game-card.palace .lobby-card-stack {
  right: 22px !important;
  width: 140px !important;
  height: 96px !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  right: 34px !important;
  width: 90px !important;
  height: 90px !important;
}

@media (max-width: 430px) {
  #lobby .game-card.hundred .lobby-card-stack {
    right: 16px !important;
    width: 118px !important;
    height: 92px !important;
  }

  #lobby .game-card.racing .lobby-card-stack {
    right: 12px !important;
    width: 136px !important;
    height: 82px !important;
  }

  #lobby .game-card.palace .lobby-card-stack {
    right: 16px !important;
    width: 124px !important;
    height: 84px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack {
    right: 24px !important;
    width: 82px !important;
    height: 82px !important;
  }
}

/* TRUE EOF 220: lower lobby card artwork so compact cards keep the image centered. */
#lobby .game-card.racing .lobby-card-stack {
  top: 61% !important;
  right: 10px !important;
  width: 166px !important;
  height: 98px !important;
}

#lobby .game-card.palace .lobby-card-stack {
  top: 61% !important;
  right: 10px !important;
  width: 154px !important;
  height: 98px !important;
}

#lobby .game-card.hundred .lobby-card-stack {
  top: 54% !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  top: 54% !important;
}

@media (max-width: 430px) {
  #lobby .game-card.racing .lobby-card-stack {
    top: 61% !important;
    right: 8px !important;
    width: 148px !important;
    height: 88px !important;
  }

  #lobby .game-card.palace .lobby-card-stack {
    top: 61% !important;
    right: 8px !important;
    width: 136px !important;
    height: 88px !important;
  }

  #lobby .game-card.hundred .lobby-card-stack,
  #lobby .game-card.dragon .lobby-card-stack {
    top: 54% !important;
  }
}

/* TRUE EOF 221: enlarge lobby card artwork to nearly match card height. */
#lobby .game-card.hundred .lobby-card-stack {
  top: 50% !important;
  right: 10px !important;
  width: 172px !important;
  height: 122px !important;
}

#lobby .game-card.racing .lobby-card-stack {
  top: 55% !important;
  right: 4px !important;
  width: 202px !important;
  height: 116px !important;
}

#lobby .game-card.palace .lobby-card-stack {
  top: 55% !important;
  right: 8px !important;
  width: 178px !important;
  height: 112px !important;
}

#lobby .game-card.dragon .lobby-card-stack {
  top: 50% !important;
  right: 18px !important;
  width: 118px !important;
  height: 118px !important;
}

@media (max-width: 430px) {
  #lobby .game-card.hundred .lobby-card-stack {
    right: 8px !important;
    width: 156px !important;
    height: 112px !important;
  }

  #lobby .game-card.racing .lobby-card-stack {
    right: 2px !important;
    width: 182px !important;
    height: 104px !important;
  }

  #lobby .game-card.palace .lobby-card-stack {
    right: 6px !important;
    width: 158px !important;
    height: 102px !important;
  }

  #lobby .game-card.dragon .lobby-card-stack {
    right: 14px !important;
    width: 104px !important;
    height: 104px !important;
  }
}

/* TRUE EOF 222: simplify league summary with centered ID and record entry. */
#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
}

#clubPage .club-league-summary .league-summary-name {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#clubPage .club-league-summary .league-summary-name strong {
  display: block !important;
  max-width: 132px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #fff !important;
}

#clubPage .club-league-summary .league-switch-select {
  width: 118px !important;
  max-width: 36vw !important;
  height: 28px !important;
  border: 1px solid rgba(255, 222, 100, 0.72) !important;
  border-radius: 999px !important;
  padding: 0 24px 0 10px !important;
  background:
    linear-gradient(180deg, rgba(65, 40, 172, 0.96), rgba(29, 19, 96, 0.96)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  outline: none !important;
  appearance: auto !important;
}

#clubPage .club-league-summary .league-summary-id {
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 164px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(16, 10, 60, 0.44) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-summary-id b {
  color: #ffdf63 !important;
  font-size: 13px !important;
  margin-left: 4px !important;
}

#clubPage .club-league-summary .league-summary-id i {
  display: inline-flex !important;
  margin-left: 10px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #7df7de !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

#clubPage .club-league-summary .league-join-more-btn {
  height: 34px !important;
  min-width: 58px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: linear-gradient(180deg, #fff5a8 0%, #f3c85c 35%, #c9861d 100%) !important;
  color: #1b0d00 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.65), 0 6px 14px rgba(0,0,0,0.22) !important;
}

#clubPage .club-league-summary .league-record-btn {
  justify-self: end !important;
  min-width: 64px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 225, 117, 0.82) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffe27a 0%, #d69720 100%) !important;
  color: #261300 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.24), inset 0 2px 4px rgba(255, 255, 255, 0.55) !important;
}

#clubPage .club-league-summary .league-summary-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#clubPage .club-league-summary .league-audit-btn,
#clubPage .club-league-summary .league-setting-entry-btn {
  position: relative !important;
  min-width: 58px !important;
  height: 34px !important;
  border: 1px solid rgba(157, 132, 255, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(91, 62, 202, 0.98), rgba(38, 23, 111, 0.98)) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#clubPage .club-league-summary .league-audit-btn.has-pending::after,
#clubPage .club-league-summary .league-setting-entry-btn.has-pending::after {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #fff1b7 !important;
  border-radius: 50% !important;
  background: #ff2e3d !important;
  box-shadow: 0 0 10px rgba(255, 46, 61, 0.86) !important;
}

#clubPage .club-league-summary .league-audit-btn i,
#clubPage .club-league-summary .league-setting-entry-btn i {
  display: none !important;
}

.league-audit-card {
  width: min(92vw, 420px) !important;
}

.league-audit-list {
  display: grid !important;
  gap: 8px !important;
  max-height: 52vh !important;
  overflow: auto !important;
  margin: 8px 0 12px !important;
}

.league-audit-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 54px 54px !important;
  gap: 7px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.league-audit-row i {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffe27a, #c47a14) !important;
  color: #201000 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.league-audit-row span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.league-audit-row small {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 10px !important;
}

.league-audit-row button {
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffe27a, #d4911e) !important;
  color: #211100 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.league-audit-row button.reject {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

.league-audit-empty {
  padding: 20px 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-align: center !important;
}

.league-settings-section {
  display: grid !important;
  gap: 7px !important;
}

.league-settings-section h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  color: #ffdf63 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.league-settings-section h3 b {
  display: grid !important;
  min-width: 20px !important;
  height: 20px !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #ff2e3d !important;
  color: #fff !important;
  font-size: 11px !important;
}

.league-settings-section p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(68px, 1fr) auto minmax(58px, 1fr) !important;
    gap: 6px !important;
    padding: 9px 10px !important;
  }

  #clubPage .club-league-summary .league-summary-name strong {
    max-width: 92px !important;
    font-size: 18px !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    min-width: 142px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  #clubPage .club-league-summary .league-record-btn {
    min-width: 56px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  #clubPage .club-league-summary .league-audit-btn,
  #clubPage .club-league-summary .league-setting-entry-btn {
    min-width: 52px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
}

/* TRUE EOF 223: keep league label at left and show only the ID in the center. */
#clubPage .club-league-summary .league-summary-name {
  gap: 7px !important;
}

#clubPage .club-league-summary .league-summary-name span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  color: #ffdc62 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-summary-id {
  min-width: 146px !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-summary-name {
    gap: 5px !important;
  }

  #clubPage .club-league-summary .league-summary-name span {
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-summary-name strong {
    max-width: 72px !important;
    font-size: 17px !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    min-width: 132px !important;
  }
}

/* TRUE EOF 224: all tables use unlimited rounds, so hide round count settings. */
.round-setting,
#roundOptions {
  display: none !important;
}

/* TRUE EOF 225: hide started-round badges on league table cards. */
#clubPage .club-table-top span {
  display: none !important;
}

/* TRUE EOF 226: move league table rule text onto the red tabletop. */
#clubPage .club-table-top small {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

#clubPage .club-table-card > em:empty {
  display: none !important;
}

/* TRUE EOF 227: custom table name input for league room creation. */
.table-name-group .league-name-input {
  width: 100% !important;
  height: 42px !important;
  border: 1px solid rgba(231, 182, 91, 0.62) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0e3d61 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.table-name-group .league-name-input::placeholder {
  color: rgba(14, 61, 97, 0.45) !important;
}

/* TRUE EOF 228: remove redundant title and intro blocks from the rule editor. */
#createTablePanel .rules-title-area,
#createTablePanel .create-card {
  display: none !important;
}

/* TRUE EOF 229: keep the owner operation panel visible on mobile browsers. */
.table-manage-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: rgba(3, 8, 18, 0.64) !important;
  backdrop-filter: blur(5px) !important;
  box-sizing: border-box !important;
}

.table-manage-card {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: min(330px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - 36px) !important;
  margin: auto !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 430px) {
  .table-manage-card {
    width: min(330px, calc(100vw - 32px)) !important;
    padding: 18px !important;
    gap: 9px !important;
  }

  .table-manage-card strong {
    font-size: 26px !important;
  }

.table-manage-card button {
    height: 41px !important;
  }
}

/* TRUE EOF 230: subtle six-digit room number watermark below the center brand. */
#room .table-brand .room-code {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(230, 214, 158, 0.58) !important;
  font-size: clamp(14px, 3.45vw, 18px) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 1px 1px rgba(0, 38, 25, 0.3) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#room .table-brand .room-code.hidden {
  display: none !important;
}

/* TRUE EOF 233: league table card centers the table name and short rule summary. */
#clubPage .club-table-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
}

#clubPage .club-table-top strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  transform: none !important;
}

#clubPage .club-table-top small {
  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.55) !important;
}

/* TRUE EOF 234: hide the unused center room header pill completely. */
#room .room-head #roomSub {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* TRUE EOF 235: compact rake settings for per-round commission. */
.rake-setting-group {
  gap: 8px !important;
}

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

.rake-options label {
  display: block !important;
}

.rake-options input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.rake-options span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(95, 156, 255, 0.62) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #174577 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.rake-options input:checked + span {
  border-color: rgba(231, 178, 61, 0.95) !important;
  background: linear-gradient(180deg, #fff0a5 0%, #f0bd42 52%, #c5831c 100%) !important;
  color: #211105 !important;
  box-shadow: 0 6px 14px rgba(210, 142, 27, 0.22) !important;
}

.rake-percent-box {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(116, 171, 255, 0.55) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

.rake-percent-box span,
.rake-percent-box em,
.rake-note {
  color: #08756e !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.rake-percent-box input {
  width: 100% !important;
  height: 28px !important;
  border: 1px solid rgba(231, 182, 91, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0e3d61 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.rake-percent-box input:disabled {
  color: rgba(14, 61, 97, 0.42) !important;
  background: rgba(255, 255, 255, 0.58) !important;
}

.rake-note {
  display: block !important;
  line-height: 1.35 !important;
}

/* TRUE EOF 236: center replay entry and recent round stats modal. */
#room .room-head > div:nth-child(4) {
  display: none !important;
}

#room .room-head #replayBtn {
  position: absolute !important;
  left: 50% !important;
  top: 16px !important;
  z-index: 9 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 78px !important;
  height: 34px !important;
  padding: 0 22px !important;
  border: 2px solid #e8be4e !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(21, 137, 74, 0.98), rgba(3, 67, 42, 0.98)) !important;
  color: #fff7b8 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  box-shadow:
    0 3px 0 #6d3e09,
    0 0 0 1px rgba(255, 244, 154, 0.42) inset,
    0 0 13px rgba(255, 210, 83, 0.28) !important;
  transform: translateX(-50%) !important;
}

#room .replay-modal.hidden {
  display: none !important;
}

#room .replay-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10020 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background: rgba(4, 6, 20, 0.62) !important;
  backdrop-filter: blur(5px) !important;
}

#room .replay-card {
  position: relative !important;
  width: min(90vw, 430px) !important;
  max-height: 78vh !important;
  overflow: auto !important;
  padding: 22px 16px 18px !important;
  border: 1px solid rgba(238, 195, 92, 0.92) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(116, 83, 255, 0.28), transparent 40%),
    linear-gradient(180deg, rgba(38, 30, 111, 0.97), rgba(13, 19, 58, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

#room .replay-card > span {
  display: block !important;
  color: #ffe074 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

#room .replay-card > strong {
  display: block !important;
  margin: 4px 0 14px !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(113, 70, 255, 0.65) !important;
}

#room .replay-close {
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
}

#room .replay-empty {
  padding: 28px 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#room .replay-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#room .replay-summary span,
#room .replay-round {
  border: 1px solid rgba(139, 120, 255, 0.35) !important;
  border-radius: 12px !important;
  background: rgba(10, 14, 50, 0.56) !important;
}

#room .replay-summary span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  color: #ffcf69 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#room .replay-summary b {
  max-width: 68px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#room .replay-rounds {
  display: grid !important;
  gap: 10px !important;
}

#room .replay-round {
  padding: 10px !important;
}

#room .replay-round header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  color: #ffe27a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

#room .replay-round header.time-only {
  justify-content: flex-end !important;
}

#room .replay-round header small {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#room .replay-round > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#room .replay-round em {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 2px 6px !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-style: normal !important;
}

#room .replay-round em b {
  overflow: hidden !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#room .replay-round em small {
  grid-column: 1 / 2 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#room .replay-round em strong {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#room .replay-summary .win,
#room .replay-round .win strong {
  color: #ffd265 !important;
}

#room .replay-summary .lose,
#room .replay-round .lose strong {
  color: #83ddff !important;
}

/* TRUE EOF 237: keep the replay button clickable above decorative room header layers. */
#room .room-head {
  pointer-events: auto !important;
}

#room .room-head-art,
#room .room-head-art *,
#room .room-head::before,
#room .room-head::after {
  pointer-events: none !important;
}

#room .room-head #replayBtn {
  z-index: 80 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#room .replay-modal,
#room .replay-card,
#room .replay-close {
  pointer-events: auto !important;
}

/* TRUE EOF 241: brighten the Sangong replay statistics sheet. */
html body.theme-pearl-blue #room .replay-modal {
  background: rgba(53, 78, 156, 0.24) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
}

html body.theme-pearl-blue #room .replay-card {
  border: 1px solid rgba(255, 226, 139, 0.96) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.78), transparent 40%),
    linear-gradient(155deg, rgba(220, 232, 255, 0.99) 0%, rgba(190, 208, 251, 0.99) 52%, rgba(168, 187, 241, 0.99) 100%) !important;
  color: #1d376d !important;
  box-shadow:
    0 18px 46px rgba(45, 67, 145, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(111, 139, 214, 0.16) !important;
  scrollbar-color: rgba(91, 119, 193, 0.56) transparent !important;
}

html body.theme-pearl-blue #room .replay-card > span {
  color: #a96a00 !important;
  text-shadow: none !important;
}

html body.theme-pearl-blue #room .replay-card > strong {
  color: #203d7b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body.theme-pearl-blue #room .replay-close {
  border: 1px solid rgba(83, 108, 183, 0.22) !important;
  background: rgba(255, 255, 255, 0.46) !important;
  color: #435a9e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html body.theme-pearl-blue #room .replay-empty {
  color: rgba(35, 59, 116, 0.72) !important;
}

html body.theme-pearl-blue #room .replay-summary span,
html body.theme-pearl-blue #room .replay-round {
  border-color: rgba(76, 105, 184, 0.24) !important;
  background: rgba(238, 244, 255, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 5px 14px rgba(71, 94, 165, 0.08) !important;
}

html body.theme-pearl-blue #room .replay-summary span {
  color: #a66400 !important;
}

html body.theme-pearl-blue #room .replay-summary b,
html body.theme-pearl-blue #room .replay-round em b {
  color: #203867 !important;
}

html body.theme-pearl-blue #room .replay-round header {
  color: #8b5b09 !important;
}

html body.theme-pearl-blue #room .replay-round header small {
  color: rgba(38, 56, 105, 0.66) !important;
}

html body.theme-pearl-blue #room .replay-round em {
  border: 1px solid rgba(96, 121, 191, 0.14) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

html body.theme-pearl-blue #room .replay-round em small {
  color: rgba(47, 65, 111, 0.62) !important;
}

html body.theme-pearl-blue #room .replay-summary .win,
html body.theme-pearl-blue #room .replay-round .win strong {
  color: #b86a00 !important;
}

html body.theme-pearl-blue #room .replay-summary .lose,
html body.theme-pearl-blue #room .replay-round .lose strong {
  color: #087eb9 !important;
}

/* TRUE EOF 238: compact personal records panel for recent three days. */
.personal-record-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10030 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(5, 5, 28, 0.68) !important;
  backdrop-filter: blur(5px) !important;
}

.personal-record-card {
  position: relative !important;
  width: min(92vw, 520px) !important;
  max-height: 78vh !important;
  overflow: auto !important;
  padding: 18px 14px 14px !important;
  border: 1px solid rgba(255, 219, 104, 0.88) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(46, 31, 132, 0.98), rgba(14, 13, 62, 0.98)) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.48), inset 0 0 22px rgba(117, 77, 255, 0.18) !important;
  color: #fff !important;
}

.personal-record-close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.personal-record-card > span {
  display: block !important;
  color: #ffe06a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.personal-record-card > strong {
  display: block !important;
  margin: 3px 0 10px !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.personal-record-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 8px 0 10px !important;
  padding: 5px !important;
  border: 1px solid rgba(139, 120, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 55, 0.54) !important;
}

.personal-record-tabs button {
  height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.personal-record-tabs button.active {
  background: linear-gradient(180deg, #ffe98a, #d89520) !important;
  color: #1c1100 !important;
  box-shadow: 0 4px 12px rgba(255, 203, 75, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.personal-record-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 34px !important;
  margin-bottom: 10px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(139, 120, 255, 0.36) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 55, 0.55) !important;
  color: #ffd86f !important;
  font-weight: 950 !important;
}

.personal-record-total.lose b {
  color: #81ddff !important;
}

.personal-record-list {
  display: grid !important;
  gap: 7px !important;
}

.personal-record-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 3px 8px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(140, 124, 255, 0.22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.personal-record-row div {
  min-width: 0 !important;
}

.personal-record-row strong {
  display: block !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.personal-record-row span,
.personal-record-row em,
.personal-record-row small {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.personal-record-row em,
.personal-record-row small {
  grid-column: 1 / 2 !important;
}

.personal-record-row b {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 4 !important;
  min-width: 48px !important;
  color: #ffd267 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  text-align: right !important;
}

.personal-record-row b.lose {
  color: #80dcff !important;
}

.personal-record-empty {
  padding: 28px 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* TRUE EOF 239: make personal record panel full-screen on mobile. */
.personal-record-overlay {
  align-items: stretch !important;
  justify-items: stretch !important;
  place-items: stretch !important;
  padding: 0 !important;
  background: rgba(5, 4, 25, 0.82) !important;
}

.personal-record-card {
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 82, 255, 0.36), transparent 34%),
    linear-gradient(180deg, #30208c 0%, #191158 45%, #0d0d3a 100%) !important;
}

.personal-record-close {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: 14px !important;
  z-index: 2 !important;
}

.personal-record-tabs {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
}

.personal-record-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 2px 0 18px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* TRUE EOF 241: desktop admin uses left navigation categories. */
.admin-shell {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  gap: 22px !important;
  padding: 26px !important;
  color: var(--text) !important;
  background:
    radial-gradient(ellipse at 74% 10%, rgba(255, 211, 107, 0.18), transparent 30%),
    radial-gradient(ellipse at 24% 30%, rgba(36, 197, 129, 0.22), transparent 36%),
    linear-gradient(180deg, #172141, #26304d 58%, #151327) !important;
}

.admin-sidebar {
  position: sticky !important;
  top: 26px !important;
  align-self: start !important;
  display: grid !important;
  gap: 18px !important;
  min-height: calc(100vh - 52px) !important;
  padding: 20px !important;
  border: 1px solid rgba(129, 105, 255, 0.42) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(31, 28, 93, 0.94), rgba(15, 18, 55, 0.94)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 36px rgba(0, 0, 0, 0.24) !important;
}

.admin-brand {
  display: grid !important;
  gap: 4px !important;
}

.admin-brand span {
  color: #ffdc62 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-brand strong {
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

.admin-brand em {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.admin-nav {
  display: grid !important;
  gap: 10px !important;
}

.admin-nav button,
.admin-client-link,
.admin-main-head button {
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.admin-nav button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.76) !important;
  text-align: left !important;
}

.admin-nav button.active,
.admin-client-link,
.admin-main-head button {
  background: linear-gradient(180deg, #ffe08a, #c2842f) !important;
  color: #261500 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.admin-client-link {
  align-self: end !important;
}

.admin-main {
  min-width: 0 !important;
}

.admin-main-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 14px !important;
}

.admin-main-head span {
  color: #ffdc62 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-main-head h1 {
  max-width: none !important;
  color: #fff !important;
  font-size: 32px !important;
}

.admin-login-panel {
  display: grid !important;
  gap: 14px !important;
  width: min(420px, 92vw) !important;
  margin: 12vh auto 0 !important;
  padding: 24px !important;
  border: 1px solid rgba(129, 105, 255, 0.58) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(35, 29, 107, 0.98), rgba(15, 18, 55, 0.98)) !important;
}

.admin-login-panel span,
.admin-card span {
  color: #ffdc62 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-login-panel strong {
  color: #fff !important;
  font-size: 26px !important;
}

.admin-login-panel input,
.admin-form-row input {
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #14203a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.admin-login-panel button,
.admin-form-row button {
  height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #ffe08a, #c2842f) !important;
  color: #261500 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.admin-login-panel p {
  min-height: 18px !important;
  color: #ffdc62 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.admin-workspace {
  display: grid !important;
  gap: 14px !important;
}

.admin-tab-panel {
  display: grid !important;
  gap: 14px !important;
}

.admin-form-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.admin-password-row {
  max-width: 520px !important;
}

.admin-card {
  min-height: 0 !important;
}

@media (max-width: 860px) {
  .admin-shell {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .admin-sidebar {
    position: static !important;
    min-height: 0 !important;
  }
}

/* TRUE EOF 240: league settings is a full-page owner console with second-level pages. */
.league-settings-fullpage {
  place-items: stretch !important;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
}

.league-settings-fullpage .league-settings-card {
  width: min(560px, 100%) !important;
  min-height: calc(100vh - 28px) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden auto !important;
}

.league-settings-fullpage .league-settings-home {
  display: grid !important;
}

.league-settings-fullpage .league-settings-card .ghost {
  align-self: end !important;
  margin-top: auto !important;
}

@media (max-width: 430px) {
  .league-settings-fullpage {
    padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .league-settings-fullpage .league-settings-card {
    min-height: calc(100vh - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    border-radius: 18px !important;
  }

  .league-settings-fullpage .league-settings-tile {
    min-height: 104px !important;
    padding: 16px !important;
  }
}

/* TRUE EOF 242: clean up admin into a formal two-column management layout. */
body:has(.admin-shell) {
  margin: 0 !important;
  background: #11182f !important;
}

.admin-shell {
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 58% 8%, rgba(116, 82, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #10233b 0%, #29304c 48%, #15162c 100%) !important;
}

.admin-shell.admin-logged-out {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 24px !important;
}

.admin-shell.admin-logged-out .admin-sidebar,
.admin-shell.admin-logged-out .admin-workspace {
  display: none !important;
}

.admin-shell.admin-logged-out .admin-main {
  width: 100% !important;
}

.admin-shell.admin-logged-out .admin-login-panel {
  width: min(420px, calc(100vw - 32px)) !important;
  margin: 0 auto !important;
}

.admin-shell.admin-logged-in .admin-login-panel {
  display: none !important;
}

.admin-sidebar {
  position: static !important;
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 26px 20px !important;
  border: 0 !important;
  border-right: 1px solid rgba(131, 105, 255, 0.28) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 82, 255, 0.24), transparent 38%),
    linear-gradient(180deg, rgba(28, 22, 86, 0.98), rgba(12, 12, 46, 0.98)) !important;
}

.admin-brand {
  align-content: start !important;
  min-height: 150px !important;
}

.admin-brand strong {
  margin-top: 18px !important;
  font-size: 38px !important;
}

.admin-nav {
  align-self: start !important;
}

.admin-nav button {
  justify-content: start !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.admin-nav button.active {
  border-color: rgba(255, 219, 112, 0.62) !important;
  background: linear-gradient(180deg, #ffe08a, #c9902d) !important;
}

.admin-client-link {
  align-self: end !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}

.admin-main {
  height: 100vh !important;
  overflow: auto !important;
  padding: 28px 34px !important;
}

.admin-workspace {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.admin-main-head {
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.admin-main-head h1 {
  margin: 5px 0 0 !important;
  font-size: 30px !important;
}

.admin-main-head button {
  width: auto !important;
  min-width: 94px !important;
  padding: 0 16px !important;
}

.admin-note {
  margin-bottom: 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(6, 12, 28, 0.48) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.admin-tab-panel {
  gap: 16px !important;
}

.admin-card,
.admin-users {
  border: 1px solid rgba(132, 107, 255, 0.26) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(255, 218, 109, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(28, 91, 77, 0.78), rgba(49, 43, 124, 0.74)) !important;
}

.admin-card {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  padding: 20px !important;
}

.admin-card strong {
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.admin-card em {
  max-width: 520px !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.admin-form-row {
  width: min(540px, 100%) !important;
  grid-template-columns: minmax(0, 1fr) 108px !important;
  margin-top: 12px !important;
}

.admin-users {
  padding: 18px !important;
}

.admin-users-head {
  margin-bottom: 12px !important;
}

.admin-user-search {
  display: grid !important;
  grid-template-columns: minmax(0, 360px) !important;
  margin: 0 0 12px !important;
}

.admin-user-search input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 219, 112, 0.22) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #14203a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.admin-user-search input:focus {
  border-color: rgba(255, 219, 112, 0.78) !important;
  box-shadow:
    0 0 0 3px rgba(255, 211, 107, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.admin-league-cell {
  display: grid !important;
  gap: 2px !important;
  align-content: center !important;
}

.admin-league-cell small {
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.admin-actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.admin-row-action.danger {
  background: linear-gradient(180deg, #ff8787, #d83c49) !important;
  color: #fff !important;
}

.admin-table {
  overflow: auto !important;
}

.admin-row {
  min-width: 840px !important;
}

@media (max-width: 980px) {
  .admin-shell.admin-logged-in {
    grid-template-columns: 1fr !important;
  }

  .admin-sidebar {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(131, 105, 255, 0.28) !important;
  }

  .admin-brand {
    min-height: 0 !important;
  }

  .admin-brand strong,
  .admin-brand em {
    display: none !important;
  }

  .admin-nav {
    display: flex !important;
  }

  .admin-main {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
  }
}

/* TRUE EOF 243: admin tabs must show only the selected category and keep side nav compact. */
.admin-tab-panel.hidden {
  display: none !important;
}

/* TRUE EOF 258: multi-league selector and per-league points in club header. */
#clubPage .club-league-summary .league-switch-select {
  width: 118px !important;
  max-width: 36vw !important;
  height: 28px !important;
  border: 1px solid rgba(255, 222, 100, 0.72) !important;
  border-radius: 999px !important;
  padding: 0 20px 0 10px !important;
  background: linear-gradient(180deg, rgba(65, 40, 172, 0.96), rgba(29, 19, 96, 0.96)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  outline: none !important;
}

#clubPage .club-league-summary .league-summary-id {
  min-width: 190px !important;
}

#clubPage .club-league-summary .league-summary-id i {
  display: inline-flex !important;
  margin-left: 10px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #7df7de !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  #clubPage .club-league-summary .league-switch-select {
    width: 86px !important;
    height: 26px !important;
    font-size: 13px !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    min-width: 136px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-summary-id i {
    margin-left: 6px !important;
    padding-left: 6px !important;
  }

  #clubPage .club-league-summary .league-join-more-btn {
    min-width: 46px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }
}

.admin-sidebar {
  align-content: start !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 14px !important;
}

.admin-brand {
  min-height: 74px !important;
}

.admin-brand strong {
  margin-top: 4px !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

.admin-brand em {
  margin-top: -2px !important;
}

.admin-nav {
  margin-top: 0 !important;
}

/* TRUE EOF 260: make the league name a compact dropdown with switch and join actions. */
#clubPage .club-league-summary {
  overflow: visible !important;
}

#clubPage .club-league-summary .league-summary-name {
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}

#clubPage .club-league-summary .league-switch-menu {
  position: relative !important;
  width: 156px !important;
  max-width: 38vw !important;
  color: #fff !important;
}

#clubPage .club-league-summary .league-switch-menu summary {
  list-style: none !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 6px !important;
  min-height: 42px !important;
  padding: 5px 12px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(72, 44, 174, 0.88), rgba(24, 15, 87, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 14px rgba(0,0,0,0.18) !important;
}

#clubPage .club-league-summary .league-switch-menu summary::-webkit-details-marker {
  display: none !important;
}

#clubPage .club-league-summary .league-switch-menu summary::after {
  content: "▾" !important;
  color: #ffdf63 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-menu[open] summary::after {
  transform: rotate(180deg) !important;
}

#clubPage .club-league-summary .league-switch-menu summary span {
  grid-column: 1 / -1 !important;
  color: #ffdc55 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-menu summary strong {
  display: block !important;
  max-width: 112px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
}

#clubPage .club-league-summary .league-switch-list {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 5px) !important;
  z-index: 60 !important;
  width: 154px !important;
  max-height: 238px !important;
  overflow-y: auto !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 218, 96, 0.66) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(38, 25, 120, 0.98), rgba(16, 10, 62, 0.98)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

#clubPage .club-league-summary .league-switch-list button {
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 0 4px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  padding: 4px 7px !important;
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
  text-align: left !important;
  font-weight: 900 !important;
}

#clubPage .club-league-summary .league-switch-list button span {
  display: block !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
}

#clubPage .club-league-summary .league-switch-list button small {
  display: block !important;
  margin-top: 1px !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 9px !important;
}

#clubPage .club-league-summary .league-switch-list button.active {
  border-color: rgba(255, 218, 96, 0.78) !important;
  background: linear-gradient(180deg, rgba(255, 213, 82, 0.34), rgba(122, 73, 8, 0.28)) !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join {
  margin-bottom: 0 !important;
  min-height: 30px !important;
  padding: 4px 7px !important;
  text-align: left !important;
  color: #1a0d00 !important;
  background: linear-gradient(180deg, #fff4a3 0%, #f0c052 42%, #c88417 100%) !important;
  border-color: rgba(255, 230, 120, 0.9) !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-menu {
    width: 124px !important;
    max-width: 31vw !important;
  }

  #clubPage .club-league-summary .league-switch-menu summary {
    min-height: 38px !important;
    padding: 5px 9px !important;
  }

  #clubPage .club-league-summary .league-switch-menu summary strong {
    max-width: 82px !important;
    font-size: 17px !important;
  }

  #clubPage .club-league-summary .league-switch-list {
    width: 142px !important;
    max-height: 210px !important;
  }
}

/* TRUE EOF 263: lighter league dropdown, no nested chunky buttons. */
#clubPage .club-league-summary .league-switch-menu {
  width: 142px !important;
  max-width: 34vw !important;
}

#clubPage .club-league-summary .league-switch-menu summary {
  min-height: 38px !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(129, 94, 255, 0.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(69, 43, 179, 0.98), rgba(36, 21, 132, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 16px rgba(109, 77, 255, 0.22) !important;
}

#clubPage .club-league-summary .league-switch-menu summary span {
  font-size: 9px !important;
  color: #ffe16b !important;
}

#clubPage .club-league-summary .league-switch-menu summary strong {
  max-width: 92px !important;
  font-size: 18px !important;
}

#clubPage .club-league-summary .league-switch-list {
  width: 150px !important;
  padding: 6px !important;
  border-radius: 13px !important;
  border-color: rgba(134, 101, 255, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(44, 27, 137, 0.98), rgba(18, 10, 72, 0.98)) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

#clubPage .club-league-summary .league-switch-list button {
  min-height: 28px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  padding: 4px 7px !important;
}

#clubPage .club-league-summary .league-switch-list button.active {
  border-color: rgba(255, 218, 96, 0.62) !important;
  background: linear-gradient(90deg, rgba(255, 218, 96, 0.18), rgba(255, 218, 96, 0.04)) !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  margin-top: 3px !important;
  border: 1px dashed rgba(255, 224, 104, 0.62) !important;
  color: #ffe36d !important;
  background: rgba(255, 218, 96, 0.08) !important;
  text-align: center !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #fff2a1, #d79a23) !important;
  color: #241000 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join span {
  color: #ffe36d !important;
  font-size: 12px !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-menu {
    width: 116px !important;
    max-width: 29vw !important;
  }

  #clubPage .club-league-summary .league-switch-menu summary {
    min-height: 36px !important;
    padding: 5px 9px !important;
  }

  #clubPage .club-league-summary .league-switch-menu summary strong {
    max-width: 74px !important;
    font-size: 16px !important;
  }

  #clubPage .club-league-summary .league-switch-list {
    width: 140px !important;
  }
}

/* TRUE EOF 264: compact league picker with no nested-card look or scrollbars. */
#clubPage .club-league-summary .league-switch-menu {
  width: 132px !important;
  max-width: 32vw !important;
}

#clubPage .club-league-summary .league-switch-menu summary {
  min-height: 34px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(140, 104, 255, 0.7) !important;
  background:
    linear-gradient(180deg, rgba(74, 48, 190, 0.98), rgba(39, 22, 136, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 5px 12px rgba(0,0,0,0.18) !important;
}

#clubPage .club-league-summary .league-switch-menu summary span {
  font-size: 9px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-menu summary strong {
  max-width: 82px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-list {
  box-sizing: border-box !important;
  width: 132px !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(128, 96, 255, 0.58) !important;
  background: rgba(24, 14, 88, 0.98) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.34) !important;
}

#clubPage .club-league-summary .league-switch-list button {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  min-height: 24px !important;
  margin: 0 0 3px !important;
  padding: 3px 6px !important;
  border-radius: 7px !important;
  border: 0 !important;
  background: transparent !important;
}

#clubPage .club-league-summary .league-switch-list button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-list button small {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.54) !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-list button.active {
  background: linear-gradient(90deg, rgba(255, 218, 96, 0.24), rgba(255, 218, 96, 0.04)) !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join {
  justify-content: center !important;
  min-height: 24px !important;
  margin: 3px 0 0 !important;
  border: 1px solid rgba(255, 221, 94, 0.58) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(255, 218, 96, 0.2), rgba(255, 218, 96, 0.08)) !important;
  color: #ffe36d !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join i {
  width: 12px !important;
  height: 12px !important;
  font-size: 10px !important;
}

#clubPage .club-league-summary .league-switch-list .league-dropdown-join span {
  flex: 0 0 auto !important;
  color: #ffe36d !important;
  font-size: 11px !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-menu,
  #clubPage .club-league-summary .league-switch-list {
    width: 118px !important;
  }

  #clubPage .club-league-summary .league-switch-menu summary strong {
    max-width: 72px !important;
    font-size: 16px !important;
  }
}

/* TRUE EOF 265: left slide-in league picker. */
#clubPage .club-league-summary .league-switch-shell {
  position: relative !important;
  width: 142px !important;
  max-width: 34vw !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 5px 26px 5px 12px !important;
  border: 1px solid rgba(136, 98, 255, 0.82) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(255,255,255,0.16), transparent 30%),
    linear-gradient(180deg, #4c2dd0 0%, #32159b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 7px 18px rgba(23, 9, 92, 0.38) !important;
  color: #fff !important;
  text-align: left !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  display: block !important;
  color: #ffdf5e !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  display: block !important;
  max-width: 92px !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-switch-trigger i {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid #ffe26b !important;
  transform: translateY(-35%) !important;
}

#clubPage .club-league-summary .league-drawer-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  background: rgba(4, 2, 30, 0.42) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

#clubPage .club-league-summary .league-switch-drawer {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 81 !important;
  box-sizing: border-box !important;
  width: min(50vw, 260px) !important;
  min-width: 178px !important;
  padding: max(16px, env(safe-area-inset-top)) 10px 16px !important;
  border-right: 1px solid rgba(255, 222, 104, 0.62) !important;
  background:
    radial-gradient(circle at 20% 8%, rgba(126, 87, 255, 0.38), transparent 28%),
    linear-gradient(180deg, rgba(40, 23, 128, 0.98), rgba(15, 9, 58, 0.99)) !important;
  box-shadow: 16px 0 34px rgba(0,0,0,0.38) !important;
  transform: translateX(-104%) !important;
  transition: transform 0.24s ease !important;
}

#clubPage .club-league-summary .league-switch-shell.open .league-drawer-mask {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#clubPage .club-league-summary .league-switch-shell.open .league-switch-drawer {
  transform: translateX(0) !important;
}

#clubPage .club-league-summary .league-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  padding: 0 2px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

#clubPage .club-league-summary .league-drawer-head span {
  color: #ffdf65 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#clubPage .club-league-summary .league-drawer-head button {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-drawer-list {
  display: grid !important;
  gap: 7px !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 2px !important;
}

#clubPage .club-league-summary .league-drawer-list button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(145, 116, 255, 0.45) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,0.08) !important;
}

#clubPage .club-league-summary .league-drawer-list button.active {
  border-color: rgba(255, 222, 95, 0.95) !important;
  background:
    linear-gradient(90deg, rgba(255, 216, 83, 0.32), rgba(255, 216, 83, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}

#clubPage .club-league-summary .league-drawer-list button span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-drawer-list button small {
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 10px !important;
}

#clubPage .club-league-summary .league-switch-drawer .league-dropdown-join {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 38px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255, 232, 124, 0.88) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fff08d, #d99a27 70%, #a66713) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 16px rgba(0,0,0,0.22) !important;
  color: #261300 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#clubPage .club-league-summary .league-switch-drawer .league-dropdown-join i {
  display: grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(68, 31, 0, 0.18) !important;
  font-size: 13px !important;
  font-style: normal !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-shell {
    width: 126px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    max-width: 78px !important;
    font-size: 16px !important;
  }

  #clubPage .club-league-summary .league-switch-drawer {
    width: 50vw !important;
    min-width: 172px !important;
  }
}

/* TRUE EOF 266: one-line polished league switch entry. */
#clubPage .club-league-summary .league-switch-shell {
  width: 160px !important;
  max-width: 38vw !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 5px 26px 5px 10px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 104, 255, 0.92) !important;
  background:
    linear-gradient(90deg, rgba(93, 50, 220, 0.98), rgba(55, 23, 155, 0.98) 58%, rgba(42, 18, 124, 0.98)),
    radial-gradient(circle at 35% 0%, rgba(255,255,255,0.25), transparent 34%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -8px 16px rgba(16, 5, 72, 0.34),
    0 6px 14px rgba(19, 8, 78, 0.3) !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  flex: 0 0 auto !important;
  display: inline !important;
  color: #ffdf62 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  flex: 1 1 auto !important;
  display: inline !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#clubPage .club-league-summary .league-switch-trigger span::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  background: rgba(255, 255, 255, 0.28);
}

#clubPage .club-league-summary .league-switch-trigger i {
  right: 10px !important;
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  border-top-width: 5px !important;
  border-top-color: #ffe56f !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-shell {
    width: 142px !important;
    max-width: 39vw !important;
  }

  #clubPage .club-league-summary .league-switch-trigger {
    min-height: 31px !important;
    padding-left: 8px !important;
    gap: 5px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 8px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 15px !important;
  }
}

/* TRUE EOF 267: shrink league switch text by about half. */
#clubPage .club-league-summary .league-switch-trigger span {
  font-size: 5px !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  font-size: 8px !important;
}

#clubPage .club-league-summary .league-switch-trigger span::after {
  height: 8px !important;
  margin-left: 5px !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 5px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 8px !important;
  }
}

/* TRUE EOF 268: raise league switch text by 5px. */
#clubPage .club-league-summary .league-switch-trigger span {
  font-size: 10px !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  font-size: 13px !important;
}

@media (max-width: 430px) {
  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 13px !important;
  }
}

/* TRUE EOF 269: redesigned league settings center. */
.league-settings-fullpage {
  align-items: stretch !important;
  justify-items: stretch !important;
  padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(111, 79, 255, 0.26), transparent 35%),
    linear-gradient(180deg, rgba(9, 6, 48, 0.96), rgba(6, 4, 30, 0.98)) !important;
}

.league-settings-fullpage .league-settings-card {
  width: min(560px, 100%) !important;
  min-height: calc(100vh - 22px) !important;
  margin: 0 auto !important;
  padding: 14px 14px 16px !important;
  border: 1px solid rgba(255, 217, 99, 0.6) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 217, 100, 0.14), transparent 26%),
    radial-gradient(circle at 22% 0%, rgba(110, 75, 255, 0.34), transparent 36%),
    linear-gradient(180deg, #2d208c 0%, #17105c 42%, #120b48 100%) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

.league-settings-hero {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 6px 42px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.league-settings-hero span {
  color: #ffe065 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.league-settings-hero strong {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  text-shadow: 0 3px 12px rgba(123, 84, 255, 0.5) !important;
}

.league-settings-hero em {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.league-settings-close {
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.league-settings-home {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.league-settings-tile {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px 1fr auto !important;
  grid-template-areas:
    "icon title action"
    "icon desc action" !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  min-height: 78px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(150, 119, 255, 0.54) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(255, 217, 94, 0.12), rgba(255, 217, 94, 0) 34%),
    linear-gradient(135deg, rgba(53, 38, 144, 0.98), rgba(27, 18, 86, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 10px 20px rgba(0,0,0,0.2) !important;
}

.league-settings-tile i {
  grid-area: icon !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 238, 143, 0.78) !important;
  background:
    radial-gradient(circle at 35% 20%, #fff5b4, transparent 28%),
    linear-gradient(180deg, #ffd96a, #c9891d) !important;
  color: #2b1500 !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
}

.league-settings-tile span {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.league-settings-tile span b {
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #ef3349 !important;
  color: #fff !important;
  font-size: 11px !important;
}

.league-settings-tile em {
  grid-area: desc !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.league-settings-tile strong {
  grid-area: action !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 44px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffe36f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.league-settings-card .ghost {
  width: 100% !important;
  height: 42px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.82) !important;
  box-shadow: none !important;
}

.league-settings-subpage {
  margin-top: 12px !important;
}

.league-settings-subpage h3 {
  margin-top: 8px !important;
  color: #fff !important;
  font-size: 22px !important;
}

.league-settings-back {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

@media (min-width: 520px) {
  .league-settings-home {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* TRUE EOF 270: team commissions and league point flow. */
#clubPage .league-summary-id .league-points-log-btn {
  border: 0 !important;
  margin-left: 8px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 221, 88, 0.16) !important;
  color: #68ffdf !important;
  font: inherit !important;
  font-weight: 950 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 221, 88, 0.28) !important;
}

/* TRUE EOF 271: rebuild the league page from the supplied purple source, without touching bottom nav. */
#clubPage.club-page {
  position: relative !important;
  min-height: 100vh !important;
  padding: 16px 12px 126px !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(99, 74, 255, 0.25), transparent 30%),
    radial-gradient(circle at 50% 86%, rgba(108, 54, 255, 0.22), transparent 35%),
    linear-gradient(180deg, #080a2b 0%, #0c0f45 45%, #120a4d 100%) !important;
}

#clubPage.club-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  opacity: 0.72 !important;
}

#clubPage.club-page::after {
  display: none !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 860px !important;
  min-height: calc(100vh - 148px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(138px, 1.08fr) minmax(146px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  margin: 4px 0 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(107, 106, 255, 0.5) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(ellipse at 74% 12%, rgba(255, 222, 120, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(31, 29, 103, 0.96), rgba(15, 16, 72, 0.96)) !important;
  box-shadow:
    inset 0 0 24px rgba(88, 91, 255, 0.18),
    0 0 16px rgba(54, 70, 255, 0.18) !important;
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .club-league-summary .league-summary-name {
  min-width: 0 !important;
  height: 52px !important;
  align-items: center !important;
  justify-content: stretch !important;
}

#clubPage .club-league-summary .league-switch-shell {
  width: 100% !important;
  max-width: none !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  width: 100% !important;
  height: 52px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 13px !important;
  border: 2px solid rgba(92, 112, 255, 0.92) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #2a217e 0%, #1a1959 100%) !important;
  box-shadow:
    inset 0 0 16px rgba(97, 103, 255, 0.35),
    0 0 10px rgba(62, 84, 255, 0.18) !important;
  color: #fff !important;
  overflow: hidden !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  flex: 0 0 auto !important;
  color: #ffd94b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-switch-trigger span::after {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 18px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  background: rgba(183, 190, 255, 0.45) !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-switch-trigger i {
  flex: 0 0 auto !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid #dce0ff !important;
  background: transparent !important;
  box-shadow: none !important;
}

#clubPage .club-league-summary .league-summary-id {
  justify-self: stretch !important;
  min-width: 0 !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(95, 101, 196, 0.5) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(15, 18, 68, 0.95), rgba(11, 14, 52, 0.95)) !important;
  color: #d7dcff !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-summary-id b {
  color: #ffd54d !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#clubPage .club-league-summary .league-points-log-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  margin-left: 4px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(55, 255, 232, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(14, 54, 90, 0.52) !important;
  color: #2ef4f1 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#clubPage .club-league-summary .league-summary-actions {
  display: contents !important;
}

#clubPage .club-league-summary .league-setting-entry-btn,
#clubPage .club-league-summary .league-record-btn {
  min-width: 74px !important;
  height: 52px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-setting-entry-btn {
  border: 1px solid rgba(135, 153, 255, 0.8) !important;
  background: linear-gradient(180deg, #38479d 0%, #212b73 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 14px rgba(187, 202, 255, 0.24),
    0 0 12px rgba(75, 100, 255, 0.16) !important;
}

#clubPage .club-league-summary .league-record-btn {
  border: 1px solid #ffe597 !important;
  background: linear-gradient(180deg, #ffefaa 0%, #e1b14d 55%, #b7761b 100%) !important;
  color: #352100 !important;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.4),
    0 0 12px rgba(255, 205, 94, 0.18) !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 14px !important;
  padding: 8px !important;
  border: 1px solid rgba(85, 95, 255, 0.45) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(17, 20, 76, 0.9), rgba(13, 16, 61, 0.92)) !important;
  box-shadow:
    inset 0 0 18px rgba(73, 93, 255, 0.22),
    0 0 12px rgba(63, 90, 255, 0.14) !important;
}

#clubPage .club-game-tabs button {
  position: relative !important;
  min-width: 0 !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #c6caef !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 1px !important;
  height: 22px !important;
  transform: translateY(-50%) !important;
  background: rgba(134, 148, 255, 0.28) !important;
}

#clubPage .club-game-tabs button.active {
  border: 1px solid rgba(255, 232, 149, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 30%),
    linear-gradient(180deg, #fff0a4 0%, #e9b94a 52%, #c78417 100%) !important;
  color: #241200 !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.66),
    0 8px 18px rgba(0, 0, 0, 0.24),
    0 0 14px rgba(255, 203, 78, 0.22) !important;
}

#clubPage .club-list {
  position: relative !important;
  min-height: calc(100vh - 288px) !important;
  padding: 20px 14px 28px !important;
  border: 2px solid rgba(100, 110, 255, 0.72) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(116, 90, 255, 0.38), transparent 24%),
    radial-gradient(circle at 50% 76%, rgba(130, 48, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(20, 28, 104, 0.94), rgba(14, 18, 78, 0.95)) !important;
  box-shadow:
    inset 0 0 48px rgba(72, 94, 255, 0.24),
    inset 0 0 60px rgba(164, 81, 255, 0.08),
    0 0 16px rgba(88, 108, 255, 0.2) !important;
}

#clubPage .club-list::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}

#clubPage .club-list::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #64a1ff, #d56dff, #64a1ff, transparent) !important;
  box-shadow: 0 0 14px #7688ff !important;
}

#clubPage .club-list > * {
  position: relative !important;
  z-index: 1 !important;
}

#clubPage .club-empty {
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 56px 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#clubPage .club-empty strong {
  font-size: 30px !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 16px rgba(183, 115, 255, 0.48) !important;
}

#clubPage .club-empty strong::after {
  content: "" !important;
  display: block !important;
  width: min(70vw, 430px) !important;
  height: 1px !important;
  margin: 18px auto 0 !important;
  background: linear-gradient(90deg, transparent, rgba(192, 120, 255, 0.75), #fff, rgba(192, 120, 255, 0.75), transparent) !important;
}

#clubPage .club-empty span {
  max-width: 260px !important;
  color: #d6dbff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
}

#clubPage .club-empty span:first-of-type {
  color: #d6dbff !important;
  font-size: 15px !important;
}

#clubPage .league-create-card,
#clubPage .league-entry-card,
#clubPage .club-table-card {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 560px) {
  #clubPage.club-page {
    padding: 12px 8px 118px !important;
  }

  #clubPage .club-league-summary {
    grid-template-columns: minmax(112px, 1fr) minmax(118px, auto) 48px 58px !important;
    gap: 6px !important;
    min-height: 60px !important;
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #clubPage .club-league-summary .league-summary-name,
  #clubPage .club-league-summary .league-switch-trigger,
  #clubPage .club-league-summary .league-summary-id,
  #clubPage .club-league-summary .league-setting-entry-btn,
  #clubPage .club-league-summary .league-record-btn {
    height: 42px !important;
    border-radius: 14px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger {
    padding: 0 8px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 9px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span::after {
    height: 14px !important;
    margin-left: 5px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 13px !important;
  }

  #clubPage .club-league-summary .league-summary-id {
    gap: 4px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-summary-id b,
  #clubPage .club-league-summary .league-points-log-btn {
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-points-log-btn {
    height: 20px !important;
    padding: 0 5px !important;
  }

  #clubPage .club-league-summary .league-setting-entry-btn,
  #clubPage .club-league-summary .league-record-btn {
    min-width: 0 !important;
    padding: 0 5px !important;
    font-size: 12px !important;
  }

  #clubPage .club-game-tabs {
    margin-bottom: 10px !important;
    padding: 6px !important;
    border-radius: 20px !important;
  }

  #clubPage .club-game-tabs button {
    height: 36px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  #clubPage .club-list {
    min-height: calc(100vh - 242px) !important;
    border-radius: 24px !important;
    padding: 16px 10px 24px !important;
  }

  #clubPage .club-empty {
    min-height: 230px !important;
    padding-top: 44px !important;
  }

  #clubPage .club-empty strong {
    font-size: 26px !important;
  }
}

.league-team-page p {
  margin: 4px 0 10px !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.league-team-page p b {
  color: #ffe56f !important;
}

.league-team-form {
  grid-template-columns: 1.25fr 0.7fr auto !important;
}

.league-team-list,
.league-flow-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
  max-height: 58vh !important;
  overflow: auto !important;
  padding-right: 3px !important;
}

.league-team-row,
.league-flow-row {
  display: grid !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(130, 103, 255, 0.4) !important;
  border-radius: 12px !important;
  background: rgba(14, 10, 68, 0.72) !important;
  color: #fff !important;
}

.league-team-row {
  grid-template-columns: 36px 1fr auto !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
}

.league-team-row.direct {
  border-color: rgba(255, 220, 90, 0.7) !important;
  background: linear-gradient(90deg, rgba(255, 216, 82, 0.13), rgba(32, 20, 105, 0.8)) !important;
}

.league-team-row i {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffe079, #c9871e) !important;
  color: #241000 !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.league-team-row span,
.league-flow-row span {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.league-team-row small,
.league-flow-row small {
  color: rgba(255,255,255,0.58) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.league-team-row b {
  color: #ffe56f !important;
  font-size: 16px !important;
}

.league-points-flow-card {
  width: min(520px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 18px 14px !important;
  border: 1px solid rgba(255, 217, 99, 0.68) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #30218d 0%, #171052 100%) !important;
}

.league-points-flow-card > span {
  color: #ffe56f !important;
}

.league-points-flow-card > strong {
  color: #fff !important;
}

.league-flow-row {
  grid-template-columns: 1fr auto !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
}

.league-flow-row b {
  color: #ffe56f !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.league-flow-row.lose b {
  color: #72d8ff !important;
}

/* TRUE EOF 273: final source-faithful league page override. Keep bottom nav untouched. */
#clubPage.club-page {
  min-height: 100vh !important;
  padding: 20px 18px 112px !important;
  font-family: "Microsoft YaHei", Arial, sans-serif !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(99,74,255,.25), transparent 30%),
    radial-gradient(circle at 50% 85%, rgba(108,54,255,.22), transparent 35%),
    linear-gradient(180deg,#080a2b 0%,#0c0f45 45%,#120a4d 100%) !important;
}

#clubPage.club-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  pointer-events: none !important;
}

#clubPage > .topbar {
  display: none !important;
}

#clubPage .club-panel {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 110px 110px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 94px !important;
  padding: 14px !important;
  margin: 0 0 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(107,106,255,.5) !important;
  background: linear-gradient(180deg,rgba(31,29,103,.95),rgba(15,16,72,.95)) !important;
  box-shadow:
    inset 0 0 24px rgba(88,91,255,.18),
    0 0 16px rgba(54,70,255,.18) !important;
  overflow: visible !important;
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .league-summary-name,
#clubPage .league-switch-shell,
#clubPage .league-switch-trigger,
#clubPage .league-summary-id,
#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  height: 64px !important;
  min-height: 64px !important;
  border-radius: 22px !important;
}

#clubPage .league-summary-name {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#clubPage .league-switch-shell {
  width: 100% !important;
  max-width: none !important;
}

#clubPage .league-switch-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  border: 2px solid rgba(78,110,255,.95) !important;
  background: linear-gradient(180deg,#2a217e 0%,#1a1959 100%) !important;
  box-shadow:
    inset 0 0 16px rgba(97,103,255,.35),
    0 0 10px rgba(62,84,255,.18) !important;
  overflow: hidden !important;
}

#clubPage .league-switch-trigger::before {
  content: "" !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  border: 2px solid #9fa7ff !important;
  border-radius: 50% !important;
  box-shadow: 0 9px 0 -5px #1a1959, 0 10px 0 -4px #9fa7ff !important;
}

#clubPage .league-switch-trigger span {
  flex: 0 0 auto !important;
  color: #ffd94b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#clubPage .league-switch-trigger span::after {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 24px !important;
  margin: 0 0 -7px 10px !important;
  background: rgba(183,190,255,.45) !important;
}

#clubPage .league-switch-trigger strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage .league-switch-trigger i {
  width: 0 !important;
  height: 0 !important;
  flex: 0 0 auto !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 8px solid #c9d0ff !important;
}

#clubPage .league-summary-id {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(95,101,196,.5) !important;
  background: linear-gradient(180deg,rgba(15,18,68,.95),rgba(11,14,52,.95)) !important;
  color: #d7dcff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage .league-summary-id b {
  color: #ffd54d !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

#clubPage .league-points-log-btn {
  height: auto !important;
  min-width: 0 !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(170,175,255,.28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2ef4f1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

#clubPage .league-summary-actions {
  display: contents !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  width: 110px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#clubPage .league-setting-entry-btn {
  color: #fff !important;
  border: 1px solid rgba(135,153,255,.8) !important;
  background: linear-gradient(180deg,#38479d 0%,#212b73 100%) !important;
  box-shadow:
    inset 0 0 14px rgba(187,202,255,.24),
    0 0 12px rgba(75,100,255,.16) !important;
}

#clubPage .league-record-btn {
  color: #352100 !important;
  border: 1px solid #ffe597 !important;
  background: linear-gradient(180deg,#ffefaa 0%,#e1b14d 55%,#b7761b 100%) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.4),
    0 0 12px rgba(255,205,94,.18) !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 12px !important;
  margin: 0 0 18px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(75,99,255,.9) !important;
  background: linear-gradient(180deg,rgba(26,34,96,.98),rgba(12,16,62,.98)) !important;
  box-shadow:
    inset 0 0 18px rgba(73,93,255,.25),
    0 0 12px rgba(63,90,255,.16) !important;
}

#clubPage .club-game-tabs button {
  height: 78px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #bfc5ef !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  position: relative !important;
  white-space: nowrap !important;
}

#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 34px !important;
  background: rgba(134,148,255,.28) !important;
}

#clubPage .club-game-tabs button.active {
  border-radius: 18px !important;
  border: 2px solid rgba(241,174,255,.9) !important;
  color: #fff !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),transparent 24%),
    linear-gradient(180deg,#c05bff 0%,#942beb 58%,#6617d1 100%) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.16),
    0 0 16px rgba(183,88,255,.55) !important;
}

#clubPage .club-list {
  min-height: 860px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 32px !important;
  border: 2px solid rgba(100,110,255,.88) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(116,90,255,.42), transparent 24%),
    radial-gradient(circle at 50% 76%, rgba(130,48,255,.18), transparent 34%),
    linear-gradient(180deg,rgba(20,28,104,.96),rgba(14,18,78,.96)) !important;
  box-shadow:
    inset 0 0 48px rgba(72,94,255,.24),
    inset 0 0 60px rgba(164,81,255,.08),
    0 0 16px rgba(88,108,255,.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

#clubPage .club-list::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  opacity: .6 !important;
  pointer-events: none !important;
}

#clubPage .club-list::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,transparent,#64a1ff,#d56dff,#64a1ff,transparent) !important;
  box-shadow: 0 0 14px #7688ff !important;
  pointer-events: none !important;
}

#clubPage .club-list > * {
  position: relative !important;
  z-index: 1 !important;
}

#clubPage .club-empty {
  min-height: 860px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 86px 20px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#clubPage .club-empty::before {
  content: "10   K" !important;
  width: 190px !important;
  height: 190px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 42px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(149,121,255,.4) !important;
  box-shadow: inset 0 0 0 14px rgba(150,111,255,.36), 0 0 14px rgba(158,106,255,.34) !important;
  color: rgba(230,224,255,.78) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
}

#clubPage .club-empty strong {
  display: block !important;
  margin: 0 !important;
  color: transparent !important;
  background: linear-gradient(180deg,#ffffff 0%,#f1e8ff 48%,#bb9cff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 14px rgba(183,115,255,.45) !important;
  font-size: 54px !important;
  font-weight: 900 !important;
  letter-spacing: 6px !important;
  line-height: 1.12 !important;
}

#clubPage .club-empty strong::after {
  content: "" !important;
  display: block !important;
  width: 470px !important;
  max-width: 72vw !important;
  height: 1px !important;
  margin: 20px auto 24px !important;
  background: linear-gradient(90deg,transparent,rgba(192,120,255,.75),#fff,rgba(192,120,255,.75),transparent) !important;
}

#clubPage .club-empty span {
  display: block !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  color: #cfd5ff !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

#clubPage .club-empty span:nth-of-type(1) {
  margin-bottom: 28px !important;
  color: #d6dbff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

@media (max-width: 780px) {
  #clubPage .club-league-summary {
    grid-template-columns: 1fr 1fr !important;
  }

  #clubPage .league-summary-id {
    grid-column: span 2 !important;
    order: 3 !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    width: 100% !important;
  }

  #clubPage .club-game-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #clubPage .club-game-tabs button {
    border-radius: 16px !important;
    background: rgba(255,255,255,.02) !important;
  }

  #clubPage .club-game-tabs button:not(:last-child)::after {
    display: none !important;
  }

  #clubPage .club-list,
  #clubPage .club-empty {
    min-height: 720px !important;
  }

  #clubPage .club-empty strong {
    font-size: 42px !important;
  }
}

@media (max-width: 520px) {
  #clubPage.club-page {
    padding: 14px 10px 100px !important;
  }

  #clubPage .club-league-summary {
    grid-template-columns: 1fr !important;
  }

  #clubPage .league-summary-id {
    grid-column: auto !important;
  }

  #clubPage .league-summary-name,
  #clubPage .league-switch-shell,
  #clubPage .league-switch-trigger,
  #clubPage .league-summary-id,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    height: 58px !important;
    min-height: 58px !important;
  }

  #clubPage .league-switch-trigger span,
  #clubPage .league-switch-trigger strong,
  #clubPage .league-summary-id {
    font-size: 16px !important;
  }

  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn {
    font-size: 18px !important;
  }

  #clubPage .club-empty strong {
    font-size: 36px !important;
    letter-spacing: 3px !important;
  }

  #clubPage .club-empty span:nth-of-type(1) {
    font-size: 20px !important;
  }

  #clubPage .club-empty span {
    font-size: 16px !important;
  }
}

/* TRUE EOF 275: final compact mobile league source layout. */
#clubPage.club-page {
  padding: 12px 8px 100px !important;
}

#clubPage .club-panel {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(112px, 1fr) minmax(82px, .78fr) 58px 58px !important;
  gap: 8px !important;
  min-height: 64px !important;
  padding: 8px !important;
  margin: 0 0 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

#clubPage .league-summary-name,
#clubPage .league-switch-shell,
#clubPage .league-switch-trigger,
#clubPage .league-summary-id,
#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 14px !important;
}

#clubPage .league-switch-trigger {
  gap: 5px !important;
  padding: 0 7px !important;
}

#clubPage .league-switch-trigger::before {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-width: 1.5px !important;
  box-shadow: none !important;
}

#clubPage .league-switch-trigger span {
  font-size: 9px !important;
  line-height: 1 !important;
}

#clubPage .league-switch-trigger span::after {
  display: none !important;
}

#clubPage .league-switch-trigger strong {
  font-size: 12px !important;
  line-height: 1 !important;
}

#clubPage .league-switch-trigger i {
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  border-top-width: 5px !important;
}

#clubPage .league-summary-id {
  grid-column: auto !important;
  order: initial !important;
  gap: 2px !important;
  padding: 0 5px !important;
  font-size: 0 !important;
}

#clubPage .league-summary-id::before {
  content: "ID:" !important;
  color: #d7dcff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

#clubPage .league-summary-id b {
  font-size: 11px !important;
}

#clubPage .league-points-log-btn {
  display: none !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  padding: 0 !important;
  font-size: 11px !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 6px !important;
  margin: 0 0 10px !important;
  border-radius: 16px !important;
}

#clubPage .club-game-tabs button {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transform: none !important;
}

#clubPage .club-game-tabs button:not(:last-child)::after {
  display: block !important;
  height: 20px !important;
}

#clubPage .club-list {
  min-height: calc(100vh - 198px) !important;
  margin-top: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

#clubPage .club-empty {
  min-height: calc(100vh - 198px) !important;
  padding: 44px 14px 0 !important;
}

#clubPage .club-empty::before {
  width: 112px !important;
  height: 112px !important;
  margin-bottom: 28px !important;
  font-size: 17px !important;
  letter-spacing: 6px !important;
  box-shadow: inset 0 0 0 10px rgba(150,111,255,.34), 0 0 12px rgba(158,106,255,.34) !important;
}

#clubPage .club-empty strong {
  font-size: 28px !important;
  letter-spacing: 3px !important;
}

#clubPage .club-empty strong::after {
  width: 78% !important;
  margin: 14px auto 18px !important;
}

#clubPage .club-empty span:nth-of-type(1) {
  margin-bottom: 18px !important;
  font-size: 16px !important;
}

#clubPage .club-empty span {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* TRUE EOF 276: polish league top bar sizing and order. */
#clubPage .club-league-summary {
  grid-template-columns: 132px minmax(122px, 1fr) 58px 58px !important;
  gap: 6px !important;
  min-height: 52px !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#clubPage .league-summary-name {
  grid-column: 1 !important;
}

#clubPage .league-summary-id {
  grid-column: 2 !important;
}

#clubPage .league-setting-entry-btn {
  grid-column: 3 !important;
}

#clubPage .league-record-btn {
  grid-column: 4 !important;
}

#clubPage .league-summary-name,
#clubPage .league-switch-shell,
#clubPage .league-switch-trigger,
#clubPage .league-summary-id,
#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 13px !important;
}

#clubPage .league-switch-trigger {
  display: grid !important;
  grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr) 7px !important;
  gap: 4px !important;
  padding: 0 7px !important;
}

#clubPage .league-switch-trigger::before {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

#clubPage .league-switch-trigger span {
  font-size: 9px !important;
  white-space: nowrap !important;
}

#clubPage .league-switch-trigger strong {
  font-size: 11px !important;
  max-width: 42px !important;
}

#clubPage .league-switch-trigger i {
  border-left-width: 4px !important;
  border-right-width: 4px !important;
  border-top-width: 5px !important;
}

#clubPage .league-summary-id {
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  text-overflow: clip !important;
}

#clubPage .league-summary-id::before {
  content: "联盟ID:" !important;
  font-size: 10px !important;
}

#clubPage .league-summary-id b {
  font-size: 11px !important;
}

#clubPage .league-points-log-btn {
  display: inline-flex !important;
  height: 20px !important;
  padding: 0 0 0 5px !important;
  border-left: 1px solid rgba(170,175,255,.28) !important;
  color: #2ef4f1 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  padding: 0 !important;
  font-size: 11px !important;
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: 128px minmax(108px, 1fr) 52px 52px !important;
    gap: 5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    font-size: 10px !important;
  }

  #clubPage .league-summary-id {
    padding: 0 5px !important;
  }

  #clubPage .league-points-log-btn {
    font-size: 9px !important;
  }
}

/* TRUE EOF 277 FINAL: force league header to match the two-row reference. */
#clubPage .club-panel {
  padding-top: 10px !important;
}

#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(196px, 1.08fr) minmax(250px, 1.32fr) 104px 112px !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(100%, 824px) !important;
  min-height: 94px !important;
  margin: 0 auto 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(103,105,255,.72) !important;
  border-radius: 26px !important;
  background: radial-gradient(circle at 52% -10%, rgba(128,82,255,.38), transparent 42%), linear-gradient(180deg, rgba(45,34,135,.96), rgba(26,19,93,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px rgba(18,8,72,.42) !important;
  overflow: visible !important;
}

#clubPage .league-summary-name { grid-column: 1 !important; height: 56px !important; min-width: 0 !important; }
#clubPage .league-switch-shell { width: 100% !important; height: 100% !important; }
#clubPage .league-switch-trigger {
  display: grid !important;
  grid-template-columns: 34px auto minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 14px !important;
  border: 2px solid rgba(94,126,255,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(64,59,194,.94), rgba(38,28,132,.98)) !important;
  box-shadow: inset 0 0 14px rgba(103,134,255,.32), 0 0 18px rgba(94,95,255,.24) !important;
}
#clubPage .league-switch-trigger::before {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #b6b9ff !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 42%, transparent 0 34%, #b6b9ff 36% 41%, transparent 43%), linear-gradient(#b6b9ff,#b6b9ff) 50% 82% / 20px 3px no-repeat !important;
  box-shadow: 0 0 10px rgba(170,175,255,.38) !important;
}
#clubPage .league-switch-trigger span {
  color: #ffe85f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
#clubPage .league-switch-trigger strong {
  max-width: none !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#clubPage .league-switch-trigger i {
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #d7d4ff !important;
}

#clubPage .league-summary-id {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(93,94,184,.62) !important;
  border-radius: 18px !important;
  background: rgba(12,11,54,.72) !important;
  color: #fff !important;
  font-size: 0 !important;
  font-style: normal !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#clubPage .league-summary-id::before {
  content: "联盟ID:" !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
#clubPage .league-summary-id b {
  color: #ffe75a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}
#clubPage .league-points-log-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  margin-left: 8px !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(183,188,255,.34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31f8f2 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#clubPage .league-summary-actions { display: contents !important; }
#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
#clubPage .league-setting-entry-btn {
  grid-column: 3 !important;
  border: 1px solid rgba(149,171,255,.78) !important;
  background: linear-gradient(180deg, #5f70d7, #263184) !important;
  color: #fff !important;
}
#clubPage .league-record-btn {
  grid-column: 4 !important;
  border: 1px solid rgba(255,231,134,.9) !important;
  background: linear-gradient(180deg, #fff19e 0%, #e7af35 50%, #b87917 100%) !important;
  color: #251100 !important;
}
#clubPage .league-setting-entry-btn::before { content: "⚙" !important; }
#clubPage .league-record-btn::before { content: "🏆" !important; }

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(100%, 824px) !important;
  min-height: 84px !important;
  margin: 0 auto 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(72,99,255,.86) !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 50% -20%, rgba(83,62,221,.42), transparent 44%), linear-gradient(180deg, rgba(31,26,112,.96), rgba(16,13,72,.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(81,110,255,.42), 0 12px 24px rgba(13,7,64,.34) !important;
}
#clubPage .club-game-tabs button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #d8d9ff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  transform: none !important;
  box-shadow: none !important;
}
#clubPage .club-game-tabs button::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 23px !important;
}
#clubPage .club-game-tabs button[data-club-game="bairenniuniu"]::before { content: "🃏" !important; }
#clubPage .club-game-tabs button[data-club-game="benchiBaoma"]::before { content: "🚙" !important; }
#clubPage .club-game-tabs button[data-club-game="sangong"]::before { content: "🎲" !important; }
#clubPage .club-game-tabs button[data-club-game="longhudou"]::before { content: "🐉" !important; }
#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  display: block !important;
  width: 1px !important;
  height: 30px !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(180deg, transparent, rgba(155,160,255,.44), transparent) !important;
}
#clubPage .club-game-tabs button.active {
  border: 2px solid rgba(235,139,255,.8) !important;
  background: linear-gradient(180deg, #d65cff, #8421e7 58%, #6016ba) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 20px rgba(195,86,255,.48) !important;
}

@media (max-width: 640px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(130px, 1fr) minmax(128px, 1fr) 62px 66px !important;
    gap: 7px !important;
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }
  #clubPage .league-summary-name,
  #clubPage .league-switch-shell,
  #clubPage .league-switch-trigger,
  #clubPage .league-summary-id,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 12px !important;
  }
  #clubPage .league-switch-trigger {
    grid-template-columns: 20px auto minmax(0, 1fr) 8px !important;
    gap: 4px !important;
    padding: 0 7px !important;
  }
  #clubPage .league-switch-trigger::before {
    width: 17px !important;
    height: 17px !important;
    border-width: 1.5px !important;
  }
  #clubPage .league-switch-trigger span { font-size: 10px !important; }
  #clubPage .league-switch-trigger strong { font-size: 13px !important; }
  #clubPage .league-summary-id {
    gap: 4px !important;
    padding: 0 6px !important;
  }
  #clubPage .league-summary-id::before { font-size: 10px !important; }
  #clubPage .league-summary-id b { font-size: 11px !important; }
  #clubPage .league-points-log-btn {
    height: 18px !important;
    margin-left: 2px !important;
    padding-left: 5px !important;
    font-size: 10px !important;
  }
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    gap: 2px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }
  #clubPage .club-game-tabs {
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }
  #clubPage .club-game-tabs button {
    gap: 5px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 3px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
  #clubPage .club-game-tabs button::before {
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: minmax(118px, 1fr) minmax(106px, 1fr) 50px 54px !important;
    gap: 5px !important;
    padding: 6px !important;
  }
  #clubPage .league-switch-trigger span { font-size: 9px !important; }
  #clubPage .league-switch-trigger strong { font-size: 12px !important; }
  #clubPage .league-summary-id::before {
    content: "ID:" !important;
    font-size: 9px !important;
  }
  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn { font-size: 9px !important; }
  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn { font-size: 10px !important; }
  #clubPage .club-game-tabs button {
    gap: 3px !important;
    font-size: 11px !important;
  }
  #clubPage .club-game-tabs button::before { font-size: 14px !important; }
}

/* TRUE EOF 278: fix league header ordering with a locked 3-part flex layout. */
#clubPage .club-league-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(100%, 824px) !important;
  min-height: 94px !important;
  margin: 0 auto 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(103,105,255,.72) !important;
  border-radius: 26px !important;
  background: radial-gradient(circle at 52% -10%, rgba(128,82,255,.38), transparent 42%), linear-gradient(180deg, rgba(45,34,135,.96), rgba(26,19,93,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px rgba(18,8,72,.42) !important;
  overflow: visible !important;
}

#clubPage .league-summary-name {
  order: 1 !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 0 !important;
  height: 56px !important;
}

#clubPage .league-summary-id {
  order: 2 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 330px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(93,94,184,.62) !important;
  border-radius: 18px !important;
  background: rgba(12,11,54,.72) !important;
  font-size: 0 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage .league-summary-id::before {
  content: "联盟ID:" !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#clubPage .league-summary-id b {
  flex: 0 0 auto !important;
  color: #ffe75a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

#clubPage .league-points-log-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  margin: 0 0 0 8px !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(183,188,255,.34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31f8f2 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

#clubPage .league-summary-actions {
  order: 3 !important;
  flex: 0 0 224px !important;
  width: 224px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  height: 56px !important;
  min-width: 0 !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  flex: 0 0 104px !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  #clubPage .club-league-summary {
    gap: 6px !important;
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage .league-summary-name {
    flex-basis: 132px !important;
    width: 132px !important;
    height: 42px !important;
  }

  #clubPage .league-summary-id {
    flex: 1 1 116px !important;
    min-width: 116px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    gap: 4px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
  }

  #clubPage .league-summary-id::before {
    font-size: 10px !important;
  }

  #clubPage .league-summary-id b {
    font-size: 11px !important;
  }

  #clubPage .league-points-log-btn {
    height: 18px !important;
    margin-left: 2px !important;
    padding-left: 5px !important;
    font-size: 10px !important;
  }

  #clubPage .league-summary-actions {
    flex-basis: 116px !important;
    width: 116px !important;
    gap: 6px !important;
    height: 42px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    flex-basis: 55px !important;
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 3px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    gap: 5px !important;
    padding: 6px !important;
  }

  #clubPage .league-summary-name {
    flex-basis: 118px !important;
    width: 118px !important;
  }

  #clubPage .league-summary-id {
    min-width: 104px !important;
    padding: 0 4px !important;
  }

  #clubPage .league-summary-id::before {
    content: "ID:" !important;
    font-size: 9px !important;
  }

  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn {
    font-size: 9px !important;
  }

  #clubPage .league-summary-actions {
    flex-basis: 104px !important;
    width: 104px !important;
    gap: 4px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    flex-basis: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    font-size: 9px !important;
  }
}

/* TRUE EOF 279: league header uses one deterministic grid row plus icon tabs. */
#clubPage .club-league-summary {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.25fr) 104px 112px !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(100%, 824px) !important;
  min-height: 94px !important;
  margin: 0 auto 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(112, 109, 255, .78) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(137, 95, 255, .52), transparent 44%),
    linear-gradient(180deg, rgba(45, 34, 135, .98), rgba(25, 18, 91, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 28px rgba(18, 8, 72, .42) !important;
  overflow: visible !important;
}

#clubPage .club-league-summary.hidden {
  display: none !important;
}

#clubPage .club-league-summary > * {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#clubPage .club-league-summary .league-summary-name {
  grid-column: 1 !important;
  width: auto !important;
  height: 56px !important;
}

#clubPage .club-league-summary .league-switch-shell,
#clubPage .club-league-summary .league-switch-trigger {
  width: 100% !important;
  height: 56px !important;
}

#clubPage .club-league-summary .league-switch-trigger {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(112, 134, 255, .88) !important;
  background:
    radial-gradient(circle at 48% 10%, rgba(128, 98, 255, .62), transparent 58%),
    linear-gradient(180deg, rgba(74, 54, 202, .96), rgba(38, 25, 123, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 14px rgba(92, 78, 255, .32) !important;
  color: #fff !important;
  overflow: hidden !important;
}

#clubPage .club-league-summary .league-switch-trigger::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  border: 2px solid rgba(207, 204, 255, .84) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .13), 0 0 8px rgba(159, 143, 255, .25) !important;
}

#clubPage .club-league-summary .league-switch-trigger span {
  display: inline !important;
  color: #ffe75a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage .club-league-summary .league-switch-trigger span::after {
  content: "  |" !important;
  color: rgba(255, 255, 255, .36) !important;
  font-weight: 700 !important;
}

#clubPage .club-league-summary .league-switch-trigger strong {
  display: inline !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#clubPage .club-league-summary .league-switch-trigger i {
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid #ffe75a !important;
}

#clubPage .league-summary-id {
  grid-column: 2 !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(93, 94, 184, .62) !important;
  border-radius: 18px !important;
  background: rgba(12, 11, 54, .72) !important;
  color: #fff !important;
  font-size: 0 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage .league-summary-id::before {
  content: "联盟ID:" !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

#clubPage .league-summary-id b {
  color: #ffe75a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

#clubPage .league-points-log-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  margin: 0 0 0 4px !important;
  padding: 0 0 0 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(183, 188, 255, .36) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31f8f2 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-setting-entry-placeholder,
#clubPage .league-record-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
}

#clubPage .league-setting-entry-btn,
#clubPage .league-record-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#clubPage .league-setting-entry-btn {
  grid-column: 3 !important;
  border: 1px solid rgba(149, 171, 255, .82) !important;
  background: linear-gradient(180deg, #5f70d7, #263184) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 18px rgba(14, 9, 64, .34) !important;
}

#clubPage .league-setting-entry-placeholder {
  grid-column: 3 !important;
  visibility: hidden !important;
}

#clubPage .league-record-btn {
  grid-column: 4 !important;
  border: 1px solid rgba(255, 231, 134, .9) !important;
  background: linear-gradient(180deg, #fff19e 0%, #e7af35 50%, #b87917 100%) !important;
  color: #251100 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 10px 18px rgba(74, 39, 0, .32) !important;
}

#clubPage .league-setting-entry-btn::before {
  content: "⚙" !important;
}

#clubPage .league-record-btn::before {
  content: "🏆" !important;
}

#clubPage .club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(100%, 824px) !important;
  min-height: 86px !important;
  margin: 0 auto 18px !important;
  padding: 14px !important;
  border: 1px solid rgba(87, 104, 255, .82) !important;
  border-radius: 26px !important;
  background: rgba(19, 16, 75, .72) !important;
  box-shadow: inset 0 0 24px rgba(65, 78, 255, .22), 0 10px 24px rgba(17, 10, 71, .28) !important;
  overflow: hidden !important;
}

#clubPage .club-game-tabs button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 58px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: rgba(236, 232, 255, .82) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#clubPage .club-game-tabs button::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#clubPage .club-game-tabs button[data-club-game="bairenniuniu"]::before { content: "🃏" !important; }
#clubPage .club-game-tabs button[data-club-game="benchiBaoma"]::before { content: "🚙" !important; }
#clubPage .club-game-tabs button[data-club-game="sangong"]::before { content: "🎲" !important; }
#clubPage .club-game-tabs button[data-club-game="longhudou"]::before { content: "🐉" !important; }

#clubPage .club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(161, 165, 255, .34), transparent) !important;
}

#clubPage .club-game-tabs button.active {
  border: 1px solid rgba(249, 213, 119, .92) !important;
  background: linear-gradient(180deg, #fff28f 0%, #e9b940 52%, #be7c14 100%) !important;
  color: #261100 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 22px rgba(245, 198, 69, .34) !important;
}

@media (max-width: 640px) {
  #clubPage .club-league-summary {
    grid-template-columns: 148px minmax(110px, 1fr) 58px 58px !important;
    gap: 6px !important;
    min-height: 58px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage .club-league-summary .league-summary-name,
  #clubPage .club-league-summary .league-switch-shell,
  #clubPage .club-league-summary .league-switch-trigger,
  #clubPage .league-summary-id,
  #clubPage .league-setting-entry-btn,
  #clubPage .league-setting-entry-placeholder,
  #clubPage .league-record-btn {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 12px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger {
    gap: 5px !important;
    padding: 0 8px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger::before {
    width: 22px !important;
    height: 22px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 10px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 14px !important;
  }

  #clubPage .league-summary-id {
    gap: 4px !important;
    padding: 0 6px !important;
  }

  #clubPage .league-summary-id::before {
    content: "ID:" !important;
    font-size: 10px !important;
  }

  #clubPage .league-summary-id b {
    font-size: 11px !important;
  }

  #clubPage .league-points-log-btn {
    height: 18px !important;
    margin-left: 2px !important;
    padding-left: 5px !important;
    font-size: 10px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    gap: 2px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  #clubPage .club-game-tabs {
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage .club-game-tabs button {
    gap: 5px !important;
    height: 42px !important;
    padding: 0 3px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  #clubPage .club-game-tabs button::before {
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 390px) {
  #clubPage .club-league-summary {
    grid-template-columns: 130px minmax(86px, 1fr) 50px 50px !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger span {
    font-size: 9px !important;
  }

  #clubPage .club-league-summary .league-switch-trigger strong {
    font-size: 12px !important;
  }

  #clubPage .league-summary-id {
    padding: 0 4px !important;
  }

  #clubPage .league-summary-id::before {
    display: none !important;
  }

  #clubPage .league-summary-id b,
  #clubPage .league-points-log-btn {
    font-size: 9px !important;
  }

  #clubPage .league-setting-entry-btn,
  #clubPage .league-record-btn {
    font-size: 9px !important;
  }

  #clubPage .club-game-tabs button {
    gap: 3px !important;
    font-size: 11px !important;
  }

  #clubPage .club-game-tabs button::before {
    font-size: 14px !important;
  }
}
/* TRUE EOF 282: final lock for league header. Keep this at the physical end. */
#clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
#clubPage.club-page #clubLeagueSummary.club-league-summary {
  display: grid !important;
  grid-template-columns: 160px minmax(138px, 1fr) 64px 64px !important;
  grid-template-areas: "league-name league-info league-setting league-record" !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  width: min(100%, 824px) !important;
  min-height: 76px !important;
  margin: 0 auto 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(105, 92, 255, .82) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(128, 93, 255, .24), transparent 56%),
    linear-gradient(180deg, rgba(49, 35, 142, .96), rgba(25, 17, 92, .96)) !important;
  box-shadow: inset 0 0 24px rgba(116, 94, 255, .22), 0 10px 24px rgba(14, 8, 61, .28) !important;
  overflow: visible !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-name {
  grid-area: league-name !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-shell,
#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  border-radius: 14px !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger {
  display: grid !important;
  grid-template-columns: 22px auto minmax(0, 1fr) 10px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 9px !important;
  background: linear-gradient(180deg, #4627c7 0%, #2b1686 100%) !important;
  border: 1px solid rgba(132, 117, 255, .95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px rgba(115, 76, 255, .22) !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger::before {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger span {
  display: inline !important;
  width: auto !important;
  color: #ffe565 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger span::after {
  content: "" !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger strong {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger i {
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid #ffe565 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id {
  grid-area: league-info !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  background: rgba(12, 9, 54, .72) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id::before {
  content: "联盟ID:" !important;
  color: #f5efff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id b {
  color: #ffe85d !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary .league-points-log-btn {
  flex: 0 0 auto !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 0 0 10px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #31f8f2 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn,
#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-placeholder {
  grid-area: league-setting !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
  grid-area: league-record !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn,
#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-placeholder,
#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 16px !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn,
#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn {
  border: 1px solid rgba(155, 174, 255, .78) !important;
  background: linear-gradient(180deg, #5869d2, #263081) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 16px rgba(18, 10, 64, .25) !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
  border: 1px solid rgba(255, 232, 138, .95) !important;
  background: linear-gradient(180deg, #fff1a0 0%, #e6b13a 52%, #b87917 100%) !important;
  color: #2d1700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 8px 16px rgba(74, 38, 0, .24) !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn::before {
  content: "⚙" !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn::before {
  content: "🏆" !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-placeholder {
  visibility: hidden !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-actions {
  display: contents !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-actions > .league-setting-entry-btn {
  grid-area: league-setting !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-actions > .league-record-btn {
  grid-area: league-record !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(100%, 824px) !important;
  min-height: 66px !important;
  margin: 0 auto 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(87, 104, 255, .82) !important;
  border-radius: 20px !important;
  background: rgba(18, 13, 70, .76) !important;
  box-shadow: inset 0 0 22px rgba(78, 78, 255, .22), 0 10px 22px rgba(12, 8, 60, .22) !important;
  overflow: hidden !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 46px !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: rgba(236,232,255,.84) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs button::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs button[data-club-game="bairenniuniu"]::before { content: "🃏" !important; }
#clubPage.club-page #clubGameTabs.club-game-tabs button[data-club-game="benchiBaoma"]::before { content: "🚙" !important; }
#clubPage.club-page #clubGameTabs.club-game-tabs button[data-club-game="sangong"]::before { content: "🎲" !important; }
#clubPage.club-page #clubGameTabs.club-game-tabs button[data-club-game="longhudou"]::before { content: "🐉" !important; }

#clubPage.club-page #clubGameTabs.club-game-tabs button:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent, rgba(161,165,255,.34), transparent) !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs button.active {
  border: 1px solid rgba(249, 213, 119, .92) !important;
  background: linear-gradient(180deg, #fff28f 0%, #e9b940 52%, #be7c14 100%) !important;
  color: #261100 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 20px rgba(245,198,69,.32) !important;
}

@media (max-width: 640px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: minmax(0, 1fr) 54px 58px !important;
    grid-template-areas:
      "league-name league-setting league-record"
      "league-info league-info league-info" !important;
    min-height: 98px !important;
    padding: 7px !important;
    gap: 6px !important;
    border-radius: 15px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-name,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-shell,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-placeholder,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 12px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id {
    grid-area: league-info !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger {
    grid-template-columns: 20px auto minmax(0, 1fr) 8px !important;
    padding: 0 7px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger::before {
    width: 20px !important;
    height: 20px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger span {
    font-size: 10px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger strong {
    font-size: 13px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id::before,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-id b,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-points-log-btn {
    font-size: 11px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-setting-entry-btn,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-record-btn {
    gap: 2px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  #clubPage.club-page #clubGameTabs.club-game-tabs {
    min-height: 58px !important;
    margin-bottom: 10px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  #clubPage.club-page #clubGameTabs.club-game-tabs button {
    gap: 4px !important;
    height: 42px !important;
    padding: 0 2px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }

  #clubPage.club-page #clubGameTabs.club-game-tabs button::before {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 390px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: minmax(0, 1fr) 50px 52px !important;
  }
}

/* TRUE EOF 283: compact league picker label and keep meaning as league, not agent. */
@media (max-width: 640px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: 172px minmax(0, 1fr) 54px 58px !important;
    grid-template-areas:
      "league-name league-spacer league-setting league-record"
      "league-info league-info league-info league-info" !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-name,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-shell,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger {
    width: 172px !important;
    max-width: 172px !important;
  }
}

/* TRUE EOF 284: restore Team entry in the league header middle slot. */
#clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
#clubPage.club-page #clubLeagueSummary.club-league-summary {
  grid-template-columns: 172px minmax(0, 1fr) 58px 58px 64px !important;
  grid-template-areas:
    "league-name league-info league-team league-setting league-record" !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-btn,
#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-placeholder {
  grid-area: league-team !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 16px !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid rgba(145, 236, 255, .78) !important;
  background: linear-gradient(180deg, #44b8e6 0%, #3459c4 52%, #202072 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 16px rgba(18, 10, 64, .25) !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-btn::before {
  content: "👥" !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-placeholder {
  visibility: hidden !important;
}

@media (max-width: 640px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: 172px minmax(0, 1fr) 54px 58px !important;
    grid-template-areas:
      "league-name league-team league-setting league-record"
      "league-info league-info league-info league-info" !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-btn,
  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-placeholder {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 12px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-team-btn::before {
    display: none !important;
  }
}

@media (max-width: 390px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: 152px minmax(0, 1fr) 50px 52px !important;
  }
}

/* TRUE EOF 285: league points flow opens as a right-side half-screen drawer. */
.league-points-flow-overlay.table-manage-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: rgba(4, 2, 24, .46) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
}

.league-points-flow-overlay .league-points-flow-card {
  position: relative !important;
  width: 50vw !important;
  min-width: min(360px, 100vw) !important;
  max-width: 720px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 18px 16px 20px !important;
  border-width: 0 0 0 1px !important;
  border-radius: 20px 0 0 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 88, 255, .28), transparent 34%),
    linear-gradient(180deg, #30218d 0%, #171052 100%) !important;
  box-shadow: -18px 0 32px rgba(0,0,0,.32), inset 1px 0 0 rgba(255,255,255,.12) !important;
  transform: translateX(0) !important;
  animation: leaguePointsDrawerIn .22s ease-out both !important;
  overflow: hidden !important;
}

@keyframes leaguePointsDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.league-points-flow-overlay .league-flow-list {
  max-height: calc(100vh - 128px) !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

@media (max-width: 640px) {
  .league-points-flow-overlay .league-points-flow-card {
    width: 50vw !important;
    min-width: 50vw !important;
    max-width: 50vw !important;
    padding: 14px 8px 16px !important;
    border-radius: 16px 0 0 16px !important;
  }

  .league-points-flow-overlay .league-points-flow-card > strong {
    font-size: 18px !important;
  }

  .league-points-flow-overlay .league-points-flow-card > em {
    font-size: 11px !important;
  }

  .league-points-flow-overlay .league-flow-row {
    min-height: 44px !important;
    padding: 7px 8px !important;
  }

  .league-points-flow-overlay .league-flow-row span {
    font-size: 11px !important;
  }

  .league-points-flow-overlay .league-flow-row small {
    font-size: 9px !important;
  }

  .league-points-flow-overlay .league-flow-row b {
    font-size: 15px !important;
  }
}

/* TRUE EOF 286: remove dark outlines from league category icons. */
#clubPage.club-page #clubGameTabs.club-game-tabs button::before,
#clubPage #clubGameTabs.club-game-tabs button::before,
#clubPage .club-game-tabs button::before {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
}

#clubPage.club-page #clubGameTabs.club-game-tabs button.active::before,
#clubPage #clubGameTabs.club-game-tabs button.active::before,
#clubPage .club-game-tabs button.active::before {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

/* TRUE EOF 287: keep empty-state league ID text one consistent color. */
#clubPage.club-page .club-empty span:nth-of-type(1),
#clubPage .club-empty span:nth-of-type(1),
#clubPage.club-page .club-empty span:nth-of-type(1)::first-letter,
#clubPage .club-empty span:nth-of-type(1)::first-letter {
  color: rgba(235, 232, 255, .88) !important;
  text-shadow: none !important;
}

@media (max-width: 390px) {
  #clubPage.club-page .club-panel > #clubLeagueSummary.club-league-summary,
  #clubPage.club-page #clubLeagueSummary.club-league-summary {
    grid-template-columns: 152px minmax(0, 1fr) 50px 52px !important;
  }

  #clubPage.club-page #clubLeagueSummary.club-league-summary > .league-summary-name,
  #clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-shell,
#clubPage.club-page #clubLeagueSummary.club-league-summary .league-switch-trigger {
    width: 152px !important;
    max-width: 152px !important;
  }
}

/* TRUE EOF 288: widen and reflow the league points drawer. */
.league-points-flow-overlay.table-manage-overlay {
  align-items: stretch !important;
  justify-content: flex-end !important;
}

.league-points-flow-overlay .league-points-flow-card {
  box-sizing: border-box !important;
  width: 70vw !important;
  min-width: 70vw !important;
  max-width: 880px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  padding: 16px 14px 18px !important;
}

.league-points-flow-overlay .league-points-flow-card > span,
.league-points-flow-overlay .league-points-flow-card > strong,
.league-points-flow-overlay .league-points-flow-card > em {
  position: static !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

.league-points-flow-overlay .league-points-flow-card > span {
  display: block !important;
  margin: 0 !important;
  color: #ffe56f !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.league-points-flow-overlay .league-points-flow-card > strong {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.league-points-flow-overlay .league-points-flow-card > em {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  margin: 2px 0 8px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(122, 229, 255, .32) !important;
  border-radius: 999px !important;
  background: rgba(12, 9, 58, .42) !important;
  color: rgba(235, 232, 255, .9) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.league-points-flow-overlay .league-flow-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
  overflow-y: auto !important;
}

.league-points-flow-overlay .league-audit-empty {
  min-height: 96px !important;
  margin: 8px 0 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(132, 109, 255, .36) !important;
  border-radius: 14px !important;
  background: rgba(10, 8, 55, .34) !important;
  color: rgba(235, 232, 255, .78) !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  .league-points-flow-overlay .league-points-flow-card {
    width: 70vw !important;
    min-width: 70vw !important;
    max-width: 70vw !important;
    padding: 14px 10px 16px !important;
  }

  .league-points-flow-overlay .league-points-flow-card > strong {
    font-size: 17px !important;
  }

  .league-points-flow-overlay .league-points-flow-card > em {
    min-height: 26px !important;
    font-size: 11px !important;
  }
}

/* TRUE EOF 289: compact copyable invite link inside league team settings. */
.league-settings-panel .league-invite-box,
.league-settings-fullpage .league-invite-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 64px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 12px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(255, 218, 101, .55) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(23, 15, 96, .86), rgba(54, 32, 145, .72)),
    rgba(17, 12, 70, .8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.league-settings-panel .league-invite-box span,
.league-settings-fullpage .league-invite-box span {
  color: #ffe873 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.league-settings-panel .league-invite-box input,
.league-settings-fullpage .league-invite-box input {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(141, 125, 255, .46) !important;
  border-radius: 10px !important;
  background: rgba(9, 7, 48, .68) !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.league-settings-panel .league-invite-box button,
.league-settings-fullpage .league-invite-box button {
  height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fff0a0, #d99a27) !important;
  color: #2d1600 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

@media (max-width: 640px) {
  .league-settings-panel .league-invite-box,
  .league-settings-fullpage .league-invite-box {
    grid-template-columns: minmax(0, 1fr) 56px !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .league-settings-panel .league-invite-box span,
  .league-settings-fullpage .league-invite-box span {
    grid-column: 1 / -1 !important;
    font-size: 11px !important;
  }
}

/* TRUE EOF 289: stable in-app join-league panel for the league drawer. */
.league-join-overlay.table-manage-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 260 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(5, 4, 24, .58) !important;
  backdrop-filter: blur(8px) !important;
}

.league-join-panel {
  position: relative !important;
  width: min(360px, calc(100vw - 34px)) !important;
  padding: 22px 18px 18px !important;
  border: 1px solid rgba(255, 218, 92, .76) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 70% 0%, rgba(128, 98, 255, .28), transparent 40%),
    linear-gradient(160deg, rgba(39, 26, 132, .98), rgba(18, 11, 75, .98)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  color: #fff !important;
}

.league-join-panel span {
  display: block !important;
  color: #ffe565 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.league-join-panel strong {
  display: block !important;
  margin-top: 4px !important;
  color: #fff !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

.league-join-panel em {
  display: block !important;
  margin: 9px 0 14px !important;
  color: rgba(235, 233, 255, .76) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.league-join-panel input {
  width: 100% !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 13px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #14132b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  outline: none !important;
}

.league-join-error {
  min-height: 24px !important;
  padding-top: 6px !important;
  color: #ffdf61 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.league-join-submit {
  width: 100% !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff1a9, #f5c250 45%, #d19220) !important;
  color: #2c1600 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.league-join-close {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
}

/* TRUE EOF 329: brighter, cleaner join-league modal. */
html body.theme-pearl-blue .league-join-overlay.table-manage-overlay,
html body .league-join-overlay.table-manage-overlay {
  background: rgba(108, 134, 231, .20) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

html body.theme-pearl-blue .league-join-panel,
html body .league-join-panel {
  width: min(380px, calc(100vw - 34px)) !important;
  padding: 24px 20px 20px !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .92), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(205, 218, 255, .88), transparent 38%),
    linear-gradient(145deg, rgba(250, 253, 255, .97), rgba(214, 226, 255, .96) 56%, rgba(190, 203, 255, .94)) !important;
  box-shadow:
    0 18px 42px rgba(82, 95, 176, .22),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  color: #25356f !important;
}

html body.theme-pearl-blue .league-join-panel span,
html body .league-join-panel span {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff3b7, #f0c858) !important;
  color: #7b4c06 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .82) !important;
}

html body.theme-pearl-blue .league-join-panel strong,
html body .league-join-panel strong {
  margin-top: 10px !important;
  color: #28408b !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
}

html body.theme-pearl-blue .league-join-panel em,
html body .league-join-panel em {
  margin: 8px 0 16px !important;
  color: rgba(45, 58, 112, .72) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
}

html body.theme-pearl-blue .league-join-panel input,
html body .league-join-panel input {
  height: 46px !important;
  border: 1px solid rgba(104, 128, 211, .28) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #23366f !important;
  box-shadow: inset 0 2px 6px rgba(80, 96, 172, .08) !important;
}

html body.theme-pearl-blue .league-join-panel input::placeholder,
html body .league-join-panel input::placeholder {
  color: rgba(52, 67, 125, .42) !important;
}

html body.theme-pearl-blue .league-join-error,
html body .league-join-error {
  color: #d47900 !important;
}

html body.theme-pearl-blue .league-join-submit,
html body .league-join-submit {
  height: 44px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .48), transparent 35%),
    linear-gradient(180deg, #ffe999 0%, #f3c34c 52%, #dc9b1d 100%) !important;
  color: #633b00 !important;
  box-shadow:
    0 10px 20px rgba(215, 156, 39, .28),
    inset 0 1px rgba(255, 255, 255, .84) !important;
}

html body.theme-pearl-blue .league-join-close,
html body .league-join-close {
  right: 14px !important;
  top: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(100, 115, 190, .18) !important;
  background: rgba(255, 255, 255, .64) !important;
  color: #5260aa !important;
  box-shadow: 0 6px 14px rgba(79, 87, 160, .14) !important;
}

/* TRUE EOF 290: compact and clearer team-rate settings page. */
.league-settings-fullpage .league-team-page {
  gap: 9px !important;
  margin-top: 8px !important;
}

.league-settings-fullpage .league-team-page .league-settings-back {
  height: 30px !important;
  min-width: 78px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

.league-settings-fullpage .league-team-page h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 21px !important;
  line-height: 1.1 !important;
}

.league-settings-fullpage .league-team-page h3 b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 54px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(9, 7, 52, .64) !important;
  color: #ffe45c !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.league-settings-fullpage .league-team-page .league-invite-box {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

.league-settings-fullpage .league-team-page .league-invite-box span {
  grid-column: 1 / -1 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.league-settings-fullpage .league-team-page .league-invite-box input {
  height: 32px !important;
  font-size: 11px !important;
  border-radius: 9px !important;
}

.league-settings-fullpage .league-team-page .league-invite-box button {
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

.league-settings-fullpage .league-team-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 86px 78px !important;
  gap: 7px !important;
  margin: 0 !important;
}

.league-settings-fullpage .league-team-form input {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

.league-settings-fullpage .league-team-form button {
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.league-settings-fullpage .league-team-list {
  display: grid !important;
  gap: 7px !important;
  max-height: calc(100vh - 330px) !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

.league-settings-fullpage .league-team-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 13px !important;
  background: rgba(10, 8, 58, .58) !important;
}

.league-settings-fullpage .league-team-row.direct {
  border-color: rgba(255, 220, 91, .42) !important;
  background: rgba(255, 218, 80, .1) !important;
}

.league-settings-fullpage .league-team-row i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #ffef9a, #d99a28) !important;
  color: #251400 !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.league-settings-fullpage .league-team-row span {
  display: block !important;
  min-width: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.league-settings-fullpage .league-team-row small {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.league-settings-fullpage .league-team-row b {
  justify-self: end !important;
  color: #ffe45c !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

@media (max-width: 430px) {
  .league-settings-fullpage .league-team-form {
    grid-template-columns: minmax(0, 1fr) 70px 68px !important;
  }

  .league-settings-fullpage .league-team-page h3 {
    font-size: 20px !important;
  }
}

/* TRUE EOF 291: dedicated vertical Dragon Tiger room. */
#room.dragon-mode {
  padding: 0 !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(16, 122, 143, .55), transparent 38%),
    linear-gradient(180deg, #062335 0%, #083743 46%, #061a2b 100%) !important;
  overflow: hidden !important;
}

#room.dragon-mode > :not(#dragonTigerRoom):not(#benchiBaomaRoom):not(.exit-confirm-modal) {
  display: none !important;
}

.dragon-tiger-room {
  width: min(100vw, 560px);
  min-height: 100vh;
  margin: 0 auto;
  color: #fff7d6;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.dt-shell {
  position: relative;
  min-height: 100vh;
  padding: 12px 76px 198px;
  background:
    radial-gradient(circle at 50% 11%, rgba(92, 223, 255, .18), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(255, 190, 81, .17), transparent 33%),
    linear-gradient(180deg, rgba(5, 30, 48, .96), rgba(3, 52, 60, .98));
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .45);
}

.dt-shell::before {
  content: "";
  position: absolute;
  inset: 10px 8px 82px;
  border-radius: 36px 36px 50% 50% / 24px 24px 80px 80px;
  border: 2px solid rgba(255, 226, 139, .24);
  pointer-events: none;
}

.dt-round-btn {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 223, 128, .58);
  background: linear-gradient(180deg, #13384a, #071e2d);
  color: #ffe9a8;
  font-weight: 950;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.dt-menu {
  top: 14px;
  left: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 13px;
}

.dt-wallet,
.dt-rule,
.dt-fold {
  right: 13px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 13px;
}

.dt-wallet { top: 14px; }
.dt-rule { top: 82px; }
.dt-fold { top: 150px; font-size: 24px; }

.dt-top-seatbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px 64px 72px repeat(3, 56px);
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 7px 9px;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(180deg, rgba(20, 58, 73, .92), rgba(5, 30, 43, .75));
  box-shadow: inset 0 0 0 1px rgba(165, 240, 255, .2), 0 12px 24px rgba(0, 0, 0, .28);
}

.dt-top-user,
.dt-empty {
  height: 58px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(7, 32, 45, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.dt-top-user span,
.dt-side-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff3bb, #d38a1d);
  color: #421b00;
  font-weight: 950;
}

.dt-top-user b {
  font-size: 12px;
  color: #fff;
}

.dt-apply {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid #a9680b;
  background: radial-gradient(circle at 40% 24%, #fff4b7, #e1a22a 62%, #9b5606);
  color: #fff8d4;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  text-shadow: 0 2px 2px rgba(89, 37, 0, .55);
  box-shadow: 0 4px 16px rgba(232, 162, 33, .42);
}

.dt-side {
  position: absolute;
  z-index: 5;
  top: 210px;
  bottom: 222px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 7px;
}

.dt-side.left { left: 12px; }
.dt-side.right { right: 12px; }

.dt-side-player {
  position: relative;
  width: 62px;
  min-height: 92px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  color: #fff;
}

.dt-side-player .dt-side-avatar {
  width: 55px;
  height: 55px;
  border-radius: 11px;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
}

.dt-side-player b {
  position: absolute;
  left: -4px;
  top: 31px;
  font-size: 26px;
  color: #ffcc67;
  text-shadow: 0 2px 2px #6b1900, 0 0 8px rgba(255, 96, 29, .7);
}

.dt-side-player strong,
.dt-side-player span {
  width: 100%;
  min-height: 18px;
  border-radius: 6px;
  background: rgba(4, 22, 33, .82);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dt-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.dt-beasts {
  display: grid;
  grid-template-columns: 1fr 66px 1fr;
  align-items: center;
  min-height: 106px;
}

.dt-dragon,
.dt-tiger {
  height: 88px;
  display: grid;
  place-items: center;
  font-size: 58px;
  font-weight: 950;
  letter-spacing: 4px;
  opacity: .92;
}

.dt-dragon {
  color: #d6efff;
  text-shadow: 0 0 18px rgba(81, 184, 255, .9);
}

.dt-tiger {
  color: #ffd27d;
  text-shadow: 0 0 18px rgba(255, 118, 21, .9);
}

.dt-countdown {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 25%, #7fe7ff, #087cac 64%, #024057);
  border: 4px solid #e7b866;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(82, 210, 255, .55);
}

.dt-stage h1 {
  margin: -8px 0 0;
  text-align: center;
  color: #ffe0a1;
  font-size: 31px;
  line-height: 1;
  text-shadow: 0 2px 0 #6c3300, 0 0 14px rgba(255, 216, 117, .5);
}

.dt-history {
  display: flex;
  gap: 3px;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 18px;
  background: rgba(10, 76, 89, .8);
}

.dt-history i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff7d2f, #b73a12);
  color: #fff7d9;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.dt-history i:nth-child(3n) {
  background: linear-gradient(180deg, #2fbfff, #1067af);
}

.dt-bet-zone {
  position: relative;
  min-height: 126px;
  padding: 14px 12px 12px 106px;
  border: 1px solid rgba(151, 241, 255, .18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(66, 183, 194, .38), rgba(13, 108, 121, .62)),
    radial-gradient(circle at 76% 46%, rgba(255, 255, 255, .15), transparent 44%);
  color: #fff;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .08);
  text-align: left;
  overflow: hidden;
}

.dt-bet-zone strong {
  position: absolute;
  left: 18px;
  top: 20px;
  display: grid;
  color: rgba(0, 40, 48, .36);
  font-size: 54px;
  font-weight: 950;
  line-height: .9;
}

.dt-bet-zone small {
  margin-top: 6px;
  font-size: 16px;
}

.dt-bet-zone span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  height: 30px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(4, 52, 63, .52);
  color: #d8f8ff;
  font-size: 17px;
  font-weight: 800;
}

.dt-bet-zone span em {
  color: #ffe458;
  font-size: 25px;
  font-style: normal;
}

.dt-chip-pile {
  position: relative;
  min-height: 66px;
  margin-top: 9px;
}

.dt-mini-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 -4px 4px 0;
  border-radius: 50%;
  border: 4px solid #c91f54;
  background: #fff;
  color: #9d153d;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .34);
}

.dt-mini-chip.c1 { border-color: #287fd2; color: #1864b2; }
.dt-mini-chip.c2 { border-color: #55a927; color: #34730f; }
.dt-mini-chip.c3 { border-color: #8f44d8; color: #7130bc; }
.dt-mini-chip.c4 { border-color: #f07a18; color: #ba4d00; }
.dt-chip-pile.sparse { padding-left: 12px; }

.dt-user-panel {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 190px;
  padding: 12px 18px 10px;
  border-radius: 42% 42% 0 0 / 42px 42px 0 0;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 211, 124, .22), transparent 42%),
    linear-gradient(180deg, rgba(52, 34, 32, .95), rgba(23, 19, 28, .98));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 226, 154, .24);
}

.dt-me {
  position: absolute;
  left: 16px;
  top: -78px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
}

.dt-me-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 4px solid #e5b956;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe99e, #9f5f05);
  color: #5b2300;
  font-size: 25px;
  font-weight: 950;
}

.dt-me strong,
.dt-me span {
  display: block;
  min-width: 92px;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(0,0,0,.45);
}

.dt-me span {
  color: #ffe573;
  font-size: 16px;
}

.dt-chip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 18px;
  width: min(360px, 82%);
  margin: 0 auto;
}

.dt-chip-row button {
  width: 76px;
  height: 76px;
  justify-self: center;
  border: 6px solid #d11c54;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 45%, #eceff8 46% 55%, #c8184f 56%);
  color: #8f1038;
  font-size: 21px;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(0,0,0,.38);
}

.dt-chip-row button:nth-child(2) { border-color: #5ebd36; color: #357314; }
.dt-chip-row button:nth-child(3) { border-color: #29a0d4; color: #1272a6; }
.dt-chip-row button:nth-child(4) { border-color: #9b4edc; color: #7430ba; }
.dt-chip-row button:nth-child(5) { border-color: #ed7a1a; color: #a94800; }
.dt-chip-row button:nth-child(6) { border-color: #7b38d7; color: #5b21b2; }
.dt-chip-row button.active {
  filter: drop-shadow(0 0 11px #fff45a);
  transform: translateY(-3px);
}

.dt-bottom-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.dt-bottom-tools button {
  height: 28px;
  border-radius: 16px;
  border: 1px solid rgba(255, 222, 129, .22);
  background: rgba(4, 22, 31, .7);
  color: #ffe4a4;
  font-size: 13px;
  font-weight: 800;
}

.dt-room-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 190px;
  margin: 0;
  text-align: center;
  color: rgba(227, 245, 255, .56);
  font-size: 16px;
  font-weight: 800;
}

.dt-toast {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  padding: 8px 18px;
  border-radius: 18px;
  background: rgba(4, 52, 66, .78);
  color: #ddfcff;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

.dt-rules-panel {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  width: min(70vw, 360px);
  height: 100vh;
  padding: 28px 20px;
  border-left: 1px solid rgba(255, 222, 112, .58);
  background: linear-gradient(180deg, #06384d, #071c2c);
  color: #fff;
  box-shadow: -14px 0 30px rgba(0, 0, 0, .42);
}

.dt-rules-panel.hidden {
  display: none;
}

.dt-rules-panel button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 22px;
}

.dt-rules-panel strong {
  display: block;
  margin: 26px 0 14px;
  color: #ffe47f;
  font-size: 23px;
}

.dt-rules-panel p {
  margin: 0 0 12px;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
}

@media (max-width: 430px) {
  .dt-shell {
    padding-left: 69px;
    padding-right: 69px;
  }

  .dt-side-player {
    width: 55px;
  }

  .dt-side.left { left: 7px; }
  .dt-side.right { right: 7px; }

  .dt-top-seatbar {
    grid-template-columns: 52px 52px 64px repeat(3, 43px);
    gap: 4px;
  }

  .dt-apply {
    width: 62px;
    height: 62px;
    font-size: 16px;
  }

  .dt-empty {
    height: 52px;
    font-size: 11px;
  }

  .dt-bet-zone {
    min-height: 118px;
    padding-left: 88px;
  }

  .dt-bet-zone strong {
    left: 13px;
    font-size: 45px;
  }

  .dt-chip-row {
    width: 84%;
    gap: 10px 12px;
  }

  .dt-chip-row button {
    width: 68px;
    height: 68px;
  }
}

/* Dragon Tiger playable room refresh */
.dragon-tiger-room {
  width: min(100vw, 600px) !important;
}

.dt-shell {
  padding: 12px 82px 190px !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(95, 226, 255, .18), transparent 28%),
    radial-gradient(circle at 50% 74%, rgba(30, 196, 175, .16), transparent 34%),
    linear-gradient(180deg, #062437 0%, #073d47 43%, #062535 100%) !important;
}

.dt-shell::before {
  inset: 9px 7px 76px !important;
  border: 1px solid rgba(255, 222, 124, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(116, 239, 255, .12), inset 0 0 42px rgba(0, 0, 0, .34);
}

.dt-top-seatbar {
  min-height: 72px !important;
  grid-template-columns: 58px 58px 72px repeat(3, 54px) !important;
  border-radius: 0 0 36px 36px !important;
}

.dt-beasts {
  min-height: 84px !important;
  grid-template-columns: 1fr 64px 1fr !important;
}

.dt-dragon,
.dt-tiger {
  height: 76px !important;
  font-size: 54px !important;
}

.dt-countdown {
  width: 60px !important;
  height: 60px !important;
  font-size: 31px !important;
}

.dt-open-cards {
  display: flex;
  justify-content: center;
  gap: 18px;
  min-height: 70px;
  margin-top: -8px;
}

.dt-open-cards > div {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.dt-open-cards small {
  color: rgba(255, 231, 167, .82);
  font-size: 11px;
  font-weight: 900;
}

.dt-card {
  width: 42px;
  height: 58px;
  border-radius: 7px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  background: linear-gradient(135deg, #fffdf7, #eef1f7);
  color: #102037;
  box-shadow: 0 5px 10px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.72);
  font-weight: 950;
}

.dt-card.red {
  color: #d52428;
}

.dt-card b {
  font-size: 18px;
  line-height: 1;
}

.dt-card i {
  font-size: 20px;
  line-height: 1;
  font-style: normal;
}

.dt-card.back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 225, 108, .9) 0 11%, transparent 12%),
    linear-gradient(135deg, rgba(255,255,255,.2) 0 12%, transparent 13%),
    linear-gradient(180deg, #0b7b76, #063f4e);
  border: 2px solid #efd177;
  box-shadow: inset 0 0 0 2px rgba(11, 88, 70, .75), 0 5px 12px rgba(0,0,0,.34);
}

.dt-stage h1 {
  margin-top: -4px !important;
  font-size: 30px !important;
}

.dt-history {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto !important;
}

.dt-history i.dragon {
  background: linear-gradient(180deg, #2fbfff, #1067af) !important;
}

.dt-history i.tiger {
  background: linear-gradient(180deg, #ff7d2f, #b73a12) !important;
}

.dt-history i.tie {
  background: linear-gradient(180deg, #43d56a, #138b36) !important;
}

.dt-bet-zone {
  min-height: 112px !important;
  padding: 12px 12px 10px 96px !important;
  border-color: rgba(108, 235, 255, .32) !important;
  background:
    linear-gradient(90deg, rgba(8, 89, 97, .58), rgba(47, 172, 178, .46)),
    radial-gradient(circle at 82% 42%, rgba(255,255,255,.16), transparent 42%) !important;
}

.dt-bet-zone strong {
  top: 18px !important;
  left: 17px !important;
  font-size: 48px !important;
}

.dt-bet-zone span {
  height: 28px !important;
  font-size: 15px !important;
}

.dt-bet-zone span em {
  font-size: 23px !important;
}

.dt-chip-pile {
  min-height: 54px !important;
}

.dt-mini-chip {
  width: 27px !important;
  height: 27px !important;
  border-width: 4px !important;
  font-size: 9px !important;
}

.dt-phase {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(48% + 42px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 68%;
  padding: 7px 18px;
  border-radius: 18px;
  background: rgba(3, 35, 48, .72);
  color: rgba(224, 252, 255, .92);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.dt-toast {
  top: 48% !important;
  background: rgba(2, 65, 80, .82) !important;
  border: 1px solid rgba(98, 227, 255, .18);
}

.dt-side-player b.win {
  color: #ffcf63 !important;
}

.dt-side-player b.lose {
  color: #7edbff !important;
}

.dt-chip-row {
  grid-template-columns: repeat(3, 72px) !important;
  justify-content: center !important;
  gap: 12px 22px !important;
}

.dt-chip-row button {
  width: 72px !important;
  height: 72px !important;
}

@media (max-width: 430px) {
  .dt-shell {
    padding-left: 70px !important;
    padding-right: 70px !important;
  }

  .dt-top-seatbar {
    grid-template-columns: 50px 50px 60px repeat(3, 42px) !important;
    gap: 4px !important;
  }

  .dt-stage {
    gap: 8px !important;
  }

  .dt-beasts {
    min-height: 76px !important;
  }

  .dt-dragon,
  .dt-tiger {
    font-size: 45px !important;
  }

  .dt-open-cards {
    min-height: 62px;
  }

  .dt-bet-zone {
    min-height: 104px !important;
    padding-left: 78px !important;
  }

  .dt-bet-zone strong {
    font-size: 39px !important;
    left: 12px !important;
  }

  .dt-bet-zone span {
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .dt-bet-zone span em {
    font-size: 20px !important;
  }

  .dt-chip-row {
    grid-template-columns: repeat(3, 62px) !important;
    gap: 10px 16px !important;
  }

  .dt-chip-row button {
    width: 62px !important;
    height: 62px !important;
    font-size: 18px !important;
  }
}

/* TRUE EOF 293: compact Dragon Tiger room controls and betting surface. */
.dragon-tiger-room {
  width: min(100vw, 540px) !important;
}

.dt-shell {
  padding: 5px 68px 142px !important;
}

.dt-round-btn {
  width: 42px !important;
  height: 42px !important;
  font-size: 12px !important;
}

.dt-menu {
  left: 6px !important;
}

.dt-wallet,
.dt-rule,
.dt-fold {
  right: 6px !important;
}

.dt-top-seatbar {
  width: calc(100% - 138px) !important;
  min-height: 54px !important;
  grid-template-columns: 46px 46px 54px repeat(3, 40px) !important;
  gap: 4px !important;
  padding: 6px 8px !important;
}

.dt-top-user {
  height: 44px !important;
  font-size: 10px !important;
}

.dt-top-user span {
  width: 34px !important;
  height: 26px !important;
  font-size: 13px !important;
}

.dt-top-user b {
  font-size: 10px !important;
}

.dt-apply {
  width: 52px !important;
  height: 52px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.dt-empty {
  width: 40px !important;
  height: 40px !important;
  font-size: 10px !important;
}

.dt-stage {
  gap: 5px !important;
  margin-top: 3px !important;
}

.dt-beasts {
  min-height: 54px !important;
  grid-template-columns: 1fr 46px 1fr !important;
}

.dt-dragon,
.dt-tiger {
  font-size: 46px !important;
}

.dt-countdown {
  width: 46px !important;
  height: 46px !important;
  font-size: 27px !important;
}

.dt-open-cards {
  gap: 8px !important;
  min-height: 48px !important;
  margin: -2px 0 0 !important;
  transform: scale(.86);
  transform-origin: center top;
}

.dt-card {
  width: 34px !important;
  height: 48px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

.dt-open-cards small {
  font-size: 9px !important;
}

.dt-stage h1 {
  margin: 0 !important;
  font-size: 28px !important;
}

.dt-history {
  gap: 3px !important;
}

.dt-history i {
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
}

.dt-bet-zone {
  min-height: 92px !important;
  padding: 9px 10px 8px 72px !important;
  border-radius: 14px !important;
}

.dt-bet-zone strong {
  top: 16px !important;
  left: 12px !important;
  font-size: 34px !important;
}

.dt-bet-zone small {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.dt-bet-zone span {
  height: 24px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.dt-bet-zone span em {
  font-size: 19px !important;
}

.dt-chip-pile {
  min-height: 40px !important;
  padding: 4px 0 0 !important;
}

.dt-mini-chip {
  width: 22px !important;
  height: 22px !important;
  margin: 1px -1px !important;
  border-width: 3px !important;
  font-size: 10px !important;
}

.dt-phase,
.dt-toast {
  min-height: 24px !important;
  padding: 5px 12px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
}

.dt-toast {
  max-width: 210px !important;
}

.dt-side {
  top: 124px !important;
  width: 58px !important;
  gap: 7px !important;
}

.dt-side.left {
  left: 8px !important;
}

.dt-side.right {
  right: 8px !important;
}

.dt-side-player {
  min-height: 82px !important;
}

.dt-side-avatar {
  width: 40px !important;
  height: 48px !important;
  font-size: 15px !important;
}

.dt-side-player b {
  top: 26px !important;
  font-size: 21px !important;
}

.dt-side-player strong,
.dt-side-player span {
  font-size: 10px !important;
}

.dt-user-panel {
  padding-top: 56px !important;
}

.dt-me {
  left: 12px !important;
  bottom: 66px !important;
  transform: scale(.86);
  transform-origin: left bottom;
}

.dt-chip-row {
  width: 220px !important;
  grid-template-columns: repeat(3, 58px) !important;
  gap: 8px 18px !important;
}

.dt-chip-row button {
  width: 58px !important;
  height: 58px !important;
  border-width: 5px !important;
  font-size: 17px !important;
}

.dt-bottom-tools {
  bottom: 4px !important;
  height: 24px !important;
}

.dt-bottom-tools button {
  height: 22px !important;
  font-size: 11px !important;
}

.dt-room-info {
  bottom: 124px !important;
  font-size: 12px !important;
}

@media (max-width: 430px) {
  .dt-shell {
    padding: 4px 58px 132px !important;
  }

  .dt-top-seatbar {
    width: calc(100% - 118px) !important;
    min-height: 50px !important;
    grid-template-columns: 40px 40px 48px repeat(3, 36px) !important;
    gap: 3px !important;
    padding: 5px 6px !important;
  }

  .dt-top-user {
    height: 40px !important;
  }

  .dt-top-user span {
    width: 30px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  .dt-apply {
    width: 48px !important;
    height: 48px !important;
    font-size: 14px !important;
  }

  .dt-empty {
    width: 36px !important;
    height: 36px !important;
  }

  .dt-side {
    top: 116px !important;
    width: 52px !important;
  }

  .dt-side-avatar {
    width: 36px !important;
    height: 44px !important;
  }

  .dt-beasts {
    min-height: 48px !important;
  }

  .dt-dragon,
  .dt-tiger {
    font-size: 40px !important;
  }

  .dt-countdown {
    width: 42px !important;
    height: 42px !important;
    font-size: 25px !important;
  }

  .dt-bet-zone {
    min-height: 86px !important;
    padding-left: 64px !important;
  }

  .dt-bet-zone strong {
    font-size: 30px !important;
  }

  .dt-mini-chip {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
  }

  .dt-chip-row {
    width: 204px !important;
    grid-template-columns: repeat(3, 54px) !important;
    gap: 8px 14px !important;
  }

  .dt-chip-row button {
    width: 54px !important;
    height: 54px !important;
    font-size: 16px !important;
  }
}

/* TRUE EOF 295: 1to1 Dragon Tiger source room. */
#room.dragon-mode {
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #06101c;
}
#room.dragon-mode > :not(#dragonTigerRoom):not(#benchiBaomaRoom):not(.exit-confirm-modal) {
  display: none !important;
}
#dragonTigerRoom.dragon-source-room {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: #06101c;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
}
.dt-source-wrap {
  width: min(100vw, 750px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #06101c;
}
.dt-source-game {
  position: relative;
  width: min(100vw, 750px);
  aspect-ratio: 750 / 1334;
  min-height: min(177.8667vw, 1334px);
  overflow: hidden;
  /* Retired screenshot-based room; keeping it inline delayed every first paint. */
  background-image: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
  box-shadow: 0 0 36px rgba(0, 0, 0, .42);
}
.dt-src-tap {
  position: absolute;
  z-index: 5;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 14px;
  background: transparent;
  color: transparent;
  appearance: none;
  -webkit-tap-highlight-color: rgba(255, 210, 74, .2);
}
.dt-src-tap:active,
.dt-src-tap.active {
  background: rgba(255, 215, 83, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 118, .4), 0 0 16px rgba(255, 205, 64, .35);
}
.dt-src-menu { left: 2.2%; top: 1.2%; width: 9.2%; height: 10.5%; border-radius: 999px; }
.dt-src-wallet { right: 1.8%; top: 1.1%; width: 10%; height: 8.5%; border-radius: 999px; }
.dt-src-help { right: 1.8%; top: 8.2%; width: 10%; height: 7.8%; border-radius: 999px; }
.dt-src-apply { left: 39.6%; top: 2.5%; width: 20.8%; height: 9.8%; border-radius: 999px; }
.dt-src-dragon { left: 16.7%; top: 31.2%; width: 62.5%; height: 15.4%; }
.dt-src-tiger { left: 16.7%; top: 47.2%; width: 62.5%; height: 15.4%; }
.dt-src-tie { left: 16.7%; top: 63.1%; width: 62.5%; height: 13.2%; }
.dt-src-chip10 { left: 36.8%; top: 80.8%; width: 12.6%; height: 8.4%; border-radius: 50%; }
.dt-src-chip50 { left: 52.2%; top: 80.8%; width: 12.6%; height: 8.4%; border-radius: 50%; }
.dt-src-chip100 { left: 67.7%; top: 80.8%; width: 12.6%; height: 8.4%; border-radius: 50%; }
.dt-src-chip500 { left: 29.6%; top: 88.0%; width: 12.6%; height: 7.7%; border-radius: 50%; }
.dt-src-chip1000 { left: 45.4%; top: 88.0%; width: 12.6%; height: 7.7%; border-radius: 50%; }
.dt-src-chip10000 { left: 61.7%; top: 88.0%; width: 12.6%; height: 7.7%; border-radius: 50%; }
.dt-src-chat { left: 8%; bottom: 1.1%; width: 18%; height: 5%; }
.dt-src-record { left: 28%; bottom: 1.1%; width: 18%; height: 5%; }
.dt-src-voice { left: 50%; bottom: 1.1%; width: 18%; height: 5%; }
.dt-src-sound { left: 72%; bottom: 1.1%; width: 18%; height: 5%; }
.dt-source-toast {
  position: absolute;
  left: 50%;
  top: 53.5%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: 56%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(4, 38, 50, .72);
  color: rgba(235, 252, 255, .92);
  font-size: clamp(10px, 2.2vw, 16px);
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.dragon-source-room .dt-rules-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 90;
  width: min(72vw, 460px);
  padding: 26px 22px;
  overflow: auto;
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 47, 64, .97), rgba(5, 18, 31, .98));
  border-left: 1px solid rgba(233, 197, 112, .8);
  box-shadow: -22px 0 45px rgba(0,0,0,.45);
}
.dragon-source-room .dt-rules-panel.hidden { display: none !important; }


/* TRUE EOF 296: fit Dragon Tiger source room inside viewport. */
html:has(#dragonTigerRoom.dragon-source-room),
body:has(#dragonTigerRoom.dragon-source-room) {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #06101c;
}
#dragonTigerRoom.dragon-source-room {
  overflow: hidden !important;
  align-items: center;
  justify-content: center;
}
#dragonTigerRoom.dragon-source-room .dt-source-wrap {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#dragonTigerRoom.dragon-source-room .dt-source-game {
  width: min(100vw, calc(100dvh * 750 / 1334));
  height: auto;
  min-height: 0;
  max-height: 100dvh;
  flex: 0 0 auto;
  box-shadow: none;
}
@supports not (height: 100dvh) {
  #dragonTigerRoom.dragon-source-room .dt-source-wrap { height: 100vh; }
  #dragonTigerRoom.dragon-source-room .dt-source-game {
    width: min(100vw, calc(100vh * 750 / 1334));
    max-height: 100vh;
  }
}


/* TRUE EOF 297: align Dragon Tiger tap zones to real source image. */
#dragonTigerRoom.dragon-source-room .dt-source-game {
  aspect-ratio: 941 / 1672;
  width: min(100vw, calc(100dvh * 941 / 1672));
  max-height: 100dvh;
  min-height: 0;
  background-size: 100% 100%;
  background-position: center center;
  overflow: hidden;
}
#dragonTigerRoom.dragon-source-room .dt-src-tap {
  z-index: 5;
  touch-action: manipulation;
}
#dragonTigerRoom.dragon-source-room .dt-src-dragon { left: 15.6%; top: 30.5%; width: 67.2%; height: 15.1%; }
#dragonTigerRoom.dragon-source-room .dt-src-tiger { left: 15.6%; top: 46.4%; width: 67.2%; height: 15.0%; }
#dragonTigerRoom.dragon-source-room .dt-src-tie { left: 15.6%; top: 62.4%; width: 67.2%; height: 13.4%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip10 { left: 35.4%; top: 80.2%; width: 12.4%; height: 7.6%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip50 { left: 51.2%; top: 80.2%; width: 12.4%; height: 7.6%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip100 { left: 66.8%; top: 80.2%; width: 12.4%; height: 7.6%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip500 { left: 28.4%; top: 87.3%; width: 12.8%; height: 7.3%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip1000 { left: 44.7%; top: 87.3%; width: 12.8%; height: 7.3%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-chip10000 { left: 60.8%; top: 87.3%; width: 13.4%; height: 7.3%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-apply { left: 39.6%; top: 2.2%; width: 20.8%; height: 9.2%; border-radius: 50%; }
#dragonTigerRoom.dragon-source-room .dt-src-menu { left: 1.4%; top: 1.0%; width: 9.8%; height: 8.8%; }
#dragonTigerRoom.dragon-source-room .dt-src-wallet { right: 1.1%; top: 0.8%; width: 9.8%; height: 8.0%; }
#dragonTigerRoom.dragon-source-room .dt-src-help { right: 1.1%; top: 8.8%; width: 9.8%; height: 7.8%; }
@supports not (height: 100dvh) {
  #dragonTigerRoom.dragon-source-room .dt-source-game {
    width: min(100vw, calc(100vh * 941 / 1672));
    max-height: 100vh;
  }
}


/* TRUE EOF 298: real DOM Dragon Tiger table, no image background. */
html:has(#dragonTigerRoom.dragon-dom-room),
body:has(#dragonTigerRoom.dragon-dom-room) {
  overflow: hidden !important;
  background: #06131f !important;
}
#dragonTigerRoom.dragon-dom-room {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(34, 128, 165, .42), transparent 34%),
    linear-gradient(180deg, #071b2d 0%, #032b36 46%, #04131d 100%);
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.dragon-dom-room * { box-sizing: border-box; }
.dt-dom-shell {
  position: relative;
  width: min(100vw, 560px);
  height: 100dvh;
  min-height: 760px;
  max-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(42, 185, 213, .35), transparent 31%),
    linear-gradient(180deg, #062236 0%, #063646 52%, #061b25 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 211, 118, .28), 0 0 32px rgba(0, 0, 0, .42);
}
.dt-dom-topbar {
  position: absolute;
  left: 76px;
  right: 76px;
  top: 10px;
  height: 76px;
  display: grid;
  grid-template-columns: 58px 58px 82px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(180deg, rgba(19, 71, 91, .88), rgba(4, 27, 42, .72));
  border: 1px solid rgba(113, 211, 232, .28);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 -12px 18px rgba(0,0,0,.18);
}
.dt-dom-banker-card,
.dt-dom-seat {
  height: 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #d8edf6;
  background: linear-gradient(180deg, rgba(28,75,96,.78), rgba(5,23,34,.88));
  border: 1px solid rgba(177, 226, 238, .25);
  box-shadow: inset 0 10px 18px rgba(255,255,255,.06);
  font-size: 13px;
  font-weight: 800;
}
.dt-dom-banker-card span {
  width: 36px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1e1706;
  background: linear-gradient(180deg, #fff3ad, #d58a16);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.65), 0 4px 9px rgba(0,0,0,.32);
}
.dt-dom-banker-card b { font-size: 12px; line-height: 1; }
.dt-dom-apply {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px solid #ffe287;
  color: #fff7ce;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.18;
  background: radial-gradient(circle at 45% 25%, #fff1aa 0%, #e0a32e 42%, #8c5001 100%);
  box-shadow: 0 0 18px rgba(255,193,49,.45), inset 0 4px 8px rgba(255,255,255,.65), inset 0 -8px 12px rgba(90,44,0,.5);
}
.dt-dom-side-actions {
  position: absolute;
  top: 18px;
  z-index: 5;
  display: grid;
  gap: 14px;
}
.dt-dom-side-actions.left { left: 14px; }
.dt-dom-side-actions.right { right: 14px; }
.dt-dom-side-actions button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,220,128,.68);
  background: radial-gradient(circle at 40% 20%, #143248, #071825 76%);
  color: #ffeaa6;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.3);
}
.dt-dom-players {
  position: absolute;
  top: 210px;
  bottom: 204px;
  width: 68px;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(4, minmax(82px, 1fr));
  align-items: center;
  gap: 6px;
}
.dt-dom-players.left { left: 12px; }
.dt-dom-players.right { right: 12px; }
.dt-side-player {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 72px;
}
.dt-side-avatar {
  width: 45px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1d1504;
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(180deg, #fff0a4 0%, #e0a33c 48%, #a05b07 100%);
  box-shadow: inset 0 3px 5px rgba(255,255,255,.68), 0 5px 9px rgba(0,0,0,.3);
}
.dt-side-player strong,
.dt-side-player span {
  width: 62px;
  text-align: center;
  border-radius: 5px;
  background: linear-gradient(180deg, #0c3a4d, #061923);
  box-shadow: 0 3px 7px rgba(0,0,0,.28);
}
.dt-side-player strong { padding-top: 3px; color: #fff; font-size: 10px; line-height: 1.05; }
.dt-side-player span { padding-bottom: 3px; color: #e9f7ff; font-size: 10px; }
.dt-side-player > b {
  position: absolute;
  top: 14px;
  z-index: 4;
  font-size: 24px;
  font-weight: 1000;
  font-style: italic;
  color: #ff9d35;
  text-shadow: 0 2px 0 #6e2400, 0 0 6px rgba(255,255,255,.45);
}
.dt-side-player > b.lose { color: #77d8ff; text-shadow: 0 2px 0 #073f5f, 0 0 6px rgba(255,255,255,.42); }
.dt-dom-main {
  position: absolute;
  left: 84px;
  right: 84px;
  top: 105px;
  bottom: 214px;
  display: grid;
  grid-template-rows: 190px 1fr;
  gap: 8px;
}
.dt-dom-hero {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 42%, rgba(84, 193, 255, .36), transparent 30%),
    radial-gradient(circle at 78% 42%, rgba(255, 112, 39, .38), transparent 31%),
    linear-gradient(180deg, rgba(7, 48, 64, .2), rgba(2, 24, 35, .72));
}
.dt-dom-dragon,
.dt-dom-tiger {
  position: absolute;
  top: 54px;
  font-size: clamp(42px, 9vw, 64px);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
}
.dt-dom-dragon { left: 10%; color: #cdeeff; text-shadow: 0 0 18px #38b7ff; }
.dt-dom-tiger { right: 10%; color: #ffd987; text-shadow: 0 0 18px #ff831f; }
.dt-dom-count {
  position: absolute;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: 1000;
  background: radial-gradient(circle at 45% 34%, #52d7ff, #0b6c9c 60%, #08334a);
  border: 4px solid #f2c564;
  box-shadow: 0 0 15px rgba(77,206,255,.48), inset 0 4px 10px rgba(255,255,255,.38);
}
.dt-dom-cards {
  position: absolute;
  left: 50%;
  top: 122px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: #ffe8a8;
  font-weight: 900;
}
.dt-card {
  width: 30px;
  height: 42px;
  border-radius: 5px;
  background: #fffaf1;
  color: #111;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 7px rgba(0,0,0,.35);
  font-size: 12px;
  line-height: 1;
}
.dt-card.red { color: #dd2527; }
.dt-card.back {
  border: 2px solid #e9c875;
  background:
    radial-gradient(circle at 50% 50%, #e8c76a 0 18%, transparent 19%),
    linear-gradient(135deg, #075f67, #103452);
}
.dt-dom-hero h2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  margin: 0;
  text-align: center;
  color: #ffe6a4;
  font-size: 32px;
  text-shadow: 0 2px 3px rgba(0,0,0,.45), 0 0 12px rgba(255,204,80,.48);
}
.dt-dom-trends {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  display: flex;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.dt-dom-trend {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.dt-dom-trend.dragon { background: linear-gradient(180deg, #3cc6ff, #1266b4); }
.dt-dom-trend.tiger { background: linear-gradient(180deg, #ff8b3a, #c94011); }
.dt-dom-trend.tie { background: linear-gradient(180deg, #7eea9a, #19884c); }
.dt-dom-bet-stack { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; }
.dt-dom-bet-zone {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(123, 232, 233, .4);
  border-radius: 16px;
  padding: 10px 12px 10px 94px;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(180deg, rgba(45,151,164,.85), rgba(14,83,96,.82));
  box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 8px 16px rgba(0,0,0,.24);
  color: #fff;
}
.dt-dom-bet-zone.tiger { border-color: rgba(255,196,92,.55); box-shadow: inset 0 0 0 1px rgba(255,196,92,.16), 0 8px 16px rgba(0,0,0,.24); }
.dt-dom-bet-zone.tie { border-color: rgba(131,235,120,.55); }
.dt-dom-zone-name {
  position: absolute;
  left: 13px;
  top: 12px;
  bottom: 12px;
  width: 70px;
  display: grid;
  align-content: center;
  justify-items: center;
  color: rgba(0,43,53,.48);
  font-weight: 1000;
  border-right: 1px solid rgba(0,0,0,.18);
}
.dt-dom-zone-name b { font-size: 46px; line-height: .9; }
.dt-dom-zone-name em { font-size: 14px; font-style: normal; }
.dt-dom-bet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 24px;
  border-radius: 14px;
  padding: 0 10px;
  background: rgba(2, 42, 51, .42);
}
.dt-dom-bet-head i { font-style: normal; color: #d4f7ff; font-size: 14px; font-weight: 800; }
.dt-dom-bet-head strong { color: #ffe04b; font-size: 24px; line-height: 1; }
.dt-dom-chip-cloud {
  position: absolute;
  left: 112px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: flex-start;
  max-height: 52px;
  overflow: hidden;
}
.dt-mini-chip {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
  background: #d6244d;
  border: 3px solid #fff5e6;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.dt-mini-chip.c1 { background:#228bd7; }
.dt-mini-chip.c2 { background:#5aaa28; }
.dt-mini-chip.c3 { background:#7a41dd; }
.dt-mini-chip.c4 { background:#f07c19; }
.dt-dom-bet-zone small {
  position: absolute;
  left: 112px;
  bottom: 4px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
}
.dt-dom-footer {
  position: absolute;
  left: 88px;
  right: 88px;
  bottom: 8px;
  height: 198px;
  border-radius: 48% 48% 18px 18px / 26% 26% 16px 16px;
  padding: 18px 12px 8px;
  background: radial-gradient(ellipse at 50% 0%, #4d302d, #261516 70%);
  box-shadow: 0 -10px 18px rgba(0,0,0,.36), inset 0 6px 16px rgba(255,255,255,.08);
}
.dt-dom-user {
  position: absolute;
  left: -72px;
  top: -20px;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 8px;
  align-items: center;
  width: 170px;
}
.dt-dom-me {
  grid-row: span 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 25%, #fff3ac, #d99a23 68%, #7a4300);
  color: #5c2500;
  font-size: 26px;
  font-weight: 1000;
  border: 2px solid #ffe394;
}
.dt-dom-user strong { font-size: 16px; line-height: 1; }
.dt-dom-user b { color: #ffe45e; font-size: 15px; }
.dt-dom-chips {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  justify-content: center;
  gap: 14px 18px;
}
.dt-dom-chip {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 7px solid #e9edf2;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 1000;
  color: #fff;
  background: #d82362;
  box-shadow: 0 0 14px rgba(255,255,255,.22), inset 0 -8px 10px rgba(0,0,0,.2);
}
.dt-dom-chip.chip-50 { background:#2bbb33; }
.dt-dom-chip.chip-100 { background:#168fd1; }
.dt-dom-chip.chip-500 { background:#8c40d8; }
.dt-dom-chip.chip-1000 { background:#e66b12; }
.dt-dom-chip.chip-10000 { background:#7b27d5; font-size: 17px; }
.dt-dom-chip.active { outline: 4px solid rgba(255,237,91,.78); box-shadow: 0 0 22px rgba(255,237,91,.72); }
.dt-dom-tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dt-dom-tools button {
  height: 27px;
  border-radius: 15px;
  border: 1px solid rgba(255,218,118,.35);
  color: #ffe8a1;
  background: linear-gradient(180deg, #102c3c, #06131c);
  font-size: 13px;
  font-weight: 900;
}
.dt-dom-toast {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  z-index: 6;
  max-width: 260px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 7px 14px;
  border-radius: 18px;
  background: rgba(0, 48, 60, .72);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.dt-dom-room-no {
  position: absolute;
  left: 50%;
  bottom: 205px;
  transform: translateX(-50%);
  color: rgba(211, 239, 244, .56);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.dragon-dom-room .dt-rules-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(72vw, 380px);
  z-index: 8;
  padding: 26px 22px;
  background: linear-gradient(180deg, #12334a, #061825);
  border-left: 1px solid rgba(255,220,129,.55);
  box-shadow: -18px 0 28px rgba(0,0,0,.38);
  color: #fff;
}
.dragon-dom-room .dt-rules-panel.hidden { display: none !important; }
.dragon-dom-room .dt-rules-panel button {
  float: right;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: rgba(255,255,255,.16);
  font-size: 24px;
}
.dragon-dom-room .dt-rules-panel strong { display:block; margin: 42px 0 18px; font-size: 24px; color: #ffe692; }
.dragon-dom-room .dt-rules-panel p { font-size: 15px; line-height: 1.75; color: #d8eff4; }
@media (max-width: 430px) {
  .dt-dom-shell { width: 100vw; min-height: 720px; }
  .dt-dom-topbar { left: 58px; right: 58px; grid-template-columns: 48px 48px 68px 1fr 1fr 1fr; gap: 5px; height: 66px; padding: 6px; }
  .dt-dom-banker-card, .dt-dom-seat { height: 50px; font-size: 11px; }
  .dt-dom-apply { width: 66px; height: 66px; font-size: 15px; }
  .dt-dom-side-actions button { width: 42px; height: 42px; }
  .dt-dom-side-actions.left { left: 6px; }
  .dt-dom-side-actions.right { right: 6px; }
  .dt-dom-players { width: 58px; top: 194px; bottom: 188px; }
  .dt-dom-players.left { left: 6px; }
  .dt-dom-players.right { right: 6px; }
  .dt-side-avatar { width: 38px; height: 42px; font-size: 16px; }
  .dt-side-player strong, .dt-side-player span { width: 52px; font-size: 9px; }
  .dt-dom-main { left: 68px; right: 68px; top: 94px; bottom: 198px; grid-template-rows: 172px 1fr; }
  .dt-dom-bet-zone { padding-left: 76px; }
  .dt-dom-zone-name { width: 58px; }
  .dt-dom-zone-name b { font-size: 36px; }
  .dt-dom-bet-head i { font-size: 11px; }
  .dt-dom-bet-head strong { font-size: 20px; }
  .dt-dom-chip-cloud { left: 84px; right: 8px; bottom: 16px; }
  .dt-mini-chip { width: 22px; height: 22px; border-width: 2px; font-size: 8px; }
  .dt-dom-footer { left: 64px; right: 64px; height: 182px; bottom: 6px; }
  .dt-dom-chips { grid-template-columns: repeat(3, 58px); gap: 12px 16px; }
  .dt-dom-chip { width: 58px; height: 58px; font-size: 17px; border-width: 6px; }
  .dt-dom-chip.chip-10000 { font-size: 13px; }
  .dt-dom-user { left: -58px; width: 140px; }
  .dt-dom-me { width: 48px; height: 48px; font-size: 22px; }
  .dt-dom-user strong { font-size: 13px; }
  .dt-dom-user b { font-size: 12px; }
  .dt-dom-room-no { bottom: 190px; font-size: 12px; }
}


/* TRUE EOF 299: inline Dragon Tiger title art. */
.dt-dom-title-art {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  width: min(94%, 430px);
  height: 128px;
  background-image: url("./assets/embedded/css-5427d4c792e57efd.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.28));
}
.dt-dom-dragon,
.dt-dom-tiger { display: none !important; }
.dt-dom-count { z-index: 2; }
.dt-dom-cards { z-index: 3; }
.dt-dom-hero h2 { z-index: 2; }
@media (max-width: 430px) {
  .dt-dom-title-art { top: 24px; height: 112px; width: min(98%, 340px); }
}


/* TRUE EOF 300: reposition Dragon Tiger open cards. */
.dt-dom-cards {
  top: 108px !important;
  gap: 6px !important;
  padding: 4px 7px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(4, 38, 49, .78), rgba(2, 20, 30, .58)) !important;
  border: 1px solid rgba(255, 218, 118, .58) !important;
  box-shadow: 0 7px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.dt-dom-cards span { display: none !important; }
.dt-dom-cards .dt-card {
  width: 25px !important;
  height: 36px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
}
.dt-dom-hero h2 {
  bottom: 31px !important;
  font-size: 24px !important;
}
.dt-dom-trends { bottom: 6px !important; }
@media (max-width: 430px) {
  .dt-dom-cards { top: 102px !important; padding: 3px 6px !important; }
  .dt-dom-cards .dt-card { width: 23px !important; height: 33px !important; font-size: 10px !important; }
  .dt-dom-hero h2 { bottom: 29px !important; font-size: 22px !important; }
}

#room.dragon-mode .exit-confirm-modal {
  position: fixed;
  z-index: 10040 !important;
}

/* TRUE EOF 319: move Dragon Tiger cards onto the dragon/tiger art. */
#dragonTigerRoom.dragon-dom-room .dt-dom-hero {
  position: relative !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card {
  position: absolute !important;
  width: 96px !important;
  height: 122px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .44) !important;
  transition: transform .36s ease, opacity .28s ease !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card:first-child {
  left: 22.5% !important;
  top: 53% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card:nth-child(2) {
  left: 77.5% !important;
  top: 53% !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-hero h2 {
  display: none !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card b {
  font-size: 22px !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card i {
  font-size: 24px !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card.back {
  color: transparent !important;
  border: 2px solid #f2cf65 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 238, 137, .95) 0 7%, rgba(35, 151, 139, .95) 8% 16%, transparent 17%),
    linear-gradient(135deg, transparent 0 38%, rgba(255, 243, 164, .9) 39% 45%, transparent 46% 100%),
    radial-gradient(circle at 50% 50%, #21a999 0 50%, #0d6a65 100%) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .44),
    inset 0 0 0 2px rgba(255, 255, 255, .26),
    inset 0 0 0 5px rgba(242, 207, 101, .34) !important;
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card.back::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 224, 118, .86);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 236, 152, .65) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 236, 152, .65) 48% 52%, transparent 53%);
}

#dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card.back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255, 236, 152, .95);
  background: rgba(11, 91, 88, .86);
  box-shadow: 0 0 0 3px rgba(255, 236, 152, .18);
}

@media (max-width: 430px) {
  #dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card {
    width: 92px !important;
    height: 118px !important;
  }

  #dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card:first-child {
    left: 22.5% !important;
    top: 53% !important;
  }

  #dragonTigerRoom.dragon-dom-room .dt-dom-cards .dt-card:nth-child(2) {
    left: 77.5% !important;
    top: 53% !important;
  }
}


/* TRUE EOF 301: polish Dragon Tiger betting chips and remove footer tools row. */
.dt-dom-footer {
  left: 78px !important;
  right: 78px !important;
  bottom: 10px !important;
  height: 158px !important;
  padding: 18px 18px 12px !important;
  border-radius: 58% 58% 18px 18px / 28% 28% 16px 16px !important;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(109,72,56,.9), rgba(42,22,23,.96) 62%, rgba(22,13,15,.98) 100%) !important;
  box-shadow: 0 -8px 18px rgba(0,0,0,.36), inset 0 9px 18px rgba(255,220,135,.08) !important;
}
.dt-dom-chips {
  height: 120px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 64px) !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 14px 18px !important;
  padding: 2px 6px 0 !important;
}
.dt-dom-chip {
  position: relative !important;
  width: 62px !important;
  height: 62px !important;
  border-width: 6px !important;
  font-size: 18px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  box-shadow:
    0 7px 12px rgba(0,0,0,.42),
    inset 0 4px 6px rgba(255,255,255,.55),
    inset 0 -9px 12px rgba(0,0,0,.22) !important;
}
.dt-dom-chip::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.58);
  pointer-events: none;
}
.dt-dom-chip.active {
  outline: 0 !important;
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 4px rgba(255,231,99,.38),
    0 0 22px rgba(255,226,66,.82),
    0 9px 14px rgba(0,0,0,.45),
    inset 0 4px 6px rgba(255,255,255,.62) !important;
}
.dt-dom-chip.chip-10000 { font-size: 14px !important; }
.dt-dom-tools { display: none !important; }
@media (max-width: 430px) {
  .dt-dom-footer {
    left: 60px !important;
    right: 60px !important;
    height: 144px !important;
    bottom: 8px !important;
    padding: 14px 10px 10px !important;
  }
  .dt-dom-chips {
    height: 112px !important;
    grid-template-columns: repeat(3, 52px) !important;
    gap: 12px 15px !important;
  }
  .dt-dom-chip {
    width: 52px !important;
    height: 52px !important;
    border-width: 5px !important;
    font-size: 16px !important;
  }
  .dt-dom-chip.chip-10000 { font-size: 12px !important; }
}
/* TRUE EOF 302: Dragon Tiger casino-style bottom betting console. */
.dt-dom-footer {
  left: 12px !important;
  right: 12px !important;
  bottom: 6px !important;
  height: 170px !important;
  padding: 18px 74px 12px 122px !important;
  border-radius: 52% 52% 18px 18px / 24% 24% 16px 16px !important;
  background:
    radial-gradient(ellipse at 52% -10%, rgba(111, 83, 69, .9) 0%, rgba(53, 34, 34, .98) 44%, rgba(28, 19, 22, .99) 100%) !important;
  border-top: 1px solid rgba(213, 159, 91, .65) !important;
  box-shadow:
    0 -9px 22px rgba(0, 0, 0, .42),
    inset 0 12px 20px rgba(255, 214, 147, .08),
    inset 0 -12px 18px rgba(0, 0, 0, .28) !important;
  overflow: visible !important;
}

.dt-dom-footer::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.dt-dom-user {
  position: absolute !important;
  left: 10px !important;
  top: 18px !important;
  width: 132px !important;
  min-height: 118px !important;
  display: block !important;
  color: #fff !important;
  z-index: 3 !important;
}

.dt-dom-user-photo {
  position: absolute;
  left: 6px;
  top: 8px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 1000;
  color: #fff7cf;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .32), transparent 30%),
    linear-gradient(145deg, #243d52, #101820 58%, #35221e);
  border: 3px solid #d9a84b;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 230, 145, .28);
}

.dt-dom-me {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 38px !important;
  height: 38px !important;
  z-index: 4 !important;
  font-size: 20px !important;
  background: radial-gradient(circle at 38% 25%, #fff7b8, #d69a25 68%, #7c4300) !important;
  border: 2px solid #ffeaa7 !important;
}

.dt-dom-user-meta {
  position: absolute;
  left: 76px;
  top: 18px;
  display: grid;
  gap: 4px;
  min-width: 82px;
}

.dt-dom-user-meta strong {
  font-size: 14px !important;
  line-height: 1.05 !important;
  color: #fff !important;
  white-space: nowrap;
}

.dt-dom-user-meta b {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #ffe66b !important;
}

.dt-dom-user-meta b i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff8a9, #e7ad22 58%, #9d5d00);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25);
}

.dt-dom-online {
  position: absolute;
  left: 8px;
  top: 82px;
  width: 62px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #e8f4f2;
  font-style: normal;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  background: linear-gradient(180deg, rgba(23, 58, 68, .92), rgba(7, 23, 31, .96));
  border: 1px solid rgba(255, 230, 151, .28);
}

.dt-dom-chips {
  position: relative !important;
  z-index: 2 !important;
  height: 136px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 76px) !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 14px 28px !important;
  padding: 0 !important;
}

.dt-dom-chip {
  width: 70px !important;
  height: 70px !important;
  border-width: 8px !important;
  font-size: 20px !important;
  background-clip: padding-box !important;
}

.dt-dom-chip.chip-10000 {
  font-size: 14px !important;
}

.dt-dom-chip-arrow {
  position: absolute;
  top: 82px;
  z-index: 3;
  width: 42px;
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #f7d98a;
  font-size: 58px;
  line-height: 42px;
  font-weight: 800;
  text-shadow: 0 3px 5px rgba(0, 0, 0, .55), 0 0 10px rgba(255, 207, 91, .35);
}

.dt-dom-chip-arrow.prev {
  left: 98px;
}

.dt-dom-chip-arrow.next {
  right: 18px;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    height: 154px !important;
    padding: 14px 54px 10px 96px !important;
  }

  .dt-dom-user {
    left: 6px !important;
    top: 18px !important;
    width: 112px !important;
    min-height: 108px !important;
  }

  .dt-dom-user-photo {
    width: 54px;
    height: 54px;
    font-size: 21px;
  }

  .dt-dom-me {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  .dt-dom-user-meta {
    left: 60px;
    top: 16px;
    min-width: 70px;
  }

  .dt-dom-user-meta strong {
    font-size: 12px !important;
  }

  .dt-dom-user-meta b {
    font-size: 11px !important;
  }

  .dt-dom-user-meta b i {
    width: 12px;
    height: 12px;
  }

  .dt-dom-online {
    top: 70px;
    left: 7px;
    width: 52px;
    height: 34px;
    font-size: 9px;
  }

  .dt-dom-chips {
    height: 126px !important;
    grid-template-columns: repeat(3, 58px) !important;
    gap: 12px 20px !important;
  }

  .dt-dom-chip {
    width: 56px !important;
    height: 56px !important;
    border-width: 6px !important;
    font-size: 16px !important;
  }

  .dt-dom-chip.chip-10000 {
    font-size: 11px !important;
  }

  .dt-dom-chip-arrow {
    top: 76px;
    width: 32px;
    height: 42px;
    font-size: 46px;
  }

  .dt-dom-chip-arrow.prev {
    left: 72px;
  }

  .dt-dom-chip-arrow.next {
    right: 8px;
  }
}
/* TRUE EOF 303: closer Dragon Tiger bottom betting desk layout. */
.dt-dom-footer {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 156px !important;
  padding: 14px 70px 10px 138px !important;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0 !important;
  background:
    radial-gradient(ellipse at 52% -18%, rgba(111, 75, 55, .92) 0%, rgba(52, 33, 32, .98) 45%, rgba(25, 18, 21, .99) 100%) !important;
  border-top: 1px solid rgba(218, 166, 84, .72) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow:
    0 -11px 22px rgba(0, 0, 0, .48),
    inset 0 12px 20px rgba(255, 223, 161, .07),
    inset 0 -18px 18px rgba(0, 0, 0, .28) !important;
}

.dt-dom-footer::before {
  left: 88px !important;
  right: 18px !important;
  top: 10px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(255, 245, 210, .08), rgba(255, 255, 255, 0)) !important;
}

.dt-dom-footer::after {
  content: "";
  position: absolute;
  left: 112px;
  right: 18px;
  bottom: 8px;
  height: 52px;
  border-radius: 0 0 26px 26px;
  border: 1px solid rgba(204, 151, 78, .16);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .14));
  pointer-events: none;
}

.dt-dom-user {
  left: 8px !important;
  top: 10px !important;
  width: 136px !important;
  height: 132px !important;
  min-height: 132px !important;
}

.dt-dom-user-photo {
  left: 10px !important;
  top: 12px !important;
  width: 72px !important;
  height: 72px !important;
  font-size: 28px !important;
  border-width: 3px !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .38), transparent 31%),
    linear-gradient(145deg, #526778, #1f303c 56%, #4b2d22) !important;
}

.dt-dom-me {
  left: 2px !important;
  top: 2px !important;
  width: 42px !important;
  height: 42px !important;
  font-size: 22px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .42), inset 0 2px 3px rgba(255, 255, 255, .58) !important;
}

.dt-dom-user-meta {
  left: 88px !important;
  top: 36px !important;
  min-width: 74px !important;
  gap: 7px !important;
}

.dt-dom-user-meta strong {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.dt-dom-user-meta b {
  font-size: 12px !important;
  color: #ffe277 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55) !important;
}

.dt-dom-online {
  left: 12px !important;
  top: 92px !important;
  width: 68px !important;
  height: 34px !important;
  border-radius: 16px !important;
  font-size: 10px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .1), transparent 42%),
    linear-gradient(180deg, rgba(23, 57, 63, .92), rgba(9, 22, 28, .98)) !important;
}

.dt-dom-chips {
  height: 130px !important;
  grid-template-columns: repeat(3, 72px) !important;
  gap: 12px 34px !important;
  align-content: center !important;
  transform: translateY(-3px);
}

.dt-dom-chip {
  width: 66px !important;
  height: 66px !important;
  border-width: 8px !important;
  font-size: 19px !important;
  box-shadow:
    0 7px 9px rgba(0, 0, 0, .42),
    0 0 18px currentColor,
    inset 0 0 0 4px rgba(255, 255, 255, .78),
    inset 0 -8px 9px rgba(0, 0, 0, .18) !important;
}

.dt-dom-chip.chip-10000 {
  font-size: 13px !important;
}

.dt-dom-chip-arrow {
  top: 76px !important;
  width: 34px !important;
  height: 50px !important;
  font-size: 56px !important;
  color: #f0d07b !important;
}

.dt-dom-chip-arrow.prev {
  left: 92px !important;
}

.dt-dom-chip-arrow.next {
  right: 14px !important;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    height: 142px !important;
    padding: 12px 48px 8px 112px !important;
  }

  .dt-dom-footer::before {
    left: 78px !important;
    right: 12px !important;
  }

  .dt-dom-footer::after {
    left: 92px;
    right: 10px;
    bottom: 7px;
  }

  .dt-dom-user {
    left: 4px !important;
    top: 9px !important;
    width: 112px !important;
    height: 118px !important;
    min-height: 118px !important;
  }

  .dt-dom-user-photo {
    left: 7px !important;
    top: 10px !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 22px !important;
  }

  .dt-dom-me {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  .dt-dom-user-meta {
    left: 68px !important;
    top: 30px !important;
    min-width: 58px !important;
    gap: 5px !important;
  }

  .dt-dom-user-meta strong {
    font-size: 11px !important;
  }

  .dt-dom-user-meta b {
    font-size: 10px !important;
  }

  .dt-dom-online {
    left: 8px !important;
    top: 76px !important;
    width: 56px !important;
    height: 31px !important;
    font-size: 9px !important;
  }

  .dt-dom-chips {
    height: 118px !important;
    grid-template-columns: repeat(3, 54px) !important;
    gap: 10px 20px !important;
  }

  .dt-dom-chip {
    width: 52px !important;
    height: 52px !important;
    border-width: 6px !important;
    font-size: 15px !important;
  }

  .dt-dom-chip.chip-10000 {
    font-size: 10px !important;
  }

  .dt-dom-chip-arrow {
    top: 72px !important;
    width: 28px !important;
    height: 38px !important;
    font-size: 42px !important;
  }

  .dt-dom-chip-arrow.prev {
    left: 70px !important;
  }

  .dt-dom-chip-arrow.next {
    right: 6px !important;
  }
}
/* TRUE EOF 304: cleaner Dragon Tiger bottom chip tray without arrows. */
.dt-dom-chip-arrow {
  display: none !important;
}

.dt-dom-footer {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 150px !important;
  padding: 12px 18px 10px 110px !important;
  border-radius: 58% 58% 0 0 / 26% 26% 0 0 !important;
  background:
    radial-gradient(ellipse at 58% 2%, rgba(119, 91, 73, .82) 0%, rgba(52, 35, 33, .97) 42%, rgba(25, 18, 22, .99) 100%) !important;
  border-top: 1px solid rgba(225, 172, 89, .7) !important;
  box-shadow:
    0 -10px 20px rgba(0, 0, 0, .5),
    inset 0 12px 22px rgba(255, 235, 180, .08),
    inset 0 -16px 18px rgba(0, 0, 0, .3) !important;
}

.dt-dom-footer::before {
  left: 108px !important;
  right: 18px !important;
  top: 12px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 68%) !important;
}

.dt-dom-footer::after {
  display: none !important;
}

.dt-dom-user {
  left: 4px !important;
  top: 16px !important;
  width: 108px !important;
  height: 112px !important;
  min-height: 112px !important;
}

.dt-dom-user-photo {
  display: none !important;
}

.dt-dom-me {
  left: 8px !important;
  top: 0 !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  font-size: 28px !important;
  color: #492a02 !important;
  background:
    radial-gradient(circle at 35% 25%, #fff5c7 0%, #e9b848 48%, #936214 100%) !important;
  border: 3px solid #f8df8d !important;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, .45),
    inset 0 3px 5px rgba(255, 255, 255, .5) !important;
}

.dt-dom-user-meta {
  left: 78px !important;
  top: 18px !important;
  min-width: 72px !important;
  gap: 5px !important;
}

.dt-dom-user-meta strong {
  font-size: 12px !important;
  line-height: 1 !important;
  color: #fff !important;
}

.dt-dom-user-meta b {
  font-size: 11px !important;
  color: #ffe15e !important;
}

.dt-dom-user-meta b i {
  width: 12px !important;
  height: 12px !important;
}

.dt-dom-online {
  left: 14px !important;
  top: 78px !important;
  width: 66px !important;
  height: 30px !important;
  border-radius: 16px !important;
  font-size: 9px !important;
  background: linear-gradient(180deg, rgba(28, 72, 72, .94), rgba(10, 32, 36, .98)) !important;
  border: 1px solid rgba(145, 217, 199, .25) !important;
}

.dt-dom-chips {
  height: 126px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(58px, 70px)) !important;
  justify-content: space-evenly !important;
  align-content: center !important;
  gap: 12px 18px !important;
  padding: 0 6px !important;
  transform: none !important;
}

.dt-dom-chip {
  width: clamp(54px, 12vw, 68px) !important;
  height: clamp(54px, 12vw, 68px) !important;
  border-width: 7px !important;
  font-size: clamp(15px, 3.5vw, 19px) !important;
  box-shadow:
    0 5px 8px rgba(0, 0, 0, .42),
    0 0 12px currentColor,
    inset 0 0 0 4px rgba(255, 255, 255, .86),
    inset 0 -7px 9px rgba(0, 0, 0, .2) !important;
}

.dt-dom-chip.active {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow:
    0 8px 12px rgba(0, 0, 0, .5),
    0 0 18px currentColor,
    0 0 0 4px rgba(255, 231, 100, .62),
    inset 0 0 0 4px rgba(255, 255, 255, .88) !important;
}

.dt-dom-chip.chip-10000 {
  font-size: clamp(10px, 2.6vw, 13px) !important;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    height: 136px !important;
    padding: 10px 12px 8px 94px !important;
  }

  .dt-dom-footer::before {
    left: 96px !important;
    right: 10px !important;
  }

  .dt-dom-user {
    top: 14px !important;
    width: 96px !important;
  }

  .dt-dom-me {
    left: 5px !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 25px !important;
  }

  .dt-dom-user-meta {
    left: 66px !important;
    top: 16px !important;
    min-width: 58px !important;
  }

  .dt-dom-user-meta strong {
    font-size: 10px !important;
  }

  .dt-dom-user-meta b {
    font-size: 9px !important;
  }

  .dt-dom-online {
    left: 8px !important;
    top: 70px !important;
    width: 58px !important;
    height: 28px !important;
    font-size: 8px !important;
  }

  .dt-dom-chips {
    height: 118px !important;
    grid-template-columns: repeat(3, minmax(50px, 58px)) !important;
    gap: 10px 14px !important;
  }
}
/* TRUE EOF 305: Dragon Tiger bottom chips on a refined tray. */
.dt-dom-footer {
  left: 76px !important;
  right: 26px !important;
  bottom: 2px !important;
  height: 124px !important;
  padding: 0 56px 8px 62px !important;
  border-radius: 42px 42px 18px 18px / 34px 34px 16px 16px !important;
  background:
    radial-gradient(ellipse at 52% 12%, rgba(120, 92, 73, .72) 0%, rgba(58, 39, 37, .98) 46%, rgba(30, 22, 24, 1) 100%) !important;
  border: 1px solid rgba(194, 139, 70, .58) !important;
  border-top-color: rgba(228, 178, 95, .82) !important;
  box-shadow:
    0 -8px 18px rgba(0, 0, 0, .46),
    inset 0 9px 16px rgba(255, 226, 172, .08),
    inset 0 -13px 18px rgba(0, 0, 0, .34) !important;
  overflow: visible !important;
}

.dt-dom-footer::before {
  content: "";
  position: absolute;
  left: 24px !important;
  right: 24px !important;
  top: 8px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 72%) !important;
  pointer-events: none;
}

.dt-dom-footer::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 7px 10px 6px 10px;
  border-radius: 34px 34px 14px 14px / 28px 28px 12px 12px;
  border: 1px solid rgba(255, 214, 128, .2);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}

.dt-dom-chip-arrow {
  display: grid !important;
  place-items: center;
  top: 52px !important;
  width: 32px !important;
  height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  color: #edcf85 !important;
  font-size: 56px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow:
    0 3px 4px rgba(0, 0, 0, .65),
    0 0 8px rgba(255, 217, 120, .32) !important;
  z-index: 5 !important;
}

.dt-dom-chip-arrow.prev {
  left: 13px !important;
}

.dt-dom-chip-arrow.next {
  right: 13px !important;
}

.dt-dom-user {
  left: -72px !important;
  top: 2px !important;
  width: 140px !important;
  height: 122px !important;
  min-height: 122px !important;
  z-index: 6 !important;
}

.dt-dom-me {
  left: 0 !important;
  top: 4px !important;
  width: 58px !important;
  height: 58px !important;
  font-size: 25px !important;
}

.dt-dom-user-meta {
  left: 62px !important;
  top: 21px !important;
  min-width: 86px !important;
}

.dt-dom-user-meta strong {
  font-size: 12px !important;
}

.dt-dom-user-meta b {
  font-size: 11px !important;
}

.dt-dom-online {
  left: 8px !important;
  top: 76px !important;
  width: 62px !important;
  height: 28px !important;
  font-size: 9px !important;
}

.dt-dom-chips {
  position: relative !important;
  z-index: 4 !important;
  height: 124px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 66px) !important;
  justify-content: center !important;
  align-content: center !important;
  gap: 7px 24px !important;
  padding: 0 !important;
  transform: none !important;
}

.dt-dom-chip {
  width: 62px !important;
  height: 62px !important;
  border-width: 7px !important;
  font-size: 18px !important;
  box-shadow:
    0 6px 7px rgba(0, 0, 0, .52),
    0 0 11px currentColor,
    inset 0 0 0 4px rgba(255, 255, 255, .9),
    inset 0 -6px 8px rgba(0, 0, 0, .2) !important;
}

.dt-dom-chip:nth-child(-n + 3) {
  transform: translateY(-10px) !important;
}

.dt-dom-chip.active {
  transform: translateY(-7px) scale(1.04) !important;
}

.dt-dom-chip:nth-child(-n + 3).active {
  transform: translateY(-16px) scale(1.04) !important;
}

.dt-dom-chip.chip-10000 {
  font-size: 12px !important;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    left: 68px !important;
    right: 12px !important;
    bottom: 2px !important;
    height: 116px !important;
    padding: 0 42px 7px 42px !important;
    border-radius: 34px 34px 14px 14px / 28px 28px 12px 12px !important;
  }

  .dt-dom-user {
    left: -62px !important;
    top: 2px !important;
    width: 122px !important;
  }

  .dt-dom-me {
    width: 52px !important;
    height: 52px !important;
    font-size: 23px !important;
  }

  .dt-dom-user-meta {
    left: 56px !important;
    top: 20px !important;
    min-width: 72px !important;
  }

  .dt-dom-online {
    left: 6px !important;
    top: 68px !important;
    width: 56px !important;
    height: 26px !important;
  }

  .dt-dom-chip-arrow {
    top: 49px !important;
    width: 26px !important;
    height: 38px !important;
    font-size: 46px !important;
  }

  .dt-dom-chip-arrow.prev {
    left: 8px !important;
  }

  .dt-dom-chip-arrow.next {
    right: 8px !important;
  }

  .dt-dom-chips {
    height: 112px !important;
    grid-template-columns: repeat(3, 54px) !important;
    gap: 6px 13px !important;
  }

  .dt-dom-chip {
    width: 50px !important;
    height: 50px !important;
    border-width: 6px !important;
    font-size: 15px !important;
  }

  .dt-dom-chip.chip-10000 {
    font-size: 10px !important;
  }
}
/* TRUE EOF 306: Dragon Tiger chips in one top rail. */
.dt-dom-footer {
  left: 70px !important;
  right: 18px !important;
  bottom: 4px !important;
  height: 108px !important;
  padding: 8px 42px 8px 48px !important;
  border-radius: 30px 30px 16px 16px !important;
  background:
    linear-gradient(180deg, rgba(76, 51, 44, .98), rgba(35, 24, 25, .99)) !important;
  border: 1px solid rgba(208, 148, 70, .62) !important;
  box-shadow:
    0 -7px 16px rgba(0, 0, 0, .45),
    inset 0 9px 16px rgba(255, 225, 168, .08),
    inset 0 -14px 20px rgba(0, 0, 0, .34) !important;
}

.dt-dom-footer::before {
  content: "";
  position: absolute;
  left: 12px !important;
  right: 12px !important;
  top: 8px !important;
  height: 48px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(54, 38, 38, .95), rgba(31, 22, 24, .98)) !important;
  border: 1px solid rgba(212, 151, 78, .48) !important;
  box-shadow: inset 0 1px 5px rgba(255, 230, 180, .08) !important;
  pointer-events: none;
}

.dt-dom-footer::after {
  display: none !important;
}

.dt-dom-user {
  left: -64px !important;
  top: 10px !important;
  width: 132px !important;
  height: 92px !important;
  min-height: 92px !important;
}

.dt-dom-me {
  left: 0 !important;
  top: 0 !important;
  width: 54px !important;
  height: 54px !important;
  font-size: 24px !important;
}

.dt-dom-user-meta {
  left: 56px !important;
  top: 15px !important;
  min-width: 72px !important;
}

.dt-dom-online {
  left: 4px !important;
  top: 62px !important;
  width: 58px !important;
  height: 26px !important;
}

.dt-dom-chips {
  z-index: 4 !important;
  height: 60px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  transform: none !important;
}

.dt-dom-chip {
  width: clamp(42px, 8.8vw, 58px) !important;
  height: clamp(42px, 8.8vw, 58px) !important;
  border-width: 6px !important;
  font-size: clamp(12px, 2.8vw, 17px) !important;
  transform: none !important;
}

.dt-dom-chip:nth-child(-n + 3),
.dt-dom-chip:nth-child(-n + 3).active,
.dt-dom-chip.active {
  transform: none !important;
}

.dt-dom-chip.chip-10000 {
  font-size: clamp(8px, 2.1vw, 11px) !important;
}

.dt-dom-chip-arrow {
  top: 58px !important;
  width: 28px !important;
  height: 34px !important;
  font-size: 44px !important;
}

.dt-dom-chip-arrow.prev {
  left: 10px !important;
}

.dt-dom-chip-arrow.next {
  right: 10px !important;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    left: 62px !important;
    right: 8px !important;
    height: 100px !important;
    padding: 7px 34px 7px 38px !important;
  }

  .dt-dom-footer::before {
    top: 7px !important;
    height: 43px !important;
  }

  .dt-dom-user {
    left: -58px !important;
    top: 9px !important;
    width: 112px !important;
  }

  .dt-dom-me {
    width: 48px !important;
    height: 48px !important;
    font-size: 21px !important;
  }

  .dt-dom-user-meta {
    left: 50px !important;
    top: 13px !important;
  }

  .dt-dom-online {
    top: 57px !important;
    width: 52px !important;
    height: 24px !important;
  }

  .dt-dom-chips {
    height: 54px !important;
    gap: 5px !important;
  }

  .dt-dom-chip {
    width: clamp(36px, 8.4vw, 48px) !important;
    height: clamp(36px, 8.4vw, 48px) !important;
    border-width: 5px !important;
  }

  .dt-dom-chip-arrow {
    top: 56px !important;
    width: 24px !important;
    height: 30px !important;
    font-size: 38px !important;
  }
}
/* TRUE EOF 307: casino-style physical chips. */
.dt-dom-chip {
  --chip-main: #d72c68;
  --chip-dark: #8d123b;
  --chip-light: #ff73a3;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--chip-main) !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 30%, transparent 31%),
    conic-gradient(
      from 0deg,
      #f8f8f8 0 9deg,
      var(--chip-main) 9deg 27deg,
      #f8f8f8 27deg 36deg,
      var(--chip-main) 36deg 63deg,
      var(--chip-dark) 63deg 81deg,
      #f8f8f8 81deg 90deg,
      var(--chip-main) 90deg 117deg,
      #f8f8f8 117deg 126deg,
      var(--chip-main) 126deg 153deg,
      var(--chip-dark) 153deg 171deg,
      #f8f8f8 171deg 180deg,
      var(--chip-main) 180deg 207deg,
      #f8f8f8 207deg 216deg,
      var(--chip-main) 216deg 243deg,
      var(--chip-dark) 243deg 261deg,
      #f8f8f8 261deg 270deg,
      var(--chip-main) 270deg 297deg,
      #f8f8f8 297deg 306deg,
      var(--chip-main) 306deg 333deg,
      var(--chip-dark) 333deg 351deg,
      #f8f8f8 351deg 360deg
    ) !important;
  box-shadow:
    0 7px 0 var(--chip-dark),
    0 9px 10px rgba(0, 0, 0, .48),
    0 0 18px color-mix(in srgb, var(--chip-main) 70%, transparent),
    inset 0 3px 4px rgba(255, 255, 255, .65),
    inset 0 -5px 7px rgba(0, 0, 0, .22) !important;
  text-shadow: 0 1px 0 #fff, 0 2px 2px rgba(0, 0, 0, .15) !important;
}

.dt-dom-chip::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .18) 28%, transparent 42%),
    radial-gradient(circle, #fbfbfb 0 55%, #dfe5ea 68%, #fff 100%);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, .13),
    0 0 0 2px color-mix(in srgb, var(--chip-main) 60%, #fff);
}

.dt-dom-chip::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -2;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .88);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12);
}

.dt-dom-chip.chip-10 {
  --chip-main: #d82b67;
  --chip-dark: #8d123c;
  --chip-light: #ff74a5;
}

.dt-dom-chip.chip-50 {
  --chip-main: #20b943;
  --chip-dark: #0c6d26;
  --chip-light: #76ff91;
}

.dt-dom-chip.chip-100 {
  --chip-main: #1596d4;
  --chip-dark: #08638f;
  --chip-light: #80dfff;
}

.dt-dom-chip.chip-500 {
  --chip-main: #9447dc;
  --chip-dark: #5d219d;
  --chip-light: #c991ff;
}

.dt-dom-chip.chip-1000 {
  --chip-main: #f06b18;
  --chip-dark: #9b3500;
  --chip-light: #ffae51;
}

.dt-dom-chip.chip-10000 {
  --chip-main: #8230d9;
  --chip-dark: #4a1495;
  --chip-light: #b777ff;
}
/* TRUE EOF 308: smaller flat Dragon Tiger chips with clearer active state. */
.dt-dom-chips {
  grid-template-columns: repeat(6, 42px) !important;
  gap: 7px !important;
}

.dt-dom-chip {
  width: 40px !important;
  height: 40px !important;
  border-width: 0 !important;
  font-size: 12px !important;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, .38),
    0 0 7px color-mix(in srgb, var(--chip-main) 55%, transparent),
    inset 0 2px 3px rgba(255, 255, 255, .48),
    inset 0 -3px 4px rgba(0, 0, 0, .16) !important;
}

.dt-dom-chip::before {
  inset: 7px !important;
  border-width: 1px !important;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, .1),
    0 0 0 1px color-mix(in srgb, var(--chip-main) 50%, #fff) !important;
}

.dt-dom-chip::after {
  inset: 2px !important;
  border-width: 1px !important;
}

.dt-dom-chip.chip-10000 {
  font-size: 8px !important;
}

.dt-dom-chip.active {
  transform: translateY(-3px) scale(1.12) !important;
  filter: brightness(1.12) saturate(1.2);
  box-shadow:
    0 5px 8px rgba(0, 0, 0, .45),
    0 0 0 3px #ffe76a,
    0 0 14px rgba(255, 223, 74, .95),
    inset 0 2px 3px rgba(255, 255, 255, .55),
    inset 0 -3px 4px rgba(0, 0, 0, .16) !important;
}

.dt-dom-chip:nth-child(-n + 3),
.dt-dom-chip:nth-child(-n + 3).active {
  transform: none !important;
}

.dt-dom-chip:nth-child(-n + 3).active {
  transform: translateY(-3px) scale(1.12) !important;
}

@media (max-width: 430px) {
  .dt-dom-chips {
    grid-template-columns: repeat(6, 36px) !important;
    gap: 5px !important;
  }

  .dt-dom-chip {
    width: 34px !important;
    height: 34px !important;
    font-size: 10px !important;
  }

  .dt-dom-chip::before {
    inset: 6px !important;
  }

  .dt-dom-chip.chip-10000 {
    font-size: 7px !important;
  }
}
/* TRUE EOF 309: full-width Dragon Tiger bottom tray with user block inside. */
.dt-dom-footer {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 108px !important;
  padding: 10px 22px 10px 104px !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    radial-gradient(ellipse at 54% 0%, rgba(112, 82, 63, .72), rgba(55, 36, 34, .98) 44%, rgba(24, 17, 20, 1) 100%) !important;
  border: 1px solid rgba(205, 145, 72, .66) !important;
  border-bottom: 0 !important;
  box-shadow:
    0 -8px 18px rgba(0, 0, 0, .48),
    inset 0 10px 18px rgba(255, 228, 174, .08),
    inset 0 -14px 18px rgba(0, 0, 0, .32) !important;
}

.dt-dom-footer::before {
  left: 92px !important;
  right: 14px !important;
  top: 10px !important;
  height: 48px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(66, 45, 42, .9), rgba(30, 21, 23, .96)) !important;
  border: 1px solid rgba(211, 151, 80, .45) !important;
  box-shadow: inset 0 1px 6px rgba(255, 232, 188, .08) !important;
}

.dt-dom-user {
  left: 8px !important;
  top: 10px !important;
  width: 98px !important;
  height: 88px !important;
  min-height: 88px !important;
  z-index: 6 !important;
}

.dt-dom-me {
  left: 0 !important;
  top: 0 !important;
  width: 50px !important;
  height: 50px !important;
  font-size: 22px !important;
}

.dt-dom-user-meta {
  left: 54px !important;
  top: 12px !important;
  min-width: 62px !important;
  gap: 3px !important;
}

.dt-dom-user-meta strong {
  font-size: 10px !important;
}

.dt-dom-user-meta b {
  font-size: 9px !important;
}

.dt-dom-user-meta b i {
  width: 10px !important;
  height: 10px !important;
}

.dt-dom-online {
  left: 2px !important;
  top: 58px !important;
  width: 58px !important;
  height: 24px !important;
  border-radius: 13px !important;
  font-size: 8px !important;
}

.dt-dom-chips {
  height: 54px !important;
  grid-template-columns: repeat(6, 40px) !important;
  justify-content: space-evenly !important;
  gap: 6px !important;
}

.dt-dom-chip-arrow {
  display: none !important;
}

@media (max-width: 430px) {
  .dt-dom-footer {
    height: 100px !important;
    padding: 9px 10px 9px 86px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .dt-dom-footer::before {
    left: 78px !important;
    right: 8px !important;
    top: 9px !important;
    height: 44px !important;
  }

  .dt-dom-user {
    left: 6px !important;
    top: 9px !important;
    width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
  }

  .dt-dom-me {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  .dt-dom-user-meta {
    left: 46px !important;
    top: 10px !important;
    min-width: 50px !important;
  }

  .dt-dom-user-meta strong {
    font-size: 9px !important;
  }

  .dt-dom-user-meta b {
    font-size: 8px !important;
  }

  .dt-dom-online {
    top: 53px !important;
    width: 50px !important;
    height: 22px !important;
    font-size: 7px !important;
  }

  .dt-dom-chips {
    height: 48px !important;
    grid-template-columns: repeat(6, 34px) !important;
    gap: 4px !important;
  }
}

/* TRUE EOF 310: Dragon Tiger random betting chip piles and flight animation. */
.dt-dom-chip-cloud {
  left: 118px !important;
  right: 16px !important;
  top: 37px !important;
  bottom: 10px !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.dt-dom-bet-zone.tie .dt-dom-chip-cloud {
  top: 42px !important;
}

.dt-mini-chip {
  position: absolute !important;
  left: var(--x, 50%) !important;
  top: var(--y, 50%) !important;
  z-index: var(--z, 10) !important;
  width: 25px !important;
  height: 25px !important;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .88), rgba(255, 255, 255, 0) 23%),
    radial-gradient(circle, var(--chip-inner, #d7284d) 0 42%, #fff 43% 56%, var(--chip-outer, #c3123a) 57% 100%) !important;
  border: 2px solid rgba(255, 255, 255, .95) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .38),
    inset 0 0 0 2px rgba(255, 255, 255, .5),
    inset 0 -3px 4px rgba(0, 0, 0, .18) !important;
}

.dt-mini-chip::before,
.dt-mini-chip::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .72);
  pointer-events: none;
}

.dt-mini-chip::after {
  inset: 7px;
  border: 0;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  z-index: -1;
}

.dt-mini-chip.chip-10 {
  --chip-inner: #e92b5a;
  --chip-outer: #b20b31;
}

.dt-mini-chip.chip-50 {
  --chip-inner: #4ec33f;
  --chip-outer: #15982e;
}

.dt-mini-chip.chip-100 {
  --chip-inner: #2ca7e6;
  --chip-outer: #066fb9;
}

.dt-mini-chip.chip-500 {
  --chip-inner: #8a54ef;
  --chip-outer: #5a20b9;
}

.dt-mini-chip.chip-1000 {
  --chip-inner: #f07b21;
  --chip-outer: #bd4d05;
}

.dt-mini-chip.chip-10000 {
  --chip-inner: #9947e6;
  --chip-outer: #6516b4;
  font-size: 6px !important;
}

.dt-flying-chip {
  position: fixed !important;
  left: 0;
  top: 0;
  width: 31px !important;
  height: 31px !important;
  margin: -15px 0 0 -15px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 1;
  transition:
    transform .46s cubic-bezier(.22, .72, .18, 1),
    opacity .46s ease !important;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .45));
}

@media (max-width: 430px) {
  .dt-dom-chip-cloud {
    left: 92px !important;
    right: 10px !important;
    top: 34px !important;
    bottom: 8px !important;
  }

  .dt-mini-chip {
    width: 21px !important;
    height: 21px !important;
    font-size: 7px !important;
    border-width: 2px !important;
  }

  .dt-mini-chip.chip-10000 {
    font-size: 5px !important;
  }

  .dt-flying-chip {
    width: 27px !important;
    height: 27px !important;
    margin: -13px 0 0 -13px !important;
  }
}

/* TRUE EOF 311: Dragon Tiger bet zones show chips only. */
.dt-dom-bet-zone.chip-only {
  padding-left: 118px !important;
}

.dt-dom-bet-zone.chip-only .dt-dom-chip-cloud {
  left: 132px !important;
  right: 12px !important;
  top: 16px !important;
  bottom: 14px !important;
}

.dt-dom-bet-zone.chip-only.tie .dt-dom-chip-cloud {
  top: 16px !important;
}

@media (max-width: 430px) {
  .dt-dom-bet-zone.chip-only {
    padding-left: 76px !important;
  }

  .dt-dom-bet-zone.chip-only .dt-dom-chip-cloud {
    left: 96px !important;
    right: 8px !important;
    top: 14px !important;
    bottom: 12px !important;
  }
}

/* TRUE EOF 313: Dragon Tiger chip piles are dense and naturally scattered. */
.dt-dom-bet-zone.chip-only .dt-mini-chip {
  width: 24px !important;
  height: 24px !important;
  margin: -1px !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .34));
}

.dt-dom-bet-zone.chip-only.tie .dt-mini-chip {
  width: 23px !important;
  height: 23px !important;
}

@media (max-width: 430px) {
  .dt-dom-bet-zone.chip-only .dt-mini-chip {
    width: 20px !important;
    height: 20px !important;
  }
}

/* TRUE EOF 314: Keep random Dragon Tiger chips scattered in two dimensions. */
.dt-dom-bet-zone.chip-only .dt-dom-chip-cloud {
  contain: layout paint !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip {
  max-width: 24px !important;
  max-height: 24px !important;
}

/* TRUE EOF 315: Keep Dragon Tiger chips clear of the left zone title plate. */
.dt-dom-bet-zone.chip-only .dt-dom-zone-name {
  z-index: 3 !important;
}

.dt-dom-bet-zone.chip-only .dt-dom-chip-cloud {
  z-index: 4 !important;
}

/* TRUE EOF 316: Dragon Tiger small chip labels keep a fixed size. */
.dt-dom-bet-zone.chip-only .dt-mini-chip,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-10,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-50,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-100,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-500,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-1000,
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-10000 {
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

@media (max-width: 430px) {
  .dt-dom-bet-zone.chip-only .dt-mini-chip,
  .dt-dom-bet-zone.chip-only .dt-mini-chip.chip-10000 {
    font-size: 7px !important;
  }
}

/* TRUE EOF 318: Preserve distinct Dragon Tiger chip colors by denomination. */
.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-10 {
  --chip-inner: #e92b5a !important;
  --chip-outer: #b20b31 !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-50 {
  --chip-inner: #4ec33f !important;
  --chip-outer: #15982e !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-100 {
  --chip-inner: #2ca7e6 !important;
  --chip-outer: #066fb9 !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-500 {
  --chip-inner: #8a54ef !important;
  --chip-outer: #5a20b9 !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-1000 {
  --chip-inner: #f07b21 !important;
  --chip-outer: #bd4d05 !important;
}

.dt-dom-bet-zone.chip-only .dt-mini-chip.chip-10000 {
  --chip-inner: #9947e6 !important;
  --chip-outer: #6516b4 !important;
}

/* TRUE EOF 325: light pearl-blue league drawer, replacing the old dark purple drawer. */
html body #clubPage.club-page .club-league-summary .league-switch-drawer,
html body #clubPage .club-league-summary .league-switch-shell.open .league-switch-drawer {
  border-right: 1px solid rgba(255, 255, 255, .82) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.90), transparent 32%),
    linear-gradient(160deg, #eef4ff 0%, #d9e3ff 48%, #c3ccfb 100%) !important;
  background-color: #d9e3ff !important;
  color: #2d4a93 !important;
  box-shadow: 16px 0 36px rgba(82, 96, 190, .20), inset 0 1px rgba(255,255,255,.90) !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-mask {
  background: rgba(95, 119, 225, .16) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-head {
  border-bottom: 1px solid rgba(100, 119, 200, .20) !important;
  background: rgba(255,255,255,.36) !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-head span {
  color: #2d4a93 !important;
  -webkit-text-fill-color: #2d4a93 !important;
  text-shadow: none !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-head button {
  border: 1px solid rgba(103, 123, 205, .28) !important;
  background: rgba(255,255,255,.62) !important;
  color: #6470b6 !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-list button {
  border: 1px solid rgba(103, 123, 205, .34) !important;
  background: rgba(255,255,255,.68) !important;
  color: #263d7b !important;
  box-shadow: 0 7px 16px rgba(82, 96, 190, .10) !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-list button.active {
  border-color: rgba(255,223,131,.98) !important;
  background: linear-gradient(135deg, rgba(255,236,169,.98), rgba(252,199,80,.92)) !important;
  color: #5a3908 !important;
  box-shadow: 0 7px 16px rgba(156,104,30,.12), inset 0 1px rgba(255,255,255,.58) !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-list button span,
html body #clubPage.club-page .club-league-summary .league-drawer-list button small {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body #clubPage.club-page .club-league-summary .league-switch-drawer .league-dropdown-join {
  border: 1px solid rgba(255,225,143,.92) !important;
  background: linear-gradient(180deg, #ffe690, #efbb49) !important;
  color: #68430a !important;
  box-shadow: 0 8px 16px rgba(156,104,30,.14), inset 0 1px rgba(255,255,255,.64) !important;
}

/* TRUE EOF 326: increase text contrast in the light league drawer. */
html body #clubPage.club-page .club-league-summary .league-drawer-list button span {
  color: #25407f !important;
  -webkit-text-fill-color: #25407f !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-list button small {
  color: #4e5f8c !important;
  -webkit-text-fill-color: #4e5f8c !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #clubPage.club-page .club-league-summary .league-drawer-list button.active span,
html body #clubPage.club-page .club-league-summary .league-drawer-list button.active small {
  color: #553809 !important;
  -webkit-text-fill-color: #553809 !important;
}

html body #clubPage.club-page .club-league-summary .league-switch-drawer .league-dropdown-join,
html body #clubPage.club-page .club-league-summary .league-switch-drawer .league-dropdown-join span,
html body #clubPage.club-page .club-league-summary .league-switch-drawer .league-dropdown-join i {
  color: #68430a !important;
  -webkit-text-fill-color: #68430a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #clubPage.club-page .club-league-summary .league-switch-drawer .league-dropdown-join i {
  background: rgba(104, 67, 10, .15) !important;
}

/* TRUE EOF 327: lighten the Mine profile editor card. */
html body.theme-pearl-blue #adminPage.admin-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.26), transparent 32%),
    linear-gradient(155deg, #6f8ff0 0%, #7f88ee 48%, #9b78e6 100%) !important;
}

html body.theme-pearl-blue #adminPage .mine-profile-card,
html body #adminPage .mine-profile-card {
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.70), transparent 32%),
    linear-gradient(145deg, rgba(218,228,255,.88), rgba(181,196,251,.82) 52%, rgba(159,161,236,.82)) !important;
  color: #294482 !important;
  box-shadow: 0 18px 38px rgba(67,78,168,.20), inset 0 1px rgba(255,255,255,.78) !important;
}

html body #adminPage .mine-profile-heading > span {
  background: linear-gradient(90deg, #7edcff, #ffe482) !important;
  color: #24519a !important;
  -webkit-text-fill-color: #24519a !important;
  text-shadow: none !important;
}

html body #adminPage .mine-profile-heading > strong {
  color: #ffffff !important;
  text-shadow: 0 2px 9px rgba(65,76,160,.28) !important;
}

html body #adminPage .mine-profile-heading > em,
html body #adminPage .mine-name-editor small {
  color: rgba(43,61,116,.78) !important;
  -webkit-text-fill-color: rgba(43,61,116,.78) !important;
  text-shadow: none !important;
}

html body #adminPage .mine-name-editor label {
  color: #2c4383 !important;
  -webkit-text-fill-color: #2c4383 !important;
  text-shadow: none !important;
}

html body #adminPage .mine-name-editor input {
  border: 1px solid rgba(91,112,202,.36) !important;
  background: rgba(255,255,255,.68) !important;
  color: #263b77 !important;
  -webkit-text-fill-color: #263b77 !important;
  box-shadow: inset 0 2px 7px rgba(78,91,174,.08) !important;
}

html body #adminPage .mine-avatar-picker > span {
  border-color: rgba(255,255,255,.88) !important;
  background: linear-gradient(145deg, #8f85f1, #5b82ed) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(73,85,178,.18), inset 0 1px rgba(255,255,255,.56) !important;
}

html body #adminPage .mine-avatar-picker > b {
  border: 1px solid rgba(107,220,255,.54) !important;
  background: rgba(46,125,181,.28) !important;
  color: #1e599b !important;
  -webkit-text-fill-color: #1e599b !important;
}

html body #adminPage .mine-profile-save {
  background: linear-gradient(180deg, #ffe690, #efbb49) !important;
  color: #68430a !important;
  -webkit-text-fill-color: #68430a !important;
  box-shadow: 0 10px 20px rgba(156,104,30,.16), inset 0 1px rgba(255,255,255,.64) !important;
}

/* TRUE EOF 328: prevent dark first-paint flash before the second theme stylesheet loads. */
html,
html body,
html body.app-booting,
html body.theme-pearl-blue {
  background-color: #7894f2 !important;
  background:
    radial-gradient(circle at 82% 2%, rgba(232,172,255,.38), transparent 28%),
    radial-gradient(circle at 10% 18%, rgba(112,202,255,.34), transparent 34%),
    linear-gradient(155deg, #5f83ee 0%, #7888f0 48%, #9a7be6 100%) fixed !important;
}

html body.app-booting::before {
  background:
    radial-gradient(circle at 82% 2%, rgba(232,172,255,.38), transparent 28%),
    radial-gradient(circle at 10% 18%, rgba(112,202,255,.34), transparent 34%),
    linear-gradient(155deg, #5f83ee 0%, #7888f0 48%, #9a7be6 100%) fixed !important;
}

html body.theme-pearl-blue .app,
html body.theme-pearl-blue #lobby,
html body.theme-pearl-blue #clubPage,
html body.theme-pearl-blue #adminPage,
html body.theme-pearl-blue #rooms,
html body.theme-pearl-blue #room {
  background:
    radial-gradient(circle at 86% 0%, rgba(244,199,255,.32), transparent 29%),
    radial-gradient(circle at 8% 22%, rgba(112,205,255,.28), transparent 35%),
    linear-gradient(160deg, #5f83ee 0%, #7489ef 45%, #9879e5 100%) !important;
}

/* TRUE EOF 330: clearer, less harsh personal record amounts. */
html body.theme-pearl-blue #personalRecordOverlay .personal-record-row b,
html body #personalRecordOverlay .personal-record-row b {
  min-width: 58px !important;
  color: #d88a00 !important;
  -webkit-text-fill-color: #d88a00 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html body.theme-pearl-blue #personalRecordOverlay .personal-record-row b.lose,
html body #personalRecordOverlay .personal-record-row b.lose {
  color: #168eb7 !important;
  -webkit-text-fill-color: #168eb7 !important;
  text-shadow: none !important;
}

html body.theme-pearl-blue #personalRecordOverlay .personal-record-row b:not(.lose),
html body #personalRecordOverlay .personal-record-row b:not(.lose) {
  color: #cf7b00 !important;
  -webkit-text-fill-color: #cf7b00 !important;
}
/* Admin: compact Mercedes/BMW odds editor. */
.admin-form-row.admin-bmw-odds-grid {
  grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
  max-width: 820px !important;
  align-items: stretch !important;
}

.admin-form-row.admin-bmw-odds-grid input {
  min-width: 0 !important;
}

.admin-form-row.admin-bmw-odds-grid button {
  grid-column: 1 / -1 !important;
  width: min(220px, 100%) !important;
  justify-self: start !important;
}

@media (max-width: 760px) {
  .admin-form-row.admin-bmw-odds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* TRUE EOF 332: keep Sangong wager coins clean by removing the white highlight dot. */
html body #room.sangong-mode .player .bet-chip > i,
html body.theme-pearl-blue #room.sangong-mode .player .bet-chip > i {
  background: radial-gradient(circle, #f8d557 0 34%, #cc8f1f 35% 64%, #8d5b11 65% 100%) !important;
}

/* Unified recent-100 trend viewer: Mercedes/BMW, Hundred NiuNiu and Dragon Tiger. */
.bmw-trends[data-game-trend],
.dt-dom-trends[data-game-trend] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bmw-trends[data-game-trend]:focus-visible,
.dt-dom-trends[data-game-trend]:focus-visible {
  outline: 2px solid #ffe08a;
  outline-offset: 3px;
}

.game-trend-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: grid;
  place-items: center;
  padding: 18px;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.game-trend-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(24, 48, 112, .28);
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
}

.game-trend-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(860px, calc(100vw - 36px));
  max-height: min(790px, calc(100dvh - 36px));
  overflow: hidden;
  color: #1b356e;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 2%, rgba(174, 220, 255, .58), transparent 33%),
    linear-gradient(145deg, rgba(253, 254, 255, .98), rgba(226, 235, 255, .97));
  box-shadow: 0 26px 70px rgba(34, 56, 140, .28), inset 0 1px 0 #fff;
  animation: game-trend-enter .32s cubic-bezier(.2, .78, .24, 1) both;
}

.game-trend-panel > header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 16px 20px 14px 24px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 5%, rgba(126, 217, 255, .38), transparent 38%),
    linear-gradient(122deg, #315bc2, #7082e9 58%, #8b78df);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .28);
}

.game-trend-panel > header::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  width: 74px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffe58e, #efb73d);
}

.game-trend-panel > header div { min-width: 0; }
.game-trend-panel > header small {
  display: block;
  margin-bottom: 1px;
  color: #ffe796;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
}
.game-trend-panel > header h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .04em;
}
.game-trend-panel > header p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}
.game-trend-panel > header button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  background: rgba(32, 58, 133, .22);
  font: 300 30px/38px system-ui, sans-serif;
  cursor: pointer;
}

.game-trend-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px 10px;
}
.game-trend-summary span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(116, 143, 214, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 15px rgba(76, 100, 178, .08);
}
.game-trend-summary b { font-size: 13px; }
.game-trend-summary strong { color: #355fc4; font-size: 21px; }
.game-trend-summary small { color: #7d8caf; font-size: 11px; }

.game-trend-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px 10px;
  min-height: 210px;
  padding: 4px 18px 16px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.game-trend-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(82px, .8fr) minmax(104px, 1fr) minmax(50px, .6fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 13px;
  box-sizing: border-box;
  border: 1px solid rgba(119, 145, 214, .24);
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 4px 12px rgba(60, 85, 162, .06);
}
.game-trend-item.game-trend-latest {
  border-color: rgba(226, 171, 54, .7);
  background: linear-gradient(110deg, #fff9e9, rgba(255, 255, 255, .92));
  box-shadow: 0 5px 16px rgba(218, 162, 42, .14);
}
.game-trend-period {
  color: #7281a7;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.game-trend-result {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.game-trend-result strong {
  overflow: hidden;
  color: #17356f;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-trend-item > small {
  color: #7d8bad;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.game-trend-item > em {
  position: absolute;
  top: -5px;
  right: 8px;
  padding: 2px 7px;
  color: #6d4d00;
  border-radius: 99px;
  background: #ffe089;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.game-trend-badge,
.trend-panel-logo {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  object-fit: contain;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #4f7ee0, #3157b6);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}
.game-trend-item.game-trend-result-dragon .game-trend-badge { background: linear-gradient(145deg, #41b7ff, #2875d2); }
.game-trend-item.game-trend-result-tiger .game-trend-badge { background: linear-gradient(145deg, #ff935b, #e64c2e); }
.game-trend-item.game-trend-result-tie .game-trend-badge { background: linear-gradient(145deg, #58c891, #249b64); }
.game-trend-item.game-trend-result-banker .game-trend-badge { background: linear-gradient(145deg, #f5cb64, #c98a1d); }
.game-trend-item.game-trend-result-player .game-trend-badge { background: linear-gradient(145deg, #57a9f5, #4161c4); }
.game-trend-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 20px;
  color: #7483a8;
  border-top: 1px solid rgba(116, 143, 214, .2);
  background: rgba(244, 248, 255, .9);
  font-size: 11px;
}
.game-trend-panel > footer span { display: flex; align-items: center; gap: 6px; }
.game-trend-panel > footer i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3bbf82;
  box-shadow: 0 0 0 4px rgba(59, 191, 130, .12);
}
.game-trend-loading {
  display: grid;
  min-height: 320px;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #687ba8;
}
.game-trend-loading i {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(74, 110, 203, .18);
  border-top-color: #5577d8;
  border-radius: 50%;
  animation: game-trend-spin .8s linear infinite;
}

@keyframes game-trend-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes game-trend-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .game-trend-overlay {
    align-items: end;
    padding: 0;
  }
  .game-trend-panel {
    width: 100%;
    max-height: 89dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    animation-name: game-trend-sheet;
  }
  .game-trend-panel > header {
    min-height: 74px;
    padding: 13px 16px 12px 18px;
  }
  .game-trend-panel > header h2 { font-size: 21px; }
  .game-trend-panel > header button { flex-basis: 38px; width: 38px; height: 38px; font-size: 27px; line-height: 34px; }
  .game-trend-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 12px 8px;
  }
  .game-trend-summary span { min-height: 38px; padding: 5px 8px; }
  .game-trend-summary strong { font-size: 18px; }
  .game-trend-list {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 3px 12px 12px;
  }
  .game-trend-item {
    grid-template-columns: 82px minmax(100px, 1fr) 54px;
    min-height: 52px;
    padding: 7px 11px;
    border-radius: 13px;
  }
  .game-trend-panel > footer { min-height: 40px; padding: 0 14px; }
}

@keyframes game-trend-sheet {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

/* Compact premium flip/showdown control. Keep this at EOF so older room overrides
   cannot restore the oversized rectangular gold button. */
html body #room .table #tableShowBtn.table-show-btn {
  right: 24px !important;
  bottom: 54px !important;
  width: 82px !important;
  height: 31px !important;
  min-width: 82px !important;
  min-height: 31px !important;
  max-width: 82px !important;
  max-height: 31px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(242, 207, 116, 0.88) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.98) 0%, rgba(205, 226, 250, 0.98) 50%, rgba(155, 190, 233, 0.98) 100%) !important;
  color: #17447f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.35px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 3px 7px rgba(14, 52, 111, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -2px 3px rgba(50, 102, 169, 0.18) !important;
  transform: none !important;
  animation: none !important;
}

html body #room .table #tableShowBtn.table-show-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html body #room .table #tableShowBtn.table-show-btn::after {
  content: none !important;
  display: none !important;
}

html body #room .table #tableShowBtn.table-show-btn.hidden {
  display: none !important;
}

@media (max-width: 430px) {
  html body #room .table #tableShowBtn.table-show-btn {
    right: 17px !important;
    bottom: 51px !important;
    width: 74px !important;
    height: 28px !important;
    min-width: 74px !important;
    min-height: 28px !important;
    max-width: 74px !important;
    max-height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

/* Sangong hands: each hand belongs directly below its own seat.
   Keep the three cards horizontal and remove the former floating/fanned dock. */
#room.sangong-mode .player.active-seat .seat-card,
#room.sangong-mode .player.active-seat .nameplate {
  z-index: 24 !important;
}

#room.sangong-mode .player.opponent.active-seat .cards.has-cards {
  position: absolute !important;
  inset: auto !important;
  box-sizing: content-box !important;
  left: 50% !important;
  right: auto !important;
  top: 123px !important;
  bottom: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  width: 124px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  gap: 3px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

#room.sangong-mode .player.active-seat .cards.has-cards::before,
#room.sangong-mode .player.active-seat .cards.has-cards::after {
  content: none !important;
  display: none !important;
}

#room.sangong-mode .player.opponent.active-seat .card {
  box-sizing: border-box !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 6px !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  rotate: none !important;
  translate: none !important;
  scale: none !important;
  order: initial !important;
  box-shadow: 0 3px 7px rgba(0, 19, 60, 0.35) !important;
}

#room.sangong-mode .player.self.active-seat .cards.has-cards {
  position: absolute !important;
  inset: auto !important;
  box-sizing: content-box !important;
  left: 50% !important;
  right: auto !important;
  top: 8px !important;
  bottom: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  width: 210px !important;
  height: 82px !important;
  min-height: 82px !important;
  padding: 0 !important;
  gap: 3px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

#room.sangong-mode .player.self.active-seat .card {
  box-sizing: border-box !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 82px !important;
  margin: 0 !important;
  padding: 5px !important;
  border-radius: 7px !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  rotate: none !important;
  translate: none !important;
  scale: none !important;
  order: initial !important;
  box-shadow: 0 4px 9px rgba(0, 19, 60, 0.38) !important;
}

/* Restore Sangong's original emerald-and-gold compass card back.
   It is rendered from the existing in-page ornament markup, so it appears
   immediately without waiting for an image asset. */
#room.sangong-mode .card.back {
  --src-gold: #f2cf70 !important;
  --src-gold-deep: #745114 !important;
  --src-green: #07504a !important;
  --src-green-dark: #032e2b !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(26, 147, 137, 0.28), transparent 36%),
    linear-gradient(135deg, #07504a 0%, #053d39 48%, #032e2b 100%) !important;
  background-image:
    radial-gradient(circle at 50% 48%, rgba(26, 147, 137, 0.28), transparent 36%),
    linear-gradient(135deg, #07504a 0%, #053d39 48%, #032e2b 100%) !important;
  border: 0 !important;
  color: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(242, 207, 112, 0.46),
    inset 0 0 12px rgba(255, 255, 255, 0.08),
    0 3px 7px rgba(0, 19, 60, 0.35) !important;
  overflow: hidden !important;
}

#room.sangong-mode .card.back::before,
#room.sangong-mode .card.back::after {
  content: none !important;
  display: none !important;
}

#room.sangong-mode .card.back > span {
  display: block !important;
}

#room.sangong-mode .card.back .back-gold-frame {
  inset: 2px !important;
  border: 1px solid #f6d980 !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 0 0 1px #8f6619,
    inset 0 0 0 2px rgba(255, 217, 120, 0.82),
    inset 0 0 0 3px rgba(59, 40, 7, 0.82) !important;
}

#room.sangong-mode .card.back .back-compass-ring {
  border-color: #f5d47a !important;
  background:
    radial-gradient(circle, #063d38 0 18%, transparent 19%),
    conic-gradient(from 45deg, #ffe99c, #b8781b, #f7d777, #8c5510, #ffe99c) !important;
}

#room.sangong-mode .card.back .back-center-dot {
  background: #07504a !important;
  border-color: #f1cf72 !important;
}

#room.sangong-mode .card.back .back-diamond {
  display: none !important;
}

/* Sangong seat identity cards — light ice-blue glass to match the blue/gold table. */
#room.sangong-mode .player.active-seat .nameplate {
  box-sizing: border-box !important;
  min-width: 96px !important;
  padding: 4px 8px 5px !important;
  border: 1px solid rgba(241, 250, 255, 0.86) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(105deg, rgba(255, 218, 119, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(225, 243, 255, 0.96), rgba(146, 197, 244, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(51, 108, 184, 0.2),
    0 3px 8px rgba(7, 55, 123, 0.2) !important;
  color: #143b70 !important;
  text-shadow: none !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#room.sangong-mode .player.active-seat .nameplate strong {
  color: #143b70 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

#room.sangong-mode .player.active-seat .nameplate span {
  color: #8b5b00 !important;
  font-weight: 850 !important;
  text-shadow: none !important;
}

#room.sangong-mode .player.active-seat .nameplate em {
  color: #163e73 !important;
  font-weight: 950 !important;
  text-shadow: none !important;
}

/* Keep every Sangong seat label visually centered beneath its avatar. */
#room.sangong-mode .player.active-seat .nameplate {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  justify-items: center !important;
  align-content: center !important;
  column-gap: 0 !important;
  row-gap: 1px !important;
  text-align: center !important;
}

#room.sangong-mode .player.active-seat .nameplate strong,
#room.sangong-mode .player.active-seat .nameplate span,
#room.sangong-mode .player.active-seat .nameplate em {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: center !important;
  transform: none !important;
}

/* v347: Sangong is an eight-seat table — self, one top seat and three per side. */
#room.sangong-mode .player.seat-1 {
  left: 17% !important;
  top: 73% !important;
}

#room.sangong-mode .player.seat-2 {
  left: 17% !important;
  top: 50% !important;
}

#room.sangong-mode .player.seat-3 {
  left: 17% !important;
  top: 27% !important;
}

#room.sangong-mode .player.seat-4 {
  left: 50% !important;
  top: 13.5% !important;
}

#room.sangong-mode .player.seat-5 {
  left: 83% !important;
  top: 27% !important;
}

#room.sangong-mode .player.seat-6 {
  left: 83% !important;
  top: 50% !important;
}

#room.sangong-mode .player.seat-7 {
  left: 83% !important;
  top: 73% !important;
}

#room.sangong-mode .player.seat-8,
#room.sangong-mode .player.seat-9 {
  display: none !important;
}

@media (max-width: 720px) {
  /* Keep the identity block and each three-card hand inside its own seat lane. */
  #room.sangong-mode .player.opponent.active-seat {
    width: 96px !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
  }

  #room.sangong-mode .player.opponent.active-seat .seat-card {
    width: 40px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate {
    min-width: 78px !important;
    max-width: 84px !important;
    padding: 2px 5px 3px !important;
    border-radius: 7px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate em,
  #room.sangong-mode .player.opponent.active-seat .nameplate span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .cards.has-cards {
    top: 103px !important;
    width: 101px !important;
    height: 46px !important;
    min-height: 46px !important;
    gap: 2px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .card {
    flex-basis: 31px !important;
    width: 31px !important;
    min-width: 31px !important;
    height: 46px !important;
    padding: 3px !important;
    border-radius: 5px !important;
  }

  #room.sangong-mode .player.self.active-seat {
    transform: translate(-50%, -50%) scale(0.76) !important;
  }

  #room.sangong-mode .player.self.active-seat .seat-card {
    width: 42px !important;
    height: 42px !important;
    padding: 3px !important;
  }

  #room.sangong-mode .player.self.active-seat .nameplate {
    min-width: 112px !important;
    max-width: 120px !important;
    padding: 3px 7px 4px !important;
  }

  #room.sangong-mode .player.self.active-seat .nameplate strong {
    font-size: 12px !important;
  }

  #room.sangong-mode .player.self.active-seat .nameplate em,
  #room.sangong-mode .player.self.active-seat .nameplate span {
    font-size: 11px !important;
  }

  #room.sangong-mode .player.self.active-seat .cards.has-cards {
    top: 5px !important;
    width: 151px !important;
    height: 64px !important;
    min-height: 64px !important;
    gap: 3px !important;
  }

  #room.sangong-mode .player.self.active-seat .card {
    flex-basis: 43px !important;
    width: 43px !important;
    min-width: 43px !important;
    height: 64px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }
}

/* v349 — 三公点数改为贴合牌组的紧凑徽章，避免宽幅提示挤占玩家卡位。 */
#room.sangong-mode .player.opponent.active-seat .result.hand-result {
  position: absolute !important;
  left: 50% !important;
  top: 171px !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 58px !important;
  max-width: 78px !important;
  height: 23px !important;
  margin: 0 !important;
  padding: 1px 9px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 242, 188, .94) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 240, 180, .98) 14%, #f5c34d 58%, #d88c13 100%) !important;
  color: #633300 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 19px !important;
  letter-spacing: .2px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(136, 74, 4, .18),
    0 2px 5px rgba(4, 39, 91, .24) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

#room.sangong-mode .player.opponent.active-seat .result.hand-result::before,
#room.sangong-mode .player.opponent.active-seat .result.hand-result::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat .result.hand-result {
    top: 145px !important;
    min-width: 68px !important;
    max-width: 84px !important;
    height: 25px !important;
    padding: 1px 9px 0 !important;
    font-size: 16px !important;
    line-height: 21px !important;
  }
}

/* v350 — 手机端三公座位信息进一步压缩，顶部座位避开桌框。 */
@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat .nameplate {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 4px 1px !important;
    row-gap: 0 !important;
    border-radius: 6px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate strong {
    line-height: 1 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate em,
  #room.sangong-mode .player.opponent.active-seat .nameplate span {
    line-height: 1 !important;
  }

  #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 15.5% !important;
  }
}

/* v353 — 手机端三公：头像、姓名余额与牌组连续排列，顶部座位完整落入桌内。 */
@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat {
    row-gap: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate {
    margin-top: -2px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .hand,
  #room.sangong-mode .player.opponent.active-seat .cards {
    margin-top: -10px !important;
    translate: 0 -8px !important;
  }

  #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 18.5% !important;
  }
}

/* v354 — 手机端三公：压紧座位内容，顶部座位避开桌框。 */
@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat {
    row-gap: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate {
    margin-top: -3px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .hand,
  #room.sangong-mode .player.opponent.active-seat .cards,
  #room.sangong-mode .player.opponent.active-seat .player-cards,
  #room.sangong-mode .player.opponent.active-seat .sg-hand,
  #room.sangong-mode .player.opponent.active-seat .poker-cards {
    margin-top: -10px !important;
    translate: 0 -12px !important;
  }

  #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 19% !important;
  }
}

/* v354 — 手机端三公：头像、信息与牌组压紧，顶部座位完整避开桌框。 */
@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat {
    row-gap: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate {
    margin-top: -3px !important;
  }

  #room.sangong-mode .player.opponent.active-seat .hand,
  #room.sangong-mode .player.opponent.active-seat .cards,
  #room.sangong-mode .player.opponent.active-seat .player-cards,
  #room.sangong-mode .player.opponent.active-seat .sg-hand,
  #room.sangong-mode .player.opponent.active-seat .poker-cards {
    margin-top: -10px !important;
    translate: 0 -12px !important;
  }

  #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 19% !important;
  }
}
/* v352 — 手机端三公：头像、信息和牌组紧凑衔接，顶部座位避开桌框。 */
@media (max-width: 720px) {
  #room.sangong-mode .player.opponent.active-seat {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .avatar,
  #room.sangong-mode .player.opponent.active-seat .avatar-wrap,
  #room.sangong-mode .player.opponent.active-seat .nameplate,
  #room.sangong-mode .player.opponent.active-seat .hand,
  #room.sangong-mode .player.opponent.active-seat .cards {
    margin-block: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .nameplate {
    margin-top: 0 !important;
  }

  #room.sangong-mode .player.opponent.active-seat .hand,
  #room.sangong-mode .player.opponent.active-seat .cards {
    margin-top: -6px !important;
  }

  #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 18% !important;
  }
}

/* v356 — 三公手机端手牌紧贴所属玩家资料。
   保持为主样式的最后一条规则，避免旧版牌组位移再次覆盖。 */
@media (max-width: 720px) {
  html body #room.sangong-mode .player.opponent.active-seat .cards.has-cards {
    position: absolute !important;
    top: 72px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    translate: none !important;
  }

  html body #room.sangong-mode .player.self.active-seat .cards.has-cards {
    position: absolute !important;
    top: 40px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    translate: none !important;
  }
}

/* v357 — 手机端三公结算信息重新编排：
   下注贴牌底，输赢与点数在牌组下方同排展示。 */
@media (max-width: 720px) {
  html body #room.sangong-mode .player.opponent.active-seat .bet-chip {
    top: 96px !important;
    z-index: 27 !important;
    min-width: 58px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  html body #room.sangong-mode .player.opponent.active-seat > .round-delta {
    left: 25% !important;
    top: 134px !important;
    width: 54px !important;
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
    z-index: 26 !important;
  }

  html body #room.sangong-mode .player.opponent.active-seat .result.hand-result {
    left: 70% !important;
    top: 122px !important;
    width: auto !important;
    min-width: 52px !important;
    max-width: 58px !important;
    height: 23px !important;
    padding: 1px 6px 0 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    transform: translateX(-50%) !important;
    z-index: 26 !important;
  }

  html body #room.sangong-mode .player.opponent.active-seat:not(:has(> .round-delta)) .result.hand-result {
    left: 50% !important;
  }
}

/* v358 — 输赢分数置于牌面最上层，点数回到牌组下方居中。 */
@media (max-width: 720px) {
  html body #room.sangong-mode .player.active-seat:has(> .round-delta) {
    z-index: 40 !important;
  }

  html body #room.sangong-mode .player.opponent.active-seat > .round-delta {
    left: 50% !important;
    top: 88px !important;
    width: 108px !important;
    font-size: 30px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
    filter: drop-shadow(0 2px 2px rgba(0, 18, 54, .82)) !important;
  }

  html body #room.sangong-mode .player.opponent.active-seat .result.hand-result {
    left: 50% !important;
  }

  html body #room.sangong-mode .player.self.active-seat > .round-delta {
    left: 50% !important;
    top: 60px !important;
    width: 150px !important;
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
    filter: drop-shadow(0 2px 3px rgba(0, 18, 54, .86)) !important;
  }
}

/* v359 — 顶部中央座位整体下移，头像与桌框保持安全间距。 */
@media (max-width: 720px) {
  html body #room.sangong-mode .player.opponent.active-seat.seat-4 {
    top: 21.5% !important;
  }
}

/* v361 — 手机端翻牌按钮向桌内留边，并适度下移。 */
@media (max-width: 430px) {
  html body #room .table #tableShowBtn.table-show-btn {
    right: 26px !important;
    bottom: 35px !important;
  }
}

/* v362 — 联盟大厅三公桌卡：统一龙虎斗/奔驰宝马的深蓝金属质感。 */
#clubPage .club-table-card.game-sangong .club-table-scene {
  height: 184px !important;
}

#clubPage .club-table-card.game-sangong .club-table-scene::before {
  inset: 24px 18px 18px !important;
  border: 1px solid rgba(121, 214, 255, .28) !important;
  border-radius: 58px !important;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(115, 220, 255, .22), transparent 42%),
    linear-gradient(180deg, rgba(9, 74, 126, .42), rgba(3, 35, 78, .18)) !important;
  box-shadow: 0 16px 28px rgba(3, 24, 65, .26) !important;
  opacity: 1 !important;
}

#clubPage .club-table-card.game-sangong .club-table-top {
  top: 31px !important;
  width: 260px !important;
  height: 116px !important;
  padding: 23px 30px 17px !important;
  gap: 10px !important;
  border: 5px solid #1b659d !important;
  border-radius: 54px !important;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(76, 198, 255, .2), transparent 44%),
    radial-gradient(ellipse at 50% 100%, rgba(1, 21, 58, .62), transparent 58%),
    linear-gradient(180deg, #07548c 0%, #034276 54%, #022e61 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(114, 211, 247, .38),
    inset 0 5px 8px rgba(161, 229, 255, .2),
    inset 0 -9px 15px rgba(0, 17, 53, .42),
    0 0 0 2px rgba(4, 43, 92, .88),
    0 8px 0 #03244f,
    0 16px 22px rgba(1, 17, 49, .4) !important;
  z-index: 3 !important;
}

#clubPage .club-table-card.game-sangong .club-table-top::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px 12px !important;
  border: 1px solid rgba(133, 220, 255, .22) !important;
  border-radius: 42px !important;
  pointer-events: none !important;
}

#clubPage .club-table-card.game-sangong .club-table-top strong {
  color: #eefaff !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 4px rgba(0, 20, 61, .82), 0 0 12px rgba(89, 199, 255, .2) !important;
}

#clubPage .club-table-card.game-sangong .club-table-top small {
  color: rgba(196, 226, 245, .9) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 1px 2px rgba(0, 19, 55, .82) !important;
}

#clubPage .club-table-card.game-sangong .club-seat {
  z-index: 8 !important;
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(225, 245, 255, .88) !important;
  box-shadow:
    0 0 0 2px rgba(18, 88, 142, .9),
    0 5px 10px rgba(0, 20, 55, .35) !important;
}

#clubPage .club-table-card.game-sangong .club-seat.filled,
#clubPage .club-table-card.game-sangong .club-seat.filled b {
  border-radius: 50% !important;
}

#clubPage .club-table-card.game-sangong .club-seat.empty {
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 68% 34%, rgba(213, 235, 251, .7) 0 8px, transparent 9px),
    linear-gradient(145deg, rgba(59, 90, 142, .92), rgba(23, 45, 88, .96)) !important;
  opacity: .84 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s1 { left: 20px !important; top: 54px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s2 { left: 78px !important; top: 9px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s3 { left: 50% !important; top: 0 !important; margin-left: -21px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s4 { right: 78px !important; top: 9px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s5 { right: 20px !important; top: 54px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s6 { left: 28px !important; top: 113px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s7 { right: 28px !important; top: 113px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s8 { left: 82px !important; top: 135px !important; }

/* v363 — 三公桌卡第二版：对称八座、统一占位尺寸、舒展桌面比例。 */
#clubPage .club-table-card.game-sangong .club-table-scene {
  height: 196px !important;
}

#clubPage .club-table-card.game-sangong .club-table-scene::before {
  display: none !important;
}

#clubPage .club-table-card.game-sangong .club-table-top {
  top: 36px !important;
  width: 272px !important;
  height: 124px !important;
  padding: 27px 36px 20px !important;
  gap: 7px !important;
  border: 4px solid #176294 !important;
  border-radius: 48px !important;
  background:
    radial-gradient(ellipse at 50% 5%, rgba(97, 207, 250, .16), transparent 46%),
    linear-gradient(180deg, #075486 0%, #034474 52%, #033562 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(118, 209, 242, .28),
    inset 0 5px 8px rgba(151, 226, 255, .14),
    inset 0 -8px 14px rgba(0, 19, 55, .34),
    0 0 0 2px #063c70,
    0 7px 0 #032b58,
    0 13px 18px rgba(4, 24, 67, .3) !important;
}

#clubPage .club-table-card.game-sangong .club-table-top::after {
  inset: 9px 13px !important;
  border-color: rgba(151, 222, 247, .2) !important;
  border-radius: 37px !important;
}

#clubPage .club-table-card.game-sangong .club-table-top strong {
  font-size: 22px !important;
  letter-spacing: 1px !important;
}

#clubPage .club-table-card.game-sangong .club-table-top small {
  color: rgba(193, 223, 241, .88) !important;
  font-size: 11px !important;
}

#clubPage .club-table-card.game-sangong .club-seat {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  border: 2px solid rgba(229, 245, 253, .92) !important;
  box-shadow:
    0 0 0 2px rgba(16, 78, 130, .86),
    0 4px 8px rgba(0, 20, 55, .28) !important;
}

#clubPage .club-table-card.game-sangong .club-seat::after {
  display: none !important;
}

#clubPage .club-table-card.game-sangong .club-seat.filled {
  border-radius: 50% !important;
  overflow: hidden !important;
}

#clubPage .club-table-card.game-sangong .club-seat.filled b {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

#clubPage .club-table-card.game-sangong .club-seat.empty {
  border: 1px solid rgba(174, 211, 235, .62) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(54, 87, 133, .88), rgba(22, 48, 91, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 0 2px rgba(10, 59, 108, .76),
    0 4px 8px rgba(0, 20, 55, .22) !important;
  opacity: .78 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s1 { left: 16px !important; top: 64px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s2 { left: 72px !important; top: 8px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s3 { left: 50% !important; top: -4px !important; margin-left: -20px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s4 { right: 72px !important; top: 8px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s5 { right: 16px !important; top: 64px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s6 { left: auto !important; right: 55px !important; top: 135px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s7 { left: 50% !important; right: auto !important; top: 146px !important; margin-left: -20px !important; }
#clubPage .club-table-card.game-sangong .club-seat.s8 { left: 55px !important; right: auto !important; top: 135px !important; }

/* v364 — 三公桌八个座位沿同一椭圆轨迹等角度分布。 */
#clubPage .club-table-card.game-sangong .club-seat.s1 {
  left: 9px !important;
  right: auto !important;
  top: 78px !important;
  margin-left: 0 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s2 {
  left: 49px !important;
  right: auto !important;
  top: 34px !important;
  margin-left: 0 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s3 {
  left: 50% !important;
  right: auto !important;
  top: 16px !important;
  margin-left: -20px !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s4 {
  left: auto !important;
  right: 49px !important;
  top: 34px !important;
  margin-left: 0 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s5 {
  left: auto !important;
  right: 9px !important;
  top: 78px !important;
  margin-left: 0 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s6 {
  left: auto !important;
  right: 49px !important;
  top: 122px !important;
  margin-left: 0 !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s7 {
  left: 50% !important;
  right: auto !important;
  top: 140px !important;
  margin-left: -20px !important;
}

#clubPage .club-table-card.game-sangong .club-seat.s8 {
  left: 49px !important;
  right: auto !important;
  top: 122px !important;
  margin-left: 0 !important;
}