/* Shared UI component styles for overlays, banners, buttons, and icons */

/*
 * Class name normalization table
 *
 * New namespace            Legacy alias
 * ------------------------------------------------------------
 * .cg-banner               .spectate-banner
 * .cg-banner--spectate     .spectate-banner
 * .cg-banner--info         .spectate-banner--info
 * .cg-banner--success      .spectate-banner--success
 * .cg-overlay--banner      .banner-overlay
 * .cg-overlay__backdrop--banner  .banner-overlay-backdrop
 * .cg-overlay__dialog--banner    .banner-overlay__dialog
 * .cg-overlay__content--banner   .banner-overlay__content
 * .cg-overlay__close--banner     .banner-overlay__close
 * .cg-overlay--banner-open  .banner-overlay--open
 * .cg-status-icon          .history-status-icon
 * .cg-status-icon--win     .history-status-win
 * .cg-status-icon--loss    .history-status-loss
 * .cg-status-icon--draw    .history-status-draw
 */

:root {
  --cg-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --cg-font-weight-regular: 400;
  --cg-font-weight-strong: 700;
  --cg-overlay-padding: 16px;
  --cg-overlay-z-index: 2500;
  --cg-overlay-dialog-max-height: 90vh;
  --cg-overlay-content-gap: 12px;
  --cg-button-border: 3px solid var(--CG-deep-gold);
  --cg-button-background: var(--CG-purple-pressed);
  --cg-button-color: var(--CG-white);
  --cg-button-font-weight: var(--cg-font-weight-strong);
  --cg-icon-object-fit: contain;
  --cg-icon-display: block;
  --cg-clock-panel-border-width: 2px;
}

html {
  font-family: var(--cg-font-family);
  font-weight: var(--cg-font-weight-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: inherit;
  font-weight: inherit;
}

body,
body * {
  font-family: var(--cg-font-family);
}

body :where(*):not(button):not(.cg-button):not(.cg-button *) {
  font-weight: var(--cg-font-weight-regular) !important;
}

button,
.cg-button,
.cg-button * {
  font-weight: var(--cg-button-font-weight) !important;
}

:root,
:root * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.cg-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--cg-overlay-padding);
  z-index: var(--cg-overlay-z-index);
}

.cg-overlay--open {
  display: flex;
}

.cg-overlay__backdrop,
.cg-overlay__backdrop--banner,
.banner-overlay-backdrop,
.history-overlay-backdrop {
  position: absolute;
  inset: 0;
}

.cg-overlay__backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.cg-overlay__dialog,
.cg-overlay__dialog--banner,
.banner-overlay__dialog {
  position: relative;
  z-index: 1;
  max-height: var(--cg-overlay-dialog-max-height);
  outline: none;
  display: flex;
  flex-direction: column;
}

.cg-overlay__content,
.cg-overlay__content--banner,
.banner-overlay__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--cg-overlay-content-gap);
}

.cg-overlay--spectate-result {
  pointer-events: none;
}

.cg-overlay--spectate-result .cg-overlay__backdrop,
.cg-overlay--spectate-result .banner-overlay-backdrop {
  pointer-events: none;
}

.cg-overlay__dialog--spectate-result,
.cg-overlay__content--spectate-result {
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
}

.cg-overlay__close,
.cg-overlay__close--banner,
.banner-overlay__close {
  --cg-button-background: transparent;
  --cg-button-border: none;
  --cg-button-color: inherit;
  --cg-button-padding: 4px 6px;
  position: absolute;
  top: var(--cg-overlay-close-top, 12px);
  right: var(--cg-overlay-close-right, 12px);
  font-size: var(--cg-overlay-close-font-size, 18px);
  cursor: pointer;
}

.cg-overlay--banner-open,
.banner-overlay--open {
  /* modifier placeholder for compatibility */
}

body.cg-overlay-open {
  overflow: hidden;
}

body.history-overlay-open {
  overflow: hidden;
}

