body {
    background-color: black;
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

#login-card {
    /* background-color: #333; */
    background: linear-gradient(to bottom, #131528, black); /* Gradient background */
    padding: 2em;
    border-radius: 8px; /* Keep rounded corners */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    border: 2px solid #f6b232; /* Gold border */
    text-align: center;
    width: clamp(300px, 50%, 500px);
    margin: 15vh auto;
    position: relative;
    z-index: 10;
}

#login-card h2 {
    margin-bottom: 0.5em; /* Reduced margin below h2 */
    color: #FFFFFF; /* Keep heading white */
}

/* Style the dev version paragraph */
#login-card p {
    color: #f6b232; /* Gold color */
    font-size: 0.9em;
    margin-bottom: 1.5em; /* Space before form */
}

#login-card label {
    display: block;
    margin-bottom: 0.5em;
    text-align: left;
    color: #f6b232; /* Gold color for labels */
}

#login-card input {
    width: calc(100% - 1.2em);
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #444;
    color: white;
}

#login-card button {
    padding: 0.7em 1.5em;
    background-color: #5c5cff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#login-card button:hover {
    background-color: #4a4ad9;
}

#error-message {
    color: #ff4d4d;
    margin-top: 1em;
    min-height: 1.2em;
}

/* Loading Indicator Styles */
#loading-indicator {
    /* display: none; set by JS initially */
    /* display: flex; set by JS when shown */
    align-items: center;
    justify-content: center; /* Center loader and text */
    margin-top: 10px;
    color: #ccc; /* Loading text color */
}

.login-loader {
    border: 3px solid #555; /* Darker grey base */
    border-top: 3px solid #3498db; /* Blue spinner part */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Top Navigation Panel */
#top-nav {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    /* background-color: #131528; Removed solid color */
    background: linear-gradient(to bottom, #131528, black); /* Gradient to black */
    padding: 1em 2em; /* Keep padding */
    color: #f6b232; /* Default gold text */
    border-bottom: 2px solid #f6b232; /* Gold bottom border */
    text-align: center; /* Center text for inline elements */
}

#logo {
    height: 130px;
    width: auto;
    /* margin-right: 2em; Removed as it's centered */
    margin-bottom: 1em; /* Add space below logo */
    flex-shrink: 0;
}

#nav-content {
    /* flex-grow: 1; Removed */
    /* display: flex; Removed */
    /* flex-direction: column; Removed */
    width: 100%; /* Allow text content to span width for centering */
    text-align: center; /* Explicitly center text content */
}

/* Style description specifically within the nav panel */
#top-nav .description {
    color: #ccc;
    margin-bottom: 1em;
    font-size: 1em;
    text-align: center; /* Ensure centering */
    line-height: 1.4;
    /* Remove specific bold styling if not needed */
    /* color: #f6b232; */
}

/* Remove bold styling if structure changed and <b> is gone */
/* #top-nav .description b { color: #f6b232; } */

/* Style h2 specifically within the nav panel */
#top-nav h2,
#top-nav h1,
body#what-is-it #top-nav h2, /* Add specific rule for whatisit page */
body#upcoming-patch #top-nav h2 /* Add specific rule for patch page */
{
    color: #FFFFFF;
    text-align: center !important; /* Force center alignment */
    margin-top: 0; /* Remove potential default top margin */
    margin-bottom: 0.8em; /* Space below heading */
    font-size: 2em; /* Adjust size as needed */
}

.nav-links {
    /* margin-top: auto; Removed */
    text-align: center; /* Center the links container */
}

.nav-links a {
    color: #f6b232;
    text-decoration: none;
    margin: 0 0.75em; /* Add horizontal margin around links */
    font-size: 0.9em;
    transition: color 0.2s ease;
    display: inline-block; /* Ensure margins apply correctly */
}

.nav-links a:hover,
.nav-links a:focus {
    color: #d49d57; /* Desaturated copper glow */
    text-decoration: underline;
}

#content {
    padding: 2em;
    max-width: 900px;
    margin: 2em auto;
    text-align: center;
}

#content h1 {
    color: #FFDE9E;
    margin-bottom: 0.5em;
}

#content .description {
    color: #ccc;
    margin-bottom: 2em;
    font-size: 1.1em;
    text-align: center;
}

#content h2 {
    color: #eee;
    margin-bottom: 1em;
    border-bottom: 1px solid #555;
    padding-bottom: 0.3em;
    text-align: left;
    margin-top: 0.1em; /* Added margin to push down from nav */
}

