/* From CSU Colors 
    CSU Red    : #C91235 (RGB: 201 18 53)
    Black      : #000000 (RGB: 0 0 0)
    Black 60%  : #808285 (RGB: 128 130 133)
    Black 40%  : #a7a9ac (RGB: 167 169 172)
    Black 20%  : #d1d3d4 (RGB: 209 211 212)
    White      : #FFFFFF (RGB: 255 255 255)

    PMS GREEN  : #00ac85 (RGB: 0 172 133)   - Teal Green
    RMS 2425 C : #85006C (RGB: 133 0 108)   - Magenta
    PMS 7417 C : #e3503e (RGB: 225 79 61)   - Orange Red
    PMS 7408 C : #f7bf0a (RGB: 247 191 10)  - Yellow
    PMS 652 C  : #7e9ccc (RGB: 126 156 204) - Mute Blue
    PMS 2715 C : #8c84e3 (RGB: 140 132 227) - Lavender
*/

/* Global Variables for ease of relative consistency */
:root { 
    /* Layout Measurements */
    --hh:  70px; /* Header Height */
    --fh:  150px; /* Footer Height */
    --sw: 280px; /* Sidebar Width */
    
    /* Colors */
    --csu-red: #C91235;
    --bg-color: #000000; 
    --black-60: #808285;
    --black-40: #A7A9AC;
    --black-20: #D1D3D4;
    --hint-red: #E3503E;
    --highlight: #8C84E3;
    --mute-blue: #7E9CCC;
    --font-color: #FFFFFF; 
    --hint-green: #00AC85;
    --hint-yellow: #F7BF0A;
}

/* Global Styles */
body {
    z-index: 0;
    height: 100vh;
    overflow: hidden;
    position: relative; 
    color: var(--font-color);
    background: var(--bg-color);
    font-family: 'Source Sans Pro', sans-serif;
}

/* Main */
main {
    left: 0;
    right: 0;
    display: flex;
    top: var(--hh);
    position: fixed;
    overflow: hidden;
    bottom: var(--fh);
}

/* Hyperlinks */
a { 
    color: inherit;
    text-decoration: none;
}

/* Header */
header { /* Default */
    z-index: 0;
    display: flex;
    position: fixed;
    padding: 0 20px;
    height: var(--hh);
    top: 0; left: 0; right: 0;
    justify-content: space-between;
    border-bottom: 4px solid var(--csu-red);
}

/* Footer */
footer { /* Default */
    z-index: 0;
    display: flex;
    position: fixed;
    height: var(--fh);
    align-items: center;
    flex-direction: column;
    bottom: 0; left: 0; right: 0;
    justify-content: space-between;
    border-top: 1px solid var(--black-60);
}

footer a { 
    padding: 0.3em;
    font-size: 1.2em;
    margin-top: 10px;
    border-radius: 5px;    
    border: 1px solid var(--font-color);
}

footer p {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--black-60);
    margin-bottom: 5em;
}

footer pre { 
    font-family: 'Courier New', Courier, monospace;
}

/* Buttons */
button { /* Default */
    width: 100%;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 700;
    margin-top: auto;
    font-size: 0.95rem;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--csu-red);
    transition: background 0.15s ease;
    font-family: 'Source Sans Pro', sans-serif;
}

button:hover { /* While Hovering */
    background: var(--mute-blue);
}

/* Dialog */
dialog {
    z-index: 2;
    border: none;
    color: inherit;
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    width: fit-content;
    height: fit-content;
    top: 50%; left: 50%;
    background: transparent;
    transform: translate(-100%, -100%);
}

/* Header Sections */
#preface { /* Preface / Header Intro */ 
    gap: 12px;
    display: flex;
    align-items: center;
}

#preface h1 { /* "Campus Map Quiz" */
    font-weight: 700;
    font-size: 1.2rem;
}

#logo-block { /* CSUN Logo */
    font-size: 1rem;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 3px;
    letter-spacing: 2px;
    background: var(--csu-red);
}

#subtitle { /* Subtitle ("Let's explore...") */
    font-size: 0.75rem;
    color: var(--black-40);
}

/* Live Game Stats */
#stats-bar {
    display: flex;
    gap: 10px;
}

