/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap");

/* Player Color Variables */
:root {
  --p1-color: #007bff; /* Bootstrap Blue */
  --p1-color-light: rgba(0, 123, 255, 0.15);
  --p1-color-text: #007bff;

  --p2-color: #dc3545; /* Bootstrap Red */
  --p2-color-light: rgba(220, 53, 69, 0.15);
  --p2-color-text: #dc3545;
}

html {
  height: 100%;
}

/* Custom Styles */

/* Basic Body Styling */
body {
  background-color: black;
  color: #d3d3d3;
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Background Effect - Always visible */
body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;

  background: linear-gradient(rgba(26, 28, 46, 0.9), rgba(42, 45, 74, 0.95)),
    url("https://pick-ban-test-2023-10-27.s3.us-east-1.amazonaws.com/images/other/thumb-1920-1355318+(1).webp")
      center center/cover no-repeat fixed;

  transform: scale(1.05);
  transition: filter 0.3s ease-in-out;
}

/* Blur Effect - Only active when draft screen is shown */
body.draft-active-background::before {
  filter: blur(5px);
}

/* Persistent Header Styling */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  backdrop-filter: blur(8px);
}

/* --- Styles for the Main Content Area that WRAPS your screens --- */
/* This targets the <div class="container-fluid mt-5"> that holds all .screen divs */
/* To be more specific and avoid affecting other .container-fluid.mt-5 divs
   you might have elsewhere (unlikely in a single-page app like this),
   you could add a unique ID to this div in your HTML, e.g., id="main-content-area"
   and then target #main-content-area in CSS.
   For now, assuming body > .container-fluid.mt-5 is specific enough.
*/
body > .container-fluid.mt-5 {
  flex-grow: 1; /* KEY: Makes this div expand, pushing footer down */
  display: flex; /* KEY: Make it a flex container to center its child (the active .screen) */
  flex-direction: column; /* Its children stack vertically (though usually only one .screen is active) */
  align-items: center; /* KEY: Horizontally centers the active .screen */
  justify-content: center; /* KEY: Vertically centers the active .screen */

  /* Account for your fixed header. The header has padding 1rem (16px) top/bottom.
     Your container-fluid has mt-5 (Bootstrap margin-top: 3rem or 48px).
     The header is fixed, so content will flow under it. You need padding-top
     on this main content wrapper to prevent the actual screen content from being obscured.
     Let's estimate header height to be around 50-70px.
     Your header padding is 1rem (16px) + h1 size.
     The mt-5 on container-fluid already pushes it down.
     The fixed header means the content area STARTS from the top of the viewport.
     So, the main content wrapper needs padding at its top to clear the fixed header.
  */
  padding-top: 70px; /* Adjust this value based on your actual fixed header's height */
  /* Or slightly more than what your header takes up. */
  /* You might not need padding-bottom if footer handles its own spacing. */
}

/* Individual .screen styling (Your existing styles are good) */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%; /* Make screens take full width of their centered container */
  /* max-width: 1200px; /* Optional: set a max-width for content within screens */
}

.screen.active {
  display: flex;
}

/* --- Footer Styles --- */
.app-footer {
  flex-shrink: 0; /* Prevent footer from shrinking */
  background-color: rgba(10, 10, 20, 0.85);
  color: rgba(220, 220, 220, 0.7);
  font-size: 0.85em;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-top: 1px solid #333;
  backdrop-filter: blur(5px);
  /* margin-top: auto; /* This is now less critical because of flex-grow:1 on the content wrapper above it */

  /* --- NEW: Styles for fade effect --- */
  opacity: 1; /* Default opacity */
  transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}

/* When draft screen is active, make footer less prominent */
body.draft-active-background .app-footer {
  opacity: 0.3; /* Or your desired level of fade, e.g., 0.2, 0.4 */
}

/* Make footer fully visible when hovered, specifically when draft screen is active */
body.draft-active-background .app-footer:hover {
  opacity: 1;
}

/* ... (rest of your .app-footer p, .app-footer a, and .app-footer .text-muted styles from before) ... */
.app-footer p {
  margin-bottom: 0.25rem;
}
.app-footer p:last-child {
  margin-bottom: 0;
}
.app-footer .text-muted {
  color: rgba(200, 200, 200, 0.8) !important;
}
.app-footer a {
  color: #87ceeb;
  text-decoration: none;
}
.app-footer a:hover {
  color: #add8e6;
  text-decoration: underline;
}
/* --- End Footer Styles --- */

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  text-align: left;
  font-family: "Rajdhani", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

