/* Light theme stylesheet with green, blue, and orange accents */
:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #37b679;
  --accent-2: #2563eb;
  --accent-3: #fb923c;
  --border: #e2e8f0;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
}

/* ================= Loading / Spinner Styles ================= */
@keyframes spin360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ================= Halo Effect Animations ================= */
@keyframes haloGlow {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(251, 146, 60, 0.3),
      0 0 40px rgba(251, 146, 60, 0.2),
      0 0 60px rgba(251, 146, 60, 0.1),
      0 4px 12px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 0 30px rgba(251, 146, 60, 0.4),
      0 0 60px rgba(251, 146, 60, 0.3),
      0 0 90px rgba(251, 146, 60, 0.15),
      0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

@keyframes haloGlowConsolation {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(59, 130, 246, 0.3),
      0 0 40px rgba(59, 130, 246, 0.2),
      0 0 60px rgba(59, 130, 246, 0.1),
      0 4px 12px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 0 30px rgba(59, 130, 246, 0.4),
      0 0 60px rgba(59, 130, 246, 0.3),
      0 0 90px rgba(59, 130, 246, 0.15),
      0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

@keyframes haloGlowWhite {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(255, 255, 255, 0.5),
      0 0 40px rgba(255, 255, 255, 0.3),
      0 0 60px rgba(255, 255, 255, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.6),
      0 0 60px rgba(255, 255, 255, 0.4),
      0 0 90px rgba(255, 255, 255, 0.25),
      0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

/* Hide knockout section during group phase */
body:not(.tournament-started) #knockout-section {
  display: none;
}

.loading-trophy-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 12px 0;
}
.loading-trophy {
  font-size: 40px;
  display: inline-block;
  animation: spin360 1.2s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  opacity: 0.85;
}

/* Smaller inline variant (for within brackets area if needed) */
.loading-trophy.inline-small {
  font-size: 28px;
}

/* Spinner inside Guardar buttons */
.btn-spinner {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  font-size: 16px;
  animation: spin360 0.9s linear infinite;
  align-items: center;
  justify-content: center;
}
.btn-saving {
  position: relative;
}
.btn-saving:disabled {
  cursor: progress;
}

.container {
  max-width: 1100px;
  margin: 12px auto;
  padding: 0 20px;
}
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-logo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
  flex-shrink: 0;
}
.site-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #1f2937;
  letter-spacing: -0.5px;
  line-height: 1.15;
  white-space: nowrap;
}

/* Header action buttons */
.header-actions {
  display: flex;
  gap: 6px;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.header-btn:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.header-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.header-btn .btn-icon {
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 640px) {
  .site-header h1 {
    font-size: 20px;
  }

  .site-logo {
    width: 34px;
    height: 34px;
  }
}
h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1f2937;
  letter-spacing: -0.5px;
}
h2 {
  font-size: 20px;
  margin: 0 0 12px;
}
h2 .remaining-matches {
  font-size: 12px;
  font-weight: 500;
  /* lighter gray than --muted (#6b7280) */
  color: #9ca3af; /* light gray */
  margin-left: 6px;
  vertical-align: middle;
}

.group h4 .remaining-matches {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 6px;
  vertical-align: middle;
}
h3 {
  font-size: 16px;
  margin: 8px 0;
  color: var(--muted);
}

.card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32px 28px;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
}

/* Accent line at top of cards */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  border-radius: 0 0 4px 4px;
}

/* Groups section accent - blue */
#groups-section::before {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* Knockout section accent - orange */
/* Removed: Big vertical line now only on individual match cards */
/* #knockout-section::before {
  background: linear-gradient(90deg, #f97316, #fb923c);
} */

/* Halo effect when matches exist - applied to entire knockout section card */
#knockout-section.card {
  transition: all 0.3s ease;
  position: relative;
}

/* Orange glow for Final tournament (when final matches exist and Final tab active) */
#knockout-section.card[data-has-final].final-active {
  animation: haloGlow 3s ease-in-out infinite;
}

#knockout-section.card[data-has-final].final-active::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(251, 146, 60, 0.15),
    rgba(249, 115, 22, 0.1)
  );
  z-index: -1;
  opacity: 0;
  animation: fadeInGlow 0.6s ease-in forwards;
}

/* Blue glow for Consolation tournament (when consolation matches exist and Consolation tab active) */
#knockout-section.card[data-has-consolation].consolation-active {
  animation: haloGlowConsolation 3s ease-in-out infinite;
}

#knockout-section.card[data-has-consolation].consolation-active::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(37, 99, 235, 0.1)
  );
  z-index: -1;
  opacity: 0;
  animation: fadeInGlow 0.6s ease-in forwards 0.2s;
}

@keyframes fadeInGlow {
  to {
    opacity: 1;
  }
}

/* Section titles styling */
.card > h2 {
  color: #1f2937;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

#groups-section > h2 {
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: #0f172a;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

#groups-section > h2 .remaining-matches {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
}

