html,
 body {
   margin: 0;
   padding: 0;
   overflow: hidden;
   height: 100%;
   background: #05080f;
   touch-action: none;
 }


 #loadingScreen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #111;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   font-size: 24px;
   z-index: 10;
 }

 #interactPrompt {
   position: absolute;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%);
   padding: 12px 24px;
   background: rgba(0,
       0,
       0,
       0.7);
   /* semi-transparent black like volume button */
   border: 2px solid #ff9c45;
   /* same warm orange border */
   border-radius: 12px;
   /* rounded corners to match style */
   color: #ffd28a;
   /* soft golden text like controls guide */
   font-family: "Segoe UI", system-ui, sans-serif;
   font-weight: 600;
   font-size: 16px;
   text-align: center;
   backdrop-filter: blur(4px);
   /* subtle blur like volume button */
   box-shadow: 0 0 12px rgba(255, 156, 69, 0.4);
   /* soft warm glow */
   display: none;
   z-index: 100;
   pointer-events: none;
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
     background 0.2s ease;
 }

 /* optional hover pulse animation for a little life */
 #interactPrompt.show {
   transform: translateX(-50%) scale(1.05);
   box-shadow: 0 0 16px rgba(255, 156, 69, 0.6);
 }

 #overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   /* semi-transparent dark */
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
   z-index: 50;
 }

 #overlay.active {
   opacity: 1;
   pointer-events: auto;
 }

 .overlay-panel {
   position: relative;
   background: rgba(0, 0, 0, 0.85);
   padding: 25px 30px;
   border-radius: 12px;
   border: 2px solid #ff9c45;
   /* orange border to match volume button */
   min-width: 350px;
   max-width: 500px;
   color: #ffd28a;
   font-family: "Segoe UI", system-ui, sans-serif;
   box-shadow: 0 0 15px rgba(255, 156, 69, 0.4);
   text-align: center;
 }

 .overlay-close {
   position: absolute;
   top: -12px;
   /* half outside */
   right: -12px;
   /* half outside */
   background: #ff9c45;
   /* orange button */
   color: #000;
   font-weight: bold;
   border: none;
   border-radius: 50%;
   width: 32px;
   height: 32px;
   cursor: pointer;
   font-size: 18px;
   line-height: 32px;
   transition:
     transform 0.2s,
     box-shadow 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .overlay-close:hover {
   transform: scale(1.1);
   box-shadow: 0 0 10px rgba(255, 156, 69, 0.6);
 }

 canvas {
   display: block;
 }

 #musicToggle {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 100;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.6);
   border: 2px solid #ff9c45 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #ff9c45;
   font-size: 16px;
   backdrop-filter: blur(3px);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
     background 0.2s ease;
 }

 #musicToggle:hover {
   transform: scale(1.1);
   background: rgba(0, 0, 0, 0.7);
   box-shadow: 0 0 10px rgba(255, 156, 69, 0.6);
 }

 #musicToggle i {
   color: #ff9c45 !important;
   /* force icon to stay orange */
 }

 #musicToggle:focus,
 #musicToggle:active {
   outline: none;
   /* remove focus outline */
   box-shadow: none;
   /* remove default focus glow */
 }

 #controlsGuide {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: rgba(0, 0, 0, 0.7);
   padding: 15px 20px;
   border-radius: 10px;
   border: 2px solid #ff6b35;
   font-size: 14px;
   z-index: 100;
   font-family: "Segoe UI", system-ui, sans-serif;
 }

 .controls-title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 6px;
   letter-spacing: 0.6px;
   color: #ffd28a;
 }

 .control-row {
   font-size: 15px;
   line-height: 1.6;
   display: flex;
   gap: 8px;
   white-space: nowrap;
   color: #ffd28a;
 }

 .control-row span {
   color: #ff9c45;
   /* brighter orange accent */
 }

 /* brighter breathing glow */
 @keyframes lanternPulse {
   0% {
     box-shadow:
       0 0 18px rgba(255, 130, 40, 0.38),
       inset 0 0 12px rgba(255, 200, 120, 0.2);
   }

   50% {
     box-shadow:
       0 0 28px rgba(255, 150, 60, 0.6),
       inset 0 0 18px rgba(255, 220, 140, 0.35);
   }

   100% {
     box-shadow:
       0 0 18px rgba(255, 130, 40, 0.38),
       inset 0 0 12px rgba(255, 200, 120, 0.2);
   }
 }

 /* subtle breathing glow */
 @keyframes lanternPulse {
   0% {
     box-shadow:
       0 0 16px rgba(255, 160, 60, 0.22),
       inset 0 0 10px rgba(255, 200, 120, 0.1);
   }

   50% {
     box-shadow:
       0 0 22px rgba(255, 170, 70, 0.35),
       inset 0 0 14px rgba(255, 210, 130, 0.16);
   }

   100% {
     box-shadow:
       0 0 16px rgba(255, 160, 60, 0.22),
       inset 0 0 10px rgba(255, 200, 120, 0.1);
   }
 }

 /* Hide keyboard controls guide on mobile */
 @media (max-width: 900px) {
   #controlsGuide {
     display: none !important;
   }
 }

 @media (max-width: 900px) {
   #overlay {
     padding: 6px;
   }

   .overlay-panel {
     width: 85vw;
     max-width: 280px;
     max-height: 55vh;

     padding: 10px;
     border-radius: 10px;

     font-size: 12px;
     overflow-y: auto;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
     -webkit-overflow-scrolling: touch;
   }

   .overlay-panel h1,
   .overlay-panel h2,
   .overlay-panel h3 {
     font-size: 14px;
     margin-bottom: 6px;
   }

   .overlay-panel p {
     font-size: 12px;
     line-height: 1.35;
     margin-bottom: 6px;
   }

   .overlay-close {
     top: 4px;
     right: 6px;
     font-size: 18px;
   }
 }

 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .tags span {
   padding: 6px 10px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 6px;
   font-size: 14px;
 }