.section {
  display: flex;
  flex-wrap: wrap;
  /* NEW: Allows flex items to wrap to the next line */
  /* REMOVED: grid-template-columns: auto auto auto; - This is for CSS Grid, not needed with flexbox wrapping */
  padding: 10px;
  gap: 10px;
  margin: auto;
  text-align: center;
  /* width: max-content; - Consider adjusting this if you want the section to take up more screen width */
  justify-content: center;
  /* NEW: Centers the items on each line when they wrap */
  max-width: 100%;
  /* Ensure the section itself doesn't overflow the browser */
}

.section>div {
  padding: 10px;
  font-size: 1.67rem;
  text-align: center;
  color: #ffffff;
  /* White font for readability */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  /* Stronger text shadow for better contrast */
  overflow: hidden;
  border: 3px solid rgb(177, 59, 255);
  background-color: rgb(71, 19, 150, 0.4);
  /* width: max-content; - This can cause issues with wrapping; flex-basis is preferred for flex items */
  /* display: inline-block; - Not needed when parent is flex container */
}

.section>div:hover {
  background-color: rgb(71,
      19,
      150,
      0.8);
  /* Darker background on hover for better visibility */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transform: translateY(-2px);
  /* Slight lift effect on hover */
}

.section>button {
  padding: 10px;
  font-size: 1.67rem;
  text-align: center;
  color: #ffffff;
  /* White font for readability */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  /* Stronger text shadow for better contrast */
  overflow: hidden;
  border: 3px solid rgb(177, 59, 255);
  border-radius: 20px;
  background-color: rgb(71, 19, 150, 1);
  width: max-content;
  /* Ensures button width is determined by its content */
}

.section>button:hover {
  background-color: rgb(71,
      19,
      150,
      0.5);
  /* Darker background on hover for better visibility */
  cursor: pointer;
  /* Changes cursor to pointer on hover */
  transform: translateY(-2px);
  /* Slight lift effect on hover */
}

div {
  margin: 10px;
}

p {
  text-align: start;
  text-wrap: pretty;
}

#section-lore,
#section-you,
#section-moneysource,
#section-origin,
#section-equipment,
#section-titles,
#section-fleet,
#section-ship,
#section-hull,
#section-sponsor,
#section-subsystem,
#origin-education,
#origin-skills,
#origin-mana,
#origin-catalyst,
#origin-spell,
#origin-affinities,
#section-crew,
#section-mod,
#section-weapon,
#section-industrial,
#section-ewar,
#section-room {
  display: none;
  /* Hidden by default */
}

#section-lore.visible,
#section-you.visible,
#section-moneysource.visible,
#section-origin.visible,
#section-equipment.visible,
#section-titles.visible,
#section-fleet.visible,
#section-ship.visible,
#section-hull.visible,
#section-sponsor.visible,
#origin-education.visible,
#origin-skills.visible,
#origin-mana.visible,
#origin-catalyst.visible,
#origin-spell.visible,
#origin-affinities.visible,
#section-crew.visible,
#section-subsystem.visible,
#section-mod.visible,
#section-weapon.visible,
#section-industrial.visible,
#section-ewar.visible,
#section-room.visible {
  display: flex;
  /* Hidden by default */
}

.choice,
.choice-frame-upgrade,
.choice-rigs {
  justify-content: center;
  align-items: center;
  width: 140px;
  /* Keep your existing fixed width */
  /* NEW: flex-basis to control how many items fit per row.
     (100% / 6) makes each item target 1/6th of the container width.
     (10px * 5 / 6) subtracts a portion of the gap space (5 gaps for 6 items)
     to ensure they fit perfectly. */
  flex-basis: calc((100% / 5.5));
  min-width: 140px;
  /* Ensure items don't shrink below this size on smaller screens */
  box-sizing: border-box;
  /* Ensures padding and border are included in the width calculation */
  border-radius: 15px;
}

.choice-frame-image {
  max-width: 67%;
}

.gun {
  flex-basis: calc((100% / 4.5)) !important;
}

.ship {
  flex-basis: calc((100% / 5));
}

.ship1 {
  flex-basis: calc((100% / 3.4));
  min-width: 300px;
}

.choice-sponsor {
  flex-basis: calc((100% / 4));
}

