/* ==========================================================================
   1. DESIGN TOKENS (Variables)
   ========================================================================== */
:root {
    /* Theme Colors */
    --clr-cyan: rgb(50, 251, 226);
    --clr-cyan-glow: rgba(50, 251, 226, 0.3);
    --clr-space-blue: #33336c;
    --clr-nebula-magenta: rgba(136, 24, 75, 1);
    --clr-void-purple: rgb(29, 4, 40);
    
    /* Component Specific Colors */
    --clr-note-gold: #A08358;
    --clr-note-gold-light: #b99969;
    --clr-page-gray: #9898a2;
    --clr-page-gray-light: #a4a4ab;

    /* Fonts */
    --ff-sans: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    --ff-scifi: "Chakra Petch", var(--ff-sans);
    --ff-note: "Kalam", var(--ff-sans);
    --ff-page: "Playwrite US Modern", var(--ff-sans);
}

/* ==========================================================================
   2. GLOBAL & TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--ff-scifi);
    text-shadow: 0 0 1px rgba(50, 251, 226, 0.6), 
                 0 0 3px rgba(50, 251, 226, 0.5), 
                 0 0 0.5rem var(--clr-cyan-glow), 
                 0 0 2rem rgba(50, 251, 226, 0.2);
}

a.active {
    font-weight: bold;
    color: var(--clr-cyan);
}

/* ==========================================================================
   3. LAYOUT & NAVIGATION (Navbar / Footer)
   ========================================================================== */
#spacegame-navbar {
    background-image: linear-gradient(var(--clr-space-blue), #111);
}

#footer {
    background: linear-gradient(180deg, var(--clr-void-purple) 0%, rgba(24, 4, 13, 1) 64%, var(--clr-nebula-magenta) 100%);
    padding-bottom: 0;
}

#footer-space {
    height: 60px;
    border-top: 10px solid var(--clr-nebula-magenta);
    background: #121212 url('/static/images/stars.gif');
}

#footer a {
    color: #fff;
    font-weight: bold;
}

/* ==========================================================================
   4. COMPONENTS & CARDS
   ========================================================================== */

/* Note Component */
.note {
    position: relative;
    background-color: #EDD9A8;
    border: 5px solid;
    border-color: var(--clr-note-gold-light) var(--clr-note-gold-light) var(--clr-note-gold) var(--clr-note-gold);
    border-radius: 10px;
    color: #000;
}

.note::after {
    content: '';
    position: absolute;
    inset: -8px; /* Shorthand for top/left/right/bottom */
    z-index: -1;
    background: black;
    border-radius: 10px;
}

.note hr {
    margin-top: 0;
    border-top: 2px solid var(--clr-note-gold-light);
    border-bottom: 3px solid var(--clr-note-gold);
}

.note h1, .note h2, .note h3, .note h4 {
    font-family: var(--ff-note);
    font-weight: bold;
    color: var(--clr-note-gold);
    text-shadow: none;
}

.note a {
    color: #864e1b;
}

/* Page Component */
.page {
    position: relative;
    background-color: #fff;
    border: 3px solid;
    border-color: var(--clr-page-gray-light) var(--clr-page-gray-light) var(--clr-page-gray) var(--clr-page-gray);
    border-radius: 5px;
    color: #000;
}

.page::after {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: var(--clr-space-blue);
    border-radius: 5px;
}

.page hr {
    margin-top: 0;
    border-top: 2px solid var(--clr-page-gray-light);
    border-bottom: 3px solid var(--clr-page-gray);
}

.page h1, .page h2, .page h3, .page h4 {
    font-family: var(--ff-page);
    color: var(--clr-space-blue);
    margin-bottom: 0.8em;
    text-shadow: 2px 2px 0 #fff, 5px 4px 0 rgba(0, 0, 0, 0.15);
}

/* Tiled Background Card */
.tiled {
    position: relative;
    background-color: #1e1e1e;
    background-image: url("/static/images/diagmonds.webp");
    border: 5px solid;
    border-color: var(--clr-nebula-magenta) var(--clr-nebula-magenta) rgba(136, 24, 75, 0.6) rgba(136, 24, 75, 0.6);
    border-radius: 10px;
    color: #fff;
}

/* Popover & Utilities */
.popover {
    --bs-popover-border-color: var(--clr-nebula-magenta);
}

.info {
    cursor: pointer;
    user-select: none;
}

.filter-hue-red {
    filter: hue-rotate(125deg);
}

.hoverableText {
    cursor: help;
    text-decoration: underline wavy var(--clr-nebula-magenta);
}

.clickableText {
    cursor: pointer;
    text-decoration: underline dashed;
}

/* ==========================================================================
   5. ANIMATIONS
   ========================================================================== */
@keyframes glow {
    from { text-shadow: 0 0 5px green; }
    to   { text-shadow: 0 0 10px lightgreen; }
}

.glow-green {
    animation: glow 1s ease-in-out infinite alternate;
}