#stats-bar[hidden] { 
    display: none;
}

.stat-box { /* Stat Box */
    display: flex;
    margin: 0.5rem 0rem;
    min-width: 90px;
    padding: 2px 10px;
    border-radius: 4px;
    align-items: center;
    flex-direction: column;
    background: var(--bg-color);
    border: 1px solid var(--black-60);
}

.stat-label { /* Stat Label */
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--csu-red);
    text-transform: uppercase;
}

.stat-value { /* Stat Value */
    color: White;
    font-size: 1.9rem;
}

.stat-label,
.stat-value {
    line-height: 1;
    font-weight: 700;
}

/* Sidebar */
#sidebar { 
    flex-shrink: 0;
    width: var(--sw);    
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 2px solid var(--csu-red);
}

/* Panels */
.panel { /* Default */
    flex: 1;
    gap: 14px;
    padding: 24px 18px;
    flex-direction: column;
    color: var(--font-color);
    background: var(--bg-color);
    border: 10px solid var(--csu-red);
}

.panel h2 {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--csu-red);
    text-transform: uppercase;
    border-bottom: 1px solid var(--black-60);
}

/* Intro, Game Over, & Alert Panel */ 
#intro-panel, #results-panel, #alert-panel { 
    transform: translate(-50%, -70%);
}

/* Intro Panel List */
#intro-panel ul { 
    font-size: 1rem;
    line-height: 1.8;
    list-style: none;
    text-indent: 1em;
    padding-left: 16px;
    color: var(--black-20);
}

/* Selection Box Color Guide */
ul #color-guide { 
    line-height: 2;
    text-indent: 2em;
    color: var(--black-40);
}

.red-select, .feedback-wrong {
    color: var(--hint-red);
}

.green-select, .feedback-correct { 
    color: var(--hint-green);
}

.yellow-select, .feedback-guess { 
    color: var(--hint-yellow);
}

.luck { 
    font-size: 2em;
    font-weight: 700;
    color: var(--highlight);
}

/* Game Panel */

/* Prompt Boxes & Score Calculation inside Log Box */
.prompt-box, #score-calc {
    margin: 20px -28px -35px -28px;
    border-top: 10px solid var(--csu-red);
}

.prompt-box h3 { 
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--black-40);
    text-transform: uppercase;
    border-bottom: 1px solid var(--csu-red);
}

.bld-name { /* Building Name inside Prompt Box */ 
    font-size: 1.2em;
    color: var(--highlight);
}

.feedback-complete { /* Completed Feedback - Feedback Close off */
    color: var(--highlight);
}

/* Results Panel */ 
#results-panel { 
    min-width: 400px;
    min-height: 510px;
}

#results-panel h3 { 
    font-size: 1.4em;
    color: var(--highlight);
}

.result-row { 
    width: 100%;
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

#final-time, #final-score { 
    font-size: 1.8em;
}

#final-time, #final-score, #high-score, #high-score-time { 
    font-weight: 700;
}

/* High score Box */
#high-score-box {
    padding: 1px;
    margin: 30px;
    border-radius: 10%;
    text-align: center;
    border: 5px solid var(--csu-red);
}

#high-score-box h3, #high-score, #high-score-time, #new-hs { 
    line-height: 0;
    margin-top: 20px;
}

#high-score-box:has(#new-hs[hidden]) h3, 
#high-score-box:has(#new-hs[hidden]) #high-score { 
    line-height: 0.5;
}

#high-score { 
    font-size: 5em;
    margin-top: 20px;
    margin-bottom: 50px;
}

#high-score-time { 
    font-size: 1.7em;
    color: var(--black-20);
}

#new-hs { 
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    color: var(--hint-yellow);
    background: var(--csu-red);
}

#new-hs[hidden] { 
    display: none;
}

/* Map Container */
#map {
    flex: 1; 
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Scrollbar */ 

/* Scrollbar Track */
::-webkit-scrollbar {
    width: 6px;
}

/* Scrollbar Background */
::-webkit-scrollbar-track {
    background: var(--csu-red);
    border-radius: 10px;
}

/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
    background: rgba(000,000, 000, 0.6);
    border-radius: 10px;
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--mute-blue);
}