/* Responsive card adjustments */
@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
  .card {
    padding: 20px 10px;
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .card > h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #groups-section > h2 {
    font-size: 20px;
    margin-bottom: 13px;
    padding-bottom: 7px;
  }
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
input {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
}
textarea {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  min-height: 160px;
}
button {
  background: var(--accent-2); /* changed from green to blue */
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
/* Icon-only / compact button variant used when editing an existing result */
button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  padding: 4px; /* small padding to enlarge hit target */
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
}
button.icon-btn:hover,
button.icon-btn:focus {
  background: rgba(0, 0, 0, 0.06);
}
button.icon-btn .icon {
  font-size: 14px; /* slightly smaller pencil across app */
  line-height: 1;
  display: inline-block;
}
/* specific variant for edit pencil (in case we want future adjustments) */
button.icon-btn .label-text {
  display: none; /* hide text for now (could be toggled later) */
}
button.secondary {
  background: var(--accent-2);
  color: #ffffff;
}
button.danger {
  background: #ef4444;
  color: #fff;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}

.groups {
  display: block;
}
.group {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  overflow: visible;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.group:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.group h4 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef2f7;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.25px;
}

/* Mobile adjustments for group card */
@media (max-width: 640px) {
  .group {
    padding: 16px;
    border-radius: 14px;
  }

  .group h4 {
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .group {
    padding: 14px;
    border-radius: 12px;
  }
}
.standings,
.matches {
  font-size: 16px;
}

.standings + .singles-section {
  margin-top: 22px;
}

.standings + .matches {
  margin-top: 22px;
}

.doubles-section > h5,
.singles-section > h5 {
  margin: 24px 0 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: #334155;
}

/* ================= Modern Standings Table ================= */
.standings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.standings-table th,
.standings-table td {
  text-align: left;
  padding: 10px 6px;
  border-bottom: none;
  transition: background 0.15s ease;
}

.standings-table th {
  color: #64748b;
  font-weight: 600;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  padding: 8px 6px;
}

/* Header position column - align with body badge */
.standings-table th:first-child {
  padding-left: 10px;
}

/* Header row - minimal, elegant */
.standings-table thead tr {
  display: grid;
  grid-template-columns: 22px 1fr 36px 46px 46px;
  align-items: center;
  column-gap: 8px;
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  padding-right: 4px;
}

/* Body rows - card-like with spacing */
.standings-table tbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.standings-table tbody tr {
  display: grid;
  grid-template-columns: 22px 1fr 36px 46px 46px;
  align-items: center;
  column-gap: 8px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  padding-right: 4px;
}

.standings-table tbody tr:hover {
  border-color: #d1d9e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Position badge styling */
.standings-table td:nth-child(1) {
  font-weight: 700;
  font-size: 11px;
  color: #94a3b8;
}

/* Player name styling */
.standings-table td:nth-child(2) {
  font-weight: 500;
  font-size: 13px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Stats columns - centered and muted */
.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.standings-table th:nth-child(3),
.standings-table th:nth-child(4),
.standings-table th:nth-child(5),
.standings-table td:nth-child(3),
.standings-table td:nth-child(4),
.standings-table td:nth-child(5) {
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

/* Points column - slightly emphasized */
.standings-table td:nth-child(3) {
  font-weight: 600;
  color: #475569;
}

/* ================= Qualifying Positions (1st & 2nd) ================= */
/* Base highlight for qualifying positions */
.standings-table tr.highlight {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* Position 1 - Strongest blue highlight */
.standings-table tr.highlight.first {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

/* Position 2 - Lighter blue highlight (visual transition) */
.standings-table tr.highlight.second {
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%) !important;
  border-color: #bae6fd !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.06);
}

.standings-table tr.highlight td:nth-child(1) {
  color: #3b82f6;
}

.standings-table tr.highlight td:nth-child(2) {
  color: #1e40af;
}

.standings-table tr.highlight.first td:nth-child(1) {
  color: #1d4ed8;
}

.standings-table tr.highlight.second td:nth-child(1) {
  color: #1d4ed8;
}

/* Position number as subtle badge */
.standings-table tbody tr td:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}

/* Position badge backgrounds with visual gradient */
.standings-table tr.highlight td:first-child {
  background: rgba(59, 130, 246, 0.25);
}

.standings-table tr.highlight.first td:first-child {
  background: rgba(59, 130, 246, 0.25);
}

.standings-table tr.highlight.second td:first-child {
  background: rgba(59, 130, 246, 0.25);
}

/* Mobile badge sizing */
@media (max-width: 480px) {
  .standings-table tbody tr td:first-child {
    width: 20px;
    height: 20px;
    font-size: 11px;
    border-radius: 5px;
  }
}

/* ================= Responsive Standings ================= */
@media (max-width: 900px) {
  .standings-table thead tr,
  .standings-table tbody tr {
    grid-template-columns: 22px minmax(0, 1fr) 30px 44px 44px;
    column-gap: 6px;
  }

  .standings-table th,
  .standings-table td {
    padding: 10px 4px;
  }

  .standings-table tbody tr td:first-child {
    margin-left: 2px;
  }
}

@media (max-width: 640px) {
  .standings-table thead tr,
  .standings-table tbody tr {
    grid-template-columns: 22px minmax(0, 1fr) 28px 42px 42px;
    column-gap: 5px;
  }

  .standings-table th,
  .standings-table td {
    padding: 10px 4px;
    font-size: 14px;
  }

  .standings-table th {
    font-size: 10px;
  }

  .standings-table tbody {
    gap: 5px;
  }

  .standings-table tbody tr {
    border-radius: 10px;
  }

  .standings-table tbody tr td:first-child {
    margin-left: 2px;
  }
}

@media (max-width: 480px) {
  .standings-table thead tr,
  .standings-table tbody tr {
    grid-template-columns: 22px minmax(0, 1fr) 26px 40px 40px;
    column-gap: 4px;
  }

  .standings-table th,
  .standings-table td {
    padding: 9px 3px;
    font-size: 13px;
  }

  .standings-table th {
    font-size: 9px;
    letter-spacing: 0.3px;
  }

  .standings-table tbody {
    gap: 4px;
    padding-top: 6px;
  }

  .standings-table tbody tr {
    border-radius: 8px;
  }

  .standings-table tbody tr td:first-child {
    margin-left: 2px;
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 380px) {
  .standings-table thead tr,
  .standings-table tbody tr {
    grid-template-columns: 20px minmax(0, 1fr) 24px 38px 38px;
    column-gap: 3px;
  }

  .standings-table th,
  .standings-table td {
    padding: 8px 2px;
    font-size: 12px;
  }

  .standings-table th {
    font-size: 9px;
  }

  .standings-table tbody tr td:first-child {
    margin-left: 1px;
    width: 18px;
    height: 18px;
  }
}

/* Standings wrapper */
.standings {
  overflow: visible;
  padding: 4px 0;
}

/* Tabs for groups */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#groups-container .tabs {
  gap: 10px;
  margin-bottom: 14px;
}

#groups-container .tabs .tab {
  min-width: 42px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid #d7dee8;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 10px rgba(15, 23, 42, 0.04);
}

#groups-container .tabs .tab:hover:not(.active) {
  border-color: #bfccde;
  color: #334155;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 16px rgba(15, 23, 42, 0.08);
}

#groups-container .tabs .tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #2563eb;
  font-weight: 700;
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Also make sub-tabs (nested .tabs) active text bold */
.tabs .tab.active {
  font-weight: 700;
}

/* Subtle halo pulse to indicate pending matches in a round tab */
@keyframes haloPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}
.tabs .tab.attn-halo {
  position: relative;
  animation: haloPulse 2.2s ease-out infinite;
}

/* Remove rectangular focus/selection effect for group tabs (A..F) while keeping accessibility outline invisible but keyboard-visible using box-shadow */
#groups-container .tabs .tab:focus,
#groups-container .tabs .tab:active {
  outline: none;
  box-shadow: none;
}

/* Ensure keyboard focus still visible for accessibility on group tabs by adding a subtle ring on keyboard focus (only if focused via keyboard) */
#groups-container .tabs .tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ================= Tournament Phase Navigation ================= */

/* Container for entire knockout navigation */
.knockout-nav-container {
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}

/* Tournament selector: modern pill toggle */
.knockout-tabs {
  display: inline-flex;
  gap: 8px;
  width: auto;
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
}

.knockout-tabs .tab {
  flex: 0 0 auto;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 24px;
  border: 2px solid #e5e7eb;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

/* Base colors when not selected */
.knockout-tabs .tab.primary-tab,
.knockout-tabs .tab.secondary-tab {
  background: #fff;
  color: #6b7280;
  border-color: #e5e7eb;
}

.knockout-tabs .tab.primary-tab:hover:not(.active),
.knockout-tabs .tab.secondary-tab:hover:not(.active) {
  border-color: #d1d5db;
  color: #374151;
}

/* Active variants: solid color fill */
.knockout-tabs .tab.primary-tab.active {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.knockout-tabs .tab.secondary-tab.active {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Remove the dot indicator - cleaner without it */
.knockout-tabs .tab.active::before {
  display: none;
}

/* Tournament tab layout */
.knockout-tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.knockout-tabs .tab .tournament-name {
  padding-left: 0;
}

/* Tournament pending matches badge */
.knockout-tabs .tab .tournament-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
}

.knockout-tabs .tab:not(.active) .tournament-badge {
  background: #fee2e2;
  color: #dc2626;
}

.knockout-tabs .tab.active .tournament-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Round navigation: clean inline pills */
.round-tabs-container {
  position: relative;
}

.round-tabs-label {
  display: none; /* Hide the label for cleaner look */
}

.round-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: wrap;
}

.round-tabs::-webkit-scrollbar {
  display: none;
}

.round-tabs .tab {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  white-space: nowrap;
  position: relative;
  transition: all 0.15s ease;
  cursor: pointer;
}

.round-tabs .tab:hover:not(.active) {
  border-color: #d1d5db;
  color: #374151;
  background: #f9fafb;
}

.round-tabs .tab.active {
  background: var(--accent-2);
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Remove the underline indicator - using fill color instead */
.round-tabs .tab.active::after {
  display: none;
}

/* Pending matches halo for round tabs */
.round-tabs .tab.attn-halo:not(.active) {
  animation: roundHaloPulse 2s ease-out infinite;
  border-color: var(--accent-2);
}

@keyframes roundHaloPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* Round status indicators */
.round-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.round-tabs .tab .round-name {
  display: inline;
}

.round-tabs .tab .round-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}

/* Pending matches count badge */
.round-tabs .tab:not(.active) .round-status.pending {
  background: #fef3c7;
  color: #d97706;
}

.round-tabs .tab.active .round-status.pending {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Completed round checkmark */
.round-tabs .tab .round-status.complete {
  background: #dcfce7;
  color: #16a34a;
  font-size: 9px;
}

.round-tabs .tab.active .round-status.complete {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Completed round styling */
.round-tabs .tab.round-complete {
  border-color: #bbf7d0;
}

.round-tabs .tab.round-complete:not(.active):hover {
  border-color: #86efac;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .knockout-nav-container {
    margin-bottom: 20px;
  }

  .knockout-tabs {
    width: 100%;
    gap: 6px;
  }

  .knockout-tabs .tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    gap: 6px;
    justify-content: center;
  }

  .knockout-tabs .tab .tournament-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .round-tabs {
    gap: 4px;
  }

  .round-tabs .tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .round-tabs .tab .round-status {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
}

/* Tournament rounds content area */
.tournament-rounds {
  margin-top: 16px;
}

.knockout-content {
  margin-top: 4px;
}

.brackets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bracket {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 120px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 12px;
  white-space: pre;
}

.match-row {
  display: block;
  margin: 8px 0;
}
.match-row .match-label {
  margin-bottom: 6px;
  color: var(--text);
}

/* Group phase match styling adopting knockout visual language */
.group-match-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
  position: relative;
  align-items: stretch;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.group-match-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Edited group match indicator */
.group-match-card.was-edited {
  background: #fffbeb;
  border-color: #fcd34d;
}
.group-match-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px; /* tighter gap for mobile */
  flex-wrap: wrap;
  min-height: 36px; /* ensure compact row */
  width: 100%; /* ensure full width */
}
.group-match-header .player-badge {
  height: 36px;
  flex: 1 1 auto; /* allow flexible sizing */
  min-width: 120px; /* reduced minimum */
  max-width: 320px;
  padding: 6px 12px 6px 22px;
  font-size: 14px; /* increased from 13px for better readability */
}
.group-match-header .vs-text {
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.5px;
}
.group-match-body {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* explicit alignment */
  gap: 6px; /* tighter gap */
  flex-wrap: wrap;
  min-height: 32px;
  width: 100%; /* ensure full width */
}
.group-match-body input[type="number"] {
  width: 44px; /* slightly smaller */
  text-align: center;
  height: 34px;
  padding: 4px 6px;
  font-size: 14px; /* slightly larger */
}
.group-match-body .sep {
  color: var(--muted);
}
.group-match-body .save {
  height: 30px;
  padding: 4px 10px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .group-match-header .player-badge {
    min-width: 100px; /* reduced for very narrow screens */
    max-width: 240px;
    font-size: 13px; /* slightly smaller but still readable */
    height: 32px;
    padding: 4px 8px 4px 18px;
  }
  .group-match-body input[type="number"] {
    width: 38px; /* smaller inputs for narrow screens */
    height: 28px;
    font-size: 12px;
  }
  .group-match-body .save {
    height: 28px;
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* New visual styles for match cards and player badges */
.match-card {
  position: relative; /* Required for ::before pseudo-element (orange line) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  min-height: 48px;
  overflow: visible;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.match-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Edited match indicator */
.match-card.was-edited {
  background: #fffbeb;
  border-color: #fcd34d;
}

/* Player level badge (image) - fixed 24x24 pixels */
.player-level-badge {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 4px;
  object-fit: contain;
}

/* Badge size for match cards */
.player-badge .player-level-badge {
  width: 24px;
  height: 24px;
}

/* Badge in team/doubles context */
.team-line .player-level-badge {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}

/* Badge in standings table */
td .player-level-badge {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

/* Legacy emoji styling (fallback) */
.player-level-emoji {
  font-size: 1.1em;
}
.team-line .player-level-emoji {
  margin-right: 6px;
}

.player-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 14px 8px 32px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 500;
  color: #1f2937;
  height: 40px;
  width: 100%;
  min-width: 140px;
  max-width: 420px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}
/* Team variant: allow two lines (one per player), taller bubble */
.player-badge.team {
  flex-direction: column;
  white-space: normal;
  height: auto;
  min-height: 62px;
  padding: 12px 20px;
  font-size: 15px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 240px;
  max-width: 480px;
  transition: all 0.2s ease;
  gap: 4px;
}

.player-badge.team:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* when a doubles match is decided, lose the green for neutral/loser; winner still overrides to blue via .is-winner */
.player-badge.team.decided {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.player-badge .team-line {
  display: block;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}

.player-badge.team .team-line:first-child {
  font-weight: 600;
}

/* Octavos placeholder styling */
.player-badge.preliminary-placeholder {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  border: 2px dashed #9ca3af;
  color: #6b7280;
  font-style: italic;
  opacity: 0.8;
}
.player-badge.preliminary-placeholder .player-name {
  font-size: 13px;
  font-weight: 400;
}

/* Winner highlight inside knockout match cards */
.match-card .player-badge.is-winner {
  background: #60a5fa;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}
.match-card .player-badge.is-winner .player-name {
  color: #fff;
}
/* Keep number inputs readable next to highlighted winner */
.match-card .player-badge.is-winner + input[type="number"],
.match-card .player-block .player-badge.is-winner ~ input[type="number"] {
  background: #e6f0ff; /* light blue background for winner inputs */
  color: var(--text);
  border-color: #bfdbfe; /* soft blue border */
  box-shadow: 0 0 0 1px #bfdbfe inset;
  font-weight: 600;
}

/* Winner highlight inside group match cards */
.group-match-card .player-badge.is-winner {
  background: #60a5fa;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}
.group-match-card .player-badge.is-winner .player-name {
  color: #fff;
}
/* Keep number inputs readable next to highlighted winner in group rows */
.group-player-block .player-badge.is-winner ~ input[type="number"] {
  background: #fff;
  color: var(--text);
}

.player-block {
  display: flex;
  align-items: center;
  gap: 6px; /* tighter gap */
  min-width: 0;
  flex: 1 1 auto; /* allow flexible sizing */
  flex-wrap: wrap; /* wrap on very narrow screens */
}

.winner-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--accent-2);
  font-size: 16px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
  margin: 0 8px; /* spacing around vs */
}

.match-input-area {
  display: flex;
  align-items: center;
  gap: 4px; /* tighter gap */
  margin-right: 6px; /* reduced margin */
  flex-wrap: wrap; /* allow wrapping */
}
.match-input-area input[type="number"] {
  width: 44px; /* smaller width */
  padding: 6px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  height: 32px; /* slightly shorter */
}
.match-card > button.save {
  margin-left: auto; /* push to right */
}
.player-score-input {
  width: 44px; /* reduced from 52px */
  margin-left: 6px; /* reduced margin */
  padding: 6px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  height: 32px; /* slightly shorter */
}
.match-card > button.save {
  margin-left: 8px; /* small spacing before save button */
  align-self: center;
}

.action-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 8px; /* slightly tighter */
}
.action-column .winner-display {
  margin-bottom: 8px;
}
/* Hide old winner pill to avoid redundancy; keep rule for backwards-compat */
.match-winner {
  display: none;
}

/* Knockout match inline layout (similar to group phase) */
.knockout-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
  padding: 0 4px; /* small inset so bubbles don't hug card border */
  box-sizing: border-box;
}
.knockout-player-row .player-badge {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 350px;
}
.knockout-player-row .player-score-input {
  flex: 0 0 auto;
  width: 44px;
  margin-left: 0;
}

@media (max-width: 640px) {
  .knockout-player-row {
    gap: 6px;
    padding: 0 2px;
  }
  .knockout-player-row .player-badge {
    min-width: 120px;
    max-width: 220px;
  }
  .knockout-player-row .player-score-input {
    width: 40px;
  }
}

/* Reduce badge size on narrow screens to keep layout compact */
@media (max-width: 640px) {
  .player-badge {
    min-width: 120px !important; /* reduced for better fit */
    padding: 4px 8px; /* tighter padding */
    height: 34px; /* slightly shorter */
  }
}
.player-name {
  display: inline-block;
  max-width: 100%; /* fill available badge space */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500; /* less bold for player name text */
}
.vs-sep {
  display: none;
}

.round-title {
  font-size: 14px;
  margin: 6px 0 8px;
  color: var(--accent-2);
}

/* Responsive behavior: make match cards wrap and avoid overflow on small screens */
@media (max-width: 640px) {
  .brackets {
    grid-template-columns: 1fr; /* single column on small screens */
  }
  .bracket {
    padding: 6px;
  }
  .match-card {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }
  .player-badge {
    flex: 1 1 auto; /* allow flex to adjust */
    min-width: 120px; /* reduced minimum */
  }
  .winner-display {
    font-size: 14px;
    padding: 6px 10px;
    margin: 6px 0;
  }
  .player-name {
    max-width: 100%; /* use full badge width */
  }
  .vs-sep {
    display: none;
  }
  .input-row {
    flex-wrap: wrap;
    gap: 6px; /* tighter gap */
  }
  .input-row input[type="number"] {
    width: 44px; /* slightly smaller */
  }
  .match-card .muted {
    width: 100%;
    text-align: right;
    margin-top: 6px;
  }
}

/* Prevent long names from pushing layout on larger viewports */
/* Changed from overflow:hidden to overflow:visible so ::before orange line is not clipped */
.match-card {
  overflow: visible;
}

/* Spacing between tournament match cards (does not affect first card) */
.match-card + .match-card {
  margin-top: 8px; /* small vertical gap */
}

/* Bye recipients section - compact horizontal layout */
.bye-recipients-header {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.bye-header-text {
  display: inline-block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bye-recipients-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

/* Individual bye chip - subtle, compact pill */
.bye-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  font-size: 13px;
  font-weight: 500;
  color: #166534;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.bye-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}

.bye-icon {
  font-size: 11px;
  opacity: 0.7;
}

.bye-player-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Horizontal input row for match UI */
.input-row {
  display: flex;
  align-items: center;
  gap: 6px; /* tighter gap for better mobile fit */
  flex-wrap: wrap; /* allow wrapping on narrow screens */
}
.input-row input[type="number"] {
  width: 48px; /* slightly smaller default */
  text-align: center;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
}
.input-row .save {
  background: var(--accent-2); /* changed from green to blue */
  padding: 8px 12px;
  border-radius: 8px;
  color: #ffffff;
}
.input-row .sep {
  color: var(--muted);
  padding: 0 4px; /* tighter spacing */
}

@media (max-width: 640px) {
  .input-row {
    gap: 4px;
  }
  .input-row input[type="number"] {
    width: 40px;
    padding: 6px 4px;
  }
  .input-row .sep {
    padding: 0 2px;
  }
}

.muted {
  color: var(--muted);
}

/* Inline group match variant (knockout style) */
.group-match-inline {
  padding: 14px 14px 10px;
}

/* Doubles match specific styling */
.doubles-match-card {
  padding: 20px 18px;
  background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
}

.doubles-match-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.doubles-team-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.doubles-vs-separator {
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  letter-spacing: 1px;
  align-self: center;
}

.group-inline-row {
  display: flex;
  gap: 12px; /* reduced from 16px */
  flex-wrap: wrap;
  align-items: stretch; /* changed from flex-start for better alignment */
  width: 100%; /* ensure full width */
}
.group-player-block {
  display: flex;
  align-items: center;
  gap: 8px; /* reduced from 10px */
  flex: 1 1 100%; /* changed to ensure full width by default */
  min-width: 0; /* allow shrinking */
  width: 100%; /* explicit full width */
}
.group-player-block input[type="number"] {
  width: 58px;
  height: 40px;
  text-align: center;
  padding: 6px 8px;
}
/* New: place 3 set inputs to the right of each player's bubble */
.group-player-block .set-inputs {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.group-player-block .set-inputs .set-box {
  width: 50px;
  height: 34px;
  text-align: center;
  /* Ensure text is visible in disabled state */
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  opacity: 1;
}
.group-player-block .set-inputs .set-box:disabled {
  background-color: #f3f4f6;
  color: #374151;
  -webkit-text-fill-color: #374151;
  opacity: 1;
}
/* Highlight a set input when the winner wins a set (not just at 11) */
.group-player-block .set-inputs .set-box.set-winner-11 {
  background: #e6f0ff; /* light blue */
  border-color: #bfdbfe; /* soft blue border */
  box-shadow: 0 0 0 1px #bfdbfe inset;
  font-weight: 600;
}

/* Pulsing animation for required next inputs */
.group-player-block .set-inputs .set-box.required-next {
  animation: haloPulse 2.2s ease-out infinite;
  border-color: #2563eb; /* blue border */
}

/* Disabled save button when no valid result */
.save.btn-disabled-no-result {
  opacity: 0.5;
  cursor: not-allowed;
}

.save.btn-disabled-no-result:hover {
  background: #e5e7eb; /* keep gray background */
}
.group-sets {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.group-sets .set-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.group-sets .set-pair input[type="number"] {
  width: 48px;
  height: 36px;
  text-align: center;
}
.group-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  width: 100%; /* ensure full width */
  /* Removed min-height to allow card to shrink when button is hidden */
}
/* inline layout for each doubles team row */
.team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.team-row .doubles-team-container {
  flex: 1 1 auto;
}

.team-row .player-badge.team {
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 380px;
}

.team-row .team-win-btn {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
}

.team-row .doubles-handicap-slot {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Doubles handicap badge — sits between team bubble and win button in the flex row */
.team-row .doubles-handicap-slot .handicap-badge {
  flex: 0 0 auto;
  margin-left: 0;
  align-self: center;
}
/* +1 buttons for doubles */
.team-win-btn {
  background: #ffffff;
  color: #2563eb;
  font-weight: 700;
  font-size: 20px;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  margin: 0;
  height: 38px;
  width: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.team-win-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #bfdbfe;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
}

.team-win-btn .btn-icon {
  font-size: 20px;
  line-height: 1;
}

.team-win-btn.selected {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.team-win-btn.not-selected {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  box-shadow: none;
}

.team-win-btn.not-selected:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #e5e7eb;
  transform: none;
  box-shadow: none;
}

.team-win-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Group phase save button: now inherits the global button styling (same as knockout).
  We removed the former min-width override to keep consistent size. */
/* Group match save button now intentionally uses the exact base button size
  (same as knockout matches). Any previous size overrides were removed. */

@media (max-width: 640px) {
  .group-inline-row {
    gap: 12px;
  }
  .group-player-block input[type="number"] {
    width: 46px;
    height: 36px;
  }
  .group-player-block .set-inputs .set-box {
    width: 40px;
    height: 32px;
  }
  .group-sets .set-pair input[type="number"] {
    width: 44px;
    height: 34px;
  }

  .doubles-match-card {
    padding: 16px 14px;
  }

  .player-badge.team {
    min-width: 180px;
  }

  .player-badge .team-line {
    font-size: 14px;
  }

  .team-win-btn {
    width: 38px;
    min-width: 38px;
    height: 36px;
    font-size: 18px;
    padding: 6px;
  }

  .team-win-btn .btn-icon {
    font-size: 18px;
  }

  .team-row .doubles-handicap-slot {
    width: 38px;
    min-width: 38px;
  }

  .doubles-vs-separator {
    font-size: 12px;
    padding: 4px 12px;
  }
}

/* Desktop and tablet: keep bubble + 3 inputs in the same line by letting the bubble shrink */
#groups-container .group-player-block {
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%; /* ensure consistent width */
  align-items: center; /* ensure vertical alignment */
}
#groups-container
  .group-match-inline
  .group-player-block
  .player-badge:not(.team) {
  /* Flexible width so both player rows align and inputs line up */
  flex: 1 1 auto; /* allow flex to adjust */
  min-width: 140px; /* reduced to make room for 3 input boxes */
  max-width: 280px; /* increased maximum */
  font-size: 15px; /* increased for better readability in individual matches */
}
#groups-container .group-match-inline .player-badge.team {
  /* Doubles bubbles - flexible sizing */
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 450px;
  font-size: 15px;
}
#groups-container .group-player-block .set-inputs {
  flex: 0 0 auto;
}

/* Medium-width safety: reduce input size a bit, still keep inline */
@media (max-width: 900px) {
  #groups-container
    .group-match-inline
    .group-player-block
    .player-badge:not(.team) {
    min-width: 130px !important; /* reduced for medium screens */
    max-width: 170px !important;
    height: 34px;
    padding: 4px 8px;
    font-size: 14px; /* slightly smaller for medium screens but still readable */
  }
  #groups-container .group-match-inline .player-badge.team {
    min-width: 180px; /* increased for medium screens */
    max-width: 280px; /* increased from 240px */
    font-size: 13px; /* consistent with smaller sizing for medium screens */
  }
  #groups-container .group-player-block .set-inputs .set-box {
    width: 40px;
    height: 32px;
  }
}

/* Small screens: still try to keep inline down to 640px by shrinking further */
@media (max-width: 640px) {
  #groups-container .group-player-block {
    flex-wrap: nowrap; /* override any wrap */
    gap: 4px; /* tighter gap */
  }
  #groups-container
    .group-match-inline
    .group-player-block
    .player-badge:not(.team) {
    min-width: 100px !important; /* reduced for mobile to fit inputs */
    max-width: 200px !important;
    height: 32px;
    padding: 4px 6px;
    font-size: 13px; /* good size for mobile individual matches */
  }
  #groups-container .group-match-inline .player-badge.team {
    min-width: 160px; /* increased for mobile */
    max-width: 320px; /* increased from 200px */
    font-size: 13px; /* consistent sizing for mobile */
    padding: 8px 12px;
  }
  #groups-container .group-player-block .set-inputs {
    gap: 3px; /* tighter gap between inputs */
  }
  #groups-container .group-player-block .set-inputs .set-box {
    width: 34px; /* smaller inputs */
    height: 30px;
    font-size: 12px;
  }
  .group-inline-row {
    gap: 8px; /* reduce gap between rows */
  }
}

