:root {
    --lower-decks-red: #ff3500;
    --lower-decks-gold: #ffaa44;
    --lower-decks-blue: #5588ee;
    --lower-decks-light-blue: #88eeff;
    --lower-decks-dark: #1a1a2e;
    --lower-decks-bg: #000000;
    --lower-decks-text: #f3f3fc;
    --lcars-orange: #ff9911;
    --lcars-purple: #cc99cc;
}

body {
    background-color: var(--lower-decks-bg);
    color: var(--lower-decks-text);
    font-family: 'Arial Narrow', sans-serif;
    line-height: 1.6;
    padding: 20px;
    max-width: 900px;
    margin: auto;
    border-left: 20px solid var(--lower-decks-gold);
    border-radius: 40px 0 0 40px;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
        border-left-width: 10px;
        border-radius: 20px 0 0 20px;
    }
    
    h1 {
        font-size: 1.8em;
    }

    .hint-button, button {
        padding: 15px 20px;
        font-size: 16px;
    }
}

h1 {
    color: var(--lower-decks-gold);
    text-transform: uppercase;
    font-size: 2.5em;
    border-bottom: 5px solid var(--lower-decks-red);
    padding-bottom: 10px;
    margin-top: 0;
}

.button-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.hint-button, button {
    background-color: var(--lower-decks-blue);
    color: var(--lower-decks-bg);
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 20px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s;
}

.hint-button:hover, button:hover {
    background-color: var(--lower-decks-light-blue);
}

.hint-container {
    margin-bottom: 15px;
    border-left: 10px solid var(--lcars-purple);
    padding-left: 15px;
}

.hint-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background-color: var(--lower-decks-dark);
    border: 2px solid var(--lower-decks-blue);
    border-radius: 0 20px 20px 0;
}

/* Specific styling for the index page vs hint pages */
.index-page .hint-button {
    background-color: var(--lcars-orange);
}

.index-page .hint-button:hover {
    background-color: var(--lower-decks-gold);
}