.choice-frame {
  width: 300px;
  flex-basis: calc(100% / 3.4);
  margin: 0;
  padding: 0;
}

.choice-frame.active {
  background-color: rgb(9, 0, 64, 0.7);
}

.choice-frame-upgrade.active {
  background-color: rgb(177, 59, 255, 0.7) !important;
}

.choice,
.choice-frame-upgrade h3 {
  font-size: 1.67rem;
}

.choice p,
.choice-rigs p,
.choice div,
.choice-rigs div,
.choice-frame-upgrade p,
.choice-frame-upgrade div {
  font-size: 1rem;
}

.choice-cost {
  font-size: 1rem;
  color: rgb(255, 204, 0);
}

.choice:hover,
.choice-frame-upgrade:hover,
.choice-rigs:hover {
  cursor: pointer;
  background-color: rgb(9,
      0,
      64,
      0.7);
  /* A more vibrant blue with transparency for hover */
  transform: translateY(-2px);
}

.choice.active,
.choice-frame-upgrade.active {
  background-color: rgb(9, 0, 64, 0.7);
  /* Consistent active color */
}

.choice img,
.choice-frame-upgrade img,
.choice-rigs img {
  max-width: 100%;
  /* Ensure images don't overflow their parent pseudoChoice */
  height: auto;
  /* Maintain aspect ratio */
  border-radius: 20px;
  /* Added rounded corners to images */
  margin-bottom: 10px;
  /* Space between image and text */
}

h1,
h2,
h3 {
  text-align: center;
  color: #ffffff;
  /* White color for headings */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
  /* Stronger shadow for headings */
}

/* Styles for the ship object container */
.object-div {
  margin: 0px;
  display: flex;
  align-items: center;
  border: 3px solid #336699;
  /* Navy-like border */
  background-color: #224466;
  /* Darker navy background */
  color: #ffffff;
  font-size: 1rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  /* Adjust min-width and height based on the new button size */
  min-width: 250px;
  /* Example: 200px (button) + some padding */
  height: auto;
  /* Let height adjust to content, or set a fixed height that fits 3 buttons + gaps */
  overflow: hidden;
  /* Crucial for pseudo-element transforms */
  clip-path: polygon(0% 50%, 10% 0%, 100% 0%, 100% 100%, 10% 100%);
}

.object-div.active {
  background-color: #336699;
  /* Lighter navy background when active */
}

/* Style for the ship name text */
.ship-name {
  flex-grow: 1;
  /* Allows the ship name to take remaining space */
  text-align: center;
  /* Center the ship name within its available space */
}

/* Container for the chevron buttons */
.ship-actions {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Stack buttons vertically */
  flex-shrink: 0;
  /* Prevent the container from shrinking */
  height: 100%;
  /* Full height of the object-div */
  width: 50px;
  /* Fixed width for the button container */
}

/* Base style for the chevron buttons */
.x-button,
.edit-button,
.blank-button {
  position: relative;
  /* For pseudo-elements */
  height: 100%;
  /* Height of the chevron button */
  width: 100%;
  /* Width of the chevron button */
  background-color: transparent;
  /* Base button background - will be covered by pseudo-elements */
  border: none;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: left;
  clip-path: polygon(0% 50%, 50% 0%, 100% 0%, 50% 50%, 100% 100%, 50% 100%);
  color: white;
  /* This will be the color of the pseudo-elements */
}

/* Specific styles for the X button */
.x-button {
  background-color: rgb(198, 35, 0);
  /* Reddish */
  color: white;
}

.x-button:hover {
  background-color: #f14a00;
  /* Lighter red on hover */
}

/* Specific styles for the Edit button */
.edit-button {
  background-color: white;
  /* Goldish/Yellow */
  color: #333;
}

.edit-button:hover {
  background-color: gainsboro;
}

/* Specific styles for the new blank button */
.blank-button {
  background-color: rgb(255, 204, 0);
  /* Gray */
  color: white;
}

.blank-button:hover {
  background-color: rgb(170, 136, 2);
}

img {
  height: 400px;
  max-width: 300px;
}

body {
  /*make galaxy background image*/
  background-image: url(Images/Other/timBartonSunsetNebulae-artstation.webp);
  /* Replace with your image path */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  font-family: "Roboto";
  font-size: 1rem;
  padding-bottom: 70px;
  /* Add padding to the bottom to prevent content from being hidden behind the fixed point bar */
  scroll-behavior: smooth;
  /*for smooth scrolling*/
}