/* Very narrow phones: allow wrap under the bubble if it still doesn't fit */
@media (max-width: 480px) {
  #groups-container .group-player-block {
    flex-wrap: wrap;
  }
  #groups-container .group-player-block .player-badge {
    min-width: 90px !important; /* even smaller for very narrow screens */
    max-width: 200px !important;
  }
  #groups-container .group-player-block .player-badge.team {
    min-width: 140px !important; /* increased for very narrow screens */
    max-width: 300px !important; /* increased to show full names */
    font-size: 12px; /* consistent with smaller sizing for very narrow screens */
  }
  #groups-container .group-player-block .set-inputs {
    flex-basis: 100%;
    padding-top: 4px;
    justify-content: flex-start; /* align inputs to left when wrapped */
  }
  #groups-container .group-player-block .set-inputs .set-box {
    width: 32px; /* even smaller on very narrow screens */
    height: 28px;
  }
}

/* Extra narrow screens (360px and below) */
@media (max-width: 360px) {
  #groups-container .group-player-block .player-badge {
    min-width: 80px !important;
    max-width: 160px !important;
    font-size: 12px;
    padding: 3px 5px;
  }
  #groups-container .group-player-block .player-badge.team {
    min-width: 130px !important; /* increased for extra narrow screens */
    max-width: 260px !important; /* increased to show full names */
    font-size: 12px; /* consistent with extra narrow screen sizing */
  }
  #groups-container .group-player-block .set-inputs .set-box {
    width: 30px;
    height: 26px;
    font-size: 11px;
  }
}

