body {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: auto; /* Allow scrolling if table is wider than viewport */
  min-width: 950px; /* Minimum width to prevent extreme squishing */
  zoom: 0.67;
  position: relative;
}

/* Features box styling */
.features-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #1F2537;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 5);
  z-index: 1000;
  max-width: 320px;
}

.features-box h3 {
  margin: 0 0 10px 0;
  font-size: 1.8em;
  color: #57c1ed;
  text-align: center;
}

.features-box ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.features-box li {
  margin-bottom: 8px;
  font-size: 1.4em;
  line-height: 1.4;
}

.features-box li:last-child {
  margin-bottom: 0;
}

.features-box strong {
  color: #57c1ed;
  font-weight: bold;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  padding: 20px;
  width: 98vw;
  max-width: 2000px;
  box-sizing: border-box;
  overflow-x: visible;
}

.main-header {
  text-align: center;
  padding: 15px;
}

.main-header h1 {
  font-size: 3.5em;
  font-weight: 775;
  margin: auto;
}

.subheading {
  font-size: 1.5em;
  font-weight: 600;
  margin: auto;
  text-align: center;
  white-space: pre-line;
}

/* First, let's fix the script.js reference problem by updating your filters CSS */
#filters {
  padding: 15px;
  border-radius: 10px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 5);
  color: white;
  gap: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 15px;
}

/* Fix the search input width */
#nameSearch {
  width: 240px; /* Fixed width that matches your design */
  min-width: 180px;
  padding: 8px 12px;
  font-size: 1.2em;
  text-align: center;
  border-radius: 6px;
  border: none;
  background-color: #3b415a;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#nameSearch::placeholder {
  color: #ffffff;
  font-weight: 700;
}

.pick-rate-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Make inputs more visible on black background */
#minPickRate {
  background-color: #222;
  color: white;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px;
  font-size: 1.2em;
  font-weight: 700;
  width: 45px;
  text-align: right;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-appearance: textfield;
}

/* Remove spinner for Chrome, Safari, Edge, Opera */
#minPickRate::-webkit-outer-spin-button,
#minPickRate::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pick-rate-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pick-rate-label {
  font-size: 1.2em;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}

.percentage-sign {
  font-size: 1.2em;
  font-weight: 700;
  color: white;
  margin-left: 4px;
  display: inline-block;
}

/* Make the role options more interactive with better hover effects */
.role-option {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  background-color: #3b415a;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  user-select: none;
}

/* Enhanced hover effect for role options */
.role-option:hover {
  transform: translateY(-2px);
  background-color: #4b516a;
}


.role-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.role-option input[type="checkbox"] {
  display: none;
}

/* Role labels in filter box - blue only on hover */
.role-label {
  transition: color 0.2s;
  color: white;
  font-size: 1.2em;
  font-weight: 700;
  user-select: none;
  text-align: center;
}

/* Fix the reset button to be inline instead of block */
.reset-button {
  padding: 8px 20px;
  font-size: 1.2em;
  border-radius: 6px;
  border: none;
  background-color: #d13232;
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: inline-block; /* Changed from block to inline-block */
  margin: 0; /* Remove auto margins */
}

.reset-button:hover {
  background-color: #f14242;
  transform: translateY(-2px);
}

.role-label:hover,
.role-option.active-role,
.role-option.active-role .role-label,
.reset-button:hover,
.view-items:hover,
.header-text:hover,
.filter-name:hover,
.filter-role:hover,
.filter-name.active,
.filter-role.active{
  color: #57c1ed;
  transform: translateY(-2px);
  cursor: pointer;
}

/* Table specific styles */
#moveset-table {
  font-weight: bold;
  display: table;
  width: 85%;
  border-collapse: collapse;
  border-radius: 5px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 5);
  table-layout: auto;

  background-color: #1F2537;
  font-size: 1.6em; /* Increased base font size */
}

/* Header styles */
.table-header-group {
  display: table-header-group;
  background-color: #3B4A6A;
}

/* Table cells in header */
.table-header-group .table-cell {
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 3px solid #ffffff;
  padding: 8px 8px;
  text-align: center;
  min-height: 8px;
}