body b {
  color: rgb(255, 204, 0);
  text-shadow: 0 0 10px rgb(177, 59, 255), 0 0 20px rgb(177, 59, 255),
    0 0 30px rgb(177, 59, 255);
}

.highlighted-bold {
  color: rgb(255, 204, 0);
  text-shadow: 0 0 10px rgb(177, 59, 255), 0 0 20px rgb(177, 59, 255),
    0 0 30px rgb(177, 59, 255);
}

/* This is the container for the pseudoChoice elements */
.pseudoChoice-container {
  display: flex;
  /* Make it a flex container */
  flex-wrap: wrap;
  /* Allow items to wrap to the next line */
  justify-content: center;
  /* Center the items horizontally */
  gap: 20px;
  /* Space between pseudoChoice items */
  padding: 10px;
  max-width: 1200px;
  /* Optional: Set a max-width for the container */
  margin: 0 auto;
  /* Center the container itself */
  flex-direction: row;
}

.pseudoChoice {
  /* No longer a flex container for its children, but a flex item in pseudo-choice-container */
  /* flex-wrap: wrap; - REMOVED, as its parent now handles wrapping */
  /* flex-direction: row; - REMOVED, as its parent now handles wrapping */
  /* align-items: center; - REMOVED, as its parent now handles wrapping */

  /* Calculate width for 4 items per row, considering gap */
  width: calc(23%);
  /* (100% / 4 items) - (3 * gap size / 4 items) */
  min-width: 250px;
  /* Ensure a reasonable minimum width for readability on smaller screens */
  box-sizing: border-box;
  /* Include padding and border in the width calculation */
  padding: 15px;
  /* Added padding for content inside the pseudoChoice */
  text-align: center;
  /* Center text inside */
  border-radius: 8px;
  /* Added rounded corners for aesthetics */

  /* Existing styles for pseudoChoice content */
  border: 3px solid rgb(177, 59, 255);
  border-radius: 15px;
  background-color: rgb(71, 19, 150, 0.4);
  display: flex;
  /* Make pseudoChoice itself a flex container */
  flex-direction: column;
  /* Stack content inside vertically */
  align-items: center;
  /* Center content inside horizontally */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.pseudoChoice div {
  /* This div is now a direct child of pseudoChoice, so it inherits flex properties */
  border: 3px solid rgb(177, 59, 255);
  background-color: rgb(71, 19, 150, 0.4);
  width: 100%;
  /* Make sure this div takes full width inside pseudoChoice */
  border-radius: 15px;
}

.pseudoChoice img {
  max-width: 100%;
  /* Ensure images don't overflow their parent pseudoChoice */
  height: auto;
  /* Maintain aspect ratio */
  border-radius: 8px;
  /* Added rounded corners to images */
  margin-bottom: 10px;
  /* Space between image and text */
}

.pseudoChoice h3,
.pseudoChoice p {
  word-break: break-word;
  /* Forces long words to break and wrap to the next line */
  overflow-wrap: break-word;
  /* Alternative/complementary property for word breaking */
  /*hyphens: auto;  Allows the browser to automatically hyphenate words for better text flow */
}

.image-container {
  display: flex;
  /* Make it a flex container */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  height: auto;
  /* Keep auto height, or set a fixed height if needed */
  flex-direction: column;
  /* Stack children vertically if you want the text below the image */
}

.image-container img {
  /* No specific centering properties needed here if parent is flex */
  max-width: 100%;
  /* Ensure image scales down if larger than container */
  height: auto;
  /* Maintain aspect ratio */
}

.point-bar {
  display: flex;
  position: fixed;
  /* Stays in place relative to the viewport */
  bottom: 0;
  /* Aligns to the bottom of the viewport */
  left: 0;
  /* Aligns to the left of the viewport */
  width: 100%;
  /* Makes it span the full width of the viewport */
  flex-direction: row;
  /* Changed to row to align sections horizontally */
  justify-content: center;
  /* Distributes space evenly */
  align-items: center;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border: 3px solid rgb(71, 19, 150);
  border-radius: 15px;
  background-color: rgb(71, 19, 150);
  z-index: 1000;
  /* Ensures it's on top of other content */
  padding: 10px 0;
  /* Add some vertical padding inside the bar */
  height: 34px;
  /* Give it a fixed height */
  margin: 0;
  gap: 100px;
}

/* for gauge*/
.gauge-container {
  display: flex;
  flex-grow: 1;
  margin-bottom: 10px;
  /* Allow wrapping for responsiveness */
  margin-left: 30px;
  max-width: 300px;
  /* Full width to allow label and cells to align properly */
}

.gauge-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a5568;
  margin-right: 20px;
  max-width: 100%;
  align-self: center;
  /* Center the label vertically */
  flex-shrink: 0;
}

