/* Common styles for all section containers */
.market-container,
.fight-container,
.friends-container,
.tasks-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    min-height: 400px; /* Minimum height to ensure content visibility */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Enable scrolling if content exceeds container height */
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE, Edge */
    -ms-overflow-style: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.market-container::-webkit-scrollbar,
.fight-container::-webkit-scrollbar,
.friends-container::-webkit-scrollbar,
.tasks-container::-webkit-scrollbar,
.hub-container::-webkit-scrollbar,
.market-item-grid::-webkit-scrollbar { /* Target market grid specifically for Webkit */
  display: none;
}

/* Specific styles for each container if needed */
.hub-container {
    position: absolute;
    top: 35px; /* Explicit top position */
    left: 50%;
    transform: translateX(-50%); /* Only horizontal centering */
    width: 100%;
    max-width: 600px;
    min-height: 400px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE, Edge */
    -ms-overflow-style: none;
}

.market-container {
    /* Add specific styles for MARKET container */
}

.fight-container {
    /* Add specific styles for FIGHT container */
}

.friends-container {
    /* Add specific styles for FRIENDS container */
}

.tasks-container {
    /* Add specific styles for TASKS container */
}

/* Since the market's scrolling element (.market-item-grid) is styled in another file,
   we add rules here to hide its scrollbar as well for Firefox/Edge. */
.market-item-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Styles for the GALAXY container and its iframe */
.galaxy-container {
    /* Inherits common section styles, ensure it stretches if needed */
    /* Position, transform, width, max-width, padding, box-sizing are common */
    /* We want the iframe to define the height mostly, but set a min-height */
    min-height: 90vh; /* Or a fixed pixel value like 600px, adjust as needed */
    display: flex; /* To help center iframe if it doesn't fill */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide scrollbars if iframe is exact size */
    background-color: transparent; /* Ensure no conflicting background */
    position: absolute; /* Ensure it behaves like other sections */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Take full width of parent constraint */
    max-width: 100%; /* Override max-width if you want it fullscreen-like */
    height: 100%; /* Take full height of parent constraint */
    padding: 0; /* Remove padding if iframe is meant to be edge-to-edge */
    box-sizing: border-box;
}

.galaxy-container iframe#galaxy-iframe {
    width: 100%;
    height: 100%;
    border: none; /* Ensure no iframe border if frameborder="0" isn't enough */
    display: block; /* Removes potential extra space below iframe */
}