/* TempleOS Inspired Aesthetics */
:root {
    --c0: #000000; /* Black */
    --c1: #0000AA; /* Blue */
    --c2: #00AA00; /* Green */
    --c3: #00AAAA; /* Cyan */
    --c4: #AA0000; /* Red */
    --c5: #AA00AA; /* Magenta */
    --c6: #AAAA00; /* Yellow */
    --c7: #AAAAAA; /* Light Gray */
    --c8: #555555; /* Dark Gray */
    --c9: #5555FF; /* Bright Blue */
    --cA: #55FF55; /* Bright Green */
    --cB: #55FFFF; /* Bright Cyan */
    --cC: #FF5555; /* Bright Red */
    --cD: #FF55FF; /* Bright Magenta */
    --cE: #FFFF55; /* Bright Yellow */
    --cF: #FFFFFF; /* White */
}

body {
    background-color: var(--c1); /* Main blue background */
    color: var(--cF);
    font-family: 'VT323', monospace;
    font-size: 18px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-rendering: geometricPrecision;
    image-rendering: pixelated;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

#top-bar {
    background-color: var(--c1); /* Blue background */
    color: var(--cF); /* White text */
    width: 100%;
    padding: 2px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 2px solid var(--c0);
    pointer-events: none; /* Allows mouse events to pass through to the canvas */
}

.status-group {
    display: flex;
    gap: 12px;
    align-items: center;
    pointer-events: auto; /* Re-enable pointer events for status items */
    height: 100%;
}

#menu-btn {
    cursor: pointer;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
}
#menu-btn:hover {
    background-color: var(--cF);
    color: var(--c1);
}

#top-bar span {
    white-space: nowrap;
}

#composition-marquee-container {
    flex-grow: 1;
    margin: 0 15px;
    overflow: hidden;
}

#composition-text {
    font-size: 18px;
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align window to top */
    width: 100%;
    height: 100vh;
    padding: 40px 15px 15px 15px; /* Add padding-top for the bar */
    box-sizing: border-box;
    pointer-events: none;
    position: relative; /* Ensure it creates a stacking context */
    z-index: 1; /* Place it above the canvas */
}

.window {
    background-color: var(--cF); /* White window background */
    color: var(--c1); /* Blue text */
    border: 2px solid var(--c1); /* Outer border */
    outline: 2px solid var(--c1); /* Inner border */
    outline-offset: -6px; /* Creates the gap between borders */
    padding: 15px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    pointer-events: auto; /* Re-enable pointer events for windows */
    position: relative;
}

#close-btn {
    position: absolute;
    top: 2px;
    right: 8px;
    cursor: pointer;
    color: var(--c4);
    font-weight: bold;
    font-size: 20px;
}
#close-btn:hover {
    color: var(--cC);
}

h1 {
    text-align: center;
    color: var(--c1); /* Blue title */
    margin: 0 0 15px 0;
    font-size: 2.5em;
}

p {
    margin: 10px 0;
    text-align: center;
}

#controls {
    display: flex;
    gap: 10px;
    width: 100%;
}

#repo-url {
    flex-grow: 1;
    background-color: var(--cF);
    color: var(--c1);
    border: 2px solid var(--c1);
    padding: 5px;
    font-family: 'VT323', monospace;
    font-size: 16px;
}

#repo-url:focus {
    outline: 2px solid var(--c9);
    outline-offset: 0; /* Reset outline offset for focus */
}

button {
    background-color: var(--c1);
    color: var(--cF);
    border: 2px solid var(--c1);
    padding: 5px 10px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    cursor: pointer;
    transition: none;
}

button:hover {
    background-color: var(--c9);
}

button:active {
    background-color: var(--cF);
    color: var(--c1);
}

#message-box {
    min-height: 20px;
    text-align: center;
    color: var(--cC);
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place it above the body background but below the UI */
}

#canvas-container canvas {
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}