/* Santiago Pickup Basketball - Arena Dark Theme */
:root {
  --bg-dark: #070a12;
  --bg-card: rgba(15, 23, 42, 0.85);
  --bg-card-solid: #0f172a;
  --bg-input: rgba(10, 15, 29, 0.9);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 107, 0, 0.35);

  --orange: #ff6b00;
  --orange-glow: rgba(255, 107, 0, 0.45);
  --orange-light: #ff8c33;
  --black-team: #1e293b;
  --black-team-light: #334155;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --accent-gold: #fbbf24;
  --accent-cyan: #38bdf8;
  --accent-emerald: #10b981;
  --accent-red: #ef4444;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  padding-bottom: calc(75px + var(--safe-bottom));
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(56, 189, 248, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(255, 107, 0, 0.05) 0%, transparent 40%);
  background-attachment: fixed;
}

/* App Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-card);
  padding: calc(10px + var(--safe-top)) 16px 10px;
}

.header-container {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-ball {
  font-size: 24px;
  filter: drop-shadow(0 0 10px var(--orange-glow));
  animation: ball-pulse 3s infinite ease-in-out;
}

@keyframes ball-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(10deg); }
}

.logo-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, var(--orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-badge {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--orange);
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  letter-spacing: 0.05em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.icon-btn:hover, .icon-btn:active {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--border-card);
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.user-pill:hover {
  border-color: var(--orange);
}

.user-pill-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  object-fit: cover;
  background: #111;
  display: block;
}

.user-pill-name {
  font-size: 12px;
  font-weight: 700;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Container */
.main-wrapper {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px 20px;
}

/* Card Styling */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.card.highlight {
  border-color: var(--border-highlight);
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.badge.orange {
  background: rgba(255, 107, 0, 0.15);
  color: var(--orange-light);
  border: 1px solid rgba(255, 107, 0, 0.3);
}

/* Match Header Banner */
.match-hero {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.18) 0%, rgba(15, 23, 42, 0.95) 75%);
  border: 1px solid rgba(255, 107, 0, 0.35);
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
}

.match-hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.meta-field {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 8px 12px;
}

.meta-field label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  display: block;
  margin-bottom: 2px;
}

.meta-field input {
  background: transparent;
  border: 0;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  outline: none;
}

.meta-field input:focus {
  color: var(--orange);
}

/* Button System */
button {
  font-family: inherit;
  border: 0;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

button:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, #ff7a1a 0%, #ea580c 100%);
  color: #ffffff;
  padding: 12px 18px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
}