.site-title .main-title {
  color: #fff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #d0d0d0 20%,
    #ffffff 39%,
    #909090 50%,
    #ffffff 60%,
    #e0e0e0 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.site-title .domain {
  background-image: linear-gradient(
    180deg,
    #6dd5ed 0%,
    #2193b0 20%,
    #6dd5ed 39%,
    #2193b0 50%,
    #6dd5ed 60%,
    #2193b0 80%,
    #6dd5ed 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.site-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2193b0, #6dd5ed, transparent);
  transform: scaleX(0.7);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.site-title:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Adjust main container to account for fixed header */
.container-fluid {
  margin-top: 5rem;
}

/* Screen Visibility Control */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.screen.active {
  display: flex;
}

/* Basic element styling within screens */
.screen h2 {
  margin-bottom: 20px;
  text-align: center;
}

/* Draft Label */
.draft-label {
  color: #cfcdc4; /* A nice light grey */
  /* Or try: color: #e0e0e0; */
  /* Or: color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
  font-weight: 600; /* Make it slightly bolder */
  font-size: 0.9rem; /* Optional: Adjust size if needed */
}

/* Ensure label and input take consistent width */
.screen label,
.screen input.form-control {
  display: block;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.screen label {
  text-align: left;
  margin-bottom: 5px;
}

.screen input[type="text"] {
  /* Use Bootstrap 'form-control' for basic input styling or add custom */
  margin-bottom: 15px; /* Space below inputs */
  width: 100%;
  max-width: 300px; /* Limit width */
  /* Add basic styling if not using Bootstrap form-control */
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Button Group Styling */
.button-group {
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

/* Individual button margin within the group */
.button-group .stylish-button {
  margin: 0 5px;
}

/* Hero Button Styles */
.hero-button {
  position: relative;
  padding: 15px 30px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.hero-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.hero-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: white;
}

.hero-button:hover::before {
  transform: translateX(100%);
}

.hero-button i {
  margin-right: 8px;
}

/* Hero Button Variants */
.hero-primary {
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.2),
    rgba(13, 110, 253, 0.4)
  );
  border: 1px solid rgba(13, 110, 253, 0.3);
}

.hero-info {
  background: linear-gradient(
    135deg,
    rgba(13, 202, 240, 0.2),
    rgba(13, 202, 240, 0.4)
  );
  border: 1px solid rgba(13, 202, 240, 0.3);
}

.hero-secondary {
  background: linear-gradient(
    135deg,
    rgba(108, 117, 125, 0.2),
    rgba(108, 117, 125, 0.4)
  );
  border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Button styling */
.stylish-button {
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

/* Adjust button spacing if they are grouped */
#welcome-screen .stylish-button {
  /* Maybe slightly larger or more spaced on welcome */
  margin: 15px 10px;
}

/* Style for back buttons if needed (assuming they also have stylish-button or a specific class) */

/* Add any other global styles or overrides here if needed */

/* Password input container styling */
.password-input-container {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Add padding to the right of the input field to make space for the icon */
#join-lobby-id-input.form-control {
  padding-right: 40px;
  height: 42px;
  line-height: 24px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.password-toggle-icon {
  position: absolute;
  top: 41%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  z-index: 2;
}

/* Change color on hover */
.password-toggle-icon:hover {
  color: #343a40;
}

/* In style.css */

.lobby-id-container {
  position: relative; /* Context for positioning icon */
  background-color: #333; /* Optional: Subtle background for the ID area */
  padding: 2px 30px 2px 8px; /* Padding: top/bottom, RIGHT (for icon), left */
  border-radius: 4px;
  display: inline-block; /* Allow it to sit nicely after "Lobby ID:" text */
  vertical-align: middle; /* Align with surrounding text */
}

.lobby-id-text {
  font-weight: bold;
  font-family: monospace; /* Helps dots look consistent */
}

.lobby-id-toggle-icon {
  position: absolute;
  top: 50%;
  right: 5px; /* Position icon from the right */
  transform: translateY(-50%);
  cursor: pointer;
  color: #ccc; /* Lighter icon color */
  line-height: 1;
}

.lobby-id-toggle-icon:hover {
  color: #fff;
}

/* Adjust copy button alignment if needed */
#copy-lobby-id-btn {
  vertical-align: middle;
}

/* Add this rule to hide ready buttons by default */
.player-ready-btn {
  /* display: none; */
}

/* --- Draft Screen Styles --- */

/* Container for bans above grid */
#draft-bans-slots {
  display: flex;
  gap: 5px;
  min-height: 55px;
}

/* Individual Ban Slot Styling */
.ban-slot {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.ban-slot img {
  max-width: 90%;
  max-height: 90%;
  object-fit: cover;
  border-radius: 3px;
}

/* Filter Controls */
#draft-filter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Style for the active 'All' button */
#draft-filter-controls .filter-btn.active {
  background-color: #0d6efd; /* Example: Bootstrap primary blue */
  color: white;
  border-color: #0d6efd;
  /* Add any other styles - maybe slightly bolder text */
  font-weight: bold;
}

/* Style for the active element filter icons (images) */
#draft-filter-controls .element-filter-icon.active {
  /* Example styles - adjust as needed */
  opacity: 1; /* Ensure full opacity */
  border: 2px solid #0dcaf0; /* Example: Bright cyan border */
  background-color: rgba(13, 202, 240, 0.2); /* Faint cyan background */
  border-radius: 4px; /* Match border */
  padding: 1px; /* Add slight padding so border doesn't overlap image too much */
  box-shadow: 0 0 5px rgba(13, 202, 240, 0.5); /* Optional glow */
  transform: scale(1.1); /* Optional: slightly enlarge active icon */
  transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; /* Smooth transition */
}

/* Optional: Slightly dim non-active icons */
#draft-filter-controls .element-filter-icon:not(.active) {
  opacity: 0.65; /* Make non-active icons slightly faded */
  transition: opacity 0.1s ease-in-out;
  border: 2px solid transparent; /* Keep space for border */
  padding: 1px;
  background-color: transparent;
}

/* Base style for element filter icons - add cursor pointer */
#draft-filter-controls .element-filter-icon {
  cursor: pointer; /* Indicates the icon is clickable */
  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out; /* Smooth transition for hover effect */
  /* Keep existing styles like border, padding, opacity from previous step */
  border: 2px solid transparent; /* Ensure space for border on hover/active */
  padding: 1px;
  opacity: 0.65; /* Dim non-active icons slightly */
  vertical-align: middle; /* Align icons better with the 'Filter:' text/button */
}

