/* Redesigned color scheme for better readability */
  :root {
    --bg: #ffffff;           /* Page background - pure white */
    --panel: #ffffff;        /* Main content areas - pure white */
    --panel-2: #ffffff;      /* Secondary panels - pure white */
    --text: #22222e;         /* Main text - darkest color for contrast */
    --muted: #706f8e;        /* Muted text - medium grey */
    --border: #e1e0e8;       /* Borders - lighter grey */
    
    /* Mobile-first column widths */
    --team-col-width: 160px;  /* Smaller on mobile */
    --avg-col-width: 60px;    /* Smaller on mobile */
    --first-col-padding-left: 16px;  /* Smaller padding on mobile */
    
    /* Spacing variables */
    --mobile-padding: 12px;
    --desktop-padding: 20px;
    --mobile-gap: 8px;
    --desktop-gap: 16px;

    --accent-1: #1d1b48;     /* Primary accent - dark blue */
    --accent-2: #706f8e;     /* Secondary accent - medium grey */
    --gradient:none;

    /* Difficulty colors using the new palette */
    --easy-1: #ffffff;       /* color 1 for easiest - pure white */
    --easy-2: #ada9ba;       /* color 2 for easy - light purple */
    --neutral: #706f8e;      /* color 3 for neutral - medium grey */
    --hard-1: #393a5a;       /* color 4 for hard - dark purple */
    --hard-2: #22222e;       /* color 5 for hardest - darkest */
  }
  .theme-light {
    --bg: #ffffff;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --text: #22222e;
    --muted: #706f8e;
    --border: #e1e0e8;
  }
  html, body { 
    background: var(--bg); 
    color: var(--text); 
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; 
    margin: 0; 
    border: 0; 
    outline: none; 
    overflow-x: hidden; /* Prevent horizontal scrolling at document level */
  }

  /* Header - Mobile First */
  .app-header {
    background: transparent;
    padding: 0; /* NO padding on container */
    display: block;
    color: #ffffff;
    width: 100%;
    margin: 16px 0 8px 0; /* Same top margin as toolbar */
    border-radius: 0; /* No rounded corners on mobile */
    box-shadow: none;
  }
  
  .theme-light .app-header{box-shadow:none !important;}
  
  .header-left { 
    display: flex; 
    align-items: center; 
    gap: var(--mobile-gap); 
  }
  
  .brand{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-weight: 800;
    font-size: 20px; /* Smaller on mobile */
  }
  
  .brand-name { 
    letter-spacing: .3px; 
    margin: 0; 
  }
  
  .timestamp-container {
    margin-top: -6px;
    text-align: left;
  }
  
  .timestamp {
    font-size: 11px; /* Smaller on mobile */
    color: var(--muted);
    font-weight: 400;
  }
  
  .ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Smaller gap on mobile */
    text-decoration: none;
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 4px 8px; /* Smaller padding on mobile */
    height: 32px; /* Smaller height on mobile */
  }
  
  .ss-badge:hover { filter: brightness(1.05); }
  .theme-light .ss-badge { color: var(--text); background: var(--panel-2); border-color: var(--border); }
  
  .ss-logo {
    width: 20px; height: 20px; border-radius: 6px; /* Smaller on mobile */
    display: grid; place-items: center;
    background: var(--accent-2); color: #ffffff; font-weight: 800;
    overflow: hidden;
  }
  
  .ss-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ss-meta { display: grid; line-height: 1; }
  .ss-name { font-weight: 700; font-size: 12px; } /* Smaller on mobile */
  .ss-count { font-size: 11px; opacity: .9; } /* Smaller on mobile */
  
  .header-right { 
    display: flex; 
    align-items: center; 
    gap: var(--mobile-gap); 
    padding-right: var(--mobile-padding); /* Right padding to prevent items from touching edge */
  }

  /* Constrain header content width on mobile */
  .header-inner {
    max-width: calc(100% - (var(--mobile-padding) * 2));
    margin: 0 auto;
    padding: var(--mobile-padding);
    box-sizing: border-box;
  }

  .timestamp { font-size: 11px; opacity: .9; }
  
  .btn-secondary { 
    background: var(--accent-2); 
    color: #ffffff;         
    border: 1px solid var(--accent-2); 
    border-radius: 6px; 
    padding: 4px 8px; /* Smaller padding on mobile */
    cursor: pointer; 
    font-size: 13px; /* Smaller font on mobile */
  }
  
  .btn-secondary:hover { filter: brightness(1.05); }

  /* App container - Mobile First */
  .app { 
    max-width: 100%; /* Full width on mobile */
    margin: 0 0 20px 0; /* Remove auto margins to prevent centering */
    padding: 0 var(--mobile-padding); 
    width: 100%; /* Full width on mobile */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  
  body { padding-bottom: 16px; padding-top: 0; } /* Remove top padding on mobile */
  
  /* Tabs - Mobile First */
  .tabs { 
    display: flex; 
    flex-wrap: wrap; /* Allow wrapping on mobile */
    gap: var(--mobile-gap); 
    align-items: center; 
    justify-content: flex-start; /* Align items to the left */
    background: var(--panel); 
    padding: var(--mobile-padding); 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    margin-top: 16px; /* Add white space above toolbar on mobile */
  }
  
  .tabs .tab { 
    background: var(--panel-2); 
    color: var(--text); 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    padding: 6px 10px; /* Smaller padding on mobile */
    cursor: pointer; 
    font-size: 13px; /* Smaller font on mobile */
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  .tabs .tab.active { 
    background: var(--hard-2); 
    border-color: var(--accent-2); 
    color: #e9e9e9; 
  }
  
  .tabs .spacer { flex: 1; }
  
  .tabs select { 
    background: var(--panel-2); 
    color: var(--text); 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    padding: 4px 6px; /* Smaller padding on mobile */
    font-size: 13px; /* Smaller font on mobile */
  }
  
  .toggle-form { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 12px; /* Smaller font on mobile */
    opacity: .95; 
  }
  
  .toggle-form input { transform: translateY(1px); }

  /* Ticker - Mobile First */
  .ticker { 
    margin-top: 24px; /* Increased spacing between toolbar and table on mobile */
    overflow: auto; 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    background: var(--panel); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    width: 100%;
  }
  
  .theme-light .ticker { box-shadow: inset 0 0 0 0 transparent; }
  
  table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
  }
  
  th, td { 
    border-right: 1px solid var(--border); 
    border-bottom: 1px solid var(--border); 
    text-align: center; 
  }
  
  /* Remove all borders from team column and its header - using maximum specificity */
  .team-col, 
  th.team-col, 
  td.team-col { 
    border: none !important; 
    border-bottom: none !important; 
    border-top: none !important; 
    border-left: none !important; 
    border-right: none !important; 
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Also target by position in table */
  table th:first-child,
  table td:first-child { 
    border-bottom: none !important; 
    border-top: none !important; 
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Nuclear option - remove ALL borders from first column */
  table th:first-child,
  table td:first-child,
  .team-col,
  th.team-col,
  td.team-col {
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  
  thead th { 
    position: sticky; 
    top: 0; 
    background: var(--panel-2); 
    z-index: 2; 
    padding: 8px 4px; /* Smaller padding on mobile */
    font-weight: 500; 
    font-size: 12px; /* Smaller font on mobile */
  }
  
  .theme-light thead th { box-shadow: inset 0 -1px 0 var(--border); }
  
  /* Mobile header first column alignment */
  thead th.team-col:first-child,
  thead th.player-col:first-child {
    text-align: left;
    padding-left: var(--first-col-padding-left);
    justify-content: flex-start;
  }
  
  tbody td { 
    padding: 4px 2px; /* Smaller padding on mobile */
    min-width: 48px; /* Smaller min-width on mobile */
  }
  
  .team-col {
    position: sticky; 
    left: 0; 
    z-index: 1;
    background: #ffffff;
    text-align: center; 
    padding: 6px 8px; /* Smaller padding on mobile */
    font-weight: 500;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; /* Smaller gap on mobile */
    width: var(--team-col-width); 
    min-width: var(--team-col-width);
    border: none;
    border-bottom: none;
    box-shadow: none;
    font-size: 13px; /* Smaller font on mobile */
  }
  
  /* First column alignment for mobile */
  .team-col:first-child,
  .player-col:first-child {
    text-align: left;
    padding-left: var(--first-col-padding-left);
    justify-content: flex-start;
  }
  
  /* Player column base styles (same as team column) */
  .player-col {
    position: sticky; 
    left: 0; 
    z-index: 1;
    background: #ffffff;
    text-align: center; 
    padding: 6px 8px; /* Smaller padding on mobile */
    font-weight: 500;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; /* Smaller gap on mobile */
    width: var(--team-col-width); 
    min-width: var(--team-col-width);
    border: none;
    border-bottom: none;
    box-shadow: none;
    font-size: 13px; /* Smaller font on mobile */
  }

  .avg-col {
    position: sticky; 
    left: var(--team-col-width); 
    z-index: 1;
    background: var(--panel-2);
    text-align: center; 
    font-weight: 500;
    width: var(--avg-col-width); 
    min-width: var(--avg-col-width);
    border-left: 1px solid var(--border);
    font-size: 12px; /* Smaller font on mobile */
  }

  /* Chips - Mobile First */
  .chip { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; /* Smaller gap on mobile */
    padding: 3px 6px; /* Smaller padding on mobile */
    border-radius: 4px; 
    font-weight: 700; 
    letter-spacing: .3px; 
    margin: 1px; /* Smaller margin on mobile */
    font-size: 11px; /* Smaller font on mobile */
  }
  
  .chip .sep { 
    width: 1px; 
    height: 10px; /* Smaller height on mobile */
    background: rgba(34,34,46,.6); 
    display: inline-block; 
  }
  
  .chip .venue { 
    font-weight: 900; 
    opacity: .9; 
    font-size: 10px; /* Smaller font on mobile */
  }
  /* Difficulty colors with proper text contrast */
  .d1 { background: #4A9B6B; color: #ffffff; }      /* Greener pastel green - easiest (light text) */
  .d2 { background: #7ABD91; color: #ffffff; }      /* Medium pastel green - easy (light text) */
  .d3 { background: #fff3cd; color: #856404; }      /* Soft pastel yellow - neutral (keep as is) */
  .d4 { background: #FFB3A5; color: #ffffff; }      /* Light pastel peach - hard (light text) */
  .d5 { background: #FF6962; color: #ffffff; }      /* Bright pastel red - hardest (light text) */
  
  /* Table legend */
  .table-legend {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
  }
  .legend-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin: 0 2px;
    font-weight: 600;
    font-size: 12px;
  }
  
  /* Heatmap */
  .heatmap { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); }
  .hm-grid { display: grid; grid-auto-rows: 24px; }
  .hm-row { display: contents; }
  .hm-team { position: sticky; left: 0; background: var(--panel-2); z-index: 1; display: flex; align-items: center; padding: 0 8px; font-weight: 700; border-bottom: 1px solid var(--border); }
  .hm-cell { display: grid; place-items: center; font-weight: 800; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 11px; }
  .hm-head { position: sticky; top: 0; background: var(--panel-2); z-index: 2; font-weight: 700; display: grid; place-items: center; border-bottom: 1px solid var(--border); }
  .hm-legend { display: flex; gap: 6px; align-items: center; padding: 8px; font-size: 12px; color: var(--muted); }
  .hm-legend .swatch { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }



/* Header Inner - Mobile First */
.header-inner{
  box-shadow: 0 8px 24px rgba(0,0,0,.12)!important;
  max-width: 100%; /* Full width on mobile */
  margin: 0; /* Remove top/bottom margin on mobile */
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  align-items: stretch; /* Stretch to full width */
  gap: var(--mobile-gap);
  width: 100%;
  background: #1d1b48;
  color: #fff;
  border-radius: 0; /* No rounded corners on mobile */
  padding: var(--mobile-padding);
}

body{background:#ffffff !important;}
html{background:#ffffff !important;}

html, body, #root, main, .page, .content, .container, .wrapper { background: #ffffff !important; }

/* .app-header{background:transparent;box-shadow:none;display:block;} */

#gw-slider{ vertical-align: middle; margin: 0 6px; } 
#gw-val{ font-weight:600; margin-left:4px;}

/* Slider styling */
#gw-slider{ accent-color:#1d1b48; height:6px; }
#gw-slider:focus{ outline:none; }
#gw-slider::-webkit-slider-runnable-track{ background:#e5e7eb; height:6px; border-radius:999px; }
#gw-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; margin-top:-5px; background:#1d1b48; width:16px; height:16px; border-radius:50%; border:0; box-shadow:0 0 0 2px #fff inset; }
#gw-slider::-moz-range-track{ background:#e5e7eb; height:6px; border-radius:999px; }
#gw-slider::-moz-range-thumb{ background:#1d1b48; width:16px; height:16px; border-radius:50%; border:0; }

/* ===== MOBILE-FIRST RESPONSIVE DESIGN ===== */

/* Desktop styles (768px and up) */
@media (min-width: 768px) {
  :root {
    --team-col-width: 220px;
    --avg-col-width: 70px;
    --first-col-padding-left: 20px;
  }
  
  .app {
    padding: 0 var(--desktop-padding);
    max-width: 100%; /* Use full width on desktop */
    width: 100%; /* Use full width on desktop */
  }
  
  body {
    padding-top: 6px; /* Restore top padding on desktop */
  }
  
  .app-header {
    padding: 0; /* NO padding on container */
    width: 100%;
    max-width: 100%;
    margin: 16px 0 8px 0; /* Same top margin as toolbar */
  }
  
  .brand {
    font-size: 28px;
  }
  
  .timestamp {
    font-size: 12px;
  }
  
  .ss-badge {
    gap: 10px;
    padding: 6px 10px;
    height: 36px;
    border-radius: 10px;
  }
  
  .ss-logo {
    width: 24px;
    height: 24px;
  }
  
  .ss-name {
    font-size: 13px;
  }
  
  .ss-count {
    font-size: 12px;
  }
  
  .btn-secondary {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  .header-right {
    padding-right: var(--desktop-padding); /* Add right padding on desktop */
  }
  
  .header-inner {
    max-width: calc(100% - (var(--desktop-padding) * 2)) !important; /* Constrain width like toolbar */
    margin: 0 auto 8px auto !important; /* Center with reduced bottom margin */
    border-radius: 12px !important; /* Restore rounded corners on desktop */
    padding: var(--desktop-padding) !important; /* Use desktop padding */
    width: 100% !important; /* Ensure full width within container */
    flex-direction: row !important; /* Side by side on desktop */
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--desktop-gap) !important;
    box-sizing: border-box !important; /* Include padding in width calculation */
  }
  
  .tabs {
    padding: var(--desktop-padding);
    gap: var(--desktop-gap);
    margin-top: 16px; /* Keep consistent margin on desktop */
  }
  
  .tabs .tab {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .tabs select {
    padding: 6px 8px;
    font-size: 14px;
  }
  
  .toggle-form {
    font-size: 13px;
  }
  
  /* First column alignment for both pages */
  .team-col:first-child,
  .player-col:first-child,
  tbody td.team-col:first-child,
  tbody td.player-col:first-child {
    text-align: left;
    padding-left: var(--first-col-padding-left);
    justify-content: flex-start;
  }
  
  /* Player column base styles for desktop */
  .player-col {
    position: sticky; 
    left: 0; 
    z-index: 1;
    background: #ffffff;
    text-align: center; 
    padding: 8px 12px;
    font-weight: 500;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    width: var(--team-col-width); 
    min-width: var(--team-col-width);
    border: none;
    border-bottom: none;
    box-shadow: none;
    font-size: 14px;
  }
  
  /* Header alignment for first column */
  thead th.team-col:first-child,
  thead th.player-col:first-child {
    text-align: left;
    padding-left: var(--first-col-padding-left);
    justify-content: flex-start;
  }
  

  
  thead th {
    padding: 10px 6px;
    font-size: 14px;
  }
  
  tbody td {
    padding: 6px 4px;
    min-width: 56px;
  }
  
  .team-col {
    padding: 8px 10px;
    gap: 8px;
    font-size: 14px;
  }
  
  .avg-col {
    font-size: 14px;
  }
  
  .chip {
    gap: 6px;
    padding: 4px 8px;
    margin: 2px;
    font-size: 12px;
  }
  
  .chip .sep {
    height: 12px;
  }
  
  .chip .venue {
    font-size: 11px;
  }
}

/* Large desktop styles (1024px and up) */
@media (min-width: 1024px) {
  .app {
    padding: 0 20px;
    max-width: 100%; /* Use full width on large desktop */
    width: 100%; /* Use full width on large desktop */
  }
  
  .app-header {
    padding: 0; /* NO padding on container */
    width: 100%;
    max-width: 100%;
    margin: 16px 0 8px 0; /* Same top margin as toolbar */
  }
  
  .header-inner {
    padding: 16px 20px;
    border-radius: 12px; /* Ensure rounded corners on large desktop */
    margin: 0 auto 8px auto; /* Center with reduced bottom margin */
    max-width: calc(100% - 40px); /* Constrain width like toolbar (100% - 20px*2) */
    width: 100%; /* Use full width within container */
    box-sizing: border-box; /* Include padding in width calculation */
  }
  
  .header-right {
    padding-right: 20px; /* Add right padding on large desktop */
  }
}

/* ===== MOBILE ENHANCEMENTS ===== */

/* Touch-friendly improvements for mobile */
@media (max-width: 767px) {
  /* Container constraints */
  .app {
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
    max-width: 100%; /* Force full width */
    width: 100%; /* Force full width */
    box-sizing: border-box; /* Include padding in width calculation */
    position: relative; /* Establish positioning context */
  }
  
  /* Toolbar constraints */
  .tabs {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /* Include padding in width calculation */
  }
  
  /* Table constraints */
  .ticker {
    max-width: 100%;
    width: 100%;
    overflow-x: auto; /* Keep horizontal scroll for table content */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /* Include padding in width calculation */
    margin-top: 24px; /* Maintain increased spacing between toolbar and table on mobile */
    padding: 0; /* Remove any default padding */
    position: relative; /* Establish positioning context */
  }
  
  /* Table width constraints */
  table {
    width: 100%; /* Force full width */
    max-width: 100%; /* Constrain to container width */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Include borders in width calculation */
    word-wrap: break-word; /* Allow long text to wrap */
    overflow-wrap: break-word; /* Modern property for word wrapping */
  }
  

  
  /* Increase touch targets */
  .tabs .tab {
    min-height: 44px; /* Apple's recommended minimum touch target */
    min-width: 44px;
  }
  
  .btn-secondary {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better mobile table scrolling */
  .ticker {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: thin; /* Thin scrollbar on Firefox */
  }
  
  /* Mobile-optimized slider */
  #gw-slider {
    height: 8px; /* Larger touch target */
    min-height: 44px; /* Touch-friendly height */
  }
  
  #gw-slider::-webkit-slider-thumb {
    width: 20px; /* Larger thumb */
    height: 20px;
    margin-top: -6px;
  }
  
  #gw-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  
  /* Mobile table improvements */
  .team-col {
    min-width: var(--team-col-width); /* Use CSS variable for consistent width */
    max-width: var(--team-col-width); /* Use CSS variable for consistent width */
    width: var(--team-col-width); /* Force exact width */
  }
  
  .avg-col {
    min-width: var(--avg-col-width); /* Use CSS variable for consistent width */
    max-width: var(--avg-col-width); /* Use CSS variable for consistent width */
    width: var(--avg-col-width); /* Force exact width */
  }
  
  /* Mobile table cell constraints */
  tbody td {
    min-width: 40px; /* Reduced minimum width on mobile */
    max-width: 60px; /* Maximum width to prevent overflow */
    word-wrap: break-word; /* Allow text to wrap if needed */
    overflow: hidden; /* Hide overflow content */
    box-sizing: border-box; /* Include borders in width calculation */
  }
  
  /* Mobile table body - Team column specific */
  tbody td.team-col {
    min-width: var(--team-col-width);
    max-width: var(--team-col-width);
    width: var(--team-col-width);
  }
  
  /* Mobile table body - Avg column specific */
  tbody td.avg-col {
    min-width: var(--avg-col-width);
    max-width: var(--avg-col-width);
    width: var(--avg-col-width);
  }
  
  /* Mobile table header constraints */
  thead th {
    min-width: 40px; /* Reduced minimum width on mobile */
    max-width: 60px; /* Maximum width to prevent overflow */
    word-wrap: break-word; /* Allow text to wrap if needed */
    overflow: hidden; /* Hide overflow content */
    box-sizing: border-box; /* Include borders in width calculation */
  }
  
  /* Mobile table header - Team column specific */
  thead th.team-col {
    min-width: var(--team-col-width);
    max-width: var(--team-col-width);
    width: var(--team-col-width);
  }
  
  /* Mobile table header - Avg column specific */
  thead th.avg-col {
    min-width: var(--avg-col-width);
    max-width: var(--avg-col-width);
    width: var(--avg-col-width);
  }
  
  /* Mobile legend improvements */
  .table-legend {
    padding: var(--mobile-padding);
    font-size: 12px;
  }
  
  .legend-item {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  
  /* Mobile chip constraints */
  .chip {
    max-width: 100%; /* Prevent chips from overflowing */
    font-size: 10px; /* Smaller font on mobile */
    padding: 2px 4px; /* Reduced padding on mobile */
  }
  
  .chip .venue {
    font-size: 9px; /* Smaller venue text on mobile */
  }
  
  .chip .sep {
    height: 8px; /* Smaller separator on mobile */
  }
  
  /* Mobile heatmap improvements */
  .hm-grid {
    grid-auto-rows: 20px; /* Smaller rows on mobile */
  }
  
  .hm-team {
    padding: 0 6px;
    font-size: 12px;
  }
  
  .hm-cell {
    font-size: 10px;
  }
  
  .hm-legend {
    padding: var(--mobile-padding);
    font-size: 11px;
  }
}

/* Landscape mobile optimization */
@media (max-width: 767px) and (orientation: landscape) {
  .header-inner {
    flex-direction: row; /* Side by side in landscape */
    align-items: center;
    justify-content: space-between;
    border-radius: 0; /* Keep no rounded corners in landscape mobile */
    margin: 0; /* Keep no margins in landscape mobile */
    max-width: 100%; /* Keep full-width in landscape */
  }
  
  .brand {
    font-size: 18px; /* Slightly larger in landscape */
  }
  
  .tabs {
    flex-wrap: nowrap; /* Don't wrap in landscape */
  }
}

/* ===== MOBILE FORM IMPROVEMENTS ===== */

/* Better mobile form controls */
@media (max-width: 767px) {
  /* Input fields */
  input[type="number"],
  input[type="text"] {
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Reduced height to match other elements */
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 6px 10px; /* Reduced padding to match other elements */
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    box-sizing: border-box; /* Ensure padding is included in height calculation */
  }
  
  /* Remove spinner arrows from number inputs */
  input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
  }
  
  /* Select dropdowns */
  select {
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Reduced height to match other elements */
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 6px 10px; /* Reduced padding to match other elements */
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
    box-sizing: border-box; /* Ensure padding is included in height calculation */
  }
  
  /* Checkbox improvements */
  input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
    accent-color: var(--accent-1);
  }
  
  /* Label improvements */
  label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  
  /* Better mobile spacing for form groups */
  .tabs label {
    margin: 4px 0;
  }
  
  /* Mobile-optimized button groups */
  .tabs {
    gap: 6px;
  }
  
  .tabs .tab {
    flex: 1;
    min-width: auto;
    text-align: center;
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Ensure consistent height with form elements */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Ensure padding is included in height calculation */
  }
  
  /* Mobile slider improvements */
  #gw-slider {
    flex: 1;
    min-width: 80px; /* Reduced minimum width on mobile */
    max-width: 120px; /* Maximum width to prevent overflow */
  }
  
  /* Mobile slider value display */
  #gw-val {
    min-width: 20px; /* Ensure value display has minimum width */
    text-align: center;
  }
  
  /* Mobile view mode improvements */
  #view-mode,
  #sort-mode,
  #hm-sort,
  #mode {
    min-width: 80px;
  }
  
  /* Mobile entry ID input */
  #entry-id {
    width: 80px !important; /* Reduced width on mobile */
    min-width: 80px;
    max-width: 100px; /* Maximum width to prevent overflow */
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Match height of other form elements */
    padding: 6px 10px; /* Match padding of other form elements */
    font-size: 16px; /* Prevent zoom on iOS */
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    /* Remove spinner arrows */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    box-sizing: border-box; /* Ensure padding is included in height calculation */
  }
  
  /* Mobile Load Team button - ensure consistent height */
  #load-team {
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Match height of other form elements */
    padding: 6px 10px; /* Match padding of other form elements */
    font-size: 16px; /* Consistent font size */
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Ensure padding is included in height calculation */
  }
  
  /* Mobile form control constraints */
  .tabs label {
    flex-wrap: wrap; /* Allow labels to wrap on mobile */
    gap: 4px; /* Reduced gap on mobile */
  }
  
  /* Mobile sort dropdown styling */
  #sort-mode {
    min-width: 80px; /* Ensure sort dropdown has proper width */
    max-width: 120px;
  }
  
  /* Mobile select constraints */
  #view-mode,
  #sort-mode,
  #hm-sort,
  #mode {
    min-width: 60px; /* Reduced minimum width on mobile */
    max-width: 80px; /* Maximum width to prevent overflow */
    height: 36px !important; /* Force exact height to match other elements */
    min-height: 36px; /* Ensure consistent height with other form elements */
    padding: 6px 10px; /* Consistent padding */
    font-size: 16px; /* Consistent font size */
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text);
    box-sizing: border-box; /* Ensure padding is included in height calculation */
    margin-right: 8px; /* Add right margin for spacing */
  }
  
  /* Mobile toolbar layout - ensure Mode and Sort float left */
  .tabs label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px; /* Add right margin for spacing */
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  /* Mobile spacer adjustment */
  .tabs .spacer {
    flex: 1;
    min-width: 0; /* Allow spacer to shrink */
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus states for better accessibility */
.tabs .tab:focus,
.btn-secondary:focus,
input:focus,
select:focus {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --text: #000000;
    --muted: #333333;
  }
}

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

/* ===== SORT ICON STYLING ===== */

.sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-weight: normal;
  color: var(--muted);
  transition: color 0.2s ease;
  user-select: none;
}