.history-overlay {
  --cg-overlay-padding: 24px;
  --cg-overlay-z-index: 3000;
}

.history-overlay.cg-overlay--open,
.history-overlay.open {
  display: flex;
}

.history-overlay-backdrop {
  background: rgba(7, 4, 12, 0.78);
}

.history-modal {
  background: rgba(24, 9, 38, 0.95);
  border: 4px solid var(--CG-deep-gold);
  border-radius: 10px;
  max-width: min(960px, 95vw);
  max-height: var(--history-modal-max-height, 90vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  position: relative;
}

.history-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.history-overlay-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.history-overlay-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.history-current-elo {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.8);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.history-current-elo span {
  font-size: 17px;
  font-weight: 700;
  color: var(--CG-white);
}


.history-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .history-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.history-card {
  border: 3px solid var(--CG-deep-gold);
  border-radius: 8px;
  padding: 10px;
  background: rgba(38, 17, 58, 0.7);
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  text-align: center;
  min-height: 0;
  min-width: 0;
}

.history-card .history-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245, 230, 167, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.history-card .history-card-label-line {
  display: block;
}

.history-card .history-card-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.history-card .history-card-total {
  font-size: 24px;
  font-weight: 700;
  color: var(--CG-white);
  line-height: 1.1;
}

.history-card .history-card-splits {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--cg-font-family);
  font-variant-numeric: lining-nums;
}

.history-card .history-card-split {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.history-card .history-card-split span {
  font-weight: 700;
  line-height: 1;
}

.history-card .history-card-split--wins {
  color: #34d399;
}

.history-card .history-card-split--draws {
  color: #9ca3af;
}

.history-card .history-card-split--losses {
  color: #f87171;
}

.cg-overlay--banner,
.banner-overlay {
  --cg-overlay-padding: 0;
  --cg-overlay-z-index: 3200;
}

.cg-overlay__backdrop--banner,
.banner-overlay-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.cg-overlay__dialog--banner,
.banner-overlay__dialog {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cg-overlay__content--banner,
.banner-overlay__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.cg-overlay__close--banner,
.banner-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--CG-white);
  background: rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.cg-overlay__close--banner:hover,
.banner-overlay__close:hover {
  background: rgba(0, 0, 0, 0.65);
}

.cg-banner,
.spectate-banner {
  padding: var(--cg-banner-padding, 10px 14px);
  border-radius: var(--cg-banner-radius, 8px);
  font-weight: var(--cg-banner-font-weight, 700);
  text-align: center;
  border: var(--cg-banner-border, 2px solid transparent);
  background: var(--cg-banner-background, transparent);
  color: var(--cg-banner-color, inherit);
}

.cg-banner--spectate,
.spectate-banner {
  --cg-banner-padding: 10px 14px;
  --cg-banner-radius: 8px;
  --cg-banner-font-weight: 700;
}

.cg-banner--info,
.spectate-banner--info {
  --cg-banner-background: rgba(59, 130, 246, 0.18);
  --cg-banner-border: 2px solid rgba(59, 130, 246, 0.75);
  --cg-banner-color: #bfdbfe;
}

.cg-banner--success,
.spectate-banner--success {
  --cg-banner-background: rgba(34, 197, 94, 0.25);
  --cg-banner-border: 2px solid rgba(34, 197, 94, 0.85);
  --cg-banner-color: #bbf7d0;
}

.cg-status-icon,
.history-status-icon {
  pointer-events: none;
}

.cg-status-icon--win,
.history-status-win {
  color: inherit;
}

.cg-status-icon--loss,
.history-status-loss {
  color: inherit;
}

.cg-status-icon--draw,
.history-status-draw {
  color: inherit;
}

.cg-button {
  position: var(--cg-button-position, absolute);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--cg-button-padding, 0);
  border: var(--cg-button-border);
  background: var(--cg-button-background);
  color: var(--cg-button-color);
  font-weight: var(--cg-button-font-weight);
  cursor: pointer;
}