/* Medium-width safety: if the card column is a bit narrow on desktop, still wrap inputs */
@media (max-width: 820px) {
  /* Keep inline at medium widths too to ensure 3 sets fit */
  #groups-container .group-match-inline .group-player-block {
    flex-wrap: nowrap;
  }
  #groups-container .group-match-inline .group-player-block .set-inputs {
    flex-basis: auto;
  }
}

/* ================= Podium Dashboard Styles ================= */
.podium-dashboard {
  display: none; /* Shown only via JS when a final/3rd-place result exists */
  margin-bottom: 32px;
  animation: fadeIn 0.6s ease-in-out;
  width: 100%;
}

/* White glow effect when podium has data */
.podium-dashboard[data-has-podium] .podium-wrapper {
  animation: haloGlowWhite 3s ease-in-out infinite;
  transition: all 0.4s ease;
}

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

.podium-wrapper {
  display: block;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: visible;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Subtle decorative accent line at top */
.podium-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #f59e0b);
  border-radius: 0 0 4px 4px;
}

.podium-title {
  text-align: center;
  color: #1f2937;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 28px 0;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Ensure proper 2-column layout on desktop */
@media (min-width: 769px) {
  .podium-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tournament-podium {
  display: block;
  width: 100%;
  background: #f8fafc;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  min-width: 0; /* Prevent grid blowout */
  box-sizing: border-box;
}

.tournament-podium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.tournament-podium-title {
  display: block;
  width: 100%;
  text-align: center;
  color: #374151;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: -0.25px;
}

.podium-positions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.podium-card {
  display: grid;
  grid-template-columns: 48px 36px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  min-width: 0; /* Prevent grid blowout */
}

.podium-card:hover {
  transform: translateX(4px);
}

/* Elegant backgrounds for each position */
.podium-card.gold {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #fcd34d;
}

.podium-card.silver {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
}

.podium-card.bronze {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  border-color: #fdba74;
}

/* Pending state styling */
.podium-card.pending {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-color: #e5e7eb;
}

/* Subtle accent for gold position */
.podium-card.gold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
  border-radius: 4px 0 0 4px;
}

.podium-card.silver::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #94a3b8, #cbd5e1);
  border-radius: 4px 0 0 4px;
}