.gauge-cells {
  display: flex;
  align-self: center;
  gap: 1px;
  /* Small gap between cells */
  /* Allow cells to take up remaining space */
  max-width: 100%;
  /* Adjust max-width based on container width */
  border: 2px solid white;
  box-shadow: 0 0 4px 1px rgba(255, 204, 0, 0.7);
  /* Soft yellow glow */
  transition: box-shadow 0.2s ease-in-out;
  /* Smooth transition for glow */
  filter: brightness(0.9);
  /* Slightly dim the glow for a more subtle effect */
}

.gauge-cell {
  width: 18px;
  /* Fixed width for each cell */
  height: 18px;
  /* Fixed height for each cell */
  border: 2px yellow;
  /* Default border color for empty cells */
  border-radius: 2px;
  /* Slightly rounded corners for cells */
  background-color: rgb(241, 241, 241, 0.3);
  /* Default empty color */
}

/* Custom filled colors based on cell index */
.gauge-cell.filled-white {
  background-color: whitesmoke;
  /* White */
}

.gauge-cell.filled-light-purple {
  background-color: rgb(108, 144, 230);
  /* Tailwind purple-400 */
}

.gauge-cell.filled-dark-purple {
  background-color: rgb(197, 124, 239);
  /* Tailwind purple-700 */
}

.gauge-cell.filled-light-red {
  background-color: rgb(239, 119, 120);
  /* Tailwind red-400 */
}

.p-frame {
  font-size: 1rem;
}

ul {
  list-style-type: none;
  margin: 0;
  margin-left: 5px;
  padding: 0;
}

/* Base styles for Federation System (Blue) */
.federation-system {
  border: 3px solid #033669 !important;
  /* Navy-like border */
  background-color: rgba(62, 113, 230, 0.486) !important;
  /* Smooth transition for hover/active states */
}

/* Deeper/darker color when Federation System is clicked */
.federation-system.active {
  border: 3px solid #011e3f !important;
  /* Darker navy */
  background-color: rgba(30, 70, 180, 0.6) !important;
  /* Darker blue */
}

/* Base styles for Blackhawk System (Green) */
.blackhawk-system {
  border: 3px solid #006400 !important;
  /* Dark Green border */
  background-color: rgba(0, 128, 0, 0.486) !important;
  /* Green background */
}

/* Deeper/darker color when Blackhawk System is clicked */
.blackhawk-system.active {
  border: 3px solid #003300 !important;
  /* Even darker green */
  background-color: rgba(0, 80, 0, 0.6) !important;
  /* Darker green */
}

/* Base styles for Talon System (Pink) */
.talon-system {
  border: 3px solid #c71585 !important;
  /* Medium Violet Red border */
  background-color: rgba(255,
      105,
      180,
      0.486) !important;
  /* Hot Pink background */
}

/* Deeper/darker color when Talon System is clicked */
.talon-system.active {
  border: 3px solid #8b0a50 !important;
  /* Darker pink/red */
  background-color: rgba(200, 50, 140, 0.6) !important;
  /* Darker pink */
}

/* Base styles for Red-Dagger Pirates (Red) */
.pirate-system {
  border: 3px solid #8b0000 !important;
  /* Dark Red border */
  background-color: rgba(255, 0, 0, 0.486) !important;
  /* Red background */
}

/* Deeper/darker color when Red-Dagger Pirates is clicked */
.pirate-system.active {
  border: 3px solid #550000 !important;
  /* Even darker red */
  background-color: rgba(200, 0, 0, 0.6) !important;
  /* Darker red */
}

/* Base styles for Independent System (Purple) */
.independent-system {
  border: 3px solid #4b0082 !important;
  /* Indigo border */
  background-color: rgba(128, 0, 128, 0.486) !important;
  /* Purple background */
}

