/* 百人牛牛专属牌桌 v369 */
html:has(#room.hundred-niu-mode:not(.hidden)),
html:has(#room.hundred-niu-mode:not(.hidden)) body,
html:has(#room.hundred-niu-mode:not(.hidden)) body.theme-pearl-blue,
html:has(#room.hundred-niu-mode:not(.hidden)) body.theme-pearl-blue > .app {
  width: 100% !important;
  max-width: none !important;
  background:
    linear-gradient(90deg, rgba(0, 11, 8, .86), transparent 22%, transparent 78%, rgba(0, 11, 8, .86)),
    #001d16 url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover no-repeat fixed !important;
}

#room.hundred-niu-mode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #001d16 !important;
}

html body #room#room.hundred-niu-mode {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  background: #001d16 url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover no-repeat !important;
}

#room.hundred-niu-mode > .room-head,
#room.hundred-niu-mode > .actions,
#room.hundred-niu-mode .table > .player,
#room.hundred-niu-mode .table > .table-brand,
#room.hundred-niu-mode .table > .dealer,
#room.hundred-niu-mode .table > .spectator-sit-btn,
#room.hundred-niu-mode .table > .table-show-btn {
  display: none !important;
}

#room.hundred-niu-mode > .table {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 11, 8, .86), transparent 18%, transparent 82%, rgba(0, 11, 8, .86)),
    url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover no-repeat !important;
  box-shadow: none !important;
}

html body #room#room.hundred-niu-mode > .table {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 11, 8, .86), transparent 18%, transparent 82%, rgba(0, 11, 8, .86)),
    #001d16 url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover no-repeat !important;
  box-shadow: none !important;
}

#room.hundred-niu-mode > .table::before,
#room.hundred-niu-mode > .table::after {
  display: none !important;
  content: none !important;
}

.hundred-niu-room {
  --hn-gold: #ffd35a;
  --hn-gold-deep: #a85d00;
  --hn-panel: rgba(0, 76, 48, .88);
  --hn-card-w: clamp(20px, 5.6vw, 35px);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 124px minmax(0, 1fr) 25px 58px 94px;
  width: min(100%, 760px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  color: #fff7d5;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    linear-gradient(180deg, rgba(0, 20, 13, .22), transparent 25%, transparent 78%, rgba(0, 19, 13, .72)),
    url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(255, 216, 91, .25),
    0 0 42px rgba(0, 0, 0, .7);
}

.hn-topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px 88px;
  gap: 7px;
  box-sizing: border-box;
  margin: 7px 7px 4px;
  padding: 8px;
  border: 1px solid rgba(255, 205, 66, .78);
  border-radius: 12px;
  background: rgba(0, 66, 42, .9);
  box-shadow:
    inset 0 0 0 2px rgba(0, 35, 24, .62),
    inset 0 1px 12px rgba(255, 219, 91, .09),
    0 4px 14px rgba(0, 13, 9, .46);
}