/* Hover effect for element filter icons */
#draft-filter-controls .element-filter-icon:hover {
  opacity: 1; /* Bring to full opacity on hover */
  transform: scale(1.1); /* Slightly enlarge the icon on hover */
  /* You could add other effects like a subtle shadow if desired */
  /* box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); */
}

/* Ensure the active state overrides the base opacity */
#draft-filter-controls .element-filter-icon.active {
  opacity: 1;
  transform: scale(
    1.1
  ); /* Keep scale if you want active icons slightly larger */
  /* Keep other active styles (border, background, etc.) */
  border: 2px solid #0dcaf0;
  background-color: rgba(13, 202, 240, 0.2);
  border-radius: 4px;
  padding: 1px;
  box-shadow: 0 0 5px rgba(13, 202, 240, 0.5);
}

/* Optional: Ensure the 'All' button also has a smooth transition if desired */
#draft-filter-controls .filter-btn {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

/* Grid Header */
.grid-header {
  padding: 0.5rem 0;
}

/* Character Grid Container */
.character-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 130px); /* Increased from 110px */
  column-gap: 5px;
  row-gap: 3px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  width: 100%;
  min-height: 200px;
  max-height: 800px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  justify-content: left;
}

.center-area {
  flex-grow: 1;
  min-width: 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

/* Character Button Base Styles */
.character-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px; /* Increased from 8px */
  padding-bottom: 22px; /* Increased from 18px to accommodate larger size */
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  border: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: visible;
  aspect-ratio: 1 / 1;
}