/* Center the specific challenge heading on index.html */
#challenge-heading {
    text-align: center !important;
    border-bottom: none; /* Optionally remove the border if desired for centered text */
}

.difficulty-list {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.difficulty-item {
    display: flex;
    gap: 1.5em;
    /* background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 40%), #181818; Removed previous background */
    background: linear-gradient(to bottom, #222, #111); /* New gradient background */
    padding: 1.5em;
    border-radius: 10px; /* Updated border-radius */
    text-align: left;
    align-items: center;
    position: relative; /* Keep relative positioning */
    overflow: hidden; /* Keep overflow hidden */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); /* Updated box-shadow */
    z-index: 1; /* Ensure stacking context */
}

/* Remove the previous difficulty-specific box-shadow rules */
/* .difficulty-item.easy { box-shadow: ... } */
/* .difficulty-item.medium { box-shadow: ... } */
/* .difficulty-item.hard { box-shadow: ... } */
/* .difficulty-item.expert { box-shadow: ... } */
/* .difficulty-item.uber { box-shadow: ... } */

/* Base style for the bottom glow pseudo-element */
.difficulty-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Glow width */
    height: 20px; /* Glow height */
    opacity: 0.6;
    filter: blur(10px);
    pointer-events: none; /* Prevent interaction */
    z-index: -1; /* Place behind content */
}

/* Difficulty-specific glow colors using ::after */
.difficulty-item.easy::after { 
    /* background: radial-gradient(circle, ##4da6ff 0%, transparent 70%); */
    background: linear-gradient(to top, #4da6ff, transparent);
}
.difficulty-item.medium::after { 
    /* background: radial-gradient(circle, #ffeb3b 0%, transparent 70%); */
    background: linear-gradient(to top, #ffeb3b, transparent);
}
.difficulty-item.hard::after { 
    /* background: radial-gradient(circle, #ff9800 0%, transparent 70%); */
    background: linear-gradient(to top, #ff9800, transparent);
}
.difficulty-item.expert::after { 
    /* background: radial-gradient(circle, #f44336 0%, transparent 70%); */
    background: linear-gradient(to top, #f44336, transparent);
}
.difficulty-item.uber::after { 
    /* background: radial-gradient(circle, #730000 0%, transparent 70%); */
    background: linear-gradient(to top, #1b0000, transparent);
}

.difficulty-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.difficulty-text h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    color: #FFDE9E;
}

.difficulty-text p {
    margin-bottom: 0.5em;
    color: #ddd;
}

.difficulty-text ol {
    list-style-type: lower-alpha;
    padding-left: 0;
    margin-top: 0.5em;
}

.difficulty-text li {
    font-style: italic;
    color: #bbb;
    background-color: #222;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    display: list-item;
    margin-top: 0.3em;
    margin-left: 0;
}

/* Style for the 'What is it?' link */
.what-is-it-link {
    font-size: 0.6em; /* Smaller font size */
    vertical-align: super; /* Align slightly above baseline */
    color: #aaa; /* Lighter grey color */
    text-decoration: none; /* No underline */
    border: 1px solid #666;
    border-radius: 50%; /* Make it circular */
    padding: 0.1em 0.4em;
    margin-left: 0.3em;
    transition: all 0.2s ease;
}

.what-is-it-link:hover,
.what-is-it-link:focus {
    color: #fff; /* White on hover */
    background-color: #555;
    text-decoration: none;
    border-color: #888;
}

/* Styles moved from whatisit.html */
/* Add a little extra spacing for the back link */
.back-link {
    display: inline-block;
    margin-top: 2em;
    padding: 0.5em 1em;
    background-color: #444;
    color: #eee;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.back-link:hover {
    background-color: #555;
}

/* Style the list items specifically on the whatisit page */
/* Using a more specific selector to avoid potential conflicts */
body#what-is-it #content ul {
    list-style: none;
    padding-left: 0;
}
body#what-is-it #content li {
    text-align: left;
    background-color: #333;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
    border-left: 3px solid #FFDE9E;
}

/* Adjust description alignment and width on whatisit page */
body#what-is-it .description {
    text-align: left; /* Align text to the left */
    max-width: 800px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
}

/* Ensure headings are left-aligned on whatisit page */
body#what-is-it h1,
body#what-is-it h2,
body#what-is-it h3 {
    text-align: center;
}

/* Style for the patch notes link container */
.patch-notes-link-container {
    text-align: center;
    margin-top: 3em; /* Add some space above the link */
}