.hn-topbar button {
  min-width: 0;
  border: 1px solid rgba(255, 219, 120, .6);
  border-radius: 9px;
  color: #fff2bf;
  font-weight: 900;
  background: rgba(0, 47, 31, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.hn-exit,
.hn-rules-btn {
  position: absolute;
  top: 8px;
  z-index: 5;
  width: 45px;
  height: 34px;
  font-size: 12px;
}

.hn-exit {
  left: 8px;
}

.hn-rules-btn {
  left: 58px;
  font-size: 11px;
}

.hn-apply-banker {
  grid-column: 3;
  height: 74px;
  align-self: center;
  border-radius: 50% !important;
  color: #5d2b00 !important;
  font-size: 15px;
  line-height: 1.2;
  background: linear-gradient(180deg, #fff6b7, #ffc84f 48%, #c67208) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .52),
    0 0 0 2px #a96705,
    0 4px 10px rgba(0, 17, 9, .52) !important;
}

.hn-apply-banker.is-pending {
  color: #fff5d7 !important;
  background: linear-gradient(180deg, #d7762b, #8f2f12) !important;
}

.hn-trend {
  grid-column: 1;
  min-width: 0;
  padding-left: 102px;
}

.hn-trend header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #fff1bb;
}

.hn-trend header strong {
  font-size: 14px;
}

.hn-trend header button {
  height: 22px;
  padding: 0 7px;
  border-color: rgba(255, 213, 92, .28);
  font-size: 9px;
}

.hn-trend > div {
  display: grid;
  gap: 3px;
}

.hn-trend-row {
  display: grid;
  grid-template-columns: 16px repeat(6, minmax(12px, 1fr));
  gap: 3px;
}

.hn-trend-row b {
  display: grid;
  place-items: center;
  font-size: 14px;
}

.hn-trend-row i {
  display: grid;
  place-items: center;
  height: 14px;
  border-radius: 3px;
  color: #ffd27a;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  background: rgba(0, 43, 27, .88);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 132, .08);
}

.hn-trend-row i.miss {
  color: rgba(203, 215, 205, .58);
}

.hn-rate-cards {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  align-self: stretch;
  padding: 20px 0 3px;
}

.hn-rate-cards span {
  display: grid;
  place-items: end center;
  align-content: end;
  padding: 5px 2px;
  border: 1px solid rgba(255, 215, 91, .28);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(189, 228, 217, .22), transparent 48%),
    rgba(0, 45, 30, .88);
}

.hn-rate-cards b {
  color: #fff5d4;
  font-size: 15px;
  line-height: 1;
}

.hn-rate-cards small {
  margin-top: 4px;
  color: #61f19c;
  font-size: 10px;
  font-weight: 900;
}

.hn-heart b,
.hn-diamond b {
  color: #ff6058;
}

.hn-club b {
  color: #67df9a;
}

.hn-stage {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 12vw, 76px) minmax(0, 1fr) clamp(48px, 12vw, 76px);
  min-height: 0;
  overflow: hidden;
}

.hn-side {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 54px 2px 22px;
}

.hn-side-player {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
}

.hn-side-avatar,
.hn-self-avatar,
.hn-banker-avatar {
  overflow: hidden;
  border: 2px solid #fff8dc;
  background: #124532;
  box-shadow:
    0 0 0 2px rgba(210, 146, 21, .72),
    0 4px 8px rgba(0, 10, 6, .56);
}

.hn-side-avatar {
  width: clamp(39px, 9vw, 58px);
  height: clamp(39px, 9vw, 58px);
  border-radius: 9px;
}

.hn-side-avatar img,
.hn-self-avatar img,
.hn-banker-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hn-side-player span {
  max-width: 70px;
  overflow: hidden;
  color: var(--hn-gold);
  font-size: clamp(9px, 2.6vw, 13px);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hn-side-player.is-waiting {
  opacity: .65;
}

.hn-center {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 118px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 4px 0 1px;
}

.hn-banker {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
}

.hn-banker-avatar {
  position: absolute;
  left: 7px;
  top: 12px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

.hn-banker-hand {
  display: grid;
  justify-items: center;
}

.hn-banker > strong {
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 6;
  min-width: 92px;
  padding: 4px 14px;
  border-radius: 999px;
  color: #6c3100;
  font-family: "STKaiti", "KaiTi", "PingFang SC", sans-serif;
  font-size: 22px;
  text-align: center;
  background: linear-gradient(180deg, #fff4ae, #e69a20);
  box-shadow: 0 3px 8px rgba(0, 13, 7, .54);
  transform: translateX(-50%);
}

.hn-banker > strong.is-hidden {
  display: none;
}

.hn-zones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-height: 0;
}

.hn-zone {
  position: relative;
  display: grid;
  grid-template-rows: 34px minmax(24px, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 0 5px 5px;
  overflow: hidden;
  border: 1px solid rgba(233, 221, 157, .54);
  border-radius: 14px;
  color: #fff;
  background: rgba(0, 91, 57, .64);
  box-shadow:
    inset 0 0 0 1px rgba(0, 41, 26, .52),
    inset 0 8px 18px rgba(255, 255, 255, .025);
}

.hn-zone.is-selected {
  border-color: #ffd761;
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 117, .28),
    0 0 12px rgba(255, 199, 47, .24);
}

.hn-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  border-radius: 0 0 18px 18px;
  background: rgba(0, 65, 40, .74);
}

.hn-zone-head strong {
  font-size: 27px;
}

.hn-zone-head span {
  color: #ffd649;
  font-size: clamp(16px, 5vw, 26px);
  font-weight: 950;
}

.hn-heart .hn-zone-head strong,
.hn-diamond .hn-zone-head strong {
  color: #ff5d54;
}

.hn-club .hn-zone-head strong {
  color: #69e29b;
}

.hn-zone-bets {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 32px;
}

.hn-zone-empty {
  color: rgba(219, 239, 224, .28);
  font-size: 11px;
  font-weight: 800;
}

.hn-zone-chip-stack {
  position: relative;
  width: 92px;
  height: 46px;
}

.hn-zone-chip-stack i {
  position: absolute;
  left: var(--chip-x);
  top: var(--chip-y);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px dashed #fff4df;
  border-radius: 50%;
  color: #7b1019;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  background: #c52b3b;
  box-shadow:
    inset 0 0 0 2px #8b1020,
    0 2px 3px rgba(0, 0, 0, .38);
  transform: rotate(var(--chip-rotation));
}

.hn-zone-chip-stack i:nth-child(3n) {
  color: #12409d;
  background: #2f65d6;
  box-shadow: inset 0 0 0 2px #113f9e, 0 2px 3px rgba(0, 0, 0, .38);
}

.hn-hand {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.hn-hand .card,
.hn-card-placeholder {
  position: relative !important;
  flex: 0 0 var(--hn-card-w);
  box-sizing: border-box !important;
  width: var(--hn-card-w) !important;
  height: calc(var(--hn-card-w) * 1.42) !important;
  margin: 0 -1px 0 0 !important;
  overflow: hidden;
  border: 1px solid rgba(95, 91, 68, .5) !important;
  border-radius: 4px !important;
  transform: none !important;
}

.hn-card-placeholder {
  display: block;
  object-fit: cover;
}

.hn-hand .card .rank {
  left: 3px !important;
  top: 2px !important;
  font-size: calc(var(--hn-card-w) * .46) !important;
  line-height: 1 !important;
}

.hn-hand .card .suit {
  left: 3px !important;
  bottom: 2px !important;
  font-size: calc(var(--hn-card-w) * .38) !important;
}

.hn-zone > em {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 7;
  min-width: 70px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #7c3700;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  background: linear-gradient(180deg, #fff3a8, #d58a16);
  transform: translateX(-50%);
}

.hn-zone > em.is-hidden {
  display: none;
}

.hn-room-meta {
  align-self: center;
  justify-self: center;
  z-index: 6;
  min-width: 230px;
  padding: 3px 18px;
  border: 1px solid rgba(255, 210, 82, .22);
  border-radius: 999px;
  color: rgba(229, 238, 214, .62);
  font-size: 11px;
  text-align: center;
  background: rgba(0, 53, 34, .78);
}

.hn-account-bar {
  z-index: 7;
  display: grid;
  grid-template-columns: 84px 42px minmax(0, 1fr) 98px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-top: 1px solid rgba(255, 210, 82, .3);
  background: rgba(0, 35, 24, .93);
  box-shadow: 0 -7px 16px rgba(0, 16, 10, .38);
}

.hn-online {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #fff5d4;
}

.hn-online b {
  font-size: 19px;
}

.hn-online span {
  font-size: 10px;
}

.hn-self-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.hn-balance {
  display: grid;
  min-width: 0;
}

.hn-balance small {
  overflow: hidden;
  color: #fff4d0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hn-balance strong {
  color: #ffd43e;
  font-size: 18px;
}

.hn-status {
  height: 38px;
  border: 1px solid rgba(255, 218, 108, .68);
  border-radius: 999px;
  color: #6d3100;
  font-size: 12px;
  font-weight: 950;
  background: linear-gradient(180deg, #fff0a2, #d99318);
}

.hn-status:not(.is-action) {
  color: #e8f4e9;
  background: rgba(0, 76, 48, .9);
}

.hn-chip-tray {
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 10px 11px;
  border: 1px solid rgba(255, 207, 70, .58);
  border-radius: 28px 28px 0 0;
  background: rgba(0, 64, 41, .96);
  box-shadow:
    inset 0 2px 9px rgba(255, 224, 124, .08),
    0 -4px 14px rgba(0, 14, 9, .48);
}

.hn-chip {
  display: grid;
  place-items: center;
  width: clamp(48px, 12vw, 70px);
  height: clamp(48px, 12vw, 70px);
  padding: 0;
  border: 5px dashed rgba(255, 255, 255, .82);
  border-radius: 50%;
  color: #173f28;
  background: #43a85c;
  box-shadow:
    inset 0 0 0 4px #e8f3df,
    inset 0 0 0 7px #18753c,
    0 4px 8px rgba(0, 13, 7, .48);
  transition: transform .16s ease, filter .16s ease;
}

.hn-chip span {
  font-size: clamp(11px, 3.4vw, 17px);
  font-weight: 950;
}

.hn-chip-2 { color: #0a367f; background: #3b7be1; box-shadow: inset 0 0 0 4px #e5eeff, inset 0 0 0 7px #1f4ba5, 0 4px 8px rgba(0, 13, 7, .48); }
.hn-chip-3 { color: #5d1681; background: #9848cb; box-shadow: inset 0 0 0 4px #f3e5ff, inset 0 0 0 7px #6b2396, 0 4px 8px rgba(0, 13, 7, .48); }
.hn-chip-4 { color: #784100; background: #e59a24; box-shadow: inset 0 0 0 4px #fff0cf, inset 0 0 0 7px #b97108, 0 4px 8px rgba(0, 13, 7, .48); }
.hn-chip-5 { color: #7f1515; background: #d64141; box-shadow: inset 0 0 0 4px #ffe7e7, inset 0 0 0 7px #a82424, 0 4px 8px rgba(0, 13, 7, .48); }
.hn-chip-6 { color: #20242a; background: #565c64; box-shadow: inset 0 0 0 4px #f0f0ef, inset 0 0 0 7px #292e35, 0 4px 8px rgba(0, 13, 7, .48); }

.hn-chip.is-selected {
  filter: brightness(1.18);
  transform: translateY(-8px) scale(1.05);
  box-shadow:
    inset 0 0 0 4px #fff,
    inset 0 0 0 7px currentColor,
    0 0 0 3px rgba(255, 220, 92, .9),
    0 8px 14px rgba(0, 13, 7, .58);
}

.hn-rules {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
}

.hn-rules-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 12, 8, .72);
}

.hn-rules article {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(calc(100% - 34px), 460px);
  padding: 18px;
  border: 1px solid #e7b33d;
  border-radius: 18px;
  color: #e9f5e9;
  background:
    linear-gradient(180deg, rgba(0, 99, 61, .96), rgba(0, 50, 34, .98)),
    url("./assets/bairen-niuniu/emerald-felt-v1.webp?v=3811") center / cover;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.hn-rules header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #ffdb68;
  font-size: 19px;
}

.hn-rules header button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 220, 109, .56);
  border-radius: 50%;
  color: #fff4c7;
  background: rgba(0, 42, 28, .72);
}

.hn-rules p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 560px) {
  .hundred-niu-room {
    grid-template-rows: 112px minmax(0, 1fr) 23px 52px 82px;
    min-height: 0;
  }

  .hn-topbar {
    grid-template-columns: minmax(0, 1fr) 92px 72px;
    gap: 4px;
    margin: 5px 4px 3px;
    padding: 6px 5px;
  }

  .hn-exit,
  .hn-rules-btn {
    top: 6px;
    width: 36px;
    height: 30px;
    font-size: 10px;
  }

  .hn-exit {
    left: 5px;
  }

  .hn-rules-btn {
    left: 44px;
  }

  .hn-apply-banker {
    height: 62px;
    font-size: 12px;
  }

  .hn-trend {
    padding-left: 78px;
  }

  .hn-trend header strong {
    font-size: 12px;
  }

  .hn-trend-row {
    grid-template-columns: 13px repeat(6, minmax(9px, 1fr));
    gap: 2px;
  }

  .hn-trend-row i {
    height: 13px;
    font-size: 9px;
  }

  .hn-rate-cards {
    gap: 3px;
    padding-top: 18px;
  }

  .hn-rate-cards b {
    font-size: 11px;
  }

  .hn-rate-cards small {
    font-size: 9px;
  }

  .hn-center {
    grid-template-rows: 106px minmax(0, 1fr);
  }

  .hn-banker-avatar {
    left: 3px;
    top: 9px;
    width: 40px;
    height: 40px;
  }

  .hn-zone {
    grid-template-rows: 30px minmax(21px, 1fr) auto;
    border-radius: 11px;
  }

  .hn-zone-head strong {
    font-size: 22px;
  }

  .hn-zone-chip-stack {
    transform: scale(.86);
  }

  .hn-account-bar {
    grid-template-columns: 65px 34px minmax(0, 1fr) 84px;
    gap: 4px;
    padding: 4px 6px;
  }

  .hn-online b {
    font-size: 16px;
  }

  .hn-balance strong {
    font-size: 15px;
  }

  .hn-status {
    height: 34px;
    font-size: 10px;
  }

  .hn-chip-tray {
    padding: 8px 4px 9px;
  }
}

@media (min-width: 900px) {
  .hundred-niu-room {
    grid-template-rows: 124px minmax(0, 1fr) 24px 54px 86px;
  }

  .hn-stage {
    grid-template-columns: 82px minmax(0, 1fr) 82px;
  }

  .hn-center {
    grid-template-rows: 112px minmax(0, 1fr);
  }
}