:root {
            --royal-gold: #C5A059;
            --royal-gold-light: #EDC988;
            --royal-dark: #0F1215;
            --royal-panel: rgba(20, 24, 28, 0.95);
            --royal-border: rgba(197, 160, 89, 0.3);
        }

        body {
            background-color: var(--royal-dark);
            background-image: radial-gradient(circle at 50% 50%, #1a2026 0%, #050505 100%);
            color: #e0e0e0;
            font-family: 'Lato', sans-serif;
            overflow: hidden;
            touch-action: none;
        }

        .font-royal { font-family: 'Cinzel', serif; }

        /* Royal Gold Effects */
        .text-gold { color: var(--royal-gold); }
        .text-gold-light { color: var(--royal-gold-light); }
        .border-gold { border-color: var(--royal-gold); }
        
        .gold-glow-text { text-shadow: 0 2px 10px rgba(197, 160, 89, 0.3); }
        .gold-box-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--royal-border); }

        /* Premium Panel */
        .royal-panel {
            background: var(--royal-panel);
            backdrop-filter: blur(12px);
            border: 1px solid var(--royal-border);
            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
        }

        /* 3D Button Style */
        .btn-royal {
            background: linear-gradient(180deg, #C5A059 0%, #8A6E36 100%);
            color: #0F1215;
            border: 1px solid #EDC988;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            text-shadow: 0 1px 0 rgba(255,255,255,0.2);
            transition: all 0.2s;
        }
        .btn-royal:active {
            transform: translateY(2px);
            box-shadow: 0 2px 3px rgba(0,0,0,0.3);
        }
        .btn-royal:disabled {
            filter: grayscale(1);
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .btn-secondary {
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--royal-border);
            color: var(--royal-gold);
        }
        .btn-secondary:hover { background: rgba(197, 160, 89, 0.1); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--royal-gold); }

        .hidden { display: none !important; }
        
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); 
        }
        
        canvas {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
            border-radius: 4px;
            border: 8px solid #2a2a2a; 
            max-width: 100%;
            max-height: 100%;
        }

        /* Input Styles */
        .input-royal {
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--royal-border);
            color: #fff;
            font-family: 'Lato', sans-serif;
        }
        .input-royal:focus {
            border-color: var(--royal-gold);
            outline: none;
            box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
        }
        
        /* Rank Badges */
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-weight: bold;
            font-family: 'Cinzel', serif;
        }
        .rank-1 { background: transparent; font-size: 1.5rem; } /* Crown handled by emoji */
        .rank-2 { background: #C0C0C0; color: #000; box-shadow: 0 0 10px rgba(192,192,192,0.5); }
        .rank-3 { background: #CD7F32; color: #000; box-shadow: 0 0 10px rgba(205,127,50,0.5); }
        .rank-other { background: rgba(255,255,255,0.1); color: #888; font-size: 0.8rem; }