.cg-button--primary {
  --cg-button-background: var(--CG-purple-pressed);
}

.cg-button--danger {
  --cg-button-background: var(--CG-dark-red);
}

.cg-button--neutral {
  --cg-button-background: var(--CG-gray);
}

.cg-button--dark {
  --cg-button-background: var(--CG-black);
}

.cg-spectate-score,
.spectate-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cg-spectate-score-gap, 16px);
  font-weight: var(--cg-spectate-score-weight, 700);
  font-size: var(--cg-spectate-score-font-size, 18px);
  letter-spacing: var(--cg-spectate-score-letter-spacing, 0.04em);
  font-variant-numeric: tabular-nums;
}

.cg-spectate-score__player,
.cg-spectate-score__value,
.cg-spectate-score__draws {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-spectate-score-item-gap, 6px);
}

.cg-spectate-score__player {
  font-weight: var(--cg-spectate-score-player-weight, 700);
  font-size: var(--cg-spectate-score-player-size, 18px);
}

.cg-spectate-score__value {
  font-weight: var(--cg-spectate-score-value-weight, 700);
  font-size: var(--cg-spectate-score-value-size, 20px);
}

.cg-spectate-score__draws {
  font-weight: var(--cg-spectate-score-draw-weight, 600);
  font-size: var(--cg-spectate-score-draw-size, 14px);
  opacity: var(--cg-spectate-score-draw-opacity, 0.85);
}

.cg-active-match {
  display: flex;
  align-items: center;
  gap: var(--cg-active-match-gap, 12px);
}

.cg-active-match__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cg-active-match-pill-padding, 2px 8px);
  border-radius: var(--cg-active-match-pill-radius, 999px);
  border: var(--cg-active-match-pill-border, 1px solid rgba(255, 215, 0, 0.55));
  background: var(--cg-active-match-pill-background, rgba(255, 215, 0, 0.12));
  font-size: var(--cg-active-match-pill-font-size, 10px);
  font-weight: var(--cg-active-match-pill-font-weight, 700);
  letter-spacing: var(--cg-active-match-pill-letter-spacing, 0.08em);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cg-active-match-pill-color, var(--CG-white));
}

.cg-active-match__score {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cg-active-match-score-gap, 8px);
  font-size: var(--cg-active-match-font-size, 14px);
  letter-spacing: var(--cg-active-match-letter-spacing, 0.04em);
  color: var(--cg-active-match-color, var(--CG-white));
}

.cg-active-match__player {
  font-weight: var(--cg-active-match-player-weight, 600);
  min-width: 0;
}

.cg-active-match__score-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cg-active-match-score-min-width, 18px);
  padding: var(--cg-active-match-score-padding, 2px 6px);
  border-radius: var(--cg-active-match-score-radius, 6px);
  background: var(--cg-active-match-score-background, rgba(255, 215, 0, 0.15));
  color: var(--cg-active-match-score-color, var(--CG-white));
  font-weight: var(--cg-active-match-score-weight, 700);
  font-variant-numeric: tabular-nums;
}

.cg-active-match__score-separator {
  font-weight: var(--cg-active-match-separator-weight, 700);
}

.cg-active-match__draw {
  display: inline-flex;
  align-items: center;
  gap: var(--cg-active-match-draw-gap, 6px);
}

.cg-active-match__draw-icon {
  --cg-icon-display: inline-flex;
  --cg-icon-object-fit: contain;
}

.cg-active-match__action {
  --cg-button-position: relative;
  --cg-button-font-weight: 700;
  padding: var(--cg-active-match-action-padding, 6px 12px);
  font-size: var(--cg-active-match-action-font-size, 13px);
}