.podium-card.bronze::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f97316, #fb923c);
  border-radius: 4px 0 0 4px;
}

.podium-medal {
  font-size: 36px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: transform 0.25s ease;
}

.podium-card:hover .podium-medal {
  transform: scale(1.1);
}

.podium-rank {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  text-align: center;
  text-transform: lowercase;
}

.podium-player-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  letter-spacing: -0.25px;
}

.podium-card.pending .podium-player-name {
  font-style: italic;
  color: #9ca3af;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .podium-wrapper {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .podium-title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .podium-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tournament-podium {
    padding: 20px;
  }

  .tournament-podium-title {
    font-size: 16px;
  }

  .podium-card {
    grid-template-columns: 42px 32px 1fr;
    gap: 12px;
    padding: 14px 16px;
  }

  .podium-medal {
    font-size: 32px;
  }

  .podium-player-name {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .podium-title {
    font-size: 22px;
  }

  .podium-card {
    grid-template-columns: 40px 30px 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .podium-medal {
    font-size: 32px;
  }

  .podium-rank {
    font-size: 12px;
  }

  .podium-player-name {
    font-size: 15px;
  }
}

/* ================= Access Code Screen Styles ================= */
.access-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.access-overlay-hidden {
  opacity: 0;
}

.access-container {
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: slideUp 0.4s ease;
}

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

@keyframes accessShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-8px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(8px);
  }
}

