/* Active Users Page Styles */

/* Teams Dropdown Styles */
.teams-dropdown {
  animation: slideDown 0.3s ease-out;
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.teams-dropdown.hidden {
  display: none !important;
}

/* Toggle Button Animation */
.toggle-teams-btn svg {
  transition: transform 0.2s ease;
}

.toggle-teams-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  padding: 2px;
}

/* Table Row Hover Effects */
.hover\:bg-gray-700:hover {
  background-color: rgba(55, 65, 81, 0.8);
}

/* User Avatar Styles */
.user-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* Role Badge Styles */
.role-badge-admin {
  background-color: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.role-badge-user {
  background-color: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Team Item Styles */
.team-item {
  padding: 8px 12px;
  border-radius: 6px;
  background-color: rgba(55, 65, 81, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.2);
  transition: all 0.2s ease;
}

.team-item:hover {
  background-color: rgba(55, 65, 81, 0.8);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Summary Cards */
.summary-card {
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8));
  border: 1px solid rgba(75, 85, 99, 0.2);
  transition: all 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

/* Refresh Button */
#refresh-active-users {
  transition: all 0.2s ease;
}

#refresh-active-users:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Loading States */
.loading-indicator {
  background: rgba(31, 41, 55, 0.9);
  backdrop-filter: blur(4px);
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  backdrop-filter: blur(4px);
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Apply fade in animation to table rows */
tbody tr {
  animation: fadeInUp 0.5s ease-out;
}

/* Stagger animation for multiple rows */
tbody tr:nth-child(1) { animation-delay: 0.1s; }
tbody tr:nth-child(2) { animation-delay: 0.2s; }
tbody tr:nth-child(3) { animation-delay: 0.3s; }
tbody tr:nth-child(4) { animation-delay: 0.4s; }
tbody tr:nth-child(5) { animation-delay: 0.5s; }

/* Empty State Styles */
.empty-state {
  background: rgba(31, 41, 55, 0.5);
  border: 2px dashed rgba(75, 85, 99, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .teams-dropdown {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
  }
  
  .summary-card {
    padding: 1rem;
  }
  
  table {
    font-size: 0.875rem;
  }
  
  .metric-value {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  /* Stack table cells vertically on mobile */
  .mobile-stack {
    display: block;
  }
  
  .mobile-stack td {
    display: block;
    text-align: left;
    border: none;
    padding: 0.5rem 1rem;
  }
  
  .mobile-stack td:first-child {
    padding-top: 1rem;
    border-top: 1px solid rgba(75, 85, 99, 0.3);
  }
  
  .mobile-stack td:last-child {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .teams-dropdown {
    border-color: #ffffff;
    background-color: #000000;
  }
  
  .team-item {
    border-color: #ffffff;
    background-color: #000000;
  }
  
  .role-badge-admin,
  .role-badge-user {
    border-color: #ffffff;
    background-color: #000000;
  }
}

/* Print Styles */
@media print {
  .teams-dropdown {
    display: block !important;
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }
  
  .toggle-teams-btn {
    display: none;
  }
  
  .summary-card {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    break-inside: avoid;
  }
  
  #refresh-active-users {
    display: none;
  }
}
/* Admin Dashboard Styles */

/* Dashboard Layout */
.admin-dashboard-metrics {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Section Styling */
.metric-section {
  background: rgba(31, 41, 55, 0.8);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f8fafc;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

/* Metric Cards Grid */
.metric-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Individual Metric Cards */
.metric-card {
  background: rgba(17, 24, 39, 0.8);
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid rgba(75, 85, 99, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(59, 130, 246, 0.4);
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metric-card:hover::before {
  opacity: 1;
}

/* Metric Card Header */
.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.metric-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #d1d5db;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-icon {
  font-size: 1.25rem;
  opacity: 0.7;
}

/* Metric Values */
.metric-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.metric-value.small-text {
  font-size: 1rem;
  font-weight: 500;
  word-break: break-word;
}

.metric-subtitle {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Color Coding for Different Metric Types */
.metric-card.users-active .metric-value { color: #10b981; }
.metric-card.users-websocket .metric-value { color: #3b82f6; }
.metric-card.users-total .metric-value { color: #8b5cf6; }

.metric-card.cache-memory .metric-value { color: #f59e0b; }
.metric-card.cache-teams .metric-value { color: #06b6d4; }
.metric-card.cache-hit-rate .metric-value { color: #10b981; }

.metric-card.teams-total .metric-value { color: #3b82f6; }
.metric-card.games-today .metric-value { color: #10b981; }
.metric-card.last-sync .metric-value { color: #6b7280; }

.metric-card.redis-status .metric-value { color: #10b981; }

/* Status Indicators */
.metric-card[data-status="good"] .metric-value { color: #10b981; }
.metric-card[data-status="warning"] .metric-value { color: #f59e0b; }
.metric-card[data-status="error"] .metric-value { color: #ef4444; }
.metric-card[data-status="unavailable"] .metric-value { color: #6b7280; }

/* Loading and Error States */
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(31, 41, 55, 0.8);
  border-radius: 8px;
  color: #d1d5db;
  margin-top: 1rem;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  margin-top: 1rem;
}

.error-icon {
  font-size: 1.25rem;
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

.metric-card {
  animation: fadeIn 0.5s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  .admin-dashboard-metrics {
    gap: 1.5rem;
  }
  
  .metric-section {
    padding: 1rem;
  }
  
  .metric-cards-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .metric-card {
    padding: 1rem;
  }
  
  .metric-value {
    font-size: 1.875rem;
  }
  
  .section-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .metric-value {
    font-size: 1.5rem;
  }
  
  .metric-value.small-text {
    font-size: 0.875rem;
  }
  
  .metric-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .metric-icon {
    align-self: flex-end;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .metric-card {
    border-width: 2px;
    border-color: #ffffff;
  }
  
  .metric-value {
    color: #ffffff;
  }
  
  .section-title {
    border-bottom-color: #ffffff;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .metric-card {
    transition: none;
    animation: none;
  }
  
  .metric-card:hover {
    transform: none;
  }
  
  .loading-spinner {
    animation: none;
  }
}

/* Clickable Metric Cards */
.clickable-metric {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.clickable-metric:hover {
  text-decoration: none;
  color: inherit;
}

.clickable-metric .metric-value {
  transition: color 0.3s ease;
}

.clickable-metric:hover .metric-value {
  color: #60a5fa !important;
}

/* Focus Styles for Accessibility */
.metric-card:focus-within,
.clickable-metric:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .admin-dashboard-metrics {
    display: block;
  }
  
  .metric-section {
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .metric-card {
    break-inside: avoid;
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }
  
  .metric-value {
    color: #000;
  }
}
/* Admin Users Styling */

/* Pagination Styling */
.pagination-wrapper .pagination {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

.pagination-wrapper .pagination li {
  display: inline-block;
}

.pagination-wrapper .pagination a,
.pagination-wrapper .pagination span {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  font-size: 0.875rem;
  font-weight: 500;
}

.pagination-wrapper .pagination a {
  color: #9CA3AF;
  background-color: #374151;
  border: 1px solid #4B5563;
}

.pagination-wrapper .pagination a:hover {
  color: #FFFFFF;
  background-color: #4B5563;
  border-color: #6B7280;
}

.pagination-wrapper .pagination .current {
  color: #FFFFFF;
  background-color: #3B82F6;
  border: 1px solid #3B82F6;
}

.pagination-wrapper .pagination .disabled {
  color: #6B7280;
  background-color: #1F2937;
  border: 1px solid #374151;
  cursor: not-allowed;
}

.pagination-wrapper .pagination .disabled:hover {
  color: #6B7280;
  background-color: #1F2937;
  border-color: #374151;
}

/* User Table Enhancements */
.user-status-badge {
  font-weight: 600;
  letter-spacing: 0.025em;
}

.user-email {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Action Buttons */
.edit-email-btn,
.ban-toggle-btn {
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}

.edit-email-btn:hover,
.ban-toggle-btn:hover {
  background-color: rgba(55, 65, 81, 0.5);
  transform: scale(1.1);
}

/* Modal Styling */
#edit-email-modal {
  backdrop-filter: blur(4px);
}

#edit-email-modal .bg-gray-800 {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Loading Indicator */
#loading-indicator {
  backdrop-filter: blur(2px);
}

/* Message Alerts */
.message-alert {
  min-width: 300px;
  max-width: 500px;
  word-wrap: break-word;
}

/* Stats Cards */
.bg-gray-800 {
  transition: all 0.2s ease-in-out;
}

.bg-gray-800:hover {
  background-color: #1F2937;
}

/* Table Row Hover Effects */
tr.hover\:bg-gray-700:hover {
  background-color: #374151 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pagination-wrapper .pagination {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .pagination-wrapper .pagination a,
  .pagination-wrapper .pagination span {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .message-alert {
    min-width: 250px;
    max-width: 90vw;
  }
}

/* Focus States for Accessibility */
.edit-email-btn:focus,
.ban-toggle-btn:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

#new-email:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Animation for status changes */
.user-status-badge {
  transition: all 0.3s ease-in-out;
}

/* Improved button states */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:disabled:hover {
  transform: none;
}
/* Shared Retro Theme Styles
 * Single source of truth for the retro design system.
 * Imported by user_settings.css and team_settings.css.
 */

/* Retro Color Palette */
:root {
  --retro-primary: #5cb89c;
  --retro-secondary: #d49563;
  --retro-accent: #64b5d6;
  --retro-warning: #d4b563;
  --retro-error: #d46b6b;
  --retro-bg-dark: #111;
  --retro-bg-panel: #1e1e1e;
  --retro-border: #555;
  --retro-text: #c8c8c8;
  --retro-text-bright: #ececec;
  --retro-text-dim: #b0b0b0; /* help text / subtitles — bumped for WCAG AA contrast */
}

/* Retro Header */
.retro-header {
  text-align: center;
  margin-bottom: 2rem;
}

.retro-title {
  font-family: 'Courier New', monospace;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--retro-text-bright);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.retro-subtitle {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  color: var(--retro-text-dim);
  letter-spacing: 0.05em;
}

/* Retro Navigation */
.retro-nav {
  text-align: center;
  margin-bottom: 2rem;
}

.retro-nav-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  color: var(--retro-text-bright);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.retro-nav-link:hover {
  background: var(--retro-primary);
  border-color: var(--retro-primary);
  color: #000;
  transform: translateY(-1px);
  text-decoration: none;
}

.retro-nav-link:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

/* Retro Form */
.retro-form {
  font-family: 'Courier New', monospace;
}

/* Retro Alert */
.retro-alert {
  border: 2px solid;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.retro-alert-error {
  border-color: var(--retro-error);
  background: linear-gradient(135deg, rgba(212, 107, 107, 0.1), rgba(212, 107, 107, 0.05));
}

.retro-alert-header {
  background: var(--retro-error);
  color: #000;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.retro-alert-body {
  padding: 1rem;
  color: var(--retro-error);
}

.retro-error-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.retro-error-list li {
  margin-bottom: 0.25rem;
  font-family: 'Courier New', monospace;
}

/* Retro Panels */
.retro-panel {
  background: var(--retro-bg-panel);
  border: 1px solid var(--retro-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.retro-panel:hover {
  border-color: var(--retro-primary);
  transform: translateY(-1px);
}

.retro-panel-header {
  background: linear-gradient(90deg, var(--retro-bg-dark), #2a2a2a);
  padding: 1rem;
  border-bottom: 1px solid var(--retro-border);
}

.retro-panel-title {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--retro-primary);
  margin: 0;
  letter-spacing: 0.05em;
}

.retro-panel-body {
  padding: 1.5rem;
}

/* Retro Form Fields */
.retro-field-group {
  margin-bottom: 1.5rem;
}

.retro-label {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--retro-text-bright);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.retro-input, .retro-select {
  width: 100%;
  padding: 0.75rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  color: var(--retro-text-bright);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.retro-input:focus, .retro-select:focus {
  outline: none;
  border-color: var(--retro-primary);
}

.retro-help-text {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--retro-text-dim);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

/* Retro Toggle Controls */
.retro-toggle-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.retro-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-checkbox:checked {
  background: var(--retro-primary);
  border-color: var(--retro-primary);
}

.retro-toggle-label {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--retro-text-bright);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Retro Buttons */
.retro-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0.25rem;
}

.retro-button-primary {
  background: var(--retro-primary);
  border-color: var(--retro-primary);
  color: #000;
}

.retro-button-primary:hover {
  background: var(--retro-accent);
  border-color: var(--retro-accent);
  transform: translateY(-1px);
  color: #000;
}

.retro-button-secondary {
  background: var(--retro-bg-dark);
  border-color: var(--retro-border);
  color: var(--retro-text-dim);
}

.retro-button-secondary:hover {
  border-color: var(--retro-secondary);
  color: var(--retro-secondary);
  transform: translateY(-1px);
}

/* Retro Actions */
.retro-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--retro-bg-panel);
  border-radius: 8px;
  border: 1px solid var(--retro-border);
}

/* Retro Info Panel */
.retro-info-panel {
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  overflow: hidden;
}

.retro-info-header {
  background: linear-gradient(90deg, var(--retro-bg-dark), #2a2a2a);
  padding: 0.5rem 0.75rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--retro-accent);
  letter-spacing: 0.05em;
}

.retro-info-body {
  padding: 0.75rem;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--retro-text);
  line-height: 1.5;
}

/* Animation */
.retro-panel, .retro-button {
  animation: retroFadeIn 0.6s ease-out;
}

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

/* Responsive */
@media (max-width: 768px) {
  .retro-title {
    font-size: 2rem;
  }

  .retro-actions {
    flex-direction: column;
  }

  .retro-button {
    width: 100%;
    text-align: center;
  }

  .retro-panel-body {
    padding: 1rem;
  }

  .retro-nav-link {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .retro-title {
    font-size: 1.5rem;
  }

  .retro-panel-title {
    font-size: 1rem;
  }
}

/* Custom ratio inline inputs */
.retro-inline-fields {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.retro-inline-field {
  flex: 1;
  max-width: 120px;
}

.retro-inline-field .retro-input {
  width: 100%;
  text-align: center;
}

.retro-ratio-separator {
  color: #5cb89c;
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 0.5rem;
}
/* Loading Spinner Styles */
#loading-spinner {
  background: var(--scoreboard-background-color);
  color: var(--scoreboard-font-color);
}

#loading-spinner .animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Scoreboard Scaling System */

/* CSS Custom Properties for Scalable Elements */
:root {
  /* Base scaling factor - can be overridden by JavaScript */
  --scoreboard-scale: 1.0;

  /* Independent logo scale multiplier - can be overridden by JavaScript */
  --logo-scale: 1.0;

  /* Independent font scale multipliers - can be overridden by JavaScript */
  --score-font-scale: 1.0;
  --team-name-font-scale: 1.0;
  --time-font-scale: 1.0;

  /* Color customization - can be overridden by JavaScript */
  --scoreboard-background-color: #1f2937;
  --scoreboard-font-color: #ffffff;

  /* Logo dimensions */
  --logo-size: calc(500px * var(--scoreboard-scale) * var(--logo-scale));
  --logo-fallback-size: calc(24rem * var(--scoreboard-scale) * var(--logo-scale)); /* size-96 equivalent */

  /* Font sizes */
  --score-font-size: calc(10rem * var(--scoreboard-scale) * var(--score-font-scale));
  --team-name-font-size: calc(3rem * var(--scoreboard-scale) * var(--team-name-font-scale)); /* text-5xl */
  --sport-font-size: calc(3rem * var(--scoreboard-scale)); /* text-5xl */
  --at-font-size: calc(3rem * var(--scoreboard-scale)); /* text-5xl */
  --broadcast-font-size: calc(2.25rem * var(--scoreboard-scale)); /* text-4xl */
  --time-status-font-size: calc(2.25rem * var(--scoreboard-scale) * var(--time-font-scale)); /* text-4xl */
  --record-font-size: calc(1.25rem * var(--scoreboard-scale)); /* text-xl */

  /* Spacing and layout */
  --spacing-unit: calc(2rem * var(--scoreboard-scale)); /* m-8 equivalent */
  --margin-small: calc(0.5rem * var(--scoreboard-scale));
  --margin-medium: calc(1rem * var(--scoreboard-scale));
  --margin-large: calc(2rem * var(--scoreboard-scale));
  --margin-top-sport: calc(1rem * var(--scoreboard-scale)); /* mt-4 */
  --margin-bottom-sport: calc(-2rem * var(--scoreboard-scale));
  --margin-top-broadcast: calc(-1rem * var(--scoreboard-scale));

  /* Responsive breakpoints for aspect ratio adjustments */
  --aspect-ratio-multiplier: 1.0;
  --layout-width-multiplier: 1.0;
}

/* Aspect ratio specific adjustments */
:root[data-aspect-ratio="21:9"] {
  --aspect-ratio-multiplier: 1.2;
  --layout-width-multiplier: 1.1;
}

:root[data-aspect-ratio="16:10"] {
  --aspect-ratio-multiplier: 1.05;
}

:root[data-aspect-ratio="4:3"] {
  --aspect-ratio-multiplier: 0.9;
  --layout-width-multiplier: 0.95;
}

:root[data-aspect-ratio="ipad"] {
  --aspect-ratio-multiplier: 0.85;
  --layout-width-multiplier: 1.0;
}

/* iPad aspect ratio specific layout adjustments */
:root[data-aspect-ratio="ipad"] .flex.justify-between {
  width: 100%;
  justify-content: space-evenly;
}

/* Additional spacing for broadcast on iPad to prevent overlap */
:root[data-aspect-ratio="ipad"] .flex.text-center.flex-col.text-4xl {
  margin-top: calc(0rem * var(--scoreboard-scale)) !important;
}

:root[data-aspect-ratio="iphone"] {
  --aspect-ratio-multiplier: 0.7;
  --layout-width-multiplier: 1.0;
}

/* iPhone aspect ratio specific layout adjustments */
:root[data-aspect-ratio="iphone"] .flex.justify-between {
  width: 100%;
  justify-content: space-between;
  align-items: center; /* Keep everything vertically centered */
  padding: 0 2rem; /* Add more horizontal padding */
  min-width: 100vw;
  box-sizing: border-box;
}

/* Spread out the score elements more for iPhone */
:root[data-aspect-ratio="iphone"] #away-score {
  margin-left: 2rem !important;
  margin-right: 1rem !important;
}

:root[data-aspect-ratio="iphone"] #home-score {
  margin-left: 1rem !important;
  margin-right: 2rem !important;
}

:root[data-aspect-ratio="iphone"] #at {
  margin: 0 2rem !important;
  flex-shrink: 0;
  align-self: center; /* Ensure AT stays centered */
}

/* Additional spacing for broadcast on iPhone to prevent overlap */
:root[data-aspect-ratio="iphone"] .flex.text-center.flex-col.text-4xl {
  margin-top: calc(0.5rem * var(--scoreboard-scale)) !important;
}

/* Apply scaling to scoreboard elements */

/* Sport title */
#sport {
  font-size: var(--sport-font-size) !important;
  margin-top: var(--margin-top-sport) !important;
  margin-bottom: var(--margin-bottom-sport) !important;
}

/* Score displays */
#away-score,
#home-score {
  font-size: var(--score-font-size) !important;
}

/* AT separator */
#at {
  font-size: var(--at-font-size) !important;
  padding: 0 0.6em; /* breathing room so it isn't jammed against the scores */
}

/* Team logos - both img and SVG fallback */
#away img,
#home img {
  height: var(--logo-size) !important;
  width: var(--logo-size) !important;
}

#away svg,
#home svg {
  height: var(--logo-fallback-size) !important;
  width: var(--logo-fallback-size) !important;
}

/* Team names */
#away .text-5xl,
#home .text-5xl {
  font-size: var(--team-name-font-size) !important;
}

/* Team records */
#away .text-xl,
#home .text-xl {
  font-size: var(--record-font-size) !important;
}

/* Broadcast and time status */
#broadcast,
#time-status {
  font-size: var(--broadcast-font-size) !important;
}

/* Broadcast container margin adjustment */
.flex.text-center.flex-col.text-4xl {
  margin-top: var(--margin-top-broadcast) !important;
}

/* Team container spacing */
#away .m-8,
#home .m-8 {
  margin: var(--spacing-unit) !important;
}

/* Responsive scaling for different screen sizes */
@media (max-width: 768px) {
  :root {
    --scoreboard-scale: calc(var(--scoreboard-scale) * 0.7);
  }
}

@media (max-width: 480px) {
  :root {
    --scoreboard-scale: calc(var(--scoreboard-scale) * 0.5);
  }
}

@media (min-width: 1920px) {
  :root {
    --scoreboard-scale: calc(var(--scoreboard-scale) * var(--aspect-ratio-multiplier));
  }
}

@media (min-width: 2560px) {
  :root {
    --scoreboard-scale: calc(var(--scoreboard-scale) * var(--aspect-ratio-multiplier) * 1.2);
  }
}

/* Ensure no horizontal scrolling */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

/* Center the scoreboard vertically on the scoreboard page */
body:has(.scoreboard-container) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: var(--scoreboard-background-color);
  color: var(--scoreboard-font-color);
}

/* Scoreboard page wrapper to center everything */
.scoreboard-page-wrapper {
  min-height: calc(100vh - 60px); /* Account for any header/nav elements */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem 0;
}

/* Full screen centering for larger displays */
@media (min-width: 768px) {
  .scoreboard-page-wrapper {
    min-height: 100vh;
    padding: 0;
  }
}

/* Maintain visual balance and proportions */
.scoreboard-container {
  max-width: calc(100vw * var(--layout-width-multiplier));
  width: 100%;
  color: var(--scoreboard-font-color);
  /* Remove margin since body is now centering everything */
}

/* Override width constraints for mobile aspect ratios */
:root[data-aspect-ratio="iphone"] .scoreboard-container {
  max-width: 100vw;
  width: 100%;
  padding: 0; /* Remove padding to use full width */
}

:root[data-aspect-ratio="ipad"] .scoreboard-container {
  max-width: 100vw;
  width: 100%;
  padding: 0 1rem; /* Add some padding to prevent edge touching */
}

/* Ensure team containers spread out more on mobile aspect ratios */
:root[data-aspect-ratio="iphone"] #away,
:root[data-aspect-ratio="iphone"] #home {
  flex: 1 1 25%; /* Give teams more space */
  display: flex;
  justify-content: center;
  min-width: 0; /* Allow shrinking if needed */
}

/* Make scores take up less relative space so teams get more room */
:root[data-aspect-ratio="iphone"] #away-score,
:root[data-aspect-ratio="iphone"] #home-score {
  flex: 0 0 auto; /* Don't grow, just take what they need */
  align-self: center; /* Keep scores vertically centered */
}

/* Additional iPhone spacing adjustments */
:root[data-aspect-ratio="iphone"] .flex.justify-between > *:first-child {
  margin-left: 2rem;
}

:root[data-aspect-ratio="iphone"] .flex.justify-between > *:last-child {
  margin-right: 2rem;
}

:root[data-aspect-ratio="ipad"] #away,
:root[data-aspect-ratio="ipad"] #home {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Performance optimizations */
#away,
#home,
#away-score,
#home-score {
  will-change: transform;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Scalable classes for dynamically generated content */
.scalable-sport-text {
  font-size: var(--sport-font-size) !important;
}

.scalable-score-text {
  font-size: var(--score-font-size) !important;
}

.scalable-broadcast-text {
  font-size: var(--broadcast-font-size) !important;
}

.scalable-time-text {
  font-size: var(--time-status-font-size) !important;
}

.scalable-team-name-text {
  font-size: var(--team-name-font-size) !important;
}

.scalable-team-record-text {
  font-size: var(--record-font-size) !important;
}

.scalable-team-container {
  margin: var(--spacing-unit) !important;
}

.team-logo {
  height: var(--logo-size) !important;
  width: var(--logo-size) !important;
}

.team-logo-svg {
  height: var(--logo-size) !important;
  width: var(--logo-size) !important;
}

/* Accessibility: Ensure minimum touch target sizes on mobile */
@media (max-width: 768px) {
  #away,
  #home {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Extreme Aspect Ratio (>3:1) — LED panels, signage, ticker displays ──
   Switch all sizing to viewport-height (vh) so content is readable
   on very short, very wide displays like a 13ft x 6.5in LED panel. */

/* ── Extreme ratio: shared sizing ──
   Force the card to be a height-constrained flex column so the three
   rows (sport, main, broadcast) share 100vh without overflowing. */

:root[data-extreme-ratio] .scoreboard-page-wrapper {
  min-height: 100vh;
  padding: 0;
}

:root[data-extreme-ratio] .scoreboard-container {
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ── Extreme ratio: Rotate mode (single game in #scoreboard-content) ── */

:root[data-extreme-ratio] #scoreboard-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Row 1: sport — ~8% of height */
:root[data-extreme-ratio] #scoreboard-content > .flex.text-center.flex-col.text-5xl {
  flex: 0 0 8vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:root[data-extreme-ratio] #sport {
  font-size: 6vh !important;
  margin: 0 !important;
}

/* Row 2: teams + scores — gets remaining space */
:root[data-extreme-ratio] #scoreboard-content > .flex.justify-between {
  flex: 1 1 auto !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 2vw !important;
}

:root[data-extreme-ratio] #away-score,
:root[data-extreme-ratio] #home-score {
  font-size: calc(35vh * var(--score-font-scale)) !important;
  margin: 0 1vw !important;
  line-height: 1 !important;
}

:root[data-extreme-ratio] #at {
  font-size: 8vh !important;
  margin: 0 1vw !important;
}

:root[data-extreme-ratio] #away img,
:root[data-extreme-ratio] #home img,
:root[data-extreme-ratio] #away svg,
:root[data-extreme-ratio] #home svg {
  height: calc(30vh * var(--logo-scale)) !important;
  width: calc(30vh * var(--logo-scale)) !important;
}

:root[data-extreme-ratio] .scalable-team-name-text,
:root[data-extreme-ratio] #away .text-5xl,
:root[data-extreme-ratio] #home .text-5xl {
  font-size: calc(6vh * var(--team-name-font-scale)) !important;
}

:root[data-extreme-ratio] .scalable-team-record-text {
  font-size: 4vh !important;
}

:root[data-extreme-ratio] .scalable-team-container {
  margin: 0 1vw !important;
  overflow: hidden !important;
}

:root[data-extreme-ratio] #away,
:root[data-extreme-ratio] #home {
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Row 3: broadcast + time — ~15% of height */
:root[data-extreme-ratio] #scoreboard-content > .flex.text-center.flex-col.text-4xl {
  flex: 0 0 15vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

:root[data-extreme-ratio] #broadcast,
:root[data-extreme-ratio] #time-status {
  font-size: 6vh !important;
  line-height: 1.2 !important;
}

/* ── Extreme ratio: Ticker mode ── */

:root[data-extreme-ratio] .ticker-game-scoreboard {
  min-width: calc(100vh * 3.5) !important;
  width: calc(100vh * 3.5) !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 1vw !important;
}

/* Ticker row 1: sport */
:root[data-extreme-ratio] .ticker-game-scoreboard > .flex.text-center.flex-col.text-5xl {
  flex: 0 0 8vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-sport-text {
  font-size: 6vh !important;
  margin: 0 !important;
}

/* Ticker row 2: teams + scores — gets remaining space */
:root[data-extreme-ratio] .ticker-game-scoreboard > .flex.justify-between {
  flex: 1 1 auto !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 1vw !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-score-text {
  font-size: calc(35vh * var(--score-font-scale)) !important;
  margin: 0 1vw !important;
  line-height: 1 !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .team-logo,
:root[data-extreme-ratio] .ticker-game-scoreboard .team-logo-svg {
  height: calc(30vh * var(--logo-scale)) !important;
  width: calc(30vh * var(--logo-scale)) !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-team-name-text {
  font-size: calc(6vh * var(--team-name-font-scale)) !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-team-record-text {
  font-size: 4vh !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .text-5xl {
  font-size: 6vh !important;
  margin: 0 1vw !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-team-container {
  margin: 0 1vw !important;
}

:root[data-extreme-ratio] .ticker-team-section {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Ticker row 3: broadcast + time */
:root[data-extreme-ratio] .ticker-game-scoreboard > .flex.text-center.flex-col.text-4xl {
  flex: 0 0 15vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-broadcast-text,
:root[data-extreme-ratio] .ticker-game-scoreboard .scalable-time-text {
  font-size: 5vh !important;
  line-height: 1.2 !important;
}

/* Horizontal Scrolling Scoreboard Ticker Styles */

.scoreboard-ticker-container {
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  background: var(--scoreboard-background-color) !important;
  position: relative !important;
  z-index: 10 !important;
}

.scoreboard-ticker-scroll {
  display: flex !important;
  animation: scoreboardScroll 120s linear infinite !important;
  align-items: center !important;
  height: 100vh !important;
}

.ticker-game-scoreboard {
  min-width: 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  color: var(--scoreboard-font-color) !important;
  padding: 2rem !important;
  box-sizing: border-box !important;
}

.ticker-team-section {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 300px !important;
}

/* Better spacing for ticker scores */
.ticker-game-scoreboard .scalable-score-text {
  margin: 0 4rem !important;
  flex-shrink: 0 !important;
}

.ticker-game-scoreboard .text-5xl {
  margin: 0 5rem !important;
  flex-shrink: 0 !important;
}

/* Horizontal scrolling animation for scoreboards */
@keyframes scoreboardScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Aspect ratio adjustments for scoreboard ticker */
:root[data-aspect-ratio="21:9"] .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 1.2);
}

:root[data-aspect-ratio="16:10"] .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 1.05);
}

:root[data-aspect-ratio="4:3"] .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 0.9);
}

:root[data-aspect-ratio="ipad"] .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 0.85);
}

:root[data-aspect-ratio="iphone"] .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ticker-game-scoreboard {
    --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 0.7);
  }
}

@media (max-width: 480px) {
  .ticker-game-scoreboard {
    --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 0.5);
  }
}

/* Fullscreen adjustments */
.fullscreen .scoreboard-ticker-container {
  height: 100vh !important;
  width: 100vw !important;
}

.fullscreen .ticker-game-scoreboard {
  --scoreboard-scale: calc(var(--scoreboard-scale, 1) * 1.2);
}

/* Reduced motion accessibility support */
@media (prefers-reduced-motion: reduce) {
  .scoreboard-ticker-scroll {
    animation: none !important;
    transform: translateX(0) !important;
  }
  
  .scoreboard-ticker-container {
    justify-content: center;
    align-items: center;
  }
  
  .ticker-game-scoreboard:not(:first-child) {
    display: none;
  }
}

/* Small Dropdown Menu */
.scoreboard-dropdown {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.scoreboard-menu-trigger {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: rgba(92, 184, 156, 0.7);
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.scoreboard-menu-trigger:hover,
.scoreboard-menu-trigger:focus {
  background: rgba(92, 184, 156, 0.2);
  color: #5cb89c;
  outline: none;
}

.scoreboard-dropdown-content {
  position: absolute;
  top: 48px;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #555;
  border-radius: 6px;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

/* Support both hover (desktop) and click/tap (touch) */
.scoreboard-dropdown:hover .scoreboard-dropdown-content,
.scoreboard-dropdown.open .scoreboard-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 14px;
  color: #ddd;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
  transition: all 0.2s ease;
  border-bottom: 1px solid #333;
  min-height: 44px;
  line-height: 24px;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: #5cb89c;
  color: #000;
  text-decoration: none;
  outline: none;
}

/* Hide in fullscreen mode */
.fullscreen .scoreboard-dropdown {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .scoreboard-dropdown {
    top: 12px;
    left: 12px;
  }

  .scoreboard-menu-trigger {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .dropdown-item {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}/*
 Fullscreen toggle button styling */
.dropdown-item#fullscreen-toggle,
.dropdown-item#autofit-display {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.dropdown-item#fullscreen-toggle:hover,
.dropdown-item#fullscreen-toggle:focus,
.dropdown-item#autofit-display:hover,
.dropdown-item#autofit-display:focus {
  background: #5cb89c;
  color: #000;
}

/* =========================================================================
   Display auto-fit toast — the only UI the auto-fit has. Sits under the menu
   so it reads as coming from it, and stays out of the board's way.
   ========================================================================= */
.autofit-toast {
  position: fixed;
  top: 20px;
  left: 76px;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 96px));
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #5cb89c;
  border-radius: 6px;
  backdrop-filter: blur(10px);
  color: #ddd;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.autofit-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.autofit-toast-spinner {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(92, 184, 156, 0.3);
  border-top-color: #5cb89c;
  border-radius: 50%;
  animation: autofit-spin 0.8s linear infinite;
}

@keyframes autofit-spin {
  to { transform: rotate(360deg); }
}

/* Undo action on the finish toast. Sits after the message, not competing with
   it - the fit is usually right, so this is a way back, not a call to action. */
.autofit-toast-undo {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #5cb89c;
  border-radius: 4px;
  color: #5cb89c;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.autofit-toast-undo:hover:not(:disabled) {
  background: #5cb89c;
  color: #000;
}

.autofit-toast-undo:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Fullscreen hides the menu, so hide its toast too. */
.fullscreen .autofit-toast {
  display: none;
}

@media (max-width: 768px) {
  .autofit-toast {
    top: 12px;
    left: 64px;
    max-width: calc(100vw - 76px);
    font-size: 0.8rem;
  }
}

/* -------------------------------------------------------------------------
   The fit agent's offer, shown after a display setting changes. Deliberately
   more assertive than the toast: this is an offer to act, not a status line,
   and people are only ever shown it at a moment when the board may actually
   be wrong.
   ------------------------------------------------------------------------- */
.autofit-offer {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: min(560px, calc(100vw - 32px));
  padding: 1rem 1.25rem;
  border: 2px solid rgba(57, 255, 20, 0.55);
  border-radius: 0.5rem;
  background: rgba(10, 14, 20, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.autofit-offer.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.autofit-offer-text strong {
  color: rgb(57, 255, 20);
}

.autofit-offer-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.autofit-offer-accept,
.autofit-offer-dismiss {
  padding: 0.5rem 0.9rem;
  border-radius: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.autofit-offer-accept {
  border: none;
  background: rgb(57, 255, 20);
  color: #04140a;
  font-weight: 700;
}

.autofit-offer-accept:hover {
  background: rgb(120, 255, 100);
}

.autofit-offer-dismiss {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.autofit-offer-dismiss:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* Fullscreen is a clean-board request; don't cover it with an offer. */
.fullscreen .autofit-offer {
  display: none;
}

@media (max-width: 768px) {
  .autofit-offer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    bottom: 16px;
  }
}

/* The fit agent's menu entry reads as the thing that fixes your display,
   rather than one more utility in a list. */
#autofit-display {
  color: rgb(57, 255, 20);
  font-weight: 700;
}
/* =========================================================================
   Multi-Game Grid display mode (display_mode: "grid")
   Shows every team's game at once. Tuned for ultra-wide, short displays:
   cards spread horizontally (columns set inline via --grid-cols from JS) and
   size themselves with clamp() so they stay readable from 16:9 up to 32:9+.
   Independent of the single-game scaler so it can't affect rotate/ticker.
   ========================================================================= */
.scoreboard-grid {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: clamp(0.4rem, 1.2vw, 1.75rem);
  padding: clamp(0.4rem, 1.2vw, 1.75rem);
  background: var(--scoreboard-background-color, #1f2937);
  color: var(--scoreboard-font-color, #ffffff);
  align-content: stretch;
}

.grid-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: clamp(0.4rem, 1vw, 1.25rem);
  background: rgba(0, 0, 0, 0.12);
}

/* Live games glow green; finished games dim slightly. */
.grid-game-card.is-live {
  border-color: #39ff14;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.25);
}
.grid-game-card.is-final {
  opacity: 0.6;
}

.grid-card-sport {
  font-size: clamp(0.55rem, 1.1vw, 1.3rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.35em;
}

.grid-card-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.9vw, 1.1rem);
  width: 100%;
}

.grid-card-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  min-width: 0;
}

.grid-card-logo img,
.grid-card-logo svg {
  height: clamp(1.75rem, 5vw, 5.5rem) !important;
  width: clamp(1.75rem, 5vw, 5.5rem) !important;
  object-fit: contain;
}

.grid-card-name {
  font-size: clamp(0.55rem, 1.2vw, 1.5rem);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.grid-card-score {
  font-size: clamp(1.4rem, 4.5vw, 5.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.grid-card-sep {
  opacity: 0.4;
  font-size: clamp(1rem, 2.5vw, 3rem);
}

.grid-card-status {
  font-size: clamp(0.5rem, 1vw, 1.15rem);
  opacity: 0.7;
  margin-top: 0.4em;
}

/* =========================================================================
   Score Flash (score_flash_enabled): brief full-screen green wash when a
   displayed game's score increases. Pointer-events:none so it never blocks
   the board; auto-removed by JS after the animation.
   ========================================================================= */
.score-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at center,
    rgba(57, 255, 20, 0.38),
    rgba(57, 255, 20, 0) 70%
  );
}

.score-flash-overlay.active {
  animation: scoreFlashFade 0.9s ease-out forwards;
}

@keyframes scoreFlashFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .score-flash-overlay.active {
    animation-duration: 0.4s;
  }
}

/* =========================================================================
   CRT Visual Effects (crt_effects_enabled): scanlines + vignette + phosphor
   glow, toggled by the .crt-mode class on <html>. Overlays are fixed,
   pointer-events:none, and sit below the score-flash layer (z 9998).
   ========================================================================= */
html.crt-mode #scoreboard-content,
html.crt-mode .scoreboard-grid,
html.crt-mode .scoreboard-ticker-container {
  text-shadow: 0 0 0.045em currentColor; /* phosphor glow */
}

/* Vignette */
html.crt-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* Scanlines (+ very subtle flicker) */
html.crt-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  animation: crtFlicker 0.15s steps(2) infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

@media (prefers-reduced-motion: reduce) {
  html.crt-mode::after {
    animation: none;
  }
}

/* =========================================================================
   Display Themes (theme: retro | led | minimal | glass)
   Applied via data-theme on <html>. 'retro' is the untouched default and has
   no rules here. Non-retro themes define their own palette through the
   existing --scoreboard-*-color vars (JS clears the user's inline color
   overrides for these themes), plus font/card treatments.
   ========================================================================= */

/* Stadium LED board — amber-on-black, monospace, segment-style glow */
html[data-theme="led"] {
  --scoreboard-background-color: #0a0a0a;
  --scoreboard-font-color: #ffb000;
}
html[data-theme="led"] #scoreboard-content,
html[data-theme="led"] .scoreboard-grid,
html[data-theme="led"] .scoreboard-ticker-container {
  font-family: ui-monospace, "Courier New", monospace;
  letter-spacing: 0.06em;
  text-shadow: 0 0 0.08em rgba(255, 176, 0, 0.55);
}
html[data-theme="led"] .grid-game-card {
  border-color: rgba(255, 176, 0, 0.25);
  background: rgba(255, 176, 0, 0.04);
}

/* Minimal / Ambient — clean sans-serif, no chrome */
html[data-theme="minimal"] {
  --scoreboard-background-color: #0b0f17;
  --scoreboard-font-color: #ffffff;
}
html[data-theme="minimal"] #scoreboard-content,
html[data-theme="minimal"] .scoreboard-grid,
html[data-theme="minimal"] .scoreboard-ticker-container {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="minimal"] .grid-game-card {
  border: none;
  background: transparent;
}
html[data-theme="minimal"] .grid-game-card.is-final {
  opacity: 0.4;
}

/* Dark Glass — frosted translucent cards */
html[data-theme="glass"] {
  --scoreboard-background-color: #0c1220;
  --scoreboard-font-color: #f5f7fa;
}
html[data-theme="glass"] #scoreboard-content,
html[data-theme="glass"] .scoreboard-grid,
html[data-theme="glass"] .scoreboard-ticker-container {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="glass"] .grid-game-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================================================
   Win Probability bar (show_win_probability): away% | home% split bar with
   labels. Shown under the score in rotate/grid/ticker when ESPN provides a
   predictor. Sizes with clamp() so it works on tiny grid cards and big boards.
   ========================================================================= */
.win-prob {
  width: clamp(8rem, 60%, 32rem);
  margin: 0.6em auto 0;
  color: var(--scoreboard-font-color, #ffffff);
}

.win-prob-bar {
  display: flex;
  height: clamp(0.4rem, 0.9vw, 1rem);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.win-prob-away { background: #38bdf8; }
.win-prob-home { background: #f59e0b; }

.win-prob-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25em;
  font-size: clamp(0.5rem, 1vw, 1.05rem);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.win-prob-caption {
  letter-spacing: 0.14em;
  opacity: 0.6;
}

/* =========================================================================
   Betting Lines (show_betting_lines): compact "SA -5.5 • O/U 216.5 DraftKings"
   line under the score. Shown in rotate/grid/ticker when ESPN provides odds.
   ========================================================================= */
.betting-lines {
  margin-top: 0.5em;
  text-align: center;
  font-size: clamp(0.5rem, 1vw, 1.1rem);
  letter-spacing: 0.04em;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  color: var(--scoreboard-font-color, #ffffff);
}

.betting-provider {
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85em;
}

/* =========================================================================
   Weather (show_weather): compact "72° · Partly cloudy" line under the score,
   shown for outdoor games when ESPN provides gameInfo.weather.
   ========================================================================= */
.weather-info {
  margin-top: 0.45em;
  text-align: center;
  font-size: clamp(0.5rem, 1vw, 1.1rem);
  letter-spacing: 0.03em;
  opacity: 0.75;
  color: var(--scoreboard-font-color, #ffffff);
}

/* =========================================================================
   Standings view (display_mode: "standings"). Rotates through the leagues the
   user follows; the user's teams are highlighted. clamp()-based sizing keeps
   tables readable on ultra-wide, short displays.
   ========================================================================= */
.standings-view {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: clamp(0.75rem, 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  background: var(--scoreboard-background-color, #1f2937);
  color: var(--scoreboard-font-color, #ffffff);
  overflow: hidden;
}

.standings-league-title {
  text-align: center;
  font-size: clamp(1.1rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

.standings-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(0.75rem, 2vw, 2.5rem);
  flex: 1;
  min-height: 0;
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.6rem, 1.3vw, 1.4rem);
  font-variant-numeric: tabular-nums;
}

.standings-group-name {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
  padding-bottom: 0.3em;
}

.standings-table th {
  text-align: right;
  opacity: 0.55;
  font-weight: 600;
  padding: 0.15em 0.5em;
}
.standings-table th:first-child { text-align: left; }

.standings-table td {
  text-align: right;
  padding: 0.15em 0.5em;
}

.standings-team {
  text-align: left !important;
  font-weight: 600;
}

.standings-row-highlight {
  background: rgba(57, 255, 20, 0.14);
  outline: 1px solid rgba(57, 255, 20, 0.4);
}

/* =========================================================================
   Leaderboard card (F1, golf): a non-1v1 sport rendered as one ticker card in
   the same slot as a game, so it scrolls inline with the scores. The table
   styles below are shared with the standings view's table builder. clamp()
   sizing keeps it readable from 16:9 through portrait.
   ========================================================================= */
.ticker-leaderboard-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(1rem, 3vw, 3rem);
}

/* In grid mode a leaderboard is one tile among the games, so it scales with the
   grid like any card: single panel, grid-tile chrome, clip overflow. */
.scoreboard-grid .ticker-leaderboard-card {
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.12);
  padding: clamp(0.4rem, 1vw, 1.25rem);
  overflow: hidden;
}
/* Compact table shrinks to its content and centers, instead of spreading three
   columns across the whole (half-screen) cell. Title is bounded, not scaled. */
.lb-card-compact .lb-card-columns {
  width: 100%;
  justify-content: center;
}
.lb-card-compact .lb-card-table {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.lb-card-compact .leaderboard-table {
  width: auto;
  max-width: 100%;
}
.lb-card-compact .lb-card-title {
  font-size: clamp(1rem, 2.2vw, 1.9rem);
}
.lb-card-compact .lb-card-subtitle {
  font-size: clamp(0.6rem, 1.2vw, 1rem);
  margin-bottom: clamp(0.4rem, 1vw, 1rem);
}

.lb-card-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.2em;
}

.lb-card-subtitle {
  text-align: center;
  font-size: clamp(0.7rem, 1.6vw, 1.4rem);
  opacity: 0.7;
  letter-spacing: 0.06em;
  margin-bottom: clamp(0.6rem, 1.6vw, 1.6rem);
}

/* Two side-by-side panels (places 1..mid | mid..end). On narrow/portrait
   screens they stack so a single column stays readable. */
.lb-card-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
  width: min(100%, 70rem);
}

.lb-card-table {
  flex: 1 1 20rem;
  min-width: 0;
}
.lb-card-table .leaderboard-table {
  margin: 0 auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.6rem, 1.4vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}

.leaderboard-table th {
  text-align: right;
  opacity: 0.55;
  font-weight: 600;
  padding: 0.2em 0.6em;
}
.leaderboard-table th:first-child { text-align: left; }

.leaderboard-table td {
  text-align: right;
  padding: 0.2em 0.6em;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.leaderboard-entity {
  text-align: left !important;
  font-weight: 600;
}

.leaderboard-row-highlight {
  background: rgba(57, 255, 20, 0.14);
}

/* =========================================================================
   Picture-in-Picture (display_mode: "pip"): one primary game large, the rest
   small. On wide displays the primary takes the left ~70% and the secondaries
   stack on the right; it falls back to stacked on narrow/tall screens.
   Reuses .grid-game-card for the cards.
   ========================================================================= */
.scoreboard-pip {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: clamp(0.5rem, 1.5vw, 2rem);
  padding: clamp(0.5rem, 1.5vw, 2rem);
  background: var(--scoreboard-background-color, #1f2937);
  color: var(--scoreboard-font-color, #ffffff);
}

.scoreboard-pip:has(.pip-secondary:empty),
.scoreboard-pip > .pip-primary:only-child {
  grid-template-columns: 1fr;
}

.pip-primary {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.pip-primary .grid-game-card {
  flex: 1;
  font-size: 1.2em;
}

.pip-secondary {
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(0.4rem, 1vw, 1.25rem);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Narrow / tall screens: stack primary over a row of secondaries. */
@media (max-aspect-ratio: 1/1) {
  .scoreboard-pip {
    grid-template-columns: 1fr;
    grid-template-rows: 7fr 3fr;
  }
  .pip-secondary {
    grid-auto-rows: unset;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  }
}

/* =========================================================================
   Ambient / screensaver mode (display_mode: "ambient"): full-bleed, minimal,
   large elegant type, slow crossfade between games. Designed to be a calm TV
   background rather than a dashboard.
   ========================================================================= */
.scoreboard-ambient {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(255, 255, 255, 0.05),
    var(--scoreboard-background-color, #0b0f17) 70%
  );
  color: var(--scoreboard-font-color, #ffffff);
}

.ambient-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 2rem);
  text-align: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ambient-slide.ambient-visible {
  opacity: 1;
}

.ambient-league {
  font-size: clamp(0.8rem, 2vw, 2rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
}

.ambient-matchup {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2.5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.ambient-team {
  font-size: clamp(1.5rem, 5vw, 6rem);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.ambient-score {
  font-size: clamp(2.5rem, 9vw, 12rem);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
}

.ambient-dash {
  font-size: clamp(1.5rem, 4vw, 4rem);
  opacity: 0.4;
}

.ambient-status {
  font-size: clamp(0.7rem, 1.6vw, 1.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-slide {
    transition-duration: 0.3s;
  }
}

/* =========================================================================
   Red Zone ticker (red_zone_ticker_enabled): persistent bottom strip of live
   games + latest scoring, shown over ANY display mode. Only appears when there
   are live games. Horizontal scroll for overflow on wide boards.
   ========================================================================= */
.red-zone-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  height: clamp(1.6rem, 4vh, 3rem);
  background: rgba(0, 0, 0, 0.85);
  border-top: 2px solid #e11d48;
  color: #fff;
  font-size: clamp(0.6rem, 1.4vh, 1.2rem);
  overflow: hidden;
  pointer-events: none;
}

.red-zone-label {
  flex: 0 0 auto;
  padding: 0 0.8em;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: #e11d48;
  color: #fff;
}

.red-zone-track {
  display: flex;
  align-items: center;
  gap: 2.5em;
  white-space: nowrap;
  padding: 0 1em;
  overflow: hidden;
  animation: redZoneScroll 40s linear infinite;
}

.red-zone-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.red-zone-league {
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.red-zone-score { font-variant-numeric: tabular-nums; }
.red-zone-clock { opacity: 0.6; }
.red-zone-play { opacity: 0.85; font-style: italic; }

@keyframes redZoneScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .red-zone-track { animation: none; }
}
/* Team Settings Styles
 * Extends retro_shared.css with team-settings-specific components.
 */

/* Retro Form - allow natural expansion */
.retro-form {
  min-height: auto;
  height: auto;
}

/* Sports & Teams Containers */
.retro-sports-container,
.retro-teams-container {
  margin-bottom: 1.5rem;
}

.retro-sport-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--retro-border);
}

.retro-sport-section:last-child {
  border-bottom: none;
}

/* Search */
.retro-search-container {
  position: relative;
  z-index: 2;
  background: var(--retro-bg-panel);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.retro-search-input {
  width: 100%;
  padding: 0.75rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  color: var(--retro-text-bright);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.retro-search-input:focus {
  outline: none;
  border-color: var(--retro-primary);
}

.retro-search-input::placeholder {
  color: var(--retro-text-dim);
}

/* Sports Grid */
.retro-sports-grid {
  margin-bottom: 1rem;
}

.retro-sport-group {
  margin-bottom: 2rem;
}

.retro-group-title {
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: bold;
  color: var(--retro-accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--retro-border);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.retro-sport-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.retro-sport-item,
.retro-team-item {
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  padding: 0.75rem;
  transition: all 0.3s ease;
  cursor: pointer;
  animation: retroFadeIn 0.6s ease-out;
}

.retro-sport-item:hover,
.retro-team-item:hover {
  border-color: var(--retro-primary);
  background: #222;
}

.retro-sport-item.selected,
.retro-team-item.selected {
  border-color: var(--retro-primary);
  background: #1a2332;
}

.retro-sport-label,
.retro-team-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: 'Courier New', monospace;
}

.retro-sport-checkbox,
.retro-team-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 3px;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-sport-checkbox:checked,
.retro-team-checkbox:checked {
  background: var(--retro-primary);
  border-color: var(--retro-primary);
}

.retro-sport-text,
.retro-team-text {
  color: var(--retro-text-bright);
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* Selected Sports / Teams */
.retro-selected-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--retro-border);
}

.retro-selected-sports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem;
}

.retro-selected-item {
  background: var(--retro-primary);
  border-radius: 4px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  overflow: hidden; /* a long team name must never spill over the X */
  color: #000;
}

.retro-selected-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; /* allow the team name to shrink/ellipsize instead of pushing */
}

.retro-selected-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.retro-selected-text {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* League badge on a selected chip — dark text on a subtle wash so it stays
   readable against the bright chip background. */
.retro-selected-league {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: bold;
  color: #08332a;
  background: rgba(0, 0, 0, 0.14);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.retro-remove-button {
  flex-shrink: 0; /* never let the X get squeezed out by a long name */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
  /* dark chip so the X reads against the bright selected-item background */
  background: rgba(0, 0, 0, 0.18);
  color: #08332a;
  transition: background 0.2s ease, transform 0.2s ease;
}

.retro-remove-button:hover {
  background: rgba(0, 0, 0, 0.32);
  transform: scale(1.1);
}

/* Sports Actions Section */
.retro-sports-actions {
  border-top: 1px solid var(--retro-border);
  padding-top: 2rem;
  margin-top: 2rem;
  display: none;
}

.retro-sports-actions.show {
  display: block;
}

.retro-sports-actions .retro-actions {
  justify-content: center;
  margin-bottom: 1rem;
}

.retro-save-hint {
  text-align: center;
}

.retro-hint-text {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--retro-text-dim);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Empty States */
.retro-empty-state,
.retro-no-results {
  text-align: center;
  padding: 3rem 1rem;
}

.retro-empty-content,
.retro-no-results-content {
  color: var(--retro-text-dim);
}

.retro-empty-icon,
.retro-no-results-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.retro-empty-title,
.retro-no-results-title {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--retro-text-bright);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.retro-empty-text,
.retro-no-results-text {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Teams Grid */
.retro-teams-grid {
  margin-bottom: 2rem;
  clear: both;
  position: relative;
  z-index: 1;
}

.retro-team-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--retro-border);
  margin-top: 1rem;
}

.retro-team-count {
  background: var(--retro-bg-dark);
  color: var(--retro-text-dim);
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  font-family: 'Courier New', monospace;
}

/* Loading states */
.retro-form.loading {
  opacity: 0.5;
  pointer-events: none;
}

.retro-form.loading .retro-button-primary {
  background: var(--retro-text-dim);
  cursor: not-allowed;
}

/* Scroll to Top Button */
.scroll-to-top-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.scroll-to-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.scroll-to-top-btn:active {
  transform: translateY(0);
}

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .retro-sport-items,
  .retro-team-items {
    grid-template-columns: 1fr;
  }

  .retro-selected-sports {
    grid-template-columns: 1fr;
  }

  .retro-sport-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }

  .retro-selected-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .retro-sports-actions .retro-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .retro-sports-actions .retro-button {
    width: 100%;
    text-align: center;
  }

  .retro-hint-text {
    font-size: 0.75rem;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .retro-sport-items,
  .retro-team-items {
    gap: 0.5rem;
  }

  .retro-sport-item,
  .retro-team-item {
    padding: 0.5rem;
  }
}

@media (max-width: 640px) {
  .scroll-to-top-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem;
  }

  .scroll-to-top-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .retro-sport-item,
  .retro-team-item {
    min-height: 3rem;
  }

  .retro-sport-checkbox,
  .retro-team-checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .retro-sport-item,
  .retro-team-item,
  .fade-in {
    animation: none;
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .retro-sport-item,
  .retro-team-item {
    border-width: 2px;
    border-color: #ccc;
  }

  .retro-sport-checkbox,
  .retro-team-checkbox {
    border: 2px solid #fff;
  }
}

/* Search-on-demand result rows (reuse .retro-team-item look) */
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.retro-result-toggle {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: var(--retro-primary);
  margin-left: 0.75rem;
}

/* =========================================================================
   Fit agent promo, at the top of the Display tab. People land here to make
   the board look right, and most of them would rather have it done than
   tune five sliders — so the offer sits above the controls, not below them.
   ========================================================================= */
.autofit-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--retro-primary);
  border-radius: 4px;
  background: rgba(57, 255, 20, 0.07);
}

.autofit-promo-title {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--retro-primary);
  margin-bottom: 0.35rem;
}

.autofit-promo-copy {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.autofit-promo-button {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .autofit-promo {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
}

/* Whole-league add / remove buttons */
.retro-league-bulk-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.retro-league-bulk-buttons .retro-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .retro-league-bulk-buttons .retro-button {
    flex: 1 1 100%;
  }
}
/* User Settings Styles
 * Extends retro_shared.css with user-settings-specific components.
 */

/* Retro Button Grid (aspect ratio presets) */
.retro-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Retro Radio Buttons */
.retro-radio-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: var(--retro-bg-dark);
  border: 1px solid var(--retro-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 3rem;
}

.retro-radio-btn:hover {
  border-color: var(--retro-primary);
  background: #222;
}

.retro-radio-btn.active {
  background: var(--retro-primary);
  border-color: var(--retro-primary);
  color: #000;
}

.retro-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.retro-radio-label {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--retro-text-bright);
  letter-spacing: 0.05em;
  text-align: center;
}

.retro-radio-btn.active .retro-radio-label {
  color: #000;
}

/* Retro Color Picker */
.retro-color-picker-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.75rem 0;
}

.retro-color-input {
  width: 80px;
  height: 50px;
  padding: 0.25rem;
  background: var(--retro-bg-dark);
  border: 2px solid var(--retro-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-color-input:hover {
  border-color: var(--retro-primary);
}

.retro-color-input:focus {
  outline: none;
  border-color: var(--retro-primary);
}

.retro-color-value {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Retro Slider */
.retro-slider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.75rem 0;
}

.retro-slider {
  flex: 1;
  height: 8px;
  background: linear-gradient(90deg, var(--retro-bg-dark), var(--retro-border));
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.retro-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--retro-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.retro-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--retro-primary);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.retro-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.retro-slider-label {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--retro-text-dim);
  font-weight: bold;
  min-width: 2.5rem;
  text-align: center;
}

.retro-value-display {
  text-align: center;
  margin: 0.75rem 0;
}

.retro-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--retro-primary);
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 4px;
  letter-spacing: 0.05em;
  min-width: 4rem;
}

/* Responsive */
@media (max-width: 768px) {
  .retro-button-grid {
    grid-template-columns: 1fr;
  }

  .retro-slider-container {
    flex-direction: column;
    gap: 0.5rem;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */