body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
    font-family: 'Arial', sans-serif;
}

/*
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
*/

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#input-form {
    width: 300px;
    height: 20px;
    font-size: 20px;
    /* padding: 10px; */
    left: 300px;
    bottom: 0px;
    position: absolute;
    /* z-index: 1; */
    opacity: .7;
    visibility: visible;
}

#twitch-container {
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    border-width: 0;
}

#twitch-player {
    margin: 0 auto;
    margin-top: .5%;
    display: block;
    width: 66%;
    height: 78%;
    visibility: hidden;
    border-width: 0;
}

#input-form {
    /* position: absolute;
    z-index: 0;
    bottom: 0%;
    right: 1%;
    width: 30%;
    height: 37%; */
    visibility: hidden;
}

#twitch-chat {
    position: absolute;
    z-index: 0;
    bottom: 0%;
    right: 0%;
    width: 16.666%;
    height: 45%;
    visibility: hidden;
    overflow: scroll;
    border-width: 0;
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 50%);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 50%);
}

#twitch-chat:hover {
    z-index: 2;
    height: 100%;
    width: 25%;
    -webkit-mask: none;
    mask: none;
}

#game-container canvas {
    /* border: 2px solid #00ff00; */
    /* Green border */
}

/* Leaderboard Styles */
#leaderboard-container,
#info-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Use dimensions similar to ParameterSelect panel */
    width: 750px; /* Slightly wider to accommodate padding/decorations */
    height: 800px; /* Adjusted height */
    max-height: none; /* Remove max-height if using fixed height */
    min-height: auto; /* Remove min-height if using fixed height */
    overflow: hidden;
    /* background-color: rgba(0, 0, 0, 0.85); Remove background color */
    color: white;
    padding: 0; /* Remove padding, handled by content positioning */
    border-radius: 10px;
    font-family: 'Geometos Soft', Arial, sans-serif; /* Default font */
    /* border: 2px solid #8C5FFF; Remove border, rely on images */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.5); */
    z-index: 100;
    display: none;
    /* flex-direction: column; Not needed with absolute positioning */
}

/* Background Image Styling */
#leaderboard-fond,
#leaderboard-deco1,
#leaderboard-deco2,
#ino-fond,
#info-deco1,
#info-deco2
 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Make images non-interactive */
}

#leaderboard-fond,
#info-fond {
    width: 708px; /* Match ParameterSelect */
    height: 725px; /* Match ParameterSelect */
    z-index: 101;
}

#leaderboard-deco1,
#leaderboard-deco2,
#info-deco1,
#info-deco2,
 {
    width: calc(708px + 30px); /* Match ParameterSelect */
    height: calc(725px + 30px); /* Match ParameterSelect */
    margin-top: 17px;
    /* Adjust z-index based on desired layering (deco1 outer, deco2 middle) */
    z-index: 100; /* Example: deco1 behind deco2 */
}

/* Title Banner Styling */
#leaderboard-title-banner,
#info-title-banner {
    position: absolute;
    top: 15px; /* Position near top */
    left: 50%;
    transform: translateX(-50%);
    width: 298.3px; /* Match ParameterSelect */
    height: 55.6px; /* Match ParameterSelect */
    z-index: 103;
    pointer-events: none;
}

#leaderboard-title,
#info-title {
    position: absolute;
    top: 35px; /* Adjusted to overlay banner correctly */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Fit content */
    text-align: center;
    margin: 0;
    font-family: 'Geometos Soft', Arial, sans-serif; /* Specific font */
    font-size: 25px; /* Match ParameterSelect */
    font-weight: 800; /* Match ParameterSelect */
    color: #000000; /* Match ParameterSelect */
    z-index: 104; /* Above banner */
}