.access-shake {
  animation: accessShake 0.5s ease;
}

.access-content {
  text-align: center;
}

.access-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: iconPulse 2s infinite ease-in-out;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.access-title {
  color: #1f2937;
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
}

.access-subtitle {
  color: #6b7280;
  margin: 0 0 30px 0;
  font-size: 16px;
}

.access-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.access-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 4px;
  font-weight: 600;
  color: #1f2937;
  transition: all 0.2s ease;
}

.access-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.access-input::placeholder {
  letter-spacing: normal;
  font-weight: normal;
  color: #9ca3af;
}

.access-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.access-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.access-submit:active {
  transform: translateY(0);
}

.access-error {
  margin-top: 15px;
  padding: 12px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  animation: errorSlide 0.3s ease;
}

@keyframes errorSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .access-container {
    padding: 30px 20px;
  }

  .access-icon {
    font-size: 48px;
  }

  .access-title {
    font-size: 24px;
  }

  .access-subtitle {
    font-size: 14px;
  }

  .access-input {
    font-size: 18px;
    padding: 14px 16px;
  }

  .access-submit {
    padding: 14px;
    font-size: 16px;
  }
}

/* ==================== HANDICAP BADGE STYLES ==================== */

/* Handicap badge - displayed next to player name */
.handicap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 10px;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  transition: all 0.2s ease;
}