.cg-spectate-result-card {
  width: 100%;
  max-width: 100%;
  height: var(--cg-spectate-result-height, 160px);
  padding: var(--cg-spectate-result-padding, 18px 26px);
  border-radius: var(--cg-spectate-result-radius, 0);
  border-top: var(--cg-spectate-result-border, 2px solid var(--CG-deep-gold));
  border-bottom: var(--cg-spectate-result-border, 2px solid var(--CG-deep-gold));
  margin-top: var(--cg-spectate-result-margin-top, auto);
  margin-bottom: var(--cg-spectate-result-margin-bottom, clamp(12px, 2vh, 40px));
  margin-left: var(--cg-spectate-result-margin-x, auto);
  margin-right: var(--cg-spectate-result-margin-x, auto);
  background: var(--cg-spectate-result-background, var(--CG-dark-red));
  color: var(--cg-spectate-result-color, var(--CG-white));
  box-shadow: var(--cg-spectate-result-shadow, 0 10px 30px var(--CG-black));
  text-align: center;
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cg-spectate-result-gap, 10px);
}

.cg-spectate-result-card--draw {
  --cg-spectate-result-background: var(--CG-gray);
}

.cg-spectate-result-card__title {
  font-size: var(--cg-spectate-result-title-size, 32px);
  font-weight: var(--cg-spectate-result-title-weight, 800);
  margin: 0;
}

.cg-spectate-result-card__desc {
  font-size: var(--cg-spectate-result-desc-size, 20px);
  font-weight: var(--cg-spectate-result-desc-weight, 500);
  margin: 0;
}

.cg-spectate-result-card__footer {
  font-size: var(--cg-spectate-result-footer-size, 14px);
  font-weight: var(--cg-spectate-result-footer-weight, 600);
  opacity: var(--cg-spectate-result-footer-opacity, 0.85);
  margin-top: auto;
}

.cg-spectate-bubble {
  position: absolute;
  pointer-events: none;
  z-index: var(--cg-spectate-bubble-z-index, 1001);
  width: var(--cg-spectate-bubble-size, 0px);
  height: auto;
  top: calc(-1 * var(--cg-spectate-bubble-offset-y, 0px));
  left: calc(-1 * var(--cg-spectate-bubble-offset-x, 0px));
}

.cg-spectate-bubble--right {
  left: auto;
  right: calc(-1 * var(--cg-spectate-bubble-offset-x, 0px));
}

.cg-elo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cg-elo-badge-width, 44px);
  height: var(--cg-elo-badge-height, 32px);
  box-sizing: border-box;
  padding: var(--cg-elo-badge-padding, 2px 6px);
  flex-shrink: 0;
  overflow: visible;
}

.cg-elo-badge__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
}

.cg-elo-badge .cg-elo-badge__icon {
  width: var(--cg-elo-badge-icon-size, 52px);
  height: var(--cg-elo-badge-icon-size, 52px);
}