/* Close Button Styling */
#leaderboard-close-button,
#info-close-button {
    position: absolute;
    top: 50px; /* Adjust relative to container top */
    right: 50px; /* Adjust relative to container right edge */
    font-size: 28px; /* Slightly larger */
    font-weight: bold;
    color: #d8d8d8; /* Darker color to fit theme */
    cursor: pointer;
    line-height: 1;
    z-index: 105; /* Highest */
}
#leaderboard-close-button:hover, 
#info-close-button:hover {
    color: #929292; /* Black on hover */
}


/* Tab Container Styling */
#leaderboard-tabs {
    position: absolute;
    top: 75px; /* Position below title banner */
    left: 30px; /* Indent from left edge */
    right: 30px; /* Indent from right edge */
    display: flex;
    border-bottom: 1px solid #6A67A8; /* Match theme color */
    width: calc(100% - 60px); /* Adjust width based on indent */
    z-index: 103;
}

.leaderboard-tab {
    flex-grow: 1;
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #6A67A8; /* Match theme color */
    font-family: 'Geometos Soft', Arial, sans-serif; /* Font */
    font-size: 16px;
    font-weight: 600; /* Bolder */
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.leaderboard-tab:hover {
    color: #B8B2E5; /* Lighter theme color on hover */
}

.leaderboard-tab.active {
    color: #B8B2E5; /* Lighter theme color for active */
    border-bottom-color: #B8B2E5;
}

/* Tab Content Panes Styling */
.leaderboard-tab-pane {
    display: none;
    position: absolute;
    top: 145px; /* Position below tabs */
    left: 30px; /* Indent */
    right: 30px; /* Indent */
    bottom: 30px; /* Bottom padding */
    overflow-y: auto;
    /* max-height removed, using absolute positioning */
    /* background-color: rgba(255, 255, 255, 0.1); /* Optional subtle background for content */
    z-index: 102; /* Below tabs, above background */
    border-radius: 5px; /* Optional rounding */
    padding: 15px; /* Padding inside the content area */
    font-family: 'Geometos Soft', Arial, sans-serif; /* Ensure font */
}

.leaderboard-tab-pane.active {
    display: block;
}

/* Inner Content Div Styling */
#leaderboard-content,
#rewards-tab-content {
    padding: 0; /* Remove padding, handled by parent pane */
    text-align: inherit; /* Inherit text alignment */
    font-family: inherit; /* Inherit font */
}

#leaderboard-content table,
#leaderboard-content p,
#leaderboard-content h3,
#rewards-tab-content h4,
#rewards-tab-content p {
    font-family: inherit; /* Ensure font propagates */
}

/* Adjust specific content styles */
#rewards-tab-content h4 {
    color: #636268; /* Match theme */
    font-size: 15px;
    margin-bottom: 20px;
}

#rewards-tab-content p {
    font-size: 20px;
    color: #ddd;
    display: flex; /* Use Flexbox */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Push items to ends */
    margin-bottom: 25px; /* Increased spacing */
    padding: 0 10px; /* Add some horizontal padding */
}

/* Style for the "No Reward" span */
/*
#rewards-tab-content p > span:last-child {
    font-style: italic;
    color: #aaa;
    display: inline-block; 
    text-align: right;
}
*/

/* Ensure image alignment works */
#rewards-tab-content .leaderboard-reward {
    height: 150px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

#leaderboard-content hr {
    border-color: #6A67A8; /* Match theme */
}

/* Ensure table headers/cells inherit font */
#leaderboard-content th,
#leaderboard-content td {
    font-family: inherit;
    padding: 4px 0; /* Adjust padding */
}


/* Sorting indicators - adjust colors if needed */
#leaderboard-content th[data-sort-key]::after {
    /* Color might need adjustment */
}

#leaderboard-content th.sort-asc::after {
     /* Color might need adjustment */
}

#leaderboard-content th.sort-desc::after {
     /* Color might need adjustment */
}

/* Reward images - general - ensure height is consistent if needed */
.leaderboard-reward {
   vertical-align: middle;
   /* height/width likely set by specific context rules now */
}

/* Ensure flex styling is removed or adjusted if not needed */
#leaderboard-content p {
    display: block; /* Revert from flex if causing issues */
    text-align: center; /* Rely on text-align */
}

