@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Share+Tech+Mono&display=swap');

:root {
    --panel-bg: #1e2420;
    --panel-border: #3c483e;
    --metal-plate: #262c28;
    --crt-green: #33ff33;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: #121613;
    color: #d4cbbe;
    font-family: 'Play', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    user-select: none;
}

h1, h2, h3 {
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    color: #8fa093;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Warning panels for Mobile Portrait Orientation */
#orientation-warning {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #050505; color: var(--crt-green, #33ff33);
    z-index: 9999; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; font-family: 'Share Tech Mono', monospace;
    padding: 20px;
}

@media screen and (max-width: 900px) and (orientation: portrait) {
    body > * { display: none !important; }
    #orientation-warning { display: flex !important; }
}