.cg-elo-badge__value {
  position: relative;
  z-index: 1;
  color: var(--cg-elo-badge-color, #ffd700);
  font-weight: var(--cg-elo-badge-font-weight, 500);
  font-size: var(--cg-elo-badge-font-size, 13px);
  line-height: 1;
  letter-spacing: var(--cg-elo-badge-letter-spacing, -0.25px);
  text-align: center;
  padding: var(--cg-elo-badge-value-padding, 0 4px);
  text-shadow: var(--cg-elo-badge-text-shadow, 0 0 4px rgba(0, 0, 0, 0.85));
  user-select: none;
  pointer-events: none;
}

.cg-icon {
  display: var(--cg-icon-display);
  object-fit: var(--cg-icon-object-fit);
  pointer-events: none;
}

.cg-token {
  border: 2px solid var(--CG-white);
  border-radius: 50%;
  background: var(--CG-dark-red);
  color: var(--CG-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.history-match-games {
  --history-match-game-count: 1;
  --history-match-max-game-count: var(--history-match-game-count);
  --history-match-square-base: 34px;
  --history-match-square-min: 18px;
  --history-match-gap: 8px;
  --history-match-square-size: clamp(
    var(--history-match-square-min),
    calc((100% - (var(--history-match-max-game-count) - 1) * var(--history-match-gap)) / var(--history-match-max-game-count)),
    var(--history-match-square-base)
  );
  display: flex;
  gap: var(--history-match-gap);
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-bottom: 4px;
  overflow: hidden;
}

.history-match-square {
  width: var(--history-match-square-size);
  height: var(--history-match-square-size);
  border: 3px solid var(--deep-gold);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  position: relative;
  flex: 0 1 var(--history-match-square-size);
  min-width: var(--history-match-square-min);
  max-width: var(--history-match-square-base);
}

.history-match-square .cg-status-icon,
.history-match-square .history-status-icon {
  max-width: 70%;
  max-height: 70%;
}

.cg-name-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: var(--cg-name-row-height, 24px);
}

.cg-name-row--top {
  justify-content: flex-end;
}

.cg-name-row--bottom {
  justify-content: flex-start;
}

.cg-name-row__content {
  display: flex;
  align-items: center;
  gap: var(--cg-name-row-gap, 6px);
}

.cg-name-row__label {
  display: inline-block;
  color: var(--cg-name-row-color, var(--CG-white));
  font-size: var(--cg-name-row-font-size, 16px);
  font-weight: var(--cg-name-row-font-weight, 700);
  white-space: nowrap;
  z-index: 0;
}

.cg-name-row__connection {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cg-name-row__countdown {
  font-family: var(--cg-name-row-countdown-font-family, 'Courier New, monospace');
  font-weight: var(--cg-name-row-countdown-font-weight, bold);
  font-size: var(--cg-name-row-countdown-font-size, 14px);
  color: var(--cg-name-row-countdown-color, var(--CG-white));
}

.cg-name-row__wins {
  display: flex;
  align-items: center;
  gap: var(--cg-name-row-wins-gap, 2px);
}

.cg-clock-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Courier New, monospace';
  font-weight: bold;
  background: var(--cg-clock-panel-background, var(--CG-black));
  color: var(--cg-clock-panel-color, var(--CG-white));
  border-width: var(--cg-clock-panel-border-width, 2px);
  border-style: solid;
  border-color: var(--cg-clock-panel-border, var(--CG-deep-gold));
  border-radius: 0;
  pointer-events: none;
  width: var(--cg-clock-panel-width, 200px);
  height: var(--cg-clock-panel-height, 48px);
  font-size: var(--cg-clock-panel-font-size, 18px);
}

.cg-clock-panel--active {
  animation: cg-clock-panel-glow 1.4s ease-in-out infinite;
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.45),
    0 0 24px rgba(255, 215, 0, 0.3);
}

@keyframes cg-clock-panel-glow {
  0%,
  100% {
    box-shadow:
      0 0 8px rgba(255, 215, 0, 0.4),
      0 0 20px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 32px rgba(255, 215, 0, 0.7),
      0 0 64px rgba(255, 215, 0, 0.35);
  }
}

.cg-dagger-counter {
  display: flex;
  align-items: center;
  gap: var(--cg-dagger-counter-gap, 6px);
}

.cg-challenge-bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(var(--cg-challenge-bubble-offset-y, 0));
  z-index: var(--cg-challenge-bubble-z-index, 10);
  pointer-events: none;
}

.cg-challenge-bubble img {
  pointer-events: none;
}

@media (max-width: 720px) {
  .history-modal {
    max-height: 95vh;
    padding: 16px;
  }

  .history-match-games {
    --history-match-gap: 6px;
  }
}

@media (max-width: 640px) {
  .history-current-elo {
    font-size: 14px;
  }

  .history-summary {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 9px;
  }

  .history-card {
    padding: 9px 10px;
  }

  .history-card .history-card-label {
    font-size: 10px;
  }

  .history-card .history-card-total {
    font-size: 22px;
  }

  .history-card .history-card-splits {
    gap: 6px;
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .history-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .history-card {
    padding: 8px 9px;
  }

  .history-card .history-card-total {
    font-size: 20px;
  }

  .history-card .history-card-splits {
    gap: 5px;
    font-size: 10px;
  }
}