/* Style for the patch notes link itself */
.patch-notes-link {
    color: #eee; /* Brighter color for better visibility */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.patch-notes-link:hover,
.patch-notes-link:focus {
    color: #ddd;
}

/* Styles moved from upcoming-patch.html */
#upcoming-patch #content h1 {
    text-align: left;
    border-bottom: 1px solid #555;
    padding-bottom: 0.3em;
    margin-top: 1.5em; /* Add top margin */
}
#upcoming-patch #content h2 {
    margin-top: 2em;
    text-align: left;
}
#upcoming-patch .patch-section {
    margin-bottom: 2em;
    padding-left: 1em; /* Indent sections slightly */
}
#upcoming-patch .patch-item {
    margin-bottom: 1.5em;
}
#upcoming-patch .patch-item h3 {
    margin-bottom: 0.5em;
    color: #eee;
    text-align: left; /* Override center alignment */
}
#upcoming-patch .patch-item ul {
    list-style-type: disc;
    padding-left: 2em;
    margin-top: 0.5em;
    text-align: left; /* Override center alignment */
}
#upcoming-patch .patch-item li {
    margin-bottom: 0.3em;
    color: #ccc;
}
#upcoming-patch .implemented-tag {
    color: #4CAF50; /* Green color */
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 0.5em;
}
#upcoming-patch .footer-notes {
    margin-top: 3em;
    text-align: center;
    color: #aaa;
    font-size: 0.9em;
}
#upcoming-patch .footer-notes a {
    color: #8af;
    text-decoration: none;
}
#upcoming-patch .footer-notes a:hover {
    text-decoration: underline;
}
/* Remove centered back link style */
/* #upcoming-patch .back-link { ... } */

/* Witness Link Item Styling (index.html) */
.witness-link-item {
    display: block;
    cursor: pointer;
    margin-bottom: 0.5em;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    position: relative;
    list-style-type: none;
}

/* Style for the table inside the list item */
.witness-link-item table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Helps with fixed width columns */
    border-radius: 4px; /* Apply rounding to the table */
    overflow: hidden;   /* Clip cell backgrounds to rounded corners */
}

/* Style for the name cell */
.witness-name-cell {
    width: 130px;
    background-color: #222; /* Darker background */
    padding: 0.6em 1em;
    vertical-align: middle;
    text-align: center;
}

/* Style for the description cell */
.witness-description-cell {
    width: auto;
    background-color: #222;   /* Slightly lighter dark background */
    padding: 0.6em 1em;
    vertical-align: middle;
}

.witness-link-item:hover {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7); /* White glow */
    transform: translateY(-2px); /* Slight lift effect */
}

.witness-name {
    /* No width/margin needed here, handled by td */
    font-style: normal;
    font-weight: bold;
    white-space: normal;
    display: inline-block; /* Ensure span behaves correctly within td */
}

.witness-description {
    font-style: italic;
    color: #bbb;
    text-align: left;
    display: inline-block; /* Ensure span behaves correctly within td */
}

/* Difficulty-based colors for witness names */
.difficulty-item.easy .witness-name {
    color: #4da6ff; /* Easy baby blue */
}
.difficulty-item.medium .witness-name {
    color: #ffeb3b; /* Medium yellow */
}
.difficulty-item.hard .witness-name {
    color: #ff9800; /* Hard orange */
}
.difficulty-item.expert .witness-name {
    color: #f44336; /* Expert red */
}
.difficulty-item.uber .witness-name {
    color: #3b0000; /* Brighter red for Uber, as #3b0000 is too dark */
}

/* Remove hyperlink styles from witness items (now redundant but good cleanup) */
.difficulty-text li a {
    color: inherit; /* Inherit color from parent li */
    text-decoration: none; /* Remove underline */
    font-style: normal; /* Remove specific link font style */
}

.difficulty-text li a:hover,
.difficulty-text li a:focus {
    color: inherit; /* Keep inherited color on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Adjustments for non-clickable list items */
.difficulty-text ol li:not(.witness-link-item) {
    font-style: italic;
    color: #888; /* Dimmer color for non-links */
    background-color: #2a2a2a; /* Match witness description cell background */
    padding: 0.6em 1em;    /* Match witness item padding */
    margin-bottom: 0.5em;  /* Match witness item margin */
    border-radius: 4px;     /* Match witness item radius */
    display: block;        /* Ensure block display for consistent box model */
    list-style-type: none; /* Ensure no list bullet */
    cursor: default;       /* Explicitly non-interactive */
}

/* Adjust content margin/padding for pages with the new nav */
#what-is-it #content,
#upcoming-patch #content {
    margin-top: 1em; 
}