/*! Card Battle Lab. Copyright (c) 2026 Dave Skilton. All rights reserved. See /LICENSE. https://cardbattlelab.com/ */
.player-chip-host {
  --player-chip-scale: .723;
  position: relative;
  display: block;
  width: calc(var(--player-chip-width, 189px) * var(--player-chip-scale));
  height: calc(75px * var(--player-chip-scale));
  min-width: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
.player-chip-host[hidden] {
  display: none !important;
}
.player-chip-scale {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--player-chip-width, 189px);
  height: 96px;
  transform: scale(var(--player-chip-scale));
  transform-origin: top right;
}
.player-chip {
  display: grid;
  grid-template-columns: 65px var(--player-chip-content, 120px);
  grid-template-rows: 65px auto;
  column-gap: 4px;
  row-gap: 0;
  align-items: end;
  width: var(--player-chip-width, 189px);
  height: 96px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-text-hi);
  cursor: pointer;
  text-align: left;
}
.player-chip:hover,
.player-chip:focus-visible {
  background: transparent;
  filter: brightness(1.14);
}
.player-chip:focus-visible {
  outline: 0;
}
.player-chip-host:has(.player-chip:focus-visible) {
  outline: 1px solid var(--c-text-dim);
  outline-offset: 2px;
}
.player-banner-host .player-chip:hover:not(:disabled),
.player-banner-host .player-chip:active:not(:disabled),
.player-banner-host .player-chip:focus-visible {
  filter: none;
}
.player-banner-host:has(.player-chip:not(.player-chip-static):hover) {
  outline: 1px solid var(--c-text-dim);
  outline-offset: 2px;
}
.player-chip .acct-rank {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: var(--player-chip-badge, 37px);
  height: var(--player-chip-badge, 37px);
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.player-chip-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: block;
  width: var(--player-chip-content, 120px);
  min-width: 0;
  overflow: hidden;
  padding-bottom: 4px;
  transform: translateY(-15px);
  color: var(--c-text-bright);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-chip-tier {
  grid-column: 1;
  grid-row: 2;
  align-self: baseline;
  justify-self: stretch;
  overflow: hidden;
  transform: translateY(-11px);
  text-align: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.player-chip-tier[data-tier="0"] {
  color: var(--c-text-muted);
}
.player-chip-tier[data-tier="1"] {
  color: var(--c-tier-1);
}
.player-chip-tier[data-tier="2"] {
  color: var(--c-tier-2);
}
.player-chip-tier[data-tier="3"] {
  color: var(--c-tier-3);
}
.player-chip-status {
  grid-column: 2;
  grid-row: 2;
  align-self: baseline;
  display: grid;
  grid-template-columns: auto minmax(68px, 1fr);
  align-items: end;
  gap: 9px;
  min-width: 0;
  transform: translateY(-11px);
}
.player-chip-level {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 900;
  white-space: nowrap;
}
.player-chip-level-label {
  color: var(--c-text-muted);
  font-size: 10px;
  letter-spacing: .035em;
  line-height: 1;
}
.player-chip-level-number {
  color: var(--c-text-bright);
  font-size: 29px;
  line-height: .68;
}
.player-chip-xp {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 1px;
}
.player-chip-next {
  justify-self: end;
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.player-chip-track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 17%, transparent);
}
.player-chip-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-game-activate);
}
.player-chip-host.chip-fill .player-chip-scale {
  right: auto;
  left: 0;
  transform-origin: top left;
  width: calc(100% / var(--player-chip-scale));
}
.player-chip-host.chip-fill .player-chip {
  width: 100%;
  grid-template-columns: 65px minmax(0, 1fr);
}
.player-chip-host.chip-fill .player-chip-name {
  width: auto;
}
.player-chip-host.player-banner-host {
  width: calc(320px * var(--player-chip-scale) * .78125);
  max-width: 100%;
  height: calc(75px * var(--player-chip-scale));
}
.player-banner-host .player-chip-scale,
.player-banner-host.chip-fill .player-chip-scale {
  width: 320px;
  height: 96px;
  left: auto;
  right: 0;
  transform: scale(var(--player-banner-fit, .5));
  transform-origin: top right;
}
.player-banner-host .player-chip.player-banner,
.player-banner-host.chip-fill .player-chip.player-banner {
  position: relative;
  display: block;
  width: 320px;
  height: 96px;
  border-radius: 4px;
  background: var(--c-panel);
}
.player-banner-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.player-banner .acct-rank {
  position: absolute;
  left: 8px;
  top: 5px;
  width: 38px;
  height: 38px;
}
.player-banner .player-chip-name,
.player-banner-host.chip-fill .player-banner .player-chip-name {
  position: absolute;
  left: 56px;
  top: 10px;
  width: 258px;
  padding: 0;
  transform: none;
  font-size: 24px;
  text-shadow: var(--gcg-count-glow);
}
.player-banner .player-chip-tier {
  position: absolute;
  left: 3px;
  top: 43px;
  width: 48px;
  transform: none;
  font-size: 8px;
  text-shadow: var(--gcg-count-glow);
}
.player-banner .player-chip-status {
  position: absolute;
  left: 56px;
  top: 53px;
  width: 248px;
  transform: none;
  display: block;
}
.player-banner .player-chip-level {
  height: 24px;
  gap: 5px;
  text-shadow: var(--gcg-count-glow);
}
.player-banner .player-chip-level-label {
  font-size: 12px;
}
.player-banner .player-chip-level-number {
  font-size: 26px;
  line-height: 1;
}
.player-banner .player-chip-xp {
  position: absolute;
  left: 0;
  top: 28px;
  width: 248px;
  padding: 0;
}
.player-banner .player-chip-next {
  display: none;
}
.player-banner .player-chip-track {
  height: 4px;
  background: var(--c-border-strong);
}
.player-banner .player-chip-fill {
  background: var(--c-card-blue);
}
.player-banner .player-chip-rating .player-chip-level-label {
  font-size: 12px;
}
.player-banner .pb-group {
  position: absolute;
  width: max-content;
  transform-origin: top left;
  z-index: 2;
}
.player-banner .pb-shadows {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.player-banner .pb-shadows .pb-group {
  z-index: auto;
}
.player-banner .pb-name,
.player-banner-host.chip-fill .player-banner .pb-name {
  position: static;
  width: max-content;
  max-width: none;
  padding: 2px 4px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  transform: none;
  text-shadow: none;
}
.player-banner .pb-support {
  display: block;
  position: relative;
  width: 65px;
  height: 75px;
  transform: scale(.75);
  transform-origin: top left;
}
.player-banner .pb-emblem {
  position: absolute;
  width: var(--player-chip-badge);
  height: var(--player-chip-badge);
  left: calc((65px - var(--player-chip-badge))/2);
  top: calc((65px - var(--player-chip-badge))/2);
  filter: none;
}
.player-banner .pb-tier {
  position: absolute;
  left: 0;
  top: 54px;
  width: 65px;
  font-size: 10px;
  transform: none;
  text-shadow: none;
}
.player-banner .pb-child {
  position: absolute;
  transform-origin: top left;
  margin: 0;
  white-space: nowrap;
  width: max-content;
  text-shadow: none;
}
.player-banner .pb-label {
  display: block;
  color: var(--c-text-dim);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.player-banner .pb-number {
  display: block;
  font: 800 22px/1.1 var(--font-display);
  color: var(--c-text-hi);
}
.player-banner .pb-medal {
  width: 22px;
  height: 26px;
}
.player-banner .pb-progress {
  display: block;
  width: 82px;
  height: 4px;
  overflow: hidden;
  border-radius: 0;
  background: var(--c-border-strong);
}
.player-banner .pb-progress .pb-fill {
  display: block;
  height: 100%;
  border-radius: 0;
  background: var(--c-card-blue);
}
.player-banner .pb-number.is-unrated {
  color: var(--c-text-dim);
}
.player-banner .pb-name {
  display: block;
  font-family: var(--font-display);
  white-space: nowrap;
}
.player-banner .pb-tier {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
#homePlayerChipHost {
  --player-chip-scale: .9;
}
#mainMenuModal .menu-head:has(#homePlayerChipHost:not([hidden])) {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  min-height: 0;
}
#homePlayerChipHost .player-banner {
  border-radius: 0;
}
#playPlayerChipHost {
  --player-chip-scale: .60;
  position: relative;
  z-index: auto;
  top: auto;
  right: auto;
}
.sidebar-topbar > #playPlayerChipHost.player-banner-host {
  width: calc((100% - var(--navrail-gap, 5px)) * 11 / 19);
  height: auto;
  aspect-ratio: 320 / 96;
}
#testsPlayerChipHost,
#optimizerPlayerChipHost {
  --player-chip-scale: .603;
  margin-left: auto;
}
#storyPlayerChipHost {
  --player-chip-scale: .512;
}
#profilePlayerChipHost {
  --player-chip-scale: .723;
}
#setupBody .pcard-top:has(.player-banner-host:not([hidden]):not(.bot-banner-host)) .seatcol {
  display: none;
}
#setupBody .pcard-top:has(.player-banner-host:not([hidden]):not(.bot-banner-host)) {
  flex: 0 0 auto;
}
#setupBody .whog .seat-chip-host.player-banner-host,
body:not(.pvp-lobby) #setupBody .whog .bot-list-trigger,
#profilePlayerChipHost.player-banner-host {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 96;
  flex: 0 0 auto;
}
#profilePlayerChipHost {
  margin-bottom: 12px;
}
.tests-head.player-chip-head,
.opt-head.player-chip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
}
.se-toolbar > #storyPlayerChipHost {
  margin-left: 4px;
}
.tst-head-actions > #profilePlayerChipHost {
  margin-right: 6px;
}
@media (max-width: 700px) {
  #testsPlayerChipHost,
  #optimizerPlayerChipHost {
    --player-chip-scale: .512;
  }
}
#playScreen.narrow-shell > #playPlayerChipHost {
  --player-chip-scale: .60;
  position: fixed;
  z-index: 24;
  top: 8px;
  right: 8px;
}
body:not(.pvp-lobby) #setupBody .pcard-top:has(.bot-tagv:not(.is-user)) {
  flex: 0 0 auto;
}
body:not(.pvp-lobby) #setupBody .pcard-top:has(.bot-tagv:not(.is-user)) .seatcol {
  display: none;
}