/* Base Styles and CSS Reset */
:root {
    --primary-color: #00ace6;
    --secondary-color: #e64a19;
    --text-color: #ffffff;
    --background-color: #000000;
    --hud-bg: rgba(0, 0, 0, 0.6);
    --success-color: #00ff00;
    --warning-color: #ffaa00;
    --danger-color: #ff0000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Courier New', 'Consolas', monospace;
    background-color: var(--background-color);
    color: var(--text-color);
}

body {
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    touch-action: none;
}

/* Remove focus outline for better gameplay */
button:focus,
input:focus {
    outline: none;
}

/* Utility classes */
.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}