.sort-icon:hover {
  color: var(--accent-1);
}

/* Active sorting indicators */
.sort-icon:not([data-sort="none"]) {
  color: var(--accent-1);
  font-weight: 600;
}

/* Make sort icons slightly larger on desktop */
@media (min-width: 768px) {
  .sort-icon {
    font-size: 18px !important;
  }
}

/* ===== PLAYER MANAGEMENT STYLING ===== */

.player-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  margin-left: 8px;
  padding: 2px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
}

.player-action-btn.remove-btn {
  color: #dc2626;
  background-color: rgba(220, 38, 38, 0.1);
}

.player-action-btn.remove-btn:hover {
  background-color: rgba(220, 38, 38, 0.2);
  transform: scale(1.1);
}

.player-action-btn.add-btn {
  color: #16a34a;
  background-color: rgba(22, 163, 74, 0.1);
}

.player-action-btn.add-btn:hover {
  background-color: rgba(22, 163, 74, 0.2);
  transform: scale(1.1);
}

/* Modal styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

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

.modal-body {
  padding: 24px;
}

.search-container {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-results {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
}

.search-result {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background-color: #f9fafb;
}

.search-result .player-name {
  font-weight: 600;
  color: #111827;
}

.search-result .player-team {
  color: #6b7280;
  font-size: 14px;
}

.search-result .player-position {
  color: #059669;
  font-weight: 500;
  font-size: 14px;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 4px;
}

.search-error, .search-no-results {
  padding: 16px;
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

.search-error {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

/* Recently removed players section */
.recently-removed {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.recently-removed h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.removed-players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.removed-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.removed-player:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.removed-player .re-add-btn {
  color: #16a34a;
  font-size: 18px;
  font-weight: bold;
}

.removed-player .re-add-btn:hover {
  transform: scale(1.1);
}

/* Team summary styling */
.team-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 16px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.summary-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  color: #475569;
  font-size: 14px;
}

.stat-item strong {
  color: #1e293b;
  font-weight: 600;
}

.add-player-btn {
  background: #16a34a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-player-btn:hover {
  background: #15803d;
  transform: translateY(-1px);
}