:root {
           --bg-deep: #050515;
           --bg-card: rgba(10, 10, 35, 0.85);
           --neon-green: #00ff88;
           --neon-green-dim: rgba(0, 255, 136, 0.3);
           --neon-red: #ff3366;
           --neon-red-dim: rgba(255, 51, 102, 0.3);
           --neon-gold: #ffd700;
           --glass: rgba(255, 255, 255, 0.05);
           --glass-border: rgba(255, 255, 255, 0.1);
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           -webkit-tap-highlight-color: transparent;
       }

       body {
           font-family: 'Rajdhani', sans-serif;
           background: var(--bg-deep);
           color: #e0e0e0;
           overflow: hidden;
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       /* Animated background grid */
       .bg-grid {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-image:
               linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
               linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
           background-size: 50px 50px;
           z-index: 0;
           pointer-events: none;
       }

       .bg-grid::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: radial-gradient(ellipse at center, transparent 0%, var(--bg-deep) 70%);
       }

       /* Floating particles */
       .particle {
           position: fixed;
           width: 2px;
           height: 2px;
           background: var(--neon-green);
           border-radius: 50%;
           opacity: 0.4;
           animation: float 8s infinite ease-in-out;
           pointer-events: none;
           z-index: 1;
       }

       @keyframes float {

           0%,
           100% {
               transform: translateY(0) translateX(0);
               opacity: 0.4;
           }

           25% {
               transform: translateY(-20px) translateX(10px);
               opacity: 0.7;
           }

           50% {
               transform: translateY(-40px) translateX(-5px);
               opacity: 0.3;
           }

           75% {
               transform: translateY(-20px) translateX(15px);
               opacity: 0.6;
           }
       }

       /* Main container */
       .game-container {
           position: relative;
           z-index: 10;
           display: flex;
           gap: 20px;
           align-items: flex-start;
           padding: 20px;
           max-width: 1200px;
           width: 100%;
       }

       /* Glassmorphism sidebar */
       .sidebar {
           width: 280px;
           background: var(--bg-card);
           backdrop-filter: blur(20px);
           -webkit-backdrop-filter: blur(20px);
           border: 1px solid var(--glass-border);
           border-radius: 20px;
           padding: 24px;
           box-shadow:
               0 8px 32px rgba(0, 0, 0, 0.5),
               inset 0 1px 0 rgba(255, 255, 255, 0.1);
           display: flex;
           flex-direction: column;
           gap: 20px;
           flex-shrink: 0;
       }

       .sidebar-header {
           text-align: center;
           border-bottom: 1px solid var(--glass-border);
           padding-bottom: 16px;
       }

       .sidebar-header h1 {
           font-family: 'Orbitron', sans-serif;
           font-size: 1.2rem;
           font-weight: 900;
           color: var(--neon-green);
           text-shadow: 0 0 20px var(--neon-green-dim);
           letter-spacing: 2px;
           line-height: 1.3;
       }

       .sidebar-header .subtitle {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.4);
           margin-top: 4px;
           letter-spacing: 3px;
           text-transform: uppercase;
       }

       .stat-card {
           background: var(--glass);
           border: 1px solid var(--glass-border);
           border-radius: 12px;
           padding: 16px;
           position: relative;
           overflow: hidden;
           transition: all 0.3s ease;
       }

       .stat-card::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 3px;
           height: 100%;
           background: var(--neon-green);
           box-shadow: 0 0 10px var(--neon-green);
       }

       .stat-card.debt::before {
           background: var(--neon-red);
           box-shadow: 0 0 10px var(--neon-red);
       }

       .stat-card.high::before {
           background: var(--neon-gold);
           box-shadow: 0 0 10px var(--neon-gold);
       }

       .stat-label {
           font-size: 0.7rem;
           text-transform: uppercase;
           letter-spacing: 2px;
           color: rgba(255, 255, 255, 0.5);
           margin-bottom: 4px;
       }

       .stat-value {
           font-family: 'Orbitron', sans-serif;
           font-size: 1.5rem;
           font-weight: 700;
           color: var(--neon-green);
           text-shadow: 0 0 10px var(--neon-green-dim);
       }

       .stat-card.debt .stat-value {
           color: var(--neon-red);
           text-shadow: 0 0 10px var(--neon-red-dim);
       }

       .stat-card.high .stat-value {
           color: var(--neon-gold);
           text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
       }

       .status-indicator {
           display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: var(--neon-green);
           box-shadow: 0 0 8px var(--neon-green);
           margin-right: 8px;
           animation: pulse 2s infinite;
       }

       @keyframes pulse {

           0%,
           100% {
               opacity: 1;
               transform: scale(1);
           }

           50% {
               opacity: 0.5;
               transform: scale(0.8);
           }
       }

       .game-status {
           font-size: 0.8rem;
           color: rgba(255, 255, 255, 0.6);
           display: flex;
           align-items: center;
       }

       /* Game board area */
       .game-board-wrapper {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 16px;
           min-width: 0;
       }

       .canvas-container {
           position: relative;
           border-radius: 16px;
           overflow: hidden;
           box-shadow:
               0 0 40px rgba(0, 255, 136, 0.1),
               0 0 80px rgba(0, 255, 136, 0.05),
               inset 0 0 60px rgba(0, 0, 0, 0.5);
           border: 2px solid rgba(0, 255, 136, 0.2);
       }

       .canvas-container::before {
           content: '';
           position: absolute;
           top: -2px;
           left: -2px;
           right: -2px;
           bottom: -2px;
           border-radius: 16px;
           background: linear-gradient(45deg, var(--neon-green), transparent, var(--neon-green));
           opacity: 0.1;
           z-index: -1;
           animation: borderGlow 3s linear infinite;
       }

       @keyframes borderGlow {
           0% {
               filter: hue-rotate(0deg);
           }

           100% {
               filter: hue-rotate(360deg);
           }
       }

       canvas {
           display: block;
           background: linear-gradient(135deg, #0a0a20 0%, #050515 100%);
       }

       /* D-Pad */
       .dpad {
           display: none;
           grid-template-columns: repeat(3, 60px);
           grid-template-rows: repeat(3, 60px);
           gap: 4px;
           margin-top: 8px;
       }

       .dpad-btn {
           background: var(--glass);
           border: 1px solid var(--glass-border);
           border-radius: 12px;
           color: var(--neon-green);
           font-size: 1.5rem;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           transition: all 0.15s ease;
           user-select: none;
           -webkit-user-select: none;
           touch-action: manipulation;
       }

       .dpad-btn:active {
           background: var(--neon-green-dim);
           transform: scale(0.95);
           box-shadow: 0 0 20px var(--neon-green-dim);
       }

       .dpad-btn.empty {
           visibility: hidden;
       }

       /* Overlay screens */
       .overlay {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(5, 5, 21, 0.95);
           backdrop-filter: blur(10px);
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           z-index: 100;
           transition: opacity 0.5s ease, visibility 0.5s ease;
           border-radius: 16px;
       }

       .overlay.hidden {
           opacity: 0;
           visibility: hidden;
           pointer-events: none;
       }

       .overlay-title {
           font-family: 'Orbitron', sans-serif;
           font-size: 2.5rem;
           font-weight: 900;
           color: var(--neon-green);
           text-shadow: 0 0 30px var(--neon-green-dim);
           margin-bottom: 8px;
           text-align: center;
           letter-spacing: 3px;
       }

       .overlay-subtitle {
           font-size: 1rem;
           color: rgba(255, 255, 255, 0.5);
           margin-bottom: 32px;
           text-align: center;
       }

       .overlay-score {
           font-family: 'Orbitron', sans-serif;
           font-size: 3rem;
           font-weight: 700;
           color: var(--neon-gold);
           text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
           margin-bottom: 8px;
       }

       .overlay-score-label {
           font-size: 0.8rem;
           text-transform: uppercase;
           letter-spacing: 3px;
           color: rgba(255, 255, 255, 0.4);
           margin-bottom: 32px;
       }

       .btn-primary {
           font-family: 'Orbitron', sans-serif;
           font-size: 1rem;
           font-weight: 700;
           padding: 16px 48px;
           background: linear-gradient(135deg, var(--neon-green), #00cc6a);
           color: #000;
           border: none;
           border-radius: 12px;
           cursor: pointer;
           letter-spacing: 2px;
           text-transform: uppercase;
           transition: all 0.3s ease;
           box-shadow: 0 0 30px var(--neon-green-dim);
           position: relative;
           overflow: hidden;
       }

       .btn-primary::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
           transition: left 0.5s ease;
       }

       .btn-primary:hover::before {
           left: 100%;
       }

       .btn-primary:hover {
           transform: translateY(-2px);
           box-shadow: 0 5px 40px var(--neon-green-dim);
       }

       .btn-primary:active {
           transform: translateY(0);
       }

       .game-over-title {
           color: var(--neon-red);
           text-shadow: 0 0 30px var(--neon-red-dim);
           animation: shake 0.5s ease-in-out;
       }

       @keyframes shake {

           0%,
           100% {
               transform: translateX(0);
           }

           20% {
               transform: translateX(-10px);
           }

           40% {
               transform: translateX(10px);
           }

           60% {
               transform: translateX(-10px);
           }

           80% {
               transform: translateX(10px);
           }
       }

       /* Screen shake effect */
       .screen-shake {
           animation: screenShake 0.5s ease-in-out;
       }

       @keyframes screenShake {

           0%,
           100% {
               transform: translate(0, 0);
           }

           10% {
               transform: translate(-5px, 5px);
           }

           20% {
               transform: translate(5px, -5px);
           }

           30% {
               transform: translate(-5px, -5px);
           }

           40% {
               transform: translate(5px, 5px);
           }

           50% {
               transform: translate(-3px, 3px);
           }

           60% {
               transform: translate(3px, -3px);
           }

           70% {
               transform: translate(-3px, -3px);
           }

           80% {
               transform: translate(3px, 3px);
           }

           90% {
               transform: translate(-1px, 1px);
           }
       }

       /* Wealth tier badge */
       .tier-badge {
           display: inline-block;
           padding: 4px 12px;
           border-radius: 20px;
           font-size: 0.7rem;
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: 1px;
           margin-top: 8px;
           background: var(--neon-green-dim);
           color: var(--neon-green);
           border: 1px solid var(--neon-green);
       }

       /* Responsive */
       @media (max-width: 900px) {
           .game-container {
               flex-direction: column;
               align-items: center;
               padding: 10px;
               gap: 12px;
           }

           .sidebar {
               width: 100%;
               max-width: 400px;
               flex-direction: row;
               flex-wrap: wrap;
               padding: 16px;
               gap: 12px;
           }

           .sidebar-header {
               width: 100%;
               text-align: center;
               padding-bottom: 12px;
           }

           .stat-card {
               flex: 1;
               min-width: 120px;
               padding: 12px;
           }

           .stat-value {
               font-size: 1.2rem;
           }

           .dpad {
               display: grid;
           }

           .overlay-title {
               font-size: 1.8rem;
           }

           .overlay-score {
               font-size: 2rem;
           }
       }

       @media (max-width: 500px) {
           .sidebar {
               padding: 12px;
           }

           .stat-value {
               font-size: 1rem;
           }

           .dpad {
               grid-template-columns: repeat(3, 50px);
               grid-template-rows: repeat(3, 50px);
           }
       }

       /* Instructions */
       .instructions {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.3);
           text-align: center;
           margin-top: 8px;
           line-height: 1.6;
       }

       .instructions kbd {
           background: rgba(255, 255, 255, 0.1);
           padding: 2px 6px;
           border-radius: 4px;
           border: 1px solid rgba(255, 255, 255, 0.2);
           font-family: inherit;
       }