/* Handicap levels - color coded by points */
.handicap-badge-low {
  /* +3 points - subtle green */
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
  border: 1px solid #6ee7b7;
}

.handicap-badge-medium {
  /* +5-6 points - warm orange */
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #c2410c;
  border: 1px solid #fb923c;
}

.handicap-badge-high {
  /* +7 points (max) - vibrant red */
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #dc2626;
  border: 1px solid #f87171;
}

/* Size variants */
.handicap-badge-small {
  padding: 1px 5px;
  font-size: 10px;
  border-radius: 8px;
  margin-left: 4px;
}

.handicap-badge-large {
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 16px;
  margin-left: 8px;
}

/* Player badge with handicap */
.player-badge.has-handicap {
  padding-right: 8px;
}

/* Match card with handicap indicator - now all cards have orange line */
.match-has-handicap {
  position: relative;
}

/* Orange vertical line for ALL match cards (knockout and group phase) */
.match-card::before,
.group-match-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(to bottom, #fb923c, #f97316);
  border-radius: 0 3px 3px 0;
}

/* Level badge - shows player level (N1, N2, etc.) */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Player name with handicap container */
.player-name-handicap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Knockout bracket handicap adjustments */
.knockout-player-row .handicap-badge {
  margin-left: 4px;
}

.knockout-player-row .handicap-badge-small {
  padding: 1px 4px;
  font-size: 9px;
}