/* Deeper/darker color when Independent System is clicked */
.independent-system.active {
  border: 3px solid #2f0050 !important;
  /* Darker indigo */
  background-color: rgba(80, 0, 80, 0.6) !important;
  /* Darker purple */
}

.luos-system {
  border: 3px solid whitesmoke !important;
  background-color: rgba(185, 166, 166, 0.404) !important;
}

.luos-system.active {
  border: 3px solid white !important;
  background-color: rgba(185, 166, 166, 0.6) !important;
}

/*for rigs*/

.offensive-rigs {
  background-color: rgb(253, 88, 95, 0.4) !important;
  border-color: rgb(141, 69, 73) !important;
}

.offensive-rigs.active {
  background-color: rgb(253, 88, 95, 0.7) !important;
}

.defensive-rigs {
  background-color: rgb(90, 152, 255, 0.4) !important;
  border-color: rgb(40, 81, 199) !important;
}

.defensive-rigs.active {
  background-color: rgb(90, 152, 255, 0.7) !important;
}

.utility-rigs {
  background-color: rgb(244, 255, 82, 0.4) !important;
  border-color: rgb(99, 90, 51) !important;
}

.utility-rigs.active {
  background-color: rgb(244, 255, 82, 0.7) !important;
}

.command-rigs {
  background-color: rgb(114, 255, 84, 0.4) !important;
  border-color: rgb(59, 129, 40) !important;
}

.command-rigs.active {
  background-color: rgb(114, 255, 84, 0.7) !important;
}

.mobility-rigs {
  background-color: rgb(9, 0, 64, 0.4) !important;
  border: 3px solid rgb(177, 59, 255) !important;
}

.mobility-rigs.active {
  background-color: rgb(9, 0, 64, 0.7) !important;
}

/*For Affinities*/
.affinity-table-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 1500px;
  border: 3px solid rgb(177, 59, 255) !important;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgb(71, 19, 150, 0.4) !important;
}

