body {
    background: #181825;
    color: #e0e7ff;
    font-family: 'Consolas', 'Courier New', monospace;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    color: #7f5af0;
    font-size: 2rem;
    text-align: center;
    margin: 32px 0 48px 0;
    letter-spacing: 2px;
    text-shadow: none;
    font-family: inherit;
}

.links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0;
}

a {
    display: inline-block;
    background: #242629;
    color: #2cb67d;
    text-decoration: none;
    padding: 18px 36px;
    font-size: 1.1rem;
    font-family: inherit;
    box-shadow: 0 2px 12px #0006;
    border: 2px solid #2cb67d;
    border-radius: 0;
    transition: 
        background 0.2s, 
        color 0.2s, 
        box-shadow 0.2s,
        transform 0.15s;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
}

a:hover {
    background: #2cb67d;
    color: #181825;
    box-shadow: 0 4px 24px #2cb67d44;
    transform: scale(1.05);
}

@keyframes float {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(-10px);}
}

.monitor-frame {
    background: #23272e;
    border: 16px solid #7f5af0;
    border-radius: 0;
    box-shadow:
        0 0 0 8px #181825,
        0 8px 40px 0 #000a,
        0 0 0 24px #23272e;
    padding: 64px 64px 48px 64px;
    min-width: 480px;
    min-height: 600px;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 40px;
}

.monitor-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: -24px;
}

.monitor-btn {
    width: 24px;
    height: 24px;
    background: #181825;
    border: 2px solid #7f5af0;
    box-shadow: 0 2px 8px #000a, inset 0 2px 8px #2cb67d;
    border-radius: 0;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.monitor-btn:hover {
    border-color: #2cb67d;
    box-shadow: 0 0 16px #2cb67d88, 0 2px 8px #000a;
}

.monitor-btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 4px;
    background: #2cb67d;
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

.monitor-statusbar {
    width: 100%;
    height: 32px;
    background: #181825;
    border: 2px solid #2cb67d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: auto;
    margin-bottom: 0;
    padding-left: 0;
    box-sizing: border-box;
    font-size: 1.1rem;
}

.status-led {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #2cb67d;
    box-shadow: 0 0 8px #2cb67d88;
    margin-right: 8px;
}

.status-text {
    color: #2cb67d;
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 2px;
}

.status-divider {
    width: 2px;
    height: 18px;
    background: #2cb67d44;
    margin: 0 8px;
    display: inline-block;
}

.status-clock {
    color: #7f5af0;
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 2px;
    min-width: 48px;
    text-align: center;
}

.status-coin {
    color: #ffe066;
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 2px;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.status-pixelicon {
    font-size: 1.3em;
    margin-left: 8px;
}

.arcade-controls {
    width: 340px;
    max-width: 90vw;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 32px;
    margin-top: 16px;
    user-select: none;
}

.joystick {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 32px;
}

.stick {
    width: 12px;
    height: 48px;
    background: #7f5af0;
    margin-bottom: -8px;
    border-radius: 0;
}

.base {
    width: 32px;
    height: 16px;
    background: #181825;
    border: 3px solid #7f5af0;
    border-radius: 0;
}

.arcade-buttons {
    display: flex;
    gap: 16px;
}

.arcade-buttons.diamond {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arcade-btn {
    width: 32px;
    height: 32px;
    border-radius: 0;
    border: 3px solid #23272e;
    box-shadow: 0 2px 8px #000a, inset 0 2px 8px #2cb67d;
    position: absolute;
}

.arcade-btn.top    { top: 0; left: 50%; transform: translate(-50%, 0); }
.arcade-btn.left   { top: 50%; left: 0; transform: translate(0, -50%); }
.arcade-btn.right  { top: 50%; right: 0; transform: translate(0, -50%); }
.arcade-btn.bottom { bottom: 0; left: 50%; transform: translate(-50%, 0); }

.arcade-btn.red    { background: #ff5555; }
.arcade-btn.yellow { background: #ffe066; }
.arcade-btn.blue   { background: #3b82f6; }
.arcade-btn.green  { background: #2cb67d; }

@media (max-width: 600px) {
    .monitor-frame {
        padding: 8vw 2vw 4vw 2vw;
        border-width: 4vw;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Consolas&display=swap');