/* Group match card handicap adjustments */
.group-match-card .handicap-badge {
  /* Keep badge inline with player name */
  display: inline-flex;
  margin-left: 6px;
}

.group-player-block {
  position: relative;
}

.group-player-block .player-badge.has-handicap {
  /* Remove extra padding - badge is now inline */
  padding-right: 8px;
}

/* Mobile responsive handicap styles */
@media (max-width: 480px) {
  .handicap-badge {
    padding: 1px 6px;
    font-size: 10px;
    margin-left: 4px;
  }

  .handicap-badge-large {
    padding: 2px 8px;
    font-size: 12px;
  }

  .group-match-card .handicap-badge {
    margin-left: 4px;
  }

  .group-player-block .player-badge.has-handicap {
    padding-right: 6px;
  }
}

/* ================= INFO MODALS (RANKING & HANDICAP) ================= */

/* Modal overlay */
.info-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.info-modal.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Modal content container */
.info-modal-content {
  background: white;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

/* Modal header */
.info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.info-modal-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.5px;
}

.info-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.info-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Modal body */
.info-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

/* Loading/Error/Empty states */
.info-modal-loading,
.info-modal-error,
.info-modal-empty {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 14px;
}

.info-modal-error {
  color: #dc2626;
}

/* ================= RANKING LIST STYLES ================= */

/* Ranking Modal Specific Styles */
.ranking-modal-content {
  max-width: 550px;
  max-height: 85vh;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Ranking modal header - unified with stats */
.ranking-modal-header {
  flex-direction: column;
  padding: 0;
  gap: 0;
  border-bottom: none;
}

.ranking-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 16px;
  width: 100%;
}

.ranking-modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* Summary Statistics Section - inside header */
.ranking-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px 18px;
  flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
  width: 100%;
}

.ranking-level-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.ranking-stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: #f1f5f9;
  border-radius: 99px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: default;
}

.ranking-stat-pill:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.ranking-stat-pill-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ranking-stat-pill-count {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

/* Ranking List Container */
.ranking-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Level Group */
.ranking-level-group {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 8px;
}

.ranking-level-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 16px 0;
  background: transparent;
  border-bottom: none;
}

.ranking-level-badge {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
  transition: transform 0.2s ease;
}

.ranking-level-badge:hover {
  transform: scale(1.1);
}

.ranking-level-title {
  display: none;
}

.ranking-level-count {
  display: none;
}

/* Players Grid */
.ranking-level-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 0;
}

.ranking-player-card {
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.ranking-player-card:hover {
  background: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.ranking-player-badge {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.ranking-player-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  word-break: break-word;
}

/* Responsive Design */
@media (max-width: 640px) {
  .ranking-modal-content {
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }

  .ranking-header-top {
    padding: 18px 20px 12px;
  }

  .ranking-stats {
    padding: 0 20px 14px;
  }
  
  .ranking-level-stats {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px; /* for scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .ranking-level-stats::-webkit-scrollbar {
    display: none;
  }

  .ranking-stat-pill {
    padding: 4px 8px 4px 6px;
    flex-shrink: 0;
  }

  .ranking-list {
    padding: 16px;
    gap: 24px;
  }
  
  .ranking-level-players {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  /* On very small screens, ensure we don't break layout */
  @media (max-width: 340px) {
    .ranking-level-players {
      grid-template-columns: 1fr;
    }
  }
  
  .ranking-player-card {
    padding: 10px 14px;
    border-radius: 12px;
  }
  
  .ranking-level-badge {
    width: 40px;
    height: 40px;
  margin: 0 0 20px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
}

.handicap-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.handicap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.handicap-row:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.handicap-diff {
  font-size: 15px;
  color: #374151;
  font-weight: 500;
}

.handicap-points {
  font-size: 16px;
  font-weight: 700;
  color: #2563eb;
  background: #dbeafe;
  padding: 4px 12px;
  border-radius: 8px;
}

/* Example section */
.handicap-example {
  margin-top: 28px;
  padding: 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
  border: 2px solid #fcd34d;
  border-radius: 12px;
}

.example-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.example-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.example-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: white;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.example-player.highlight {
  border-color: #2563eb;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.15);
}

.example-badge {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.example-name {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

.example-vs {
  font-size: 18px;
  font-weight: 700;
  color: #6b7280;
}

.example-result {
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

.example-result strong {
  color: #1f2937;
}

.highlight-text {
  color: #2563eb;
  background: #dbeafe;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .info-modal {
    padding: 10px;
  }

  .info-modal-content {
    max-width: 100%;
    max-height: 90vh;
  }

  .info-modal-header {
    padding: 18px 20px;
  }

  .info-modal-header h2 {
    font-size: 20px;
  }

  .info-modal-body {
    padding: 20px;
  }

  .ranking-item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 10px 14px;
  }

  .ranking-badge {
    width: 36px;
    height: 36px;
  }

  .ranking-name {
    font-size: 15px;
  }

  .handicap-row {
    padding: 12px 14px;
  }

  .handicap-diff {
    font-size: 14px;
  }

  .handicap-points {
    font-size: 14px;
    padding: 4px 10px;
  }

  .handicap-example {
    padding: 16px;
  }

  .example-matchup {
    gap: 12px;
  }

  .example-player {
    padding: 10px;
  }

  .example-badge {
    width: 40px;
    height: 40px;
  }

  .example-name {
    font-size: 13px;
  }

  .example-result {
    font-size: 14px;
  }
}