.btn-secondary {
  background: var(--bg-card-solid);
  color: var(--text-main);
  border: 1px solid var(--border-card);
  padding: 10px 14px;
  font-size: 13px;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

.btn-orange-team {
  background: rgba(255, 107, 0, 0.15);
  color: #ff9d42;
  border: 1px solid rgba(255, 107, 0, 0.3);
}

.btn-black-team {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-full {
  width: 100%;
}

/* Tab Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: rgba(10, 15, 26, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-card);
  padding: 6px 12px calc(6px + var(--safe-bottom));
}

.nav-container {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s;
}

.nav-item .nav-icon {
  font-size: 18px;
  margin-bottom: 2px;
  transition: transform 0.2s;
}

.nav-item .nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-item.active {
  color: var(--orange);
}

.nav-item.active .nav-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px var(--orange-glow));
}

/* Tab Views */
.tab-view {
  display: none;
  animation: fadeIn 0.25s ease-out;
}

.tab-view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* RSVP Ci Sei? Box */
.rsvp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.rsvp-card {
  padding: 12px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--border-card);
  transition: all 0.2s;
}

.rsvp-card.in {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.rsvp-card.out {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.rsvp-card:hover {
  transform: translateY(-2px);
}

/* Player Item in List */
.player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.player-row:last-child {
  border-bottom: 0;
}

.player-info-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.player-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.player-thumb-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #111827;
  border: 2px solid var(--orange);
}

.player-thumb-team {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  color: #fff;
}

.player-thumb-team.team-a {
  background: var(--orange);
}

.player-thumb-team.team-n {
  background: #334155;
}

.player-meta {
  min-width: 0;
}

.player-name {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.score-control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-pill-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
}

.score-pill-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.score-pill-btn.plus-one {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.score-pill-btn.plus-two {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}

.score-pill-btn.plus-three {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
}

.score-display-num {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Squadre Grid */
.teams-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.team-column {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 12px;
}

.team-column.orange-col {
  border-top: 3px solid var(--orange);
}

.team-column.black-col {
  border-top: 3px solid #94a3b8;
}

.team-header-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* Scoreboard Arena Live */
.scoreboard-arena {
  background: radial-gradient(circle at center, #172033 0%, #090e1a 100%);
  border: 2px solid rgba(255, 107, 0, 0.4);
  border-radius: 24px;
  padding: 20px 14px;
  box-shadow: 0 0 35px rgba(255, 107, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.scoreboard-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.team-score-box {
  padding: 10px;
}

.team-name-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.score-digital {
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 25px currentColor;
}

.score-digital.orange {
  color: var(--orange);
}

.score-digital.black {
  color: #e2e8f0;
}

.timer-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 14px;
  border-radius: 16px;
}

.timer-digital {
  font-size: 28px;
  font-weight: 900;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.timer-controls {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

/* Play-by-Play Ticker */
.ticker-wrap {
  max-height: 140px;
  overflow-y: auto;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.ticker-item {
  background: var(--bg-input);
  border-left: 3px solid var(--orange);
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticker-time {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}

/* 3D Avatar Studio */
.avatar-3d-viewport {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0a0f1d 85%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 14px;
}

.avatar-3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.viewport-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}

.viewport-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* Studio Controls Form */
.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.studio-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.studio-field label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input[type="text"],
input[type="number"],
select {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  width: 100%;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  border-color: var(--orange);
}

.color-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 6px 10px;
}

.color-input-wrap input[type="color"] {
  -webkit-appearance: none;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
}

.color-input-wrap input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-wrap input[type="color"]::-webkit-color-swatch {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Pose Picker Buttons */
.pose-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.pose-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pose-btn.active {
  background: rgba(255, 107, 0, 0.15);
  border-color: var(--orange);
  color: #fff;
}

/* AI Camera Box */
.ai-scan-banner {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(14, 165, 233, 0.05) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-scan-text h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}

.ai-scan-text p {
  font-size: 11px;
  color: var(--text-muted);
}

/* Leaderboard */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 10px 12px;
}

.rank-badge {
  font-size: 18px;
  width: 28px;
  font-weight: 900;
}

/* Modal Popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal-overlay.active {
  display: flex;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-content {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

/* Toast Message */
#toast-notification {
  position: fixed;
  bottom: calc(85px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  display: none;
  z-index: 999;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#toast-notification.show {
  display: block;
  transform: translateX(-50%) translateY(0);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

/* --- Basketball Court Shot Logger --- */
.court-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 10px auto 14px;
  background: radial-gradient(circle at 50% 15%, #1e293b 0%, #0a0f1d 85%);
  border: 2px solid rgba(255, 107, 0, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.6);
  touch-action: none;
  cursor: crosshair;
}

.court-svg {
  width: 100%;
  height: auto;
  display: block;
}

.court-shot-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 10px currentColor;
  animation: shotPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.court-shot-dot.make {
  background: #10b981;
  color: #fff;
}

.court-shot-dot.three {
  background: #fbbf24;
  color: #000;
  box-shadow: 0 0 12px #fbbf24;
}

.court-shot-dot.miss {
  background: #ef4444;
  color: #fff;
}

@keyframes shotPop {
  0% { transform: translate(-50%, -50%) scale(0); }
  70% { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.court-zone-indicator {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.court-zone-text {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Read-Only Match Detail Modal --- */
.readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boxscore-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boxscore-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.boxscore-table th {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.boxscore-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-main);
}

.boxscore-table tr:last-child td {
  border-bottom: 0;
}

.boxscore-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* --- Face ID Real-Time Camera HUD --- */
.faceid-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 320px;
  margin: 0 auto 16px;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(56, 189, 248, 0.4);
}

.faceid-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* Mirror selfie */
  display: block;
}

.faceid-canvas-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.faceid-swatches-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.faceid-swatch-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.faceid-swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* --- Player Profile Modal --- */
.profile-hero {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(15, 23, 42, 0.95) 75%);
  border: 1px solid rgba(255, 107, 0, 0.35);
  border-radius: 22px;
  margin-bottom: 16px;
}

.profile-avatar-big {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  background: #0f172a;
  border: 3px solid var(--orange);
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.4);
  margin: 0 auto 10px;
  display: block;
}

.stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.stat-box {
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
}

.stat-box-val {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-box-lbl {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 3px;
}




/* Memoji generator controls */
.avatar-studio-heading{align-items:center}.avatar-studio-heading>div{display:flex;flex-direction:column;gap:4px}.eyebrow{font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--orange)}.avatar-random-btn{padding:9px 12px;font-size:11px}.avatar-3d-viewport{height:clamp(340px,55vh,490px);background:radial-gradient(ellipse at 50% 28%,#263449 0%,#111a2a 52%,#080d17 100%)}.avatar-preview-chip{position:absolute;left:12px;bottom:12px;padding:7px 10px;border-radius:8px;background:rgba(4,8,15,.72);font-size:9px;font-weight:900;letter-spacing:.08em;color:#d8e2ef;pointer-events:none}.avatar-note{font-size:11px;line-height:1.55;color:var(--text-muted);margin:8px 2px 16px}.studio-section-title{grid-column:span 2;display:flex;align-items:center;gap:9px;margin-top:7px;padding:9px 0 2px;border-top:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--orange)}.studio-section-title span{color:#fff;text-transform:uppercase}.avatar-toggle-field{justify-content:center}.avatar-switch{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid var(--border-card);border-radius:12px;background:var(--bg-input);color:#fff;font-size:12px;font-weight:700;cursor:pointer}.avatar-switch input{position:absolute;opacity:0}.switch-track{width:36px;height:21px;border-radius:99px;background:#475569;position:relative;transition:.2s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}.avatar-switch input:checked+.switch-track{background:var(--orange)}.avatar-switch input:checked+.switch-track:after{transform:translateX(15px)}.avatar-switch input:focus-visible+.switch-track{outline:2px solid white;outline-offset:2px}@media(max-width:420px){.avatar-3d-viewport{height:350px}.studio-grid{gap:9px}}

/* Local 2D character gallery */
.character-picker-card { padding-bottom: 20px; }
.character-picker-note { margin: 0 0 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.selected-character-preview { display: flex; align-items: center; gap: 14px; min-height: 150px; padding: 12px; margin-bottom: 16px; border: 1px solid rgba(255,107,0,.32); border-radius: 18px; background: radial-gradient(circle at 35% 20%,rgba(255,107,0,.14),rgba(15,23,42,.88) 68%); }
.selected-character-preview img { width: 106px; height: 150px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); }
.selected-character-preview div { display: flex; flex-direction: column; gap: 5px; }
.selected-character-preview strong { color: #fff; font-size: 18px; }
.selected-character-preview span { color: var(--text-dim); font-size: 11px; }
.character-picker-details { margin: 10px 0 14px; }
.character-picker-details > summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--border-card); border-radius:13px; background:var(--bg-input); color:#fff; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.character-picker-details > summary::-webkit-details-marker { display:none; }
.character-picker-details > summary::after { content:'＋'; color:var(--orange); font-size:18px; }
.character-picker-details[open] > summary { margin-bottom:10px; border-color:var(--orange); }
.character-picker-details[open] > summary::after { content:'−'; }
.character-picker-count { margin-left:auto; color:var(--text-dim); font-size:10px; font-weight:700; }
.character-gallery-heading { display:flex; justify-content:space-between; align-items:center; margin: 0 2px 9px; color:var(--text-dim); font-size:9px; font-weight:900; letter-spacing:.12em; }
.character-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.character-option { min-width:0; padding:6px; border:1px solid var(--border-card); border-radius:14px; background:var(--bg-input); color:#fff; text-align:center; cursor:pointer; transition:border-color .15s,transform .15s,background .15s; }
.character-option:active { transform:scale(.97); }
.character-option.selected { border:2px solid var(--orange); background:rgba(255,107,0,.12); box-shadow:0 0 0 2px rgba(255,107,0,.12); }
.character-option img { display:block; width:100%; aspect-ratio:292/360; object-fit:contain; object-position:center center; margin:0 auto; border-radius:9px; background:radial-gradient(ellipse at 50% 30%,#253247,#0b101a 78%); }
.character-option strong { display:block; overflow:hidden; margin:6px 2px 2px; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.character-option span { display:block; overflow:hidden; margin:0 2px 3px; color:var(--text-dim); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.character-player-fields { margin-top:16px; }
.character-actions { display:grid; gap:9px; margin-top:14px; }
.character-option:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media(max-width:380px){.character-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}.selected-character-preview img{width:90px;height:128px;}}


/* Account registration, admin controls, and profile photo upload */
.auth-screen { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 50% 15%,rgba(255,107,0,.2),#070a12 62%); }
.auth-screen[hidden] { display:none; }
.auth-card { width:min(100%,420px); padding:26px; border:1px solid rgba(255,107,0,.32); border-radius:24px; background:rgba(15,23,42,.97); box-shadow:0 24px 80px rgba(0,0,0,.45); }
.auth-ball { margin-bottom:14px; font-size:34px; }
.auth-card h1 { margin:4px 0 8px; color:#fff; font-size:25px; }
.auth-card p { color:var(--text-dim); font-size:13px; line-height:1.5; }
.auth-card label { display:block; margin:18px 0 6px; color:#fff; font-size:12px; font-weight:800; }
.auth-card input { width:100%; padding:13px; border:1px solid var(--border-card); border-radius:12px; background:var(--bg-input); color:#fff; font-size:16px; }
.auth-status { min-height:32px; }
.auth-card button:disabled { opacity:.45; cursor:not-allowed; }
.admin-badge { padding:3px 6px; border-radius:6px; background:rgba(255,107,0,.2); color:#ff9b55; font-size:8px; font-weight:900; letter-spacing:.07em; }
.connection-status { color:#86efac; font-size:9px; white-space:nowrap; }
.connection-status.offline { color:#fca5a5; }
.photo-upload-panel { display:grid; gap:9px; margin:12px 0 4px; }
.photo-upload-panel input[type=file] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.photo-upload-button { display:block; padding:12px; border:1px dashed rgba(255,107,0,.6); border-radius:12px; color:#fff; text-align:center; font-size:13px; font-weight:800; cursor:pointer; }
.photo-upload-panel p { margin:0; color:var(--text-dim); font-size:10px; }
.admin-only[hidden] { display:none !important; }
.auth-profile-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.auth-field-group { display:grid; gap:7px; }
.auth-field-group label { color:#fff; font-size:12px; font-weight:800; }
.auth-field-group input, .auth-field-group select { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--border-card); border-radius:12px; background:var(--bg-input); color:#fff; font:inherit; }
.auth-identity-note { margin:10px 0 0; color:var(--text-dim); font-size:10px; line-height:1.45; }
.character-player-fields input[readonly], .character-player-fields select:disabled { opacity:.72; cursor:not-allowed; }

.history-delete-btn { flex:0 0 auto; padding:7px 9px; border-color:rgba(239,68,68,.35); color:#fca5a5; }
.history-delete-btn:hover { background:rgba(239,68,68,.14); }