/* Konata / Revvyx Color Palette: Deep blue (hair), Red/White/Yellow (Uniform) */
body {
    background-color: #000c1f; /* Dark blue */
    color: #99ccff;
    font-family: "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;
    background-image: radial-gradient(#002244 1px, transparent 0);
    background-size: 15px 15px;
    margin: 0;
    padding: 20px;
}

#container {
    width: 800px;
    margin: 0 auto;
    border: 4px ridge #4d79ff;
    background-color: #001133;
    padding: 15px;
    box-shadow: 0 0 15px #0033cc;
}

header {
    text-align: center;
    border-bottom: 3px dashed #ffcc00;
    padding-bottom: 10px;
}

h1 {
    color: #ffffff;
    text-shadow: 2px 2px #cc0000, 4px 4px #0033cc;
    font-size: 28px;
    margin: 5px 0;
}

.subtitle {
    color: #ffcc00;
    font-size: 12px;
}

marquee {
    background-color: #cc0000;
    color: #ffffff;
    font-weight: bold;
    padding: 5px;
    border: 2px inset #ffffff;
}

.layout {
    display: flex;
    margin-top: 15px;
    gap: 15px;
}

sidebar {
    width: 220px;
    border: 2px groove #4d79ff;
    padding: 10px;
    background-color: #001a4d;
}

main {
    flex: 1;
    border: 2px groove #ffcc00;
    padding: 15px;
    background-color: #000c1f;
}

.box-title {
    background-color: #ffcc00;
    color: #000000;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    margin-top: 0;
}

.status-text {
    font-size: 12px;
    color: #ffffff;
}

.divider {
    border-color: #4d79ff;
}

.rules-list {
    font-size: 11px;
    padding-left: 15px;
    color: #ffffff;
}

.badge-container {
    text-align: center;
    margin-top: 15px;
}

.badge {
    display: inline-block;
    border: 2px outset #ffffff;
    color: white;
    font-size: 10px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 3px;
    margin: 2px;
}

.section-header {
    color: #ffcc00;
    font-size: 18px;
    text-decoration: underline;
}

/* Forms (Music & Guestbook) */
form, #comment-form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    color: #ffcc00;
    font-size: 14px;
}

input[type="text"], input[type="email"], input[type="url"], textarea, select {
    background-color: #001a4d;
    border: 2px inset #4d79ff;
    color: #ffffff;
    font-family: "Courier New", monospace;
    padding: 5px;
    width: 95%;
}

input[type="submit"], #postBtn {
    background-color: #cc0000;
    color: #ffffff;
    font-family: "Comic Sans MS", cursive;
    font-size: 16px;
    font-weight: bold;
    border: 3px outset #ffffff;
    cursor: pointer;
    padding: 5px;
    margin-top: 10px;
    width: 97%;
}

input[type="submit"]:hover, #postBtn:hover {
    background-color: #ffcc00;
    color: #000000;
}

/* Music Feed Styles */
.track-card {
    background-color: #001a4d;
    border: 2px dashed #4d79ff;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 2px 2px 0px #ffcc00;
}

.track-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #cc0000;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.track-title {
    color: #ffcc00;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.track-artist {
    color: #99ccff;
    font-size: 14px;
}

.track-genre {
    background: #cc0000;
    color: #fff;
    padding: 2px 6px;
    font-size: 10px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

.track-notes {
    color: #ffffff;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 10px;
}

.embed-container {
    margin-top: 10px;
    background: #000;
    border: 1px solid #4d79ff;
}

/* Comments Section Styling */
#comments {
    margin-top: 15px;
}

.comment {
    background-color: #001a4d;
    border: 1px solid #4d79ff;
    padding: 10px;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.comment img {
    border: 1px solid #ffcc00;
}

.comment b {
    color: #ffcc00;
    font-size: 14px;
}

.comment button {
    background-color: #4d79ff;
    color: #fff;
    border: 2px outset #ffffff;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-weight: bold;
    font-size: 10px;
}

.comment button:hover {
    background-color: #ffcc00;
    color: #000;
}

/* Footer */
footer {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #ffcc00;
    padding-top: 10px;
    color: #99ccff;
}

.hit-counter {
    background: #000;
    color: #ffcc00;
    font-family: "Courier New", monospace;
    border: 2px inset #888;
    padding: 2px 6px;
    font-weight: bold;
}

.footer-links a {
    color: #ffcc00;
}


.track-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    font-family: "Courier New", monospace;
}

.action-btn {
    background-color: #001133;
    color: #99ccff;
    border: 1px solid #4d79ff;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
}

.action-btn:hover {
    background-color: #4d79ff;
    color: #ffffff;
}

.delete-btn {
    background-color: #330000;
    color: #ff9999;
    border: 1px solid #cc0000;
    margin-left: auto; /* Pushes the delete button to the far right */
}

.delete-btn:hover {
    background-color: #cc0000;
    color: #ffffff;
}

#container {
    width: 1050px; /* Expanded from 800px to fit the right leaderboard sidebar */
    margin: 0 auto;
    border: 4px ridge #4d79ff;
    background-color: #001133;
    padding: 15px;
    box-shadow: 0 0 15px #0033cc;
}

.layout {
    display: flex;
    margin-top: 15px;
    gap: 15px;
}

/* Updated sidebars */
.side-panel {
    width: 220px;
    border: 2px groove #4d79ff;
    padding: 10px;
    background-color: #001a4d;
}

.right-sidebar {
    border-color: #00ff00; /* Distinct color for the leaderboard sidebar */
}

/* Leaderboard Styles */
.leaderboard-list {
    padding-left: 20px;
    margin: 10px 0;
    font-size: 12px;
    color: #99ccff;
}

.leaderboard-list li {
    margin-bottom: 8px;
    font-family: "Courier New", monospace;
    border-bottom: 1px dashed #4d79ff;
    padding-bottom: 4px;
}

.lb-score {
    color: #ffcc00;
    font-weight: bold;
    float: right;
}

/* ELO Voting Buttons */
.elo-rating-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    background: #000c1f;
    padding: 8px;
    border: 1px dashed #ffcc00;
}

.elo-btn {
    background-color: #001133;
    color: #fff;
    border: 2px outset #4d79ff;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: "Courier New", monospace;
}

.elo-btn:hover {
    background-color: #ffcc00;
    color: #000;
    border-color: #fff;
}
.tab-container {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ffcc00;
}

.tab-btn {
    background-color: #001a4d;
    color: #99ccff;
    border: 2px outset #4d79ff;
    border-bottom: none;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Comic Sans MS", cursive;
}

.tab-btn:hover {
    background-color: #4d79ff;
    color: #fff;
}

.active-tab {
    background-color: #ffcc00;
    color: #000;
    border-color: #ffcc00;
}

/* Hall of Fame List */
.hof-card {
    background-color: #001a4d;
    border: 2px dashed #4d79ff;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.hof-card:hover {
    background-color: #0033cc;
    border-color: #ffcc00;
    transform: scale(1.02);
}

.hof-name {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.hof-elo {
    background: #00ff00;
    color: #000;
    padding: 4px 10px;
    font-family: "Courier New", monospace;
    font-weight: bold;
    border: 2px solid #fff;
}

/* Modal Track Details */
.modal-track-row {
    background: #000c1f;
    border: 1px solid #4d79ff;
    padding: 10px;
    margin-bottom: 10px;
    font-family: "Courier New", monospace;
}
.modal-track-title {
    color: #ffcc00;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 5px 0;
}
.modal-track-stats {
    color: #99ccff;
    font-size: 12px;
}