/* Sequence Badge Styles */
.char-seq-badge {
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  font-weight: bold;
  color: white;
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.p1-seq-badge {
  background-color: var(--p1-color);
  top: -5px;
  left: -5px;
}

.p2-seq-badge {
  background-color: var(--p2-color);
  top: -5px;
  right: -5px;
}

/* Sequence Overlay */
.sequence-overlay-container {
  position: absolute;
  top: 3px; /* Fine-tune */
  right: 3px; /* Fine-tune */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px; /* Space between P1 and P2 sequence lines if both shown */
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
  font-size: 0.6em; /* Make it quite small */
  line-height: 1;
  z-index: 10; /* Ensure it's above the image but potentially below other things if needed */
}

.sequence-display {
  color: #fff;
  font-weight: normal; /* Normal weight might be better for small text */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/* Rarity Gradients */
.character-button.rarity-5 {
  background: linear-gradient(to bottom, #ff9800, black);
}

.character-button.rarity-4 {
  background: linear-gradient(to bottom, #9c27b0, black);
}

.character-button.rarity-3 {
  background: linear-gradient(to bottom, #2196f3, black);
}

.character-button.rarity-2 {
  background: linear-gradient(to bottom, #4caf50, black);
}

.character-button.rarity-1 {
  background: linear-gradient(to bottom, #cccccc, black);
}

/* Character Icon Container */
.character-button img.character-icon {
  width: 85%; /* Increased from 80% */
  height: 85%; /* Increased from 80% */
  object-fit: cover;
  margin: 0 auto;
  background-color: transparent;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  transform: translateZ(0);
}

/* Character Name */
.character-name {
  position: absolute;
  bottom: 3px; /* Increased from 2px */
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  color: white;
  font-weight: bold;
  font-size: 0.85em; /* Increased from 0.75em */
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
}

/* State Overrides */
.character-button.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}

.character-button.banned {
  opacity: 0.3;
  border: 2px solid #dc3545 !important;
  filter: grayscale(80%);
  position: relative;
  background: linear-gradient(to bottom, #dc3545, black) !important;
}

.character-button.banned::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  border-top: 2px solid rgba(220, 53, 69, 0.8);
  transform: rotate(-10deg);
}

.character-button.picked-p1 {
  opacity: 0.2;
  filter: grayscale(30%);
  border: 2px solid #0d6efd !important;
  filter: grayscale(80%);
}

.character-button.picked-p2 {
  opacity: 0.2;
  filter: grayscale(30%);
  border: 2px solid #ffc107 !important;
  filter: grayscale(80%);
}

/* Style for AVAILABLE characters (optional, for contrast) */
.character-button.available:not(:disabled):hover {
  border-color: #fff;
  transform: scale(1.05);
}

/* Style for buttons that are disabled because it's not your turn (if needed) */
/* This might overlap with unavailable styles, manage specificity carefully */
.character-button:disabled:not(.unavailable) {
  /* Maybe slightly dimmer than fully available? */
  /* opacity: 0.8; */
  /* cursor: default; /* Different cursor? */
}

/* Style for the button just clicked (temporary feedback) */
.character-button.just-selected {
  outline: 3px solid limegreen;
  outline-offset: -3px;
}

/* --- Media Queries for Responsive Grid --- */

/* Medium devices (tablets, less than 1400px) */
@media (max-width: 1399.98px) {
  .player-area {
    flex: 0 0 500px;
  }
}

/* Medium devices (tablets, less than 1200px) */
@media (max-width: 1199.98px) {
  .player-area {
    flex: 0 0 450px;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .player-area {
    flex: 0 0 400px;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .draft-main-flex-container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .player-area {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    order: 1;
  }
  .pick-slots-container {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pick-slot {
    height: auto;
    min-height: 100px;
    flex: 0 1 150px;
  }
  .center-area {
    width: 100%;
    order: 1;
    min-height: auto;
  }
  .character-grid-container {
    grid-template-columns: repeat(auto-fit, 95px); /* Increased from 80px */
    row-gap: 3px;
    column-gap: 3px;
    max-height: 40vh;
    min-height: 250px;
  }

  .character-button {
    padding: 8px;
    padding-bottom: 20px;
  }

  .character-button img.character-icon {
    width: 82%;
    height: 82%;
  }

  .character-name {
    font-size: 0.8em;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .pick-slot {
    flex-basis: 120px;
  }
}

/* Utility class to hide elements */
.visually-hidden {
  display: none !important;
}

/* --- Flexbox Layout for Main Draft Area --- */
.draft-main-flex-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.player-area {
  flex: 0 0 200px; /* Narrower width for vertical pick slots */
}

.center-area {
  flex-grow: 1;
  min-width: 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

/* --- Styling for Pick Slots Container --- */
.pick-slots-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

/* --- Pick Slot Base Styles --- */
.pick-slot {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 280px; /* Fixed height instead of min-height */
  width: 100%; /* Ensure full width */
}

/* --- Active Turn, Empty Slot --- */
.pick-slot.pulse-pick {
  /* Active slot that's ready for picking */
  border: 2px solid #4a90e2;
  background-color: rgba(74, 144, 226, 0.1);
  box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

/* --- Filled Slot (Past Pick) --- */
.pick-slot.past-pick {
  /* Confirmed pick from previous turn/phase */
  border: 2px solid #4a90e2;
  background-color: rgba(74, 144, 226, 0.1);
  box-shadow: none; /* Explicitly no glow effect */
}

/* --- Image Styling for Filled Slots --- */
.pick-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Changed from contain to cover to fill the space */
  border-radius: 3px;
}

@media (max-width: 767.98px) {
  .draft-main-flex-container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .player-area,
  .center-area {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
  }
  .pick-slots-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .center-area {
    max-width: stretch;
  }
}

/* Define the pulsing animation */
@keyframes pulseRed {
  0% {
    color: #ff4d4d;
    transform: scale(1.02);
    opacity: 1;
  }
  50% {
    color: #ff0000;
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    color: #ff4d4d;
    transform: scale(1.02);
    opacity: 1;
  }
}

.lobby-status-info {
  color: #16ab1b; /* Bootstrap's standard --bs-info color */
  font-weight: bold; /* Make it stand out a bit */
  text-align: center;
}

/* Class to apply the animation */
.lobby-status-highlight {
  color: #ff4d4d; /* Starting/Ending color after animation */
  font-weight: bold; /* Keep it bold */
  animation: pulseRed 1.5s ease-in-out 2 forwards; /* Run animation twice and keep final state */
  text-align: center;
}

/* Optional: Ensure default state doesn't conflict */
#lobby-status {
  transition: color 0.3s ease; /* Smooth transition when changing back */
}

/* Lobby Wait Screen Layout */
.player-list-container {
  background-color: var(--bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.host-row,
.player-row {
  min-height: 40px;
}

/* Remove conflicting visibility rules */
.player-kick-area,
.player-status-area,
.player-ready-area {
  /* Remove visibility: hidden */
}

/* Remove visibility classes since we're using d-none */
.player-kick-area.visible,
.player-status-area.visible,
.player-ready-area.visible {
  /* Remove visibility: visible */
}

/* Remove utility class since we're using d-none */
.visibility-hidden {
  /* Remove visibility: hidden !important */
}

/* Hero Section Styling */
.hero-description {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center; /* Center all text content */
}

.hero-description .lead {
  font-size: 1.5rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 1.5rem;
  text-align: center;
}

.hero-description .text-light {
  font-size: 1.1rem;
  line-height: 1.6;
}

.hero-description .small {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  display: inline-block;
}

#welcome-screen h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  background: linear-gradient(120deg, #fff, #a8a8a8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-badge {
  margin-bottom: 1.5rem;
}

.hero-badge .badge {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(45deg, #ffd700, #ffa500);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.features-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 1rem;
  margin: 2rem auto; /* Center with auto margins */
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  max-width: 100%; /* Ensure it doesn't overflow */
}

.features-list .feature-item {
  display: flex;
  align-items: center;
  justify-content: center; /* Center items horizontally */
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex: 1 1 auto; /* Allow items to grow and shrink */
  min-width: 150px; /* Minimum width before wrapping */
  text-align: center;
}

.features-list i[class*="text-"] {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 4px currentColor);
}

.features-list .text-success {
  color: #00ff9d !important;
}
.features-list .text-danger {
  color: #ff4d4d !important;
}
.features-list .text-info {
  color: #00d4ff !important;
}
.features-list .text-warning {
  color: #ffd700 !important;
}

/* Gradient background for the badge */
.bg-gradient {
  background: linear-gradient(45deg, #2193b0, #6dd5ed);
}

/* Adjust header background when draft screen is active */
body.draft-active-background header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
}

/* Add responsive adjustments */
@media (max-width: 767.98px) {
  .hero-description {
    padding: 1.5rem;
    margin: 1rem;
    width: auto;
  }

  #welcome-screen h2 {
    font-size: 2.5rem; /* Slightly smaller on mobile */
    text-align: center;
    margin: 1.5rem 0;
  }

  .features-list {
    padding: 1rem;
    flex-direction: column; /* Stack items vertically on very small screens */
    align-items: center;
  }

  .features-list .feature-item {
    width: 100%; /* Full width on mobile */
    justify-content: center;
  }

  .hero-description .small {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* --- Slot Glow Effects --- */

/* Remove duplicate definitions and consolidate slot styles */
.pick-slot,
.ban-slot {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative; /* Add this to ensure pseudo-elements are positioned correctly */
  overflow: hidden;
}

/* Enhanced Glow Effects with higher specificity */
.pick-slot.glow-pick,
.ban-slot.glow-ban {
  border-width: 2px;
  border-style: solid;
  transition: all 0.3s ease;
}

.pick-slot.glow-pick {
  border-color: #4a90e2;
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
  background-color: rgba(74, 144, 226, 0.1);
}

.ban-slot.glow-ban {
  border-color: #e24a4a;
  box-shadow: 0 0 15px rgba(226, 74, 74, 0.5);
  background-color: rgba(226, 74, 74, 0.1);
}

/* Enhanced Pulse Animations */
@keyframes pulse-pick {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0.7);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
}

@keyframes pulse-ban {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0.7);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
}

/* Enhanced Pulse Classes with higher specificity */
.pick-slot.pulse-pick {
  animation: pulse-pick 2s infinite;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 2px;
  border-style: solid;
}

.ban-slot.pulse-ban {
  border: 2px solid rgba(200, 200, 200, 0.7);
  animation: pulse-ban 2s infinite;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Remove any conflicting styles */
.pick-slot:not(.pulse-pick):not(.glow-pick),
.ban-slot:not(.pulse-ban):not(.glow-ban) {
  animation: none;
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
}

/* --- Player Name Frame Styling --- */
.player-area h4 {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #e0e0e0;
  font-size: 1.1rem;
  text-align: center;
  font-weight: 600;
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.player-area h4 span {
  color: #fff;
  font-weight: bold;
}

/* --- Active Turn Indicator Styling --- */
.player-area.active-turn {
  /* Remove the blue glow box-shadow */
  border-radius: 8px;
}

/* --- Phase Status Container Styling --- */
#draft-phase-status {
  /* Frame Appearance */
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 0 auto 15px auto;
  max-width: 600px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);

  /* Text Styling */
  color: #e8e8e8;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;

  /* Add transition for color changes */
  transition: border-color 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* --- Phase-Specific Styling --- */
#draft-phase-status.phase-ban {
  border-color: #e24a4a;
  background-color: rgba(180, 50, 50, 0.2);
  box-shadow: 0 0 10px rgba(226, 74, 74, 0.4);
}

#draft-phase-status.phase-pick {
  border-color: #4a90e2;
  background-color: rgba(74, 144, 226, 0.15);
  box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

/* --- Pick Slot Styling Adjustments --- */

/* Style for the actively pulsing pick slot */
.pick-slot.pulse-pick {
  animation: pulse-pick 2s infinite;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 2px;
  border-style: solid;
}

/* Keep the pulse-pick keyframes as they are */
@keyframes pulse-pick {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0.7);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0);
    border-color: rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
}

/* --- New Rule for Past Picks --- */
.pick-slot.past-pick {
  border: 2px solid #4a90e2;
  background-color: rgba(74, 144, 226, 0.1);
  box-shadow: none;
}

/* Remove the old glow-pick rule */
/* .pick-slot.glow-pick {
  border-width: 2px;
  border-style: solid;
  border-color: #4a90e2;
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
  background-color: rgba(74, 144, 226, 0.1);
  transition: all 0.3s ease;
} */

/* --- Timer Container Styling --- */
#draft-timer {
  /* Frame */
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  margin: 5px auto 20px auto;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Text & Icon Alignment */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Text Styling */
  color: #c0c0c0;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
}

#draft-timer .timer-icon {
  font-size: 1em;
  vertical-align: middle;
}

/* --- Low Time Indicator --- */
@keyframes pulse-red-border {
  0% {
    border-color: rgba(220, 53, 69, 0.4);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.2);
  }
  50% {
    border-color: rgba(220, 53, 69, 1);
    box-shadow: 0 0 10px 3px rgba(220, 53, 69, 0.5);
  }
  100% {
    border-color: rgba(220, 53, 69, 0.4);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.2);
  }
}

#draft-timer.timer-low {
  font-weight: bold;
  color: #ffdddd;
  animation: pulse-red-border 1.5s infinite ease-in-out;
  border: 1px solid transparent;
}

#draft-timer:not(.timer-low) {
  animation: none;
}

.player-score-display {
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.player-score-display.text-info {
  opacity: 1;
  font-weight: 500;
}

/* Player Name Color Styling */
.p1-name-colored {
  color: var(--p1-color-text);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.p2-name-colored {
  color: var(--p2-color-text);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Themed Area Headers */
.player-area h4.p1-themed-area {
  border-left: 5px solid var(--p1-color);
  background-color: var(--p1-color-light);
  padding-left: 15px;
  transition: all 0.3s ease;
}

.player-area h4.p2-themed-area {
  border-left: 5px solid var(--p2-color);
  background-color: var(--p2-color-light);
  padding-left: 15px;
  transition: all 0.3s ease;
}

/* Player Name Color Styling */
.player-area h4.p1-themed-header span {
  color: var(--p1-color-text);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.player-area h4.p2-themed-header span {
  color: var(--p2-color-text);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Themed Header Styling */
.player-area h4.p1-themed-header {
  border-left: 4px solid var(--p1-color);
  padding-left: 12px;
  background-color: var(--p1-color-light);
  transition: all 0.3s ease;
}

.player-area h4.p2-themed-header {
  border-left: 4px solid var(--p2-color);
  padding-left: 12px;
  background-color: var(--p2-color-light);
  transition: all 0.3s ease;
}

/* Pick Slot Sequence Badge Styles */
.pick-slot {
  position: relative; /* Ensure proper positioning context for badges */
}

.pick-slot .pick-slot-seq-badge {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  font-weight: bold;
  color: white;
  border-radius: 4px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.pick-slot .p1-seq-badge-color {
  background-color: var(--p1-color);
  top: 5px;
  left: 5px;
}

.pick-slot .p2-seq-badge-color {
  background-color: var(--p2-color);
  top: 5px;
  right: 5px;
}

/* Themed Pick Slots */
.pick-slot.p1-picked-slot-themed.past-pick {
  border: 2px solid var(--p1-color);
  box-shadow: 0 0 6px var(--p1-color);
  background-color: var(--p1-color-light);
}

.pick-slot.p2-picked-slot-themed.past-pick {
  border: 2px solid var(--p2-color);
  box-shadow: 0 0 6px var(--p2-color);
  background-color: var(--p2-color-light);
}

/* Ban Area Containers */
.draft-bans-main-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 15px;
  width: 100%;
}

/* Align eq-bans-slots to the left (Player 1) */
#eq-bans-slots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 15px; /* Consistent with player names */
}

/* Align standard-bans-slots to the right (Player 2) */
#standard-bans-slots {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px; /* Consistent with player names */
}

.ban-group-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ban-group-label {
  color: #cfcdc4;
  font-weight: 600;
  font-size: 0.8em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Ban Slots */
.ban-slot {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.ban-slot img {
  max-width: 90%;
  max-height: 90%;
  object-fit: cover;
  border-radius: 3px;
}

/* Disabled EQ Ban Slots */
.ban-slot.ban-slot-disabled {
  border-style: dotted;
  opacity: 0.5;
  background-color: rgba(255, 255, 255, 0.03);
}

/* Active and Filled States */
.ban-slot.pulse-ban {
  border: 2px solid rgba(200, 200, 200, 0.7);
  animation: pulse-ban 2s infinite;
  background-color: rgba(255, 255, 255, 0.1);
}

.ban-slot.glow-ban {
  border-color: #e24a4a;
  box-shadow: 0 0 10px rgba(226, 74, 74, 0.4);
}

@keyframes pulse-ban {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 15px 8px rgba(226, 74, 74, 0.3);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 200, 200, 0);
    transform: scale(1);
  }
}

/* NEW STYLES FOR DRAFT SCREEN REDESIGN */

/* Overall Top Bar Container */
#draft-top-bar {
  background-color: #1a1a2e; /* Dark blue/purple background for the whole bar */
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  min-height: 100px; /* Ensure it has some minimum height */
  width: 100%;
}

/* Player Areas in Top Bar (Left and Right) */
.top-bar-player-area {
  display: flex;
  flex-direction: column; /* Stack name and bans vertically */
  align-items: center; /* Center content horizontally within the player area */
  min-width: 300px; /* Ensure player areas don't get too squeezed */
  width: 100%;
}

/* Player 1 area - align to left */
.top-bar-player-area.p1-theme {
  align-items: flex-start; /* Align content to the left */
}

/* Player 2 area - align to right */
.top-bar-player-area.p2-theme {
  align-items: flex-end; /* Align content to the right */
}

/* Player Name Styling in Top Bar */
h4.player-name-top-bar {
  color: #ffffff;
  font-family: "Courier New", "Monaco", "Menlo", "Consolas", monospace !important;
  font-weight: bold;
  padding: 8px 15px; /* Padding around the name */
  border-radius: 4px;
  margin-bottom: 8px; /* Space between name and ban slots */
  width: 90%; /* Make name background take most of the player area width */
  font-size: 1.4rem; /* Increased from 1.1rem to make names bigger */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Player 1 Theme (Blue) */
.top-bar-player-area.p1-theme h4.player-name-top-bar {
  background-color: var(
    --p1-color,
    #007bff
  ); /* Using existing P1 color variable */
  color: #ffffff !important; /* Force white text regardless of theme */
  text-align: left !important; /* Left-align Player 1 name with !important */
  margin-left: 15px; /* Add left margin for spacing from edge */
}

/* Force white color and left alignment for dynamically added spans inside top bar names */
.top-bar-player-area.p1-theme h4.player-name-top-bar .p1-name-colored,
.top-bar-player-area.p1-theme h4.player-name-top-bar span {
  color: #ffffff !important; /* Override any colored classes */
  text-align: left !important; /* Ensure spans are also left-aligned */
}

/* Player 2 Theme (Red) */
.top-bar-player-area.p2-theme h4.player-name-top-bar {
  background-color: var(
    --p2-color,
    #a020f0
  ); /* Using existing P2 color variable */
  color: #ffffff !important; /* Force white text regardless of theme */
  text-align: right !important; /* Right-align Player 2 name with !important */
  margin-right: 15px; /* Add right margin for spacing from edge */
}

/* Force white color and right alignment for dynamically added spans inside top bar names */
.top-bar-player-area.p2-theme h4.player-name-top-bar .p2-name-colored,
.top-bar-player-area.p2-theme h4.player-name-top-bar span {
  color: #ffffff !important; /* Override any colored classes */
  text-align: right !important; /* Ensure spans are also right-aligned */
}

/* Container for Horizontal Ban Slots (under player name) */
.player-ban-slots-horizontal {
  width: 100%; /* Take full width of the .top-bar-player-area */
}

/* Player 1 ban slots - align to left */
.top-bar-player-area.p1-theme .player-ban-slots-horizontal {
  display: flex;
  justify-content: flex-start; /* Align ban slots to the left */
  margin-left: 15px; /* Match the player name margin */
}

/* Add "Bans:" label before P1 ban slots */
.top-bar-player-area.p1-theme .player-ban-slots-horizontal::before {
  content: "Bans:";
  font-size: 0.7rem;
  font-weight: 600;
  color: #cfcdc4;
  text-transform: uppercase;
  margin-right: 8px;
  letter-spacing: 0.5px;
  align-self: center;
}

/* Player 2 ban slots - align to right */
.top-bar-player-area.p2-theme .player-ban-slots-horizontal {
  display: flex;
  justify-content: flex-end; /* Align ban slots to the right */
  margin-right: 15px; /* Match the player name margin */
}

/* Add "Bans:" label before P2 ban slots */
.top-bar-player-area.p2-theme .player-ban-slots-horizontal::before {
  content: "Bans:";
  font-size: 0.7rem;
  font-weight: 600;
  color: #cfcdc4;
  text-transform: uppercase;
  margin-right: 8px;
  letter-spacing: 0.5px;
  align-self: center;
}

/* Individual Ban Slots in the Top Bar */
.ban-slot.top-ban-slot {
  width: 30px; /* Adjust width as per your image's proportions */
  height: 20px; /* Adjust height */
  background-color: rgba(0, 0, 0, 0.4); /* Darker slots */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Styling for a ban slot in the top bar that contains a banned character image */
.ban-slot.top-ban-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover to fill the small slot */
  border-radius: 1px;
}

/* Styling for the "highlighted" or "next ban" slot */
.ban-slot.top-ban-slot.active-ban-choice {
  background-color: #ffffff; /* White background as in image example */
  border: 1px solid #ffffff;
}

.ban-slot.top-ban-slot.ban-slot-disabled {
  border-style: dotted;
  opacity: 0.4;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Central Info Area (Timer and Phase) */
#top-bar-center-info {
  background-color: #000000; /* Black background for center block */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  flex-shrink: 0; /* Doesn't shrink */
  min-width: 450px; /* Ensure it has some width for timer/phase */
}

p#draft-timer-top.draft-timer-top-bar {
  font-size: 1.8rem; /* Larger timer font */
  font-weight: bold;
  margin-bottom: 2px !important; /* Override Bootstrap's mb-1 if needed */
  line-height: 1.1;
}

p#draft-timer-top.draft-timer-top-bar .timer-icon {
  font-size: 0.8em; /* Relative to the new timer font size */
}

h5#draft-phase-status-top.draft-phase-top-bar {
  font-size: 0.9rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #cccccc; /* Slightly dimmer color for phase text */
}

/* Ensure the theme classes take precedence for background if needed */
.p1-theme {
  background-color: var(--p1-color-light, rgba(0, 123, 255, 0.1));
}

.p2-theme {
  background-color: var(--p2-color-light);
}

/* Add spacing between EQ and Standard ban slots */
.ban-slot-standard {
  margin-left: 12px; /* Add margin to all standard bans */
}

/* Remove margin from standard ban slots that immediately follow other standard ban slots */
.ban-slot-standard + .ban-slot-standard {
  margin-left: 0; /* Remove margin to keep standard bans grouped together */
}

/* Pick and Ban Placeholder Frames - Correct Player Assignment */

/* P1 Pick Slots - Target specific P1 slots */
#p1-pick-1,
#p1-pick-2,
#p1-pick-3 {
  border: 2px solid var(--p1-color) !important;
}

/* P2 Pick Slots - Target specific P2 slots */
#p2-pick-1,
#p2-pick-2,
#p2-pick-3 {
  border: 2px solid var(--p2-color) !important;
}