/* Only make the text in sortable headers have pointer cursor */
.header-text {
  cursor: pointer;
  display: inline-block;
  user-select: none;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Make role text clickable */
.filter-role {
  cursor: pointer;
  transition: color 0.2s;
}


/* Remove hover from entire cell */
.table-cell[data-sort] {
  position: relative;
}

.table-cell[data-sort]:hover {
  background-color: transparent; /* Remove background change on hover */
}

/* Style for sort arrows */
[id^="arrow-"] {
  margin-left: 6px;
  display: inline-block;
  user-select: none;
}

/* Row styles */
.table-row {
  display: table-row;
}

/* Cell styles */
.table-cell {
  display: table-cell;
  padding: 12px 8px; /* Increased padding */
  vertical-align: middle;
  text-align: center; /* Center all content */
}


/* Pokemon image cell */
.table-cell img {
  max-width: 85px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Hover effect for Pokemon images in first column */
.table-row .table-cell:first-child img {
  cursor: pointer;
  transition: transform 0.2s;
}

.table-row .table-cell:first-child img:hover {
  transform: scale(1.1);
}

/* Move images */
.move-wrapper {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}

.move-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto;
  /*display: block;*/
}

/* Alternating row colors */
.table-row-group .table-row:nth-child(even) {
  background-color: #3B4A6A;
}

.table-row-group .table-row:nth-child(odd) {
  background-color: #1F2537;
}

/* Hover effect on rows */
.table-row:hover {
  background-color: #4B5A7A !important;
}

/* Name and role links */
.filter-name, .filter-role {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

/* Win rate and pick rate cells */
.view-items {
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}

.view-items:hover {
  transform: translateY(-2px);
}

/* Column definitions */
.table-column-group {
  display: table-column-group;
}

.table-column {
  display: table-column;
  /*border-left: .1px solid rgba(255, 255, 255, 0.3);*/
  /*border-right: .1px solid rgba(255, 255, 255, 0.3);*/

}

/* Body */
.table-row-group {
  display: table-row-group;
}


/* Ensure images are properly centered */
.moveset-row img {
  max-width: 90px;
  display: block;
  margin: 0 auto; /* Center images horizontally */
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.popup-content {
  background-color: #000000;
  font-weight: 700; /* try 600–700 for bolder */
  padding: 30px;
  border-radius: 12px;
  max-width: 800px; /* Increased width for additional images */
  max-height: 85vh; /* Limit height to 85% of viewport height */
  width: 80%;
  color: white;
  text-align: left;
  font-size: 1.8em;
  border: 2px solid #FFFFFF; /* ✨ thick solid white */
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 5);
  overflow-y: auto; /* Add vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Desktop popup styling */
.popup-content {
  padding: 30px;
  font-size: 1.8em;
  width: 90%;
  max-height: 85vh; /* Limit height to 85% of viewport height */
  overflow-y: auto; /* Add vertical scrolling */
}

.popup-header {
  display: flex;
  align-items: center;
}

/* Popup table styles for desktop */
.popup-table-container {
  width: 85%;
}

.popup-table .item-col {
  width: 25%;
}

.popup-table .rate-col {
  width: 37.5%;
}

.item-img {
  height: 60px;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  gap: 15px;
}

.popup-pokemon-img {
  max-height: 100px;
  margin-right: 10px;
}

.popup-move-container {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.popup-move-img {
  max-height: 90px;
}

.popup-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 1.6em;
}

/* Popup table styling */
.popup-table-container {
  width: 85%; /* Wider table */
  margin: 0 auto;
}

.popup-table {
  width: 70%;
  border-collapse: collapse;
  text-align: center;
  margin: 0 auto;
  border-radius: 3px;
  border: 3px solid #FFFFFF; /* ✨ thick solid white */
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 5);
}

.popup-table td {
  padding: 1px 0; /* Minimal vertical padding */
  vertical-align: middle;
}

.popup-table th {
  border-bottom: 3px solid #ffffff;
  font-weight: bold;
  padding-bottom: 5px;
  vertical-align: middle;
}

.popup-table .item-col {
  width: 25%; /* Narrower item column */
}

.popup-table .rate-col {
  width: 37.5%;
}

.item-img {
  height: 90px; /* Maintain item image size */
  image-rendering: crisp-edges;
  margin: 0 auto;
  display: block; /* Center images */
  padding: 0; /* Remove padding */
}

.win-rate {
  font-weight: bold;
  transition: color 0.2s;
  background: transparent;
  white-space: nowrap;
}


.popup.hidden {
  display: none;
}

/* Move popup specific styles */
.move-popup-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.move-popup-img {
  max-height: 120px;
  width: auto;
}

.move-popup-body {
  text-align: left;
  line-height: 1.6;
}

.move-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.move-detail-label {
  font-weight: bold;
  color: #57c1ed;
}

.move-detail-value {
  font-weight: normal;
}

.move-detail-section {
  margin-top: 20px;
}

.move-detail-heading {
  color: #57c1ed;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.move-description {
  line-height: 1.8;
  margin: 0;
  white-space: pre-line;
}

.enhanced-section {
  background-color: rgba(87, 193, 237, 0.1);
  padding: 15px;
  border-radius: 8px;
  border-left: 3px solid #57c1ed;
}

/* Hover effect for move images */
.move-img {
  cursor: pointer;
  transition: transform 0.2s;
}

.move-img:hover {
  transform: scale(1.05);
}

.tooltip {
  position: absolute;
  pointer-events: none;
  max-width: 240px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9em;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: opacity 0.1s ease-out;
  opacity: 0;
  z-index: 3000;
}

.tooltip.visible {
  opacity: 1;
}

.tooltip.hidden {
  display: none;
}

/* Custom scrollbar styling for popup */
.popup-content::-webkit-scrollbar {
  width: 12px;
}

.popup-content::-webkit-scrollbar-track {
  background: #1F2537;
  border-radius: 6px;
}

.popup-content::-webkit-scrollbar-thumb {
  background: #57c1ed;
  border-radius: 6px;
  border: 2px solid #1F2537;
}

.popup-content::-webkit-scrollbar-thumb:hover {
  background: #6ed1ff;
}