/* 百人牛牛下注区域精修 v387 */
#room.hundred-niu-mode .hn-stage {
  grid-template-columns:
    clamp(60px, 14vw, 88px)
    minmax(0, 1fr)
    clamp(60px, 14vw, 88px);
}

#room.hundred-niu-mode .hn-center {
  padding: 4px 0 10px;
}

#room.hundred-niu-mode .hn-zones {
  gap: 12px;
  box-sizing: border-box;
  padding: 8px 0 10px;
}

#room.hundred-niu-mode .hn-zone {
  grid-template-rows: 40px minmax(24px, 1fr) auto;
  padding: 0 7px 8px;
  border-color: rgba(244, 206, 97, .62);
  border-radius: 18px;
  background-color: rgba(0, 78, 50, .78);
  box-shadow:
    inset 0 0 0 2px rgba(0, 43, 28, .64),
    inset 0 1px 0 rgba(255, 244, 192, .13),
    0 7px 15px rgba(0, 21, 13, .27);
}

#room.hundred-niu-mode .hn-zone.is-selected {
  border-color: #ffda68;
  box-shadow:
    inset 0 0 0 2px rgba(255, 218, 104, .19),
    inset 0 1px 0 rgba(255, 249, 215, .23),
    0 0 0 2px rgba(255, 205, 67, .12),
    0 7px 18px rgba(0, 21, 13, .34);
}

#room.hundred-niu-mode .hn-zone-head {
  align-self: center;
  height: 31px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255, 226, 139, .1);
  border-radius: 10px;
  background-color: rgba(0, 55, 35, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#room.hundred-niu-mode .hn-zone-head strong {
  font-size: 25px;
  line-height: 1;
}

#room.hundred-niu-mode .hn-zone-head span {
  font-size: clamp(16px, 4.5vw, 24px);
  line-height: 1;
}

#room.hundred-niu-mode .hn-zone-bets {
  margin: 5px 2px 2px;
  border-radius: 12px;
  background-color: rgba(0, 63, 40, .2);
}

#room.hundred-niu-mode .hn-zone-empty {
  color: rgba(222, 240, 226, .36);
  letter-spacing: .08em;
}

#room.hundred-niu-mode .hn-zone .hn-hand {
  padding-bottom: 1px;
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-10 {
  color: #fff4df;
  background: #c52b3b;
  box-shadow: inset 0 0 0 2px #8b1020, 0 2px 3px rgba(0, 0, 0, .38);
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-50 {
  color: #eef5ff;
  background: #3476d9;
  box-shadow: inset 0 0 0 2px #174594, 0 2px 3px rgba(0, 0, 0, .38);
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-100 {
  color: #fff1ff;
  background: #8b45bd;
  box-shadow: inset 0 0 0 2px #5d2185, 0 2px 3px rgba(0, 0, 0, .38);
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-500 {
  color: #fff7dc;
  background: #da8c1d;
  box-shadow: inset 0 0 0 2px #9e5d07, 0 2px 3px rgba(0, 0, 0, .38);
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-1000 {
  color: #fff0f0;
  background: #c83c3c;
  box-shadow: inset 0 0 0 2px #8f1d1d, 0 2px 3px rgba(0, 0, 0, .38);
}

#room.hundred-niu-mode .hn-zone-chip-stack i.hn-chip-value-10000 {
  color: #fff;
  font-size: 6px;
  background: #4e535b;
  box-shadow: inset 0 0 0 2px #22262c, 0 2px 3px rgba(0, 0, 0, .38);
}

@media (max-width: 560px) {
  #room.hundred-niu-mode .hn-stage {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }

  #room.hundred-niu-mode .hn-center {
    padding-bottom: 7px;
  }

  #room.hundred-niu-mode .hn-zones {
    column-gap: 9px;
    row-gap: 11px;
    padding: 6px 0 8px;
  }

  #room.hundred-niu-mode .hn-zone {
    grid-template-rows: 35px minmax(21px, 1fr) auto;
    padding: 0 5px 6px;
    border-radius: 14px;
  }

  #room.hundred-niu-mode .hn-zone-head {
    height: 28px;
    margin-top: 4px;
    padding: 0 6px;
    border-radius: 8px;
  }

  #room.hundred-niu-mode .hn-zone-head strong {
    font-size: 21px;
  }

  #room.hundred-niu-mode .hn-zone-head span {
    font-size: clamp(15px, 4.4vw, 21px);
  }

  #room.hundred-niu-mode .hn-zone-bets {
    margin-top: 3px;
  }
}

@media (min-width: 900px) {
  #room.hundred-niu-mode .hn-stage {
    grid-template-columns: 92px minmax(0, 1fr) 92px;
  }

  #room.hundred-niu-mode .hn-zones {
    gap: 14px;
    padding: 9px 0 12px;
  }
}