/* P1 Ban Slots - All bans in P1's container */
#top-bar-p1-bans .ban-slot {
  border: 2px solid var(--p1-color) !important;
}

/* P2 Ban Slots - All bans in P2's container */
#top-bar-p2-bans .ban-slot {
  border: 2px solid var(--p2-color) !important;
}

/* Apply the same low time styling to the top bar timer */
p#draft-timer-top.timer-low {
  font-weight: bold;
  color: #ff4d4d !important;
  animation: pulse-red-glow 1.5s infinite ease-in-out;
}

p#draft-timer-top:not(.timer-low) {
  animation: none;
}

/* Red glow animation for top bar timer */
@keyframes pulse-red-glow {
  0% {
    color: #ff4d4d;
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.6);
    transform: scale(1);
  }
  50% {
    color: #ff0000;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.9);
    transform: scale(1.02);
  }
  100% {
    color: #ff4d4d;
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.6);
    transform: scale(1);
  }
}

/* Draft Order Number Styling */
.draft-order-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.299);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-family: "Arial", sans-serif;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
}

/* Smaller numbers for ban slots */
.ban-order-number {
  font-size: 1.8rem;
  width: 40px;
  height: 40px;
}

/* Hover effect for order numbers */
.draft-order-number:hover {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
}

/* Pulse animation for active draft order numbers */
@keyframes pulse-draft-order {
  0% {
    color: rgba(255, 255, 255, 0.299);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    color: rgba(255, 255, 255, 0.299);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Active draft order number pulse class */
.draft-order-number.active-pulse {
  animation: pulse-draft-order 2s infinite;
}

/* Equilibration Advantage Badges */
.equilibration-badges-container {
  position: absolute;
  top: -20px; /* Position above the container, "stitched" to the top */
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10; /* Ensure badges appear above other elements */
}

/* For P1 (left-aligned names), badges go to the right */
.p1-themed-header .equilibration-badges-container {
  right: 15px;
  left: auto;
}

/* For P2 (right-aligned names), badges go to the left */
.p2-themed-header .equilibration-badges-container {
  left: 15px;
  right: auto;
}

.equilibration-advantage-badge {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease-in-out;
  filter: none; /* Removed automatic drop-shadow to prevent glow */
  border: 2px solid rgba(255, 255, 255, 0.3); /* Changed from golden to white for better contrast on hover */
  animation: none !important; /* Ensure no automatic animation */
}

.equilibration-advantage-badge:hover {
  transform: scale(1.15) !important; /* Reduced from 1.25 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.9),
    0 0 30px rgba(255, 215, 0, 0.5) !important; /* Reduced glow intensity */
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) brightness(1.2) !important; /* Reduced glow */
  border: 3px solid rgba(255, 215, 0, 1) !important; /* Back to gold and thinner border */
  transition: all 0.3s ease-in-out !important;
  animation: none !important; /* Override any animation */
}

/* Top bar badges positioning and sizing - also stitched to top */
h4.player-name-top-bar .equilibration-badges-container {
  position: absolute;
  top: -15px; /* Stitched to top of top bar names */
  transform: none;
  z-index: 15;
}

/* P1 top bar - badges on the right */
.top-bar-player-area.p1-theme
  h4.player-name-top-bar
  .equilibration-badges-container {
  right: 10px;
  left: auto;
}

/* P2 top bar - badges on the left */
.top-bar-player-area.p2-theme
  h4.player-name-top-bar
  .equilibration-badges-container {
  left: 10px;
  right: auto;
}

/* Smaller badges for top bar */
h4.player-name-top-bar .equilibration-advantage-badge {
  width: 64px;
  height: 64px;
}

/* Ensure player name containers have relative positioning for absolute badge positioning */
.player-area h4 {
  position: relative;
  overflow: visible; /* Allow badges to extend outside the container */
}

/* Ensure top bar player areas also have relative positioning */
.top-bar-player-area {
  position: relative;
  overflow: visible; /* Allow badges to extend outside the container */
}

/* Ensure top bar h4 elements also have relative positioning */
h4.player-name-top-bar {
  position: relative;
  overflow: visible; /* Allow badges to extend outside the container */
}

/* Extra hover rule with highest specificity to ensure it works */
img.equilibration-advantage-badge:hover,
.equilibration-badges-container .equilibration-advantage-badge:hover {
  transform: scale(
    1.1
  ) !important; /* Reduced, will be overridden by specific badge rules */
  transition: all 0.2s ease-in-out !important;
}

/* Ultra-specific rule to ensure hover effect works on all equilibration badges */
.equilibration-badges-container img.equilibration-advantage-badge:hover,
.p1-themed-header
  .equilibration-badges-container
  img.equilibration-advantage-badge:hover,
.p2-themed-header
  .equilibration-badges-container
  img.equilibration-advantage-badge:hover,
h4.player-name-top-bar
  .equilibration-badges-container
  img.equilibration-advantage-badge:hover {
  transform: scale(
    1.1
  ) !important; /* Reduced, will be overridden by specific badge rules */
  transition: all 0.2s ease-in-out !important;
  animation: none !important;
  outline: none !important;
}

/* Base hover effect - reduced intensity */
.equilibration-advantage-badge:hover {
  transform: scale(1.1) !important; /* Further reduced */
  transition: all 0.3s ease-in-out !important;
  animation: none !important;
}

/* Priority Badge - Bronze glow */
img.equilibration-advantage-badge[src*="PRIO"]:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(205, 127, 50, 0.7),
    0 0 16px rgba(205, 127, 50, 0.3) !important;
  filter: drop-shadow(0 0 6px rgba(205, 127, 50, 0.6)) brightness(1.15) !important;
  border: 2px solid rgba(205, 127, 50, 1) !important; /* Bronze color */
}

