/* Structured in-match player cards */
.players{
  gap:10px;
  margin-bottom:12px;
}
.player-chip.player-card{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:14px 14px 12px 16px;
  overflow:hidden;
  border:1px solid #d4af3752;
  border-radius:14px;
  background:
    linear-gradient(180deg,#0a241bfa 0%,#061a14f5 100%);
  color:#d9e1dd;
  box-shadow:
    inset 0 1px 0 #ffffff10,
    0 7px 18px #0003;
}
.player-chip.player-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 63%,#d4af3707 100%);
}
.player-chip.player-card.active{
  border-color:#e5c75f;
  box-shadow:
    0 0 0 1px #e5c75f66,
    0 0 18px #d4af373c,
    inset 0 1px 0 #ffffff16;
}
.player-chip.player-card.offline{
  opacity:.62;
  border-style:solid;
}

.player-seat-corner{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:40px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#e2bd56;
  font-size:16px;
  font-weight:900;
  line-height:1;
  background:transparent;
  border-top-left-radius:13px;
}
.player-connection-corner{
  position:absolute;
  right:10px;
  bottom:10px;
  top:auto;
  left:auto;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.player-connection-corner .player-status{
  margin:0!important;
}

.player-card-top{
  position:relative;
  z-index:1;
  min-height:58px;
  padding-left:30px;
  padding-right:38px;
  display:block;
}
.player-card-identity{
  min-width:0;
  padding-top:5px;
}
.player-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.015em;
}
.player-name-line{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.player-connection-inline{display:none}
.player-chip.team-A-player .player-name{color:#5eb8ff!important}
.player-chip.team-B-player .player-name{color:#ff6f67!important}

.player-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:20px;
  margin:0!important;
  padding:3px 7px;
  border:1px solid #ffffff22;
  border-radius:999px;
  background:#ffffff08;
  color:#bac7c0;
  font-size:8px!important;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.player-status.online{color:#7ee7a0;border-color:#55c87955;background:#12382499}
.player-status.offline{color:#ff9999;border-color:#e75e6555;background:#3c171a99}
.player-status i{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:currentColor;
  box-shadow:none;
}

.player-rank-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:28px;
  margin-top:5px;
}
.player-rank-row .player-rank-badge{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.player-rank-row .player-rank-badge:focus-visible{
  outline:2px solid #f4db7b;
  outline-offset:2px;
  border-radius:8px;
}
.player-rank-row .player-card-rank{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  min-width:0;
  font-size:8px;
  line-height:1;
  text-align:left;
}
.player-rank-row .player-card-rank .rank-emblem{
  width:25px;
  height:28px;
}
.player-rank-row .player-card-rank .rank-badge-copy{
  display:inline-flex;
  align-items:center;
  max-width:92px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  line-height:1.1;
  text-align:left;
}

.player-card-divider{
  position:relative;
  z-index:1;
  height:1px;
  margin:5px 0 8px;
  background:linear-gradient(90deg,#d4af3770,#d4af372d 72%,transparent);
}

.player-card-hand{
  position:relative;
  z-index:1;
  height:42px;
  display:flex!important;
  align-items:flex-end;
  padding-left:4px;
  padding-right:62px;
}
.player-card-back-fan{
  height:40px;
  display:flex;
  align-items:flex-end;
  padding-left:4px;
}
.player-card-back{
  position:relative;
  width:28px;
  height:39px;
  flex:0 0 auto;
  margin-left:-8px;
  border:1px solid #d9b855;
  border-radius:4px;
  background:
    linear-gradient(135deg,#d4af3713 25%,transparent 25%) 0 0/7px 7px,
    linear-gradient(315deg,#d4af370b 25%,transparent 25%) 0 0/7px 7px,
    linear-gradient(180deg,#0c2a20,#071b15);
  box-shadow:0 2px 5px #0007,inset 0 0 0 1px #0006;
  transform:rotate(calc((var(--card-index) - 1.5) * 2deg));
  transform-origin:bottom center;
}
.player-card-back:first-child{margin-left:0}
.player-card-back::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid #d4af3750;
  border-radius:2px;
}
.player-card-back span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#d4af37;
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  font-weight:900;
  text-shadow:0 1px 2px #000;
}
.player-card-hand-empty{height:40px}

.player-chip.player-card.dealer-position{padding-right:14px!important}
.player-chip.player-card .dealer-button{
  top:9px;
  right:9px;
  bottom:auto;
  width:26px;
  height:26px;
  transform:none;
  border:1px solid #d4af37;
  box-shadow:0 3px 8px #0007,inset 0 0 0 1px #fff8;
}

@media(max-height:1080px), (max-width:900px){
  .players{gap:7px;margin-bottom:8px}
  .player-chip.player-card{
    min-height:118px;
    padding:11px 10px 9px 12px;
    border-radius:11px;
    font-size:inherit;
    line-height:normal;
  }
  .player-seat-corner{
    width:34px;
    height:29px;
    font-size:14px;
    border-top-left-radius:10px;
  }
  .player-connection-corner{right:8px;bottom:8px;top:auto}
  .player-card-top{
    min-height:51px;
    padding-left:25px;
    padding-right:32px;
  }
  .player-name{font-size:15px}
  .player-status{min-height:18px;padding:3px 5px;font-size:7px!important}
  .player-rank-row{min-height:24px;margin-top:4px}
  .player-rank-row .player-card-rank{gap:4px;font-size:7px}
  .player-rank-row .player-card-rank .rank-emblem{width:22px;height:25px}
  .player-rank-row .player-card-rank .rank-badge-copy{max-width:72px;font-size:7px}
  .player-card-divider{margin:4px 0 6px}
  .player-card-hand{height:35px;padding-left:2px;padding-right:56px}
  .player-card-back-fan{height:34px}
  .player-card-back{width:24px;height:33px;margin-left:-7px}
  .player-card-back span{font-size:11px}
  .player-chip.player-card .dealer-button{top:7px;right:7px;bottom:auto;width:23px;height:23px;font-size:11px}
}

@media(max-width:800px){
  .players{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .player-chip.player-card{
    min-height:111px;
    padding:10px 8px 8px 10px;
  }
  .player-seat-corner{width:31px;height:27px;font-size:13px}
  .player-connection-corner{right:7px;bottom:7px;top:auto}
  .player-card-top{padding-left:22px;padding-right:29px;min-height:49px}
  .player-name{font-size:14px}
  .player-status{padding:2px 4px;font-size:6.5px!important}
  .player-rank-row{min-height:22px;margin-top:4px}
  .player-rank-row .player-card-rank{gap:3px}
  .player-rank-row .player-card-rank .rank-emblem{width:20px;height:23px}
  .player-rank-row .player-card-rank .rank-badge-copy{max-width:60px;font-size:6.5px}
  .player-card-hand{display:flex!important;height:33px;padding-right:52px}
  .player-card-back-fan{height:32px}
  .player-card-back{width:23px;height:31px;margin-left:-7px}
}

@media(max-width:480px){
  .players{gap:5px}
  .player-chip.player-card{min-height:105px;padding:9px 7px 7px 9px}
  .player-name{font-size:13px}
  .player-connection-corner{right:6px;bottom:6px;top:auto}
  .player-card-top{padding-left:20px;padding-right:27px}
  .player-status.online,.player-status.offline{
    width:auto;
    min-width:48px;
    padding:3px 5px;
    justify-content:center;
    font-size:6px!important;
    letter-spacing:.06em;
  }
  .player-status.online i,.player-status.offline i{width:6px;height:6px}
  .player-rank-row .player-card-rank .rank-emblem{width:19px;height:22px}
  .player-rank-row .player-card-rank .rank-badge-copy{max-width:52px;font-size:6px}
  .player-card-back{width:21px;height:29px;margin-left:-6px}
}

/* Mobile 2v2 keeps the full hand fan while removing the empty rank/status row. */
@media(max-width:600px){
  .players.players-2v2{gap:4px;margin-bottom:5px}
  .players.players-2v2 .player-chip.player-card{
    min-height:78px;
    padding:5px 6px 5px 7px;
    border-radius:10px;
  }
  .players.players-2v2 .player-seat-corner{
    width:25px;
    height:23px;
    font-size:12px;
  }
  .players.players-2v2 .player-card-top{
    position:static;
    min-height:24px;
    padding:2px 26px 0 19px;
  }
  .players.players-2v2 .player-card-identity{padding-top:0}
  .players.players-2v2 .player-name{font-size:12.5px;line-height:1.05}
  .players.players-2v2 .player-card-identity > .team-A,
  .players.players-2v2 .player-card-identity > .team-B{display:none!important}
  .players.players-2v2 .player-connection-corner{display:none!important}
  .players.players-2v2 .player-connection-inline{
    display:inline-flex;
    flex:0 0 auto;
  }
  .players.players-2v2 .player-connection-inline .player-status{
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
  }
  .players.players-2v2 .player-connection-inline .player-status-label{display:none}
  .players.players-2v2 .player-connection-inline .player-status i{width:7px;height:7px}
  .players.players-2v2 .player-card-divider{display:none}
  .players.players-2v2 .player-card-hand{
    height:36px;
    padding:4px 39px 0 1px;
    align-items:flex-end;
  }
  .players.players-2v2 .player-card-back-fan{height:31px;padding-left:1px}
  .players.players-2v2 .player-card-back{width:22px;height:30px;margin-left:-6px}
  .players.players-2v2 .player-card-back span{font-size:10px}
  .players.players-2v2 .player-card-hand-empty{height:30px}
  .players.players-2v2 .player-rank-row{
    position:absolute;
    right:4px;
    bottom:3px;
    z-index:5;
    min-height:0;
    margin:0;
  }
  .players.players-2v2 .player-rank-row .player-rank-badge{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    padding:4px;
    border-radius:9px;
  }
  .players.players-2v2 .player-rank-row .rank-badge-copy{display:none!important}
  .players.players-2v2 .player-rank-row .player-card-rank .rank-emblem{
    width:23px;
    height:26px;
  }
  .players.players-2v2 .player-chip.player-card .dealer-button{
    top:4px;
    right:4px;
    width:22px;
    height:22px;
    font-size:10px;
  }
}

.player-rank-detail-backdrop{
  position:fixed;
  inset:0;
  z-index:7600;
  display:grid;
  place-items:center;
  padding:18px;
  background:#010806d9;
  backdrop-filter:blur(8px);
}
.player-rank-detail{
  position:relative;
  width:min(390px,100%);
  padding:25px 22px 22px;
  border:1px solid #d4af3766;
  border-radius:22px;
  background:linear-gradient(180deg,#0c2c21,#061913);
  color:#f7f2e8;
  text-align:center;
  box-shadow:0 28px 80px #000c,inset 0 1px 0 #ffffff12;
}
.player-rank-detail-close{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #ffffff20;
  border-radius:50%;
  background:#ffffff08;
  color:#f7f2e8;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}
.player-rank-detail-badge{display:flex;justify-content:center;margin:2px 0 7px}
.player-rank-detail-badge .rank-visual{justify-content:center}
.player-rank-detail-badge .rank-emblem{width:58px;height:64px}
.player-rank-detail-eyebrow{
  color:#d8b75e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.player-rank-detail h2{margin:4px 0 2px;font-size:24px}
.player-rank-detail-name{display:block;color:#f3dc91;font-size:15px}
.player-experience-detail{
  margin-top:18px;
  padding:13px 14px;
  border:1px solid #ffffff16;
  border-radius:13px;
  background:#0003;
  text-align:left;
}
.player-experience-detail>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.player-experience-detail span{color:#8fa59a;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.player-experience-detail b{font-size:12px;text-align:right}
.player-experience-detail-track{
  height:5px;
  margin:10px 0 6px;
  overflow:hidden;
  border-radius:999px;
  background:#020906;
}
.player-experience-detail-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#bc9631,#f0d46a)}
.player-experience-detail small{color:#aebeb5;font-size:10px}
.player-experience-unavailable{margin:17px 0 0;color:#9eb0a6;font-size:11px}
@media(max-width:600px){
  .player-rank-detail-backdrop{align-items:end;padding:10px}
  .player-rank-detail{width:100%;padding-bottom:max(22px,env(safe-area-inset-bottom));border-radius:20px 20px 14px 14px}
}