/* Shared page components for Control, Ranking, Compare and Overlays */

.control-body {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 0%, rgba(255,45,143,0.16), transparent 70%),
    linear-gradient(180deg, #080016, #06010f);
  color: var(--off-white);
}

.control-wrap {
  max-width: 1640px;
  margin: 0 auto;
}

.control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 22px;
}
.control-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.control-brand h1 {
  font-size: 36px;
  line-height: 1;
}
.control-brand .sub {
  margin-top: 4px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
}

.scene-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 14px 18px;
}
.status-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.status-player img,
.status-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-magenta);
}
.status-vs {
  font-family: 'Permanent Marker', cursive;
  color: var(--glow-orchid);
  font-size: 22px;
}
.status-map {
  margin-left: auto;
  color: var(--radar-green);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.control-section {
  margin-bottom: 24px;
}
.control-section h2 {
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  border-left: 4px solid var(--brand-magenta);
  padding-left: 12px;
  margin-bottom: 14px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px;
}
.card-grid.maps {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.player-select-card,
.map-select-card {
  background: rgba(21,11,48,0.72);
  border: 2px solid rgba(255,45,143,0.25);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: 0.15s;
}
.player-select-card:hover,
.map-select-card:hover {
  border-color: var(--glow-orchid);
  transform: translateY(-2px);
}
.player-select-card.selected-a {
  border-color: var(--brand-magenta);
  background: rgba(255,45,143,0.15);
  box-shadow: 0 0 16px rgba(255,45,143,0.38);
}
.player-select-card.selected-b {
  border-color: var(--hot-pink);
  background: rgba(250,6,104,0.15);
  box-shadow: 0 0 16px rgba(250,6,104,0.38);
}
.map-select-card.selected {
  border-color: var(--radar-green);
  background: rgba(76,255,136,0.10);
  box-shadow: 0 0 16px rgba(76,255,136,0.24);
}
.player-select-card img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(245,240,255,0.2);
}
.card-name {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}
.card-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.card-rank {
  margin-top: 3px;
  font-size: 11px;
  color: var(--radar-green);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.toolbar,
.map-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* Leaderboard */
.board-wrap {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: 58px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.board-title {
  text-align: center;
  margin-bottom: 34px;
}
.board-title .brand {
  font-size: 60px;
  line-height: 0.95;
}
.board-title .league {
  margin-top: 8px;
  font-size: 18px;
}
.leaderboard-panel {
  width: 1380px;
  padding: 28px;
}
.leader-row {
  display: grid;
  grid-template-columns: 90px 1fr 130px 150px 150px 150px;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,45,143,0.22);
  font-size: 22px;
}
.leader-row.header {
  color: var(--radar-green);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.leader-row:last-child { border-bottom: 0; }
.rank {
  color: var(--gold);
  font-weight: 700;
}
.leader-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.elo {
  color: var(--brand-magenta);
  font-weight: 700;
}
.live-note {
  margin-top: 16px;
  color: var(--radar-green);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 15px;
}

/* Compact live overlay */
.live-topbar {
  position: absolute;
  top: 32px; left: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px 12px 12px;
  border-radius: 16px;
}
.live-topbar .titletext {
  font-family: 'Permanent Marker', cursive;
  font-size: 34px;
  text-transform: uppercase;
}
.live-badge {
  position: absolute;
  top: 32px; right: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
}
.matchbar {
  position: absolute;
  bottom: 40px; left: 40px;
  width: 1520px;
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  gap: 0;
  overflow: hidden;
}
.match-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 26px;
}
.match-player.right {
  flex-direction: row-reverse;
  text-align: right;
}
.match-avatar {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 3px solid var(--brand-magenta);
  overflow: hidden;
  flex-shrink: 0;
}
.match-player.right .match-avatar { border-color: var(--hot-pink); }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; }
.match-name {
  font-size: 25px;
  line-height: 1.05;
  font-weight: 700;
  text-transform: uppercase;
}
.match-stat {
  margin-top: 5px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--radar-green);
  text-transform: uppercase;
}
.match-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1px solid rgba(255,45,143,0.25);
  border-right: 1px solid rgba(255,45,143,0.25);
  padding: 12px 20px;
  text-align: center;
}
.match-center .mapname {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.match-center .league {
  margin-top: 4px;
  color: var(--hot-pink);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.match-center .game {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.live-chip {
  position: absolute;
  bottom: 40px;
  right: 40px;
  padding: 16px 24px;
  border-radius: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.live-mini-radar {
  width: 62px;
  height: 62px;
  transform: scale(0.20);
  transform-origin: center;
}/* Full leaderboard scrolling */
.leaderboard-scroll {
  max-height: 760px;
  overflow-y: auto;
  padding-right: 8px;
}
.leaderboard-scroll::-webkit-scrollbar {
  width: 12px;
}
.leaderboard-scroll::-webkit-scrollbar-track {
  background: rgba(8,5,15,0.55);
  border-radius: 8px;
}
.leaderboard-scroll::-webkit-scrollbar-thumb {
  background: rgba(76,255,136,0.55);
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(76,255,136,0.35);
}
.leaderboard-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(76,255,136,0.85);
}
.leaderboard-panel.full {
  width: 1500px;
}
.leader-row.full {
  grid-template-columns: 90px 1fr 130px 130px 130px 130px 130px;
}


/* v3.7 Live Overlay compact fixes */
.live-badge.compact {
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 3px;
  gap: 7px;
  opacity: 0.90;
}
.live-badge.compact .live-dot {
  width: 8px;
  height: 8px;
}
.live-discord-chip {
  position: absolute;
  right: 32px;
  bottom: 34px;
  padding: 12px 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 250px;
}
.live-discord-chip .label {
  font-size: 11px;
  letter-spacing: 3px;
}
.live-discord-chip .link {
  font-size: 17px;
  color: var(--radar-green);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(76,255,136,0.45);
}


/* v3.19 overlay refinements */
.live-topbar {
  top: 12px; left: 12px;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  border-radius: 15px;
}
.live-topbar .titletext { font-size: 29px; }
.live-topbar .small-logo { width: 42px; height: 42px; }
.live-badge { top: 18px; right: 112px; }
.live-discord-chip {
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  min-width: 186px;
  border-radius: 12px;
  gap: 4px;
}
.live-discord-chip .label {
  font-size: 9px;
  letter-spacing: 2.2px;
}
.live-discord-chip .link {
  font-size: 11px;
  letter-spacing: 1.2px;
  line-height: 1.15;
}
.live-discord-chip .inline-social {
  gap: 6px;
}
.live-discord-chip .inline-icon {
  width: 16px;
  height: 16px;
}

/* RetroBoys Brand Standard v477 – Control Header */
.control-brand{
  align-items:center;
  gap:18px;
}
.control-brand .rbc-brand-wordmark-img{
  --rbc-wordmark-w:310px;
  width:310px!important;
  max-height:66px!important;
  object-fit:contain!important;
}
.control-brand .rbc-scene-title{
  font-size:30px!important;
  line-height:1!important;
  margin:0!important;
  letter-spacing:.18em!important;
  color:#ff6fcf!important;
}
.control-brand .sub{
  margin-top:5px;
  color:rgba(245,240,255,.50)!important;
  letter-spacing:3.2px!important;
}