/* --- 0. RESET & FOUNDATION --- */
* {
    box-sizing: border-box; /* Ensures padding doesn't add to width */
}

/* --- 1. GLOBAL COLORS --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #121212 !important; 
    color: white !important;
    font-family: sans-serif;
    overflow-x: hidden; /* Prevents horizontal page shake */
}

/* --- 2. THE BLACK HEADER --- */
header {
    background-color: #000000 !important;
    width: 100%;
    padding: 30px 15px; /* Tighter padding for mobile */
    text-align: center;
    border-bottom: 1px solid #222;
}

h1 {
    color: #FFCC00 !important;
    /* Scales between 2rem and 3.5rem based on screen size */
    font-size: clamp(2rem, 8vw, 3.5rem); 
    margin: 0 0 20px 0;
    letter-spacing: 2px;
}

/* --- 3. INPUTS & BUTTONS --- */
.controls {
    display: flex;
    flex-wrap: wrap;       /* Allows elements to stack on small screens */
    justify-content: center;
    align-items: flex-end; /* Aligns button with the input box */
    gap: 15px;
    margin-bottom: 10px;
    width: 100%;
    padding: 0 10px;
}

.input-group {
    flex: 1 1 200px;       /* Allows box to shrink on mobile */
    max-width: 400px;
}

.input-group label {
    display: block;
    text-align: left;
    color: #AAAAAA;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

input {
    background: #2A2A2A;
    border: 1px solid #444;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.1rem;
    width: 100%;           /* Ensures input fills the group */
}

button {
    background-color: #FFCC00 !important;
    color: black !important;
    border: none;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.1s;
    white-space: nowrap;   /* Prevents button text from breaking */
}

button:hover {
    background-color: #E6B800 !important;
}

/* --- 4. STATUS TEXT --- */
#metadata-info {
    color: #00FFCC !important;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;      /* Slightly smaller for mobile utility */
    margin-top: 15px;
    padding: 0 15px;
}

/* --- 5. THE TIMELINE SWIPE & COLLECTION GRID --- */

.card-tray {
    display: flex;
    flex-wrap: nowrap;       
    overflow-x: auto;        
    gap: 20px;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch; 
}

#collection-container {
    display: flex;
    flex-wrap: wrap;         
    gap: 20px;
    justify-content: center; /* Centered looks better on varied mobile widths */
}

.card-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.card-item {
    flex: 0 0 220px;         /* INCREASED from 160px to make cards bigger */
    background: #1e1e1e;
    padding: 12px;           /* Slightly expanded padding to match bigger cards */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.card-info {
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Anchors the price to the bottom */
    flex-grow: 1;              /* Allows info block to fill remaining vertical space */
}

.card-name {
    /* Magic trick for handling long string names predictably */
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* Allows exactly 2 lines before adding an ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;             /* Overrides your previous 'nowrap' */
    
    font-size: 0.95rem;              /* INCREASED from 0.8rem */
    color: #e0e0e0;
    line-height: 1.2;
    min-height: 2.4em;               /* Hard-reserves space for 2 lines so short names stay aligned */
    margin-bottom: 6px;
}

.card-price {
    display: block;
    font-weight: bold;
    color: #00FFCC;
    font-size: 1.1rem;               /* INCREASED from 0.9rem */
}
/* --- 6. MAIN CONTENT AREA --- */
main {
    background-color: #121212;
    min-height: 500px;
    padding: 20px 10px;    /* Reduced padding to fit phone screens */
    width: 100%;
}

.hour-block {
    margin-bottom: 40px;
}

.hour-title {
    color: #FFCC00;
    font-size: 1.5rem;      /* Sized down for mobile */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.status-msg {
    color: #00FFCC;
    font-family: monospace;
}

#collection-container p, 
#timeline-container p {
    font-size: 1.5rem;
    color: white;
    margin-top: 40px;
    text-align: center;    /* Center the "empty" text for mobile */
}

.card-tray::-webkit-scrollbar {
    display: none;
}
.card-tray {
    scrollbar-width: none;
}

/* --- 2.5 NAVIGATION MENU --- */
.nav-menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* Keeps it tidy on phone screens */
}

.nav-item {
    color: #AAAAAA; /* Grayed out for non-active links */
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.nav-item:hover {
    color: #FFCC00; /* Glows yellow on hover */
}

/* The "Current Page" style */
span.nav-item.active {
    color: #FFCC00 !important; /* Branded Yellow */
    text-decoration: underline;
    text-underline-offset: 8px; /* Adds some breathing room under the line */
    cursor: default;
}