body {
           font-family: 'Press Start 2P', cursive;
           overflow: hidden;
           margin: 0;
           /* Ensure safe area support */
           padding-top: env(safe-area-inset-top);
           padding-left: env(safe-area-inset-left);
           padding-right: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
       }
       
       /* CSS custom properties for safe areas */
       :root {
           --safe-area-top: env(safe-area-inset-top, 20px);
           --safe-area-left: env(safe-area-inset-left, 16px);
           --safe-area-right: env(safe-area-inset-right, 16px);
           --safe-area-bottom: env(safe-area-inset-bottom, 16px);
       }
       .game-wrapper {
           position: relative;
           width: 100vw;
           height: 100vh;
       }
       #gameCanvas {
           display: block;
           width: 100%;
           height: 100%;
       }
       .ui-container {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           color: white;
           pointer-events: none;
           text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
       }
       
       /* Mobile-optimized HUD styling */
       #gameHud {
           background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
           backdrop-filter: blur(8px);
           -webkit-backdrop-filter: blur(8px);
           border-bottom: 1px solid rgba(255,255,255,0.15);
           min-height: 44px; /* Ensure touch-friendly height */
       }
       
       #gameHud > div {
           text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
           font-weight: bold;
           color: white;
           flex-shrink: 0; /* Prevent shrinking */
       }
       
       /* Mobile-specific HUD optimizations */
       @media (max-width: 768px) {
           #gameHud {
               padding-top: max(8px, env(safe-area-inset-top));
               padding-left: max(8px, env(safe-area-inset-left));
               padding-right: max(8px, env(safe-area-inset-right));
               padding-bottom: 6px;
           }
           
           #gameHud > div {
               font-size: 0.75rem; /* Even smaller on mobile */
               line-height: 1.1;
           }
       }
       
       @media (max-width: 480px) {
           #gameHud > div {
               font-size: 0.7rem; /* Smallest on very small screens */
           }
       }
       .ui-element {
           pointer-events: auto;
       }
       
       /* Ensure start screen and other UI elements respect safe areas */
       #startScreen, #endScreen {
           padding-top: max(20px, env(safe-area-inset-top));
           padding-bottom: max(20px, env(safe-area-inset-bottom));
       }
       
       /* Mobile-optimized end screen */
       #endScreen {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: calc(100% - 2rem);
           max-width: 500px;
           z-index: 1000;
       }
       
       @media (max-width: 768px) {
           #endScreen {
               width: calc(100% - 1rem);
               margin: 0 0.5rem;
           }
           
           #endTitle {
               font-size: 1.5rem;
               line-height: 1.2;
               word-wrap: break-word;
               overflow-wrap: break-word;
           }
           
           #endScore {
               font-size: 1rem;
               line-height: 1.3;
           }
       }
       
       /* Realm intro styling - clean and readable */
       #realmIntro {
           background: #000000;
           pointer-events: auto;
           cursor: pointer;
       }
       
       #realmIntro #realmTitle {
           color: #ffffff;
           text-shadow: 3px 3px 0px rgba(0,0,0,0.8);
       }
       
       #realmIntro #realmSubtitle {
           color: #ffffff;
           text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
       }
       

       #restartButton, #nextLevelButton {
           box-shadow: 0 4px #999;
           transition: all 0.1s ease-in-out;
       }
       #restartButton:active, #nextLevelButton:active {
           box-shadow: 0 2px #666;
           transform: translateY(2px);
       }
      
       /* Mobile Touch Controls */
       #touch-controls {
           display: none; /* Hidden by default */
           position: absolute;
           bottom: 20px;
           width: 100%;
           padding: 0 20px;
           box-sizing: border-box;
           justify-content: space-between;
       }
      
       .control-btn {
           width: 80px;
           height: 80px;
           background-color: rgba(255, 255, 255, 0.2);
           border: 2px solid rgba(255, 255, 255, 0.5);
           border-radius: 50%;
           color: white;
           font-size: 40px;
           line-height: 70px;
           text-align: center;
           user-select: none; /* Prevent text selection */
       }
      
       .control-btn:active {
           background-color: rgba(255, 255, 255, 0.4);
       }

       /* Loading Screen Styles */
       #loadingScreen {
           transition: opacity 0.5s ease-out;
       }
       
       #loadingScreen.fade-out {
           opacity: 0;
       }

       /* Show controls only on touch devices */
       @media (hover: none) and (pointer: coarse) {
           #touch-controls {
               display: none;
           }
       }

       /* Classic High Score Entry Styles */
       .high-score-entry {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.95);
           z-index: 10002;
           display: none;
           align-items: center;
           justify-content: center;
           font-family: 'Press Start 2P', cursive;
       }

       .high-score-entry.show {
           display: flex;
       }

       .high-score-content {
           background: #000000;
           border: 4px solid #FFD700;
           border-radius: 8px;
           padding: 40px;
           text-align: center;
           max-width: 500px;
           width: 90%;
           color: white;
           box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
       }

       .high-score-title {
           font-size: 2rem;
           color: #FFD700;
           margin-bottom: 20px;
           text-shadow: 3px 3px 0px rgba(0,0,0,0.8);
       }

       .high-score-subtitle {
           font-size: 1rem;
           color: #87CEEB;
           margin-bottom: 30px;
           line-height: 1.4;
       }

       .initials-input {
           display: flex;
           justify-content: center;
           gap: 10px;
           margin: 30px 0;
       }

       .initials-input input {
           width: 60px;
           height: 60px;
           font-size: 2rem;
           font-family: 'Press Start 2P', cursive;
           text-align: center;
           background: #000000;
           border: 3px solid #FFD700;
           color: #FFD700;
           border-radius: 8px;
           text-transform: uppercase;
           outline: none;
       }

       .initials-input input:focus {
           border-color: #FFA500;
           box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
       }

       .initials-input input::placeholder {
           color: #666;
       }

       .high-score-button {
           background: #FFD700;
           color: #000000;
           border: none;
           padding: 15px 30px;
           font-size: 1rem;
           font-family: 'Press Start 2P', cursive;
           border-radius: 8px;
           cursor: pointer;
           margin: 10px;
           text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
           transition: all 0.2s ease;
       }

       .high-score-button:hover {
           background: #FFA500;
           transform: scale(1.05);
       }

       .high-score-button:active {
           transform: scale(0.95);
       }

       .high-score-list {
           margin-top: 30px;
           text-align: left;
           max-height: 300px;
           overflow-y: auto;
       }

       .high-score-list h3 {
           color: #FFD700;
           font-size: 1rem;
           text-align: center;
           margin-bottom: 15px;
           text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
       }

       .high-score-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 8px 0;
           border-bottom: 1px solid #333;
           font-size: 0.8rem;
       }

       .high-score-rank {
           color: #FFD700;
           font-weight: bold;
           min-width: 40px;
       }

       .high-score-initials {
           color: #87CEEB;
           font-weight: bold;
           min-width: 80px;
       }

       .high-score-value {
           color: #FFD700;
           font-weight: bold;
           min-width: 80px;
           text-align: right;
       }

       .high-score-date {
           color: #666;
           font-size: 0.6rem;
           min-width: 80px;
           text-align: right;
           display: none; /* Hide date from high score display */
       }

       /* Mobile optimizations */
       @media (max-width: 768px) {
           .high-score-content {
               padding: 20px;
               margin: 20px;
           }

           .high-score-title {
               font-size: 1.5rem;
           }

           .high-score-subtitle {
               font-size: 0.8rem;
           }

           .initials-input input {
               width: 50px;
               height: 50px;
               font-size: 1.5rem;
           }

           .high-score-button {
               padding: 12px 24px;
               font-size: 0.8rem;
           }
       }

       /* High Score Modal Styles */
       .high-score-modal {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.95);
           z-index: 10003;
           display: none;
           align-items: center;
           justify-content: center;
           font-family: 'Press Start 2P', cursive;
       }

       .high-score-modal.show {
           display: flex;
       }

       .high-score-modal-content {
           background: #000000;
           border: 4px solid #FFD700;
           border-radius: 8px;
           padding: 30px;
           text-align: center;
           max-width: 600px;
           width: 90%;
           color: white;
           box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
       }

       .high-score-modal-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 20px;
           padding-bottom: 15px;
           border-bottom: 2px solid #FFD700;
       }

       .high-score-modal-header h2 {
           color: #FFD700;
           font-size: 1.5rem;
           margin: 0;
           text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
       }

       .high-score-modal-close {
           background: none;
           border: none;
           color: #FFD700;
           font-size: 2rem;
           cursor: pointer;
           padding: 0;
           width: 40px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: all 0.2s ease;
       }

       .high-score-modal-close:hover {
           background: rgba(255, 215, 0, 0.2);
       }

       .high-score-modal-body {
           margin-bottom: 20px;
       }

       .high-score-modal-footer {
           padding-top: 15px;
           border-top: 2px solid #333;
       }

       .high-score-modal .high-score-row {
           display: grid;
           grid-template-columns: 60px 100px 1fr; /* Remove date column */
           gap: 15px;
           align-items: center;
           padding: 12px 0;
           border-bottom: 1px solid #333;
           font-size: 0.9rem;
       }

       .high-score-modal .high-score-rank {
           color: #FFD700;
           font-weight: bold;
           text-align: center;
       }

       .high-score-modal .high-score-initials {
           color: #87CEEB;
           font-weight: bold;
           text-align: center;
       }

       .high-score-modal .high-score-value {
           color: #FFD700;
           font-weight: bold;
           text-align: right;
       }

       .high-score-modal .high-score-date {
           color: #666;
           font-size: 0.7rem;
           text-align: center;
           display: none; /* Hide date in modal list */
       }

       @media (max-width: 768px) {
           .high-score-modal .high-score-row {
               grid-template-columns: 50px 80px 1fr; /* Remove date column */
               gap: 10px;
               font-size: 0.8rem;
           }
       }