/* Column Header Styling */
.column-header {
  padding: 20px 10px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 2px solid #4f46e5;
  color: #a855f7;
  background-color: #1f2533;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Affinity Card Styling */
.affinity-card {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Container for each group of 3 affinities + a single large image */
.affinity-group {
  display: flex;
  align-items: stretch;
  /* Stretch items to match height */
  gap: 10px;
  padding: 10px;
  background-color: #1f2533;
  border-radius: 6px;
  border: 1px solid #30363d;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.affinity-group-image {
  width: 160px;
  flex-shrink: 0;
  /* Prevents the image from shrinking */
  border-radius: 4px;
  object-fit: cover;
}

.affinity-group-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Styling for a single affinity item within the group */
.affinity-item {
  padding: 5px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hover effect for individual items */
.affinity-item:hover {
  transform: translateY(-3px);
  background-color: #2a3340;
}

/* Selected/Active state for an item */
.affinity-item.active {
  background-color: #0b0d0f;
  /* A darker color for the selected state */
  border-left: 3px solid #818cf8;
  /* Optional highlight for selection */
  padding-left: 2px;
}

.affinity-item h3 {
  margin: 0 0 5px 0;
  font-size: 1rem;
  color: #818cf8;
}

.affinity-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9ca3af;
}

/* Fixed Scroll Button */
.fixed-scroll-button {
  position: fixed;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 1000;
}

.scroll-button {
  width: 60px;
  height: 60px;
  background-color: #a855f7;
  /* WhatsApp green */
  color: white;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.scroll-button:hover {
  background-color: #7e40b8;
  transform: scale(1.1);
}

.scroll-button svg {
  width: 1.56rem;
  height: 1.56rem;
}

/* Modal and main content styling */
.modal-button {
  padding: 1rem 2rem;
  background-color: #9333ea;
  font-weight: 700;
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  transform: scale(1);
  border: none;
  cursor: pointer;
}

.modal-button:hover {
  background-color: #7e22ce;
  transform: scale(1.05);
}

.modal-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.5);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-popup {
  background-color: #2c2c3e;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* for IE and Edge */
  scrollbar-width: none;
  /* for Firefox */
}

.close-button {
  position: absolute;
  top: 0px;
  right: 15px;
  color: #6b7280;
  font-size: 1.67rem;
  font-weight: 700;
  transition: all 0.2s ease;
  transform: rotate(0deg);
  background: none;
  border: none;
  cursor: pointer;
}

.close-button:hover {
  color: #111827;
  transform: rotate(90deg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*for modal popup*/
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Reduced gap */
  max-width: 100%;

}

.card-wrapper {
  background-color: #3b3b4f;
  border: 2px solid #5a5a6b;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.frame-card {
  width: 33%;
  /* Smaller card size */
  max-width: 300px;
  flex-grow: 1;
}

.frame-card .card-image {
  width: 100%;
  /* Smaller image size */
  height: 100%;
  object-fit: cover;
  border-bottom: none;
  border-right: 2px solid #5a5a6b;
  border-radius: 10px;
}

.hull-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Reduced gap */
  flex-grow: 2;
}

.hull-card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 200px;
  /* Smaller card height */
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* for IE and Edge */
  scrollbar-width: none;
  /* for Firefox */
}

.card-image {
  width: 200px;
  height: auto;
  display: block;
  border-bottom: 2px solid #5a5a6b;
}

.hull-card .card-image {
  width: 100%;
  /* Smaller image size */
  height: 100%;
  object-fit: cover;
  border-bottom: none;
  border-right: 2px solid #5a5a6b;
}

.card-content {
  padding: 10px;
  /* Smaller padding */
  display: flex;
  flex-direction: column;

}

.hull-card .card-content {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.card-title {
  text-align: center;
  font-size: 1.2em;
  /* Smaller font size */
  font-weight: bold;
  margin: 0 0 5px 0;
}

.card-subtitle {
  text-align: center;
  font-size: 0.8em;
  /* Smaller font size */
  margin: 0 0 10px 0;
  color: #b0b0b0;
}

.divider {
  height: 2px;
  background-color: #5a5a6b;
  width: 80%;
  margin: 0 auto 10px auto;
}

.details-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  font-size: 0.8em;
}

.details-grid b {
  font-weight: normal;
  color: #9c9c9c;
}

/* Updated styles for the hull card details grid */
.hull-details-grid {
  display: grid;
  grid-template-columns: max-content;
  gap: 5px;
  font-size: 0.8em;
  flex-grow: 1;
  text-wrap: wrap;
}

.hull-details-grid b {
  font-weight: normal;
  color: #9c9c9c;
}

.hull-card .card-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.stat-bar-container {
  display: flex;
  align-items: center;
  margin: 1px;
}

/* New styles for the stat bar cells */
.stat-bar-cells {
  display: flex;
  gap: 2px;
  background-color: #5a5a6b;
  border-radius: 5px;
  padding: 2px;
  margin: 1px;
}

.stat-cell {
  width: 12px;
  /* Smaller cells */
  height: 12px;
  /* Smaller cells */
  background-color: #3b3b4f;
  border-radius: 2px;
  margin: 1px !important;
}

.stat-cell.filled {
  background-color: #6a6afe;
}

.description {
  font-size: 0.8em;
  line-height: 1.4;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #5a5a6b;
}

.hull-card .description {
  margin: 0;
  padding: 0;
  border: none;
}

@media (max-width: 500px) {

  .choice,
  .choice-frame-upgrade,
  .choice-rigs,
  .gun,
  .ship,
  .choice-sponsor,
  .choice-frame,
  .pseudoChoice,
  .choice .ship {
    flex-basis: 90% !important;
    width: 100% !important;
    /* Three items per row on tablets */
  }

  img,
  div {
    width: 100%;
    max-width: 100%;
  }

  .point-bar {
    max-width: 95%;
    gap: 3rem;
  }

  .affinity-group {
    flex-direction: row;
    /* Go back to horizontal layout on larger screens */
  }

  .affinity-group-image {
    width: 160px;
  }

  .modal-popup {
    padding: 20px;
  }

  .hull-card {
    height: 150px;
  }

  /*for chevrons*/
  .object-div,
  .object-div>div {
    min-width: none !important;
    max-width: 50% !important;
  }

  .ship-actions {
    width: 2.7rem !important;
  }

  .choice-frame-image {
    max-width: 67%;
  }

  .fixed-scroll-button,
  .scroll-button {
    width: 3.33rem;
    height: 3.33rem;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
  }

}