/**
 * Base Styles
 * Global styles and CSS variables
 */

:root {
    /* Colors */
    --color-bg: #000;
    --color-text: #fff;
    --color-text-secondary: #ccc;
    --color-text-muted: #888;
    
    /* Primary Colors */
    --color-primary: #ffd32a;
    --color-primary-dark: #ff9f43;
    --color-primary-glow: rgba(255, 211, 42, 0.5);
    
    /* Status Colors */
    --color-hp: #ff4757;
    --color-victory: #00d2d3;
    --color-victory-glow: rgba(0, 210, 211, 1);
    
    /* UI Colors */
    --color-bar-bg: rgba(80, 80, 80, 0.85);
    --color-bar-border: #f9fafb;
    --color-overlay: rgba(0, 0, 0, 0.9);
    --color-screen-bg: rgba(5, 5, 10, 0.96);
    
    /* Control Colors */
    --color-joystick-bg: rgba(255, 255, 255, 0.05);
    --color-joystick-border: rgba(255, 255, 255, 0.2);
    --color-stick-bg: rgba(255, 255, 255, 0.4);
    --color-stick-shadow: rgba(255, 255, 255, 0.2);
    --color-gong-bg: rgba(255, 211, 42, 0.15);
    --color-gong-border: #ffd32a;
    --color-gong-active-bg: rgba(255, 211, 42, 0.5);
    --color-gong-shadow: rgba(255, 211, 42, 0.2);
    
    /* Typography */
    --font-family: 'Courier New', Courier, monospace;
    --font-size-base: 1rem;
    --font-size-large: 1.1rem;
    --font-size-xl: 1.3rem;
    --font-size-xxl: 1.4rem;
    --font-size-h1: 2.8rem;
    --font-size-h2: 2rem;
    --font-size-gong: 1.6rem;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* Sizes */
    --bar-width: 240px;
    --bar-height: 22px;
    --joystick-size: 140px;
    --stick-size: 60px;
    --gong-size: 130px;
    --controls-height: 240px;
    
    /* Effects */
    --shadow-sm: 0 0 10px;
    --shadow-md: 0 0 15px;
    --shadow-lg: 0 0 20px;
    --shadow-xl: 0 0 25px;
    --shadow-xxl: 0 0 30px;
    --text-shadow-sm: 0 0 8px;
    --text-shadow-md: 0 0 10px;
    --text-shadow-lg: 0 0 20px;
    
    /* Transitions */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.6s;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 40px;
    --radius-full: 50%;
    
    /* Z-Index */
    --z-ui: 5;
    --z-screen: 10;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--color-bg);
    font-family: var(--font-family);
    color: var(--color-text);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}