/* 1 Ban Badge - Silver glow */
img.equilibration-advantage-badge[src*="1BAN"]:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(192, 192, 192, 0.7),
    0 0 16px rgba(192, 192, 192, 0.3) !important;
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.6)) brightness(1.15) !important;
  border: 2px solid rgba(192, 192, 192, 1) !important; /* Silver color */
}

/* 2 Bans Badge - Gold glow */
img.equilibration-advantage-badge[src*="2BAN"]:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 215, 0, 0.7),
    0 0 16px rgba(255, 215, 0, 0.3) !important;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) brightness(1.15) !important;
  border: 2px solid rgba(255, 215, 0, 1) !important; /* Gold color */
}

/* Style for the container of a skipped ban */
.ban-slot.ban-slot-skipped {
  background-color: rgba(60, 0, 0, 0.5); /* Dark red background */
  border: 1px solid #8b0000; /* Dark red border */
  overflow: visible !important; /* CRITICAL: Allows the image to pop out */
}

/* Style for the timeout image itself */
.ban-slot-timeout-img {
  position: absolute;
  /* Make the image larger than its container */
  width: 140%;
  height: 140%;
  object-fit: contain;
  /* Apply transformations for the pop-out effect */
  transform: scale(1.5) rotate(-15deg);
  /* Add a shadow for depth */
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.8));
}