#leaderboard-content h3 {
     display: block; /* Revert from flex */
     text-align: center;
}

/* Share Button Styling */
.share-button {
    padding: 8px 15px; /* Adjusted padding */
    font-family: 'Geometos Soft', Arial, sans-serif;
    /* transform: translateX(-50%); Remove transform if positioning is handled by parent */
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    background-color: #B8B2E5; /* Match active tab color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    /* bottom: 0px; Remove absolute positioning if inside div */
    /* position: absolute; Remove absolute positioning */
    display: inline-flex; /* Use inline-flex for layout */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    gap: 6px; /* Space between text and logo */
}

.share-button .x-logo-svg {
    width: 16px; /* Adjust size as needed */
    height: 16px;
    fill: currentColor; /* Inherit color (black) */
}

.share-button:hover {
    background-color: #9f99cc; /* Darker shade on hover */
}

.share-button:disabled {
    background-color: #777; /* Grey out when disabled */
    cursor: not-allowed;
    opacity: 0.6;
}

.share-button:disabled:hover {
    background-color: #777; /* Keep color same on hover when disabled */
}

/* Rewards Tab Specific Styles */
#rewards-tab-content {
    padding: 20px;
    text-align: center;
    /* display: flex; Moved to inner wrapper */
    /* flex-direction: column; Moved to inner wrapper */
    /* justify-content: space-around; Moved to inner wrapper */
}

/* Inner wrapper for Rewards content flex layout */
.rewards-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distribute space vertically */
    align-items: center; /* Center items horizontally */
    height: 80%; /* Try to fill parent pane height */
}

#rewards-tab-content h4.rewards-subtitle {
    color: #B8B2E5; /* Match theme */
    font-size: 16px; /* Slightly smaller */
    font-weight: normal;
    margin-bottom: 30px; /* More space below */
}

.rewards-horizontal-container {
    display: flex;
    justify-content: space-around; /* Distribute sections horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%;
    margin-top: 20px; /* Space from header */
    flex-grow: 1; /* Allow container to take space */
}

.reward-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 30%; /* Approx width for each section */
}

.reward-placeholder {
    height: 150px; /* Increased image height */
    width: 150px; /* Placeholder width */
    /* border: 1px dashed #555; /* Optional: visualize placeholder */
    margin-bottom: 10px; /* Space below placeholder */
}

#rewards-tab-content .leaderboard-reward {
    height: 200px; /* Increased image height */
    margin-bottom: 10px; /* Space below image */
    /* margin-left: 0; /* Remove left margin */
    flex-shrink: 0;
}

.reward-score {
    font-size: 16px;
    color: #eee;
    margin: 5px 0 2px 0; /* Adjust vertical margin */
}

.reward-rank {
    font-size: 14px;
    color: #aaa;
    font-style: italic;
    margin: 0;
}

/* Remove old p styling */
/*
#rewards-tab-content p {
    font-size: 20px;
    color: #ddd;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 25px; 
    padding: 0 10px; 
}
*/

/* Remove old span styling */
/*
#rewards-tab-content p > span:last-child {
    font-style: italic;
    color: #aaa;
    display: inline-block; 
    text-align: right;
}
*/


/* Sorting indicators for leaderboard headers */
#leaderboard-content th[data-sort-key] {
    cursor: pointer;
}

.reward-image-clickable {
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
    border: 3px solid transparent; /* Placeholder for selection border */
    border-radius: 5px; /* Match border */
    opacity: 0.8; /* Slightly dim unselected */
}

.reward-image-clickable:hover {
    opacity: 1.0;
    transform: scale(1.05);
}

.reward-image-clickable.selected {
    border-color: #B8B2E5; /* Use a theme color for selection */
    box-shadow: 0 0 15px rgba(184, 178, 229, 0.7); /* Glow effect */
    opacity: 1.0;
    transform: scale(1.05);
}