* {
  box-sizing : border-box
}
html, body {
  margin : 0;
  width : 100%;
  height : 100%;
  overflow : hidden
}
body {
  font-family : Inter, Segoe UI, Arial, sans-serif;
  background : #06090b;
  color : #eee
}
.app {
  height : 100vh;
  background : #06090b
}
.topbar {
  height : 64px;
  background : #080b0def;
  border-bottom : 1px solid #555;
  padding : 7px 15px;
  display : flex;
  align-items : center;
  gap : 12px
}
.brand {
  display : flex;
  align-items : center;
  gap : 10px
}
.brand img {
  width : 42px;
  height : 42px;
  object-fit : contain
}
.brand strong {
  letter-spacing : 1.1px
}
.brand small {
  display : block;
  color : #999;
  font-size : 10px;
  margin-top : 2px
}
.menu {
  font-size : 21px;
  border : 1px solid #444;
  border-radius : 7px;
  padding : 3px 8px
}
.status {
  margin-left : auto;
  display : flex;
  gap : 6px
}
.status span {
  font-size : 10px;
  color : #aaa;
  border : 1px solid #444;
  border-radius : 6px;
  padding : 6px 8px
}
  .status span : first-child {
  color : #76c89a
}
.topbar button {
  padding : 9px 12px
}
main {
  height : calc(100vh - 64px);
  display : flex;
  flex-direction : column
}
.table-wrap {
  position : relative;
  flex : 1;
  min-height : 0
}
.poker-table {
  position : absolute;
  left : 50%;
  top : 48%;
  transform : translate(-50%, -50%);
  width : min(86vw, 1200px);
  height : min(72vh, 620px);
  min-height : 400px;
  border : 12px solid #181919;
  border-radius : 50%;
  background : radial-gradient(circle, #2086ed, #1471d1 57%, #0b56ac);
  box-shadow : inset 0 0 0 3px #86bfff, inset 0 0 70px #002c70, 0 18px 50px #000
}
.poker-table.green {
  background : radial-gradient(circle, #1c7144, #0e5731 57%, #083c22);
  box-shadow : inset 0 0 0 3px #75ad86, inset 0 0 70px #001e0f, 0 18px 50px #000
}
.poker-table.burgundy {
  background : radial-gradient(circle, #8b3142, #682332 57%, #43131f);
  box-shadow : inset 0 0 0 3px #c68b8b, inset 0 0 70px #230009, 0 18px 50px #000
}
  .poker-table : after {
  content : "";
  position : absolute;
  inset : 3%;
  border : 1px solid #fff5;
  border-radius : 50%;
  pointer-events : none
}
.center-brand {
  position : absolute;
  left : 50%;
  top : 37%;
  transform : translate(-50%, -50%);
  opacity : .14;
  z-index : 1
}
.center-brand img {
  width : 100px;
  height : 100px;
  object-fit : contain
}
.center {
  position : absolute;
  left : 50%;
  top : 58%;
  transform : translate(-50%, -50%);
  z-index : 6;
  text-align : center
}
.pot-label {
  font-size : 11px;
  letter-spacing : 1px;
  color : #eee;
  text-shadow : 0 2px 3px #000
}
.pot-label strong {
  display : block;
  color : #f1cb6d;
  font-size : 23px;
  margin-top : 2px
}
.community {
  display : flex;
  gap : 5px;
  justify-content : center;
  margin-top : 8px
}
.card {
  width : 47px;
  height : 65px;
  background : linear-gradient(#fff, #e7e7e7);
  border : 1px solid #aaa;
  border-radius : 6px;
  color : #111;
  padding : 4px;
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  font-weight : 800;
  box-shadow : 0 2px 7px #0009
}
.card.red {
  color : #a42a28
}
.corner {
  font-size : 15px
}
.suit {
  text-align : right;
  font-size : 20px
}
.card.back {
  color : transparent;
  background-image : repeating-linear-gradient(45deg, #ffffff22 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, #ffffff18 0 2px, transparent 2px 7px);
  border : 2px solid #eee
}
.card.back.blueback {
  background-color : #176fe0
}
.card.back.redback {
  background-color : #9f2435
}
.card.back.greenback {
  background-color : #14633b
}
.card.back.goldback {
  background-color : #a97816
}
.middle-chips {
  height : 31px;
  margin : 9px auto 0;
  display : flex;
  justify-content : center;
  gap : 3px;
  align-items : center
}
.chip {
  width : 27px;
  height : 27px;
  border-radius : 50%;
  border : 3px dashed #fff9;
  box-shadow : 0 2px 5px #000;
  background : #2879dc
}
  .chip : nth-child(2n) {
  background : #c53245
}
  .chip : nth-child(3n) {
  background : #f3f3f3
}
.chip-value {
  display : block;
  font-size : 10px;
  color : #fff;
  margin-top : 1px
}
.seat {
  position : absolute;
  width : 160px;
  text-align : center;
  transform : translate(-50%, -50%);
  z-index : 8
}
.avatar {
  width : 62px;
  height : 62px;
  border-radius : 50%;
  margin : auto;
  display : flex;
  align-items : center;
  justify-content : center;
  font-size : 29px;
  background : radial-gradient(circle at 50% 25%, #495158, #0e1113 70%);
  border : 2px solid #c4a45e;
  box-shadow : 0 3px 9px #000
}
.seat.active .avatar {
  box-shadow : 0 0 0 3px #f3ca5e, 0 0 18px #f3ca5e
}
.seat.controlled .avatar {
  border-color : #67c88f
}
.seatbox {
  background : linear-gradient(#191b1d, #080909);
  border : 1px solid #725b31;
  border-radius : 7px;
  padding : 5px 6px;
  box-shadow : 0 3px 9px #000;
  font-size : 11px
}
.empty .seatbox {
  border-color : #5da778;
  background : #10251a
}
.seat button {
  margin-top : 4px;
  background : #175a34;
  border : 1px solid #65ae7e;
  color : #fff;
  border-radius : 5px;
  padding : 5px 9px;
  font-size : 10px;
  cursor : pointer
}
.seat .control {
  background : #704f18;
  border-color : #d2ab5b
}
.stack {
  color : #ddd;
  margin-top : 1px
}
.dealer {
  position : absolute;
  right : -3px;
  top : -8px;
  width : 24px;
  height : 24px;
  border-radius : 50%;
  background : #f4f4f4;
  color : #111;
  display : flex;
  align-items : center;
  justify-content : center;
  font-size : 10px;
  font-weight : 900;
  border : 2px solid #777
}
.blind {
  font-size : 9px;
  background : #30234a;
  border : 1px solid #9c7bd0;
  border-radius : 7px;
  padding : 2px 5px;
  display : inline-block;
  margin-top : 3px
}
.action {
  color : #f1ca68;
  font-size : 9px;
  margin-top : 3px
}
.cards {
  display : flex;
  justify-content : center;
  gap : 3px;
  margin-top : 4px
}
.cards .card {
  width : 33px;
  height : 46px;
  padding : 2px
}
.cards .corner {
  font-size : 11px
}
.cards .suit {
  font-size : 14px
}
.s1 {
  left : 25%;
  top : 9%
}
.s2 {
  left : 50%;
  top : 5%
}
.s3 {
  left : 75%;
  top : 9%
}
.s4 {
  left : 91%;
  top : 31%
}
.s5 {
  left : 88%;
  top : 70%
}
.s6 {
  left : 70%;
  top : 92%
}
.s7 {
  left : 30%;
  top : 92%
}
.s8 {
  left : 12%;
  top : 70%
}
.s9 {
  left : 9%;
  top : 31%
}
.chat-panel {
  position : absolute;
  left : 17px;
  bottom : 8px;
  width : 290px;
  height : 128px;
  background : #070909ef;
  border : 1px solid #4a4a4a;
  border-radius : 7px;
  z-index : 20;
  box-shadow : 0 5px 15px #000
}
.chat-head {
  height : 28px;
  border-bottom : 1px solid #333;
  display : flex;
  align-items : center;
  padding : 0 8px;
  color : #dfbf67;
  font-size : 10px
}
.chat-head button {
  margin-left : auto;
  background : transparent;
  border : 0;
  color : #aaa;
  font-size : 9px;
  padding : 3px 5px
}
.log {
  height : 99px;
  overflow-y : auto;
  padding : 5px 8px;
  font-size : 10px;
  line-height : 1.5
}
.show-chat {
  position : absolute;
  left : 17px;
  bottom : 8px;
  z-index : 21
}
.hidden {
  display : none!important
}
.controls {
  height : 106px;
  flex : none;
  background : #080a0cef;
  border-top : 1px solid #454545;
  padding : 7px 12px;
  display : grid;
  grid-template-columns : 210px 1fr;
  gap : 8px
}
.turn-card {
  border : 1px solid #484848;
  border-radius : 7px;
  padding : 7px
}
.turn-card span {
  display : block;
  color : #999;
  font-size : 9px
}
.turn-card strong {
  color : #e3c16b;
  font-size : 12px
}
.controlText {
  font-size : 9px;
  color : #999;
  margin-top : 4px
}
.controlText b {
  color : #78c99a
}
.actions {
  border : 1px solid #484848;
  border-radius : 7px;
  display : flex;
  align-items : center;
  justify-content : center;
  gap : 6px;
  flex-wrap : wrap
}
.actions button, .join-row button {
  padding : 8px 11px
}
.danger {
  background : #522426;
  border-color : #8a4648
}
.primary, .gold {
  background : #70531b;
  border-color : #c39a48
}
.actions input {
  width : 65px;
  background : #111;
  color : #fff;
  border : 1px solid #555;
  border-radius : 4px;
  padding : 6px
}
.actions label {
  font-size : 10px
}
.join-row {
  grid-column : 1/-1;
  display : flex;
  align-items : center;
  justify-content : flex-end;
  gap : 8px;
  color : #999;
  font-size : 10px
}
.timer {
  display : flex;
  align-items : center;
  gap : 6px;
  margin-top : 4px
}
.timer>div {
  width : 34px;
  height : 34px;
  border : 3px solid #c79d4c;
  border-radius : 50%;
  display : flex;
  align-items : center;
  justify-content : center
}
.timer small {
  color : #aaa;
  font-size : 9px
}
  button : disabled {
  opacity : .38;
  cursor : not-allowed
}
.modal {
  position : fixed;
  inset : 0;
  background : #000b;
  display : flex;
  align-items : center;
  justify-content : center;
  z-index : 100
}
.dialog {
  width : 350px;
  background : #151819;
  border : 1px solid #86672f;
  border-radius : 10px;
  padding : 20px;
  box-shadow : 0 15px 50px #000
}
.dialog-head {
  display : flex;
  justify-content : space-between;
  align-items : center
}
.dialog h2 {
  margin : 0
}
.dialog h3 {
  font-size : 11px;
  color : #bbb;
  margin : 18px 0 8px
}
.dialog p {
  color : #aaa;
  font-size : 12px
}
.dialog-head button {
  background : transparent;
  border : 0;
  font-size : 22px;
  padding : 0
}
.dialog input {
  width : 100%;
  background : #0b0d0e;
  color : #fff;
  border : 1px solid #555;
  border-radius : 6px;
  padding : 10px;
  margin : 7px 0 14px
}
.full {
  width : 100%
}
.choices, .card-back-choices {
  display : flex;
  gap : 7px;
  flex-wrap : wrap
}
.choice, .backChoice {
  border : 1px solid #555;
  background : #202324;
  color : #eee;
  border-radius : 6px;
  padding : 8px 10px;
  cursor : pointer
}
.choice.selected, .backChoice.selected {
  outline : 2px solid #e0bc60
}
.backChoice {
  width : 48px;
  height : 65px
}
.blueBack {
  background : #176fe0
}
.redBack {
  background : #9f2435
}
.greenBack {
  background : #14633b
}
.goldBack {
  background : #a97816
}
  @media(max-width : 800px) {
  .poker-table{width : 93vw;
  min-height : 350px
}
.seat {
  width : 110px
}
.avatar {
  width : 50px;
  height : 50px
}
.seatbox {
  font-size : 9px
}
.controls {
  height : 130px;
  grid-template-columns : 1fr
}
.s1 {
  left : 23%
}
.s3 {
  left : 77%
}
.s4 {
  left : 91%
}
.s9 {
  left : 9%
}
}button {
  color : #fff!important
}
.avatar img {
  width : 100%;
  height : 100%;
  object-fit : cover;
  border-radius : 50%
}
.avatarBtn, .chipsBtn {
  font-size : 9px!important;
  padding : 4px 6px!important;
  margin-left : 2px
}
.uploadAvatar {
  display : block;
  text-align : center;
  background : #70531b;
  border : 1px solid #c39a48;
  color : #fff!important;
  border-radius : 6px;
  padding : 10px;
  cursor : pointer;
  font-size : 11px;
  font-weight : 700
}
.uploadAvatar input {
  display : none
}
.hint {
  display : block;
  color : #888;
  font-size : 9px;
  margin-top : 8px
}
.avatarChoices {
  font-size : 24px;
  line-height : 1.8;
  background : #0b0d0e;
  border : 1px solid #444;
  border-radius : 6px;
  padding : 8px;
  margin-bottom : 10px
}
button {
  color : #fff!important
}
.avatar img {
  width : 100%;
  height : 100%;
  object-fit : cover;
  border-radius : 50%
}
buttonface {
  color : #fff!important;
  background: #000;
}
.seat.folded-seat {
  opacity : .48;
  filter : saturate(.55)
}
.seat.folded-seat .avatar {
  border-color : #666;
  box-shadow : 0 2px 6px #000
}
.mucked-card {
  background : linear-gradient(#252525, #101010)!important;
  border-color : #555!important;
  color : #888!important;
  display : flex!important;
  align-items : center;
  justify-content : center;
  font-size : 14px!important
}
.action.mucked {
  color : #888
}
.rebuy-seat .seatbox {
  border-color : #bd8f36;
  box-shadow : 0 0 12px #bd8f3638, 0 3px 9px #000
}
.rebuy-count {
  font-size : 9px;
  color : #f0c65e;
  font-weight : 800;
  margin-top : 3px;
  letter-spacing : .4px
}
.table-announcements {
  position : absolute;
  left : 50%;
  top : calc(100% + 10px);
  transform : translateX(-50%);
  display : flex;
  flex-wrap : wrap;
  justify-content : center;
  gap : 5px;
  width : 430px;
  z-index : 12;
  pointer-events : none
}
.table-action {
  background : linear-gradient(180deg, #17191bfa, #070809f5);
  border : 1px solid #9b7736;
  border-radius : 7px;
  padding : 5px 8px;
  display : flex;
  align-items : center;
  gap : 5px;
  box-shadow : 0 3px 10px #000b;
  font-size : 9px;
  white-space : nowrap;
  animation : actionIn .18s ease-out
}
.table-action b {
  color : #eee
}
.table-action span {
  color : #d7b45d;
  font-weight : 800
}
.table-action strong {
  color : #fff
}
  .table-action : has(span){}.settled-announcements {
  display : flex;
  flex-wrap : wrap;
  justify-content : center;
  gap : 4px;
  width : 390px;
  margin : 8px auto 0;
  opacity : .65;
  pointer-events : none
}
.settled-actions {
  display : flex;
  flex-wrap : wrap;
  justify-content : center;
  gap : 4px;
  width : 390px;
  margin : 5px auto 0
}
.settled-action {
  font-size : 8px;
  color : #c7c7c7;
  background : #0a0b0ccc;
  border : 1px solid #555;
  border-radius : 5px;
  padding : 3px 5px
}
.settled-action.bet, .settled-action.raise {
  color : #f1ca68;
  border-color : #80632e
}
@keyframes actionIn {
  from{transform : translateY(5px);
  opacity : 0
}
to {
  transform : translateY(0);
  opacity : 1
}
}#standBtn {
  background : #3b3d3e;
  border-color : #7c7d7e
}
  @media(max-width : 800px) {
  .table-announcements{width : 300px;
  top : calc(100% + 5px)
}
.table-action {
  font-size : 8px;
  padding : 4px 6px
}
.settled-announcements, .settled-actions {
  width : 280px
}
button {
  color : #70531b!important;
  text-shadow : none
}
.topbar button, .primary, .gold, .uploadAvatar {
  color : #ffffff!important
}
.danger {
  color : #ffd6d6!important
}
.seat button {
  color : #ead08a!important
}
.seat .control {
  color : #f1d48b!important
}
.chat-head button, .dialog-head button {
  color : #cbbf9d!important
}
.choice, .backChoice {
  color : #d8c58c!important
}
  button : disabled {
  color : #d9c89a!important
}
.avatar {
  position : relative;
  cursor : pointer
}
  .avatar : hover {
  filter : brightness(1.12)
}
  .avatar : after {
  content : '✎';
  position : absolute;
  right : -2px;
  bottom : -2px;
  width : 18px;
  height : 18px;
  border-radius : 50%;
  display : flex;
  align-items : center;
  justify-content : center;
  background : #17191b;
  border : 1px solid #c4a45e;
  color : #e5c76f;
  font-size : 10px;
  opacity : 0;
  transition : opacity .15s
}
  .avatar : hover : after {
  opacity : 1
}
.avatar-timer {
  position : absolute;
  left : 6px;
  right : 6px;
  bottom : 4px;
  height : 4px;
  border-radius : 4px;
  background : linear-gradient(90deg, #e5c25d var(--timer-pct), #3a3020 var(--timer-pct));
  box-shadow : 0 0 5px #000;
  z-index : 3;
  transition : background .18s linear
}
.seat.active .avatar-timer {
  display : block
}
.deal-card {
  display : inline-flex
}
.deal-in {
  animation : dealIn .42s cubic-bezier(.18, .75, .25, 1) both
}
@keyframes dealIn {
  0%{opacity : 0;
  transform : translateY(-120px) rotate(-18deg) scale(.55)
}
65% {
  opacity : 1;
  transform : translateY(8px) rotate(3deg) scale(1.04)
}
100% {
  opacity : 1;
  transform : translateY(0) rotate(0) scale(1)
}
}.mini-chips {
  display : inline-flex;
  align-items : flex-end;
  height : 24px;
  gap : 1px;
  margin : 0 2px
}
.mini-chips i {
  display : block;
  width : 8px;
  height : 8px;
  border-radius : 50%;
  border : 1px dashed #f6e9c5;
  background : radial-gradient(circle at 50% 50%, #d4a847 0 28%, #4a3110 30% 42%, #b83d46 44% 70%, #d8b45f 72%);
  box-shadow : 0 1px 3px #000;
  transform : translateY(calc(var(--i) * -1px)) scale(calc(.78 + var(--i) * .10));
  transform-origin : bottom center
}
.table-action.bet .mini-chips i {
  background : radial-gradient(circle at 50% 50%, #f2e6c4 0 25%, #2d4e7d 28% 43%, #c4a044 45% 72%, #efe0a7 74%)
}
.table-action.raise .mini-chips i {
  background : radial-gradient(circle at 50% 50%, #f4dfc0 0 25%, #8c2839 28% 43%, #d2a74b 45% 72%, #f1dfb3 74%)
}
.pot-fly-chips {
  position : fixed;
  z-index : 250;
  font-size : 18px;
  letter-spacing : -4px;
  color : #e4bf58;
  text-shadow : 0 2px 3px #000;
  pointer-events : none;
  transition : transform .78s cubic-bezier(.2, .8, .2, 1), opacity .78s ease
}
.table-action {
  min-height : 31px
}
.table-action.bet {
  border-color : #7896bd;
  box-shadow : 0 0 10px #7896bd44, 0 3px 10px #000b
}
.table-action.raise {
  border-color : #d0a74f;
  box-shadow : 0 0 12px #d0a74f55, 0 3px 10px #000b
}
  @media(max-width : 800px) {
  .avatar-timer{left : 5px;
  right : 5px;
  bottom : 3px
}
.mini-chips {
  height : 20px
}
.mini-chips i {
  width : 7px;
  height : 7px
}
.pot-fly-chips {
  font-size : 14px
}
}
/* MLH V7.2 CLEAN FINAL OVERRIDES - 2026-09-02 */
/* Close the unmatched rule in the legacy stylesheet before applying these rules. */
}

/* ACTION BUTTONS */
.actions button.actionBtn,
.actions button.actionBtn:disabled,
.actions button[data-action="call"],
.actions button[data-action="call"]:disabled,
#moreTime,
#moreTime:disabled {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
}

.actions button.actionBtn:not(:disabled),
.actions button[data-action="call"]:not(:disabled),
#moreTime:not(:disabled) {
  background: #176fe0 !important;
  background-color: #176fe0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #6db4ff !important;
  opacity: 1 !important;
  box-shadow: 0 0 8px #176fe088 !important;
  cursor: pointer !important;
}

.actions button.actionBtn:disabled,
.actions button[data-action="call"]:disabled,
#moreTime:disabled {
  background: #253f63 !important;
  background-color: #253f63 !important;
  color: #dbe8f8 !important;
  -webkit-text-fill-color: #dbe8f8 !important;
  border: 1px solid #58769c !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Keep FOLD's existing danger treatment. */
.actions button.danger {
  color: #ffd6d6 !important;
}

/* CARD SIZES */
.community .card {
  width: 66px !important;
  height: 92px !important;
  padding: 6px !important;
  border-radius: 7px !important;
}
.community .card .corner {
  font-size: 22px !important;
}
.community .card .suit {
  font-size: 29px !important;
}
.community {
  gap: 7px !important;
}

.cards .card {
  width: 60px !important;
  height: 84px !important;
  padding: 5px !important;
  border-radius: 7px !important;
}
.cards .card .corner {
  font-size: 19px !important;
}
.cards .card .suit {
  font-size: 25px !important;
}
.cards {
  gap: 5px !important;
}

@media (max-width: 800px) {
  .community .card {
    width: 54px !important;
    height: 75px !important;
    padding: 5px !important;
  }
  .community .card .corner { font-size: 18px !important; }
  .community .card .suit { font-size: 23px !important; }
  .cards .card {
    width: 48px !important;
    height: 67px !important;
    padding: 4px !important;
  }
  .cards .card .corner { font-size: 15px !important; }
  .cards .card .suit { font-size: 20px !important; }
}

/* MLH BRANDED CARD BACKS */
.backChoice.mlhBack,
.card.back.mlhback {
  background-color: #07111d !important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    url("assets/mlh-logo.png") !important;
  background-size: 8px 8px, 8px 8px, 58% 58% !important;
  background-position: center !important;
  background-repeat: repeat, repeat, no-repeat !important;
  border: 2px solid #2d82e8 !important;
  box-shadow: inset 0 0 0 2px #07111d, inset 0 0 0 3px #2d82e8, 0 2px 5px #000 !important;
}
.backChoice.mlhGoldBack,
.card.back.mlhgoldback {
  background-color: #16110a !important;
  background-image:
    radial-gradient(circle, rgba(224,188,96,.14) 1px, transparent 1.5px),
    url("assets/mlh-logo.png") !important;
  background-size: 7px 7px, 58% 58% !important;
  background-position: center !important;
  background-repeat: repeat, no-repeat !important;
  border: 2px solid #d8b45f !important;
  box-shadow: inset 0 0 0 2px #16110a, inset 0 0 0 3px #d8b45f, 0 2px 5px #000 !important;
}
.backChoice.mlhBack::after,
.backChoice.mlhGoldBack::after {
  content: "MLH";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-bottom: 3px;
  box-sizing: border-box;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.card.back.mlhback,
.card.back.mlhgoldback {
  position: relative;
  overflow: hidden;
}
.card.back.mlhback::after,
.card.back.mlhgoldback::after {
  content: "MLH";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  text-align: center;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}