body {
  background: #FF9500 url('assets/brett_hero.jpg') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-header {
  font-family: 'Bangers', cursive;
  font-size: 3rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
  margin-bottom: 0.2em;
  letter-spacing: 0.1em;
}

.timer-bar {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
  margin-bottom: 0.5em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
       .timer-score {
         font-family: 'Bangers', cursive;
         font-size: 1.5rem;
         color: #fff;
         text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
       }

       .bonkman-week-bar {
         font-family: 'Bangers', cursive;
         font-size: 1.2rem;
         color: #fff;
         text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
         margin-bottom: 0.5em;
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 12px;
       }
       .bonkman-week-info {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 4px;
       }
       .bonkman-week-score {
         font-family: 'Bangers', cursive;
         font-size: 0.8rem;
         color: #fff;
         text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
       }
       .bonkman-week-x-btn {
         font-family: 'Bangers', cursive;
         font-size: 1rem;
         background: #1da1f2;
         color: #fff;
         border: 2px solid #fff;
         border-radius: 6px;
         padding: 4px 12px;
         cursor: pointer;
         box-shadow: 0 2px 8px #0002;
         transition: background 0.2s, color 0.2s;
         font-weight: bold;
       }
       .bonkman-week-x-btn:hover {
         background: #fff;
         color: #1da1f2;
       }

       .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 32px;
  margin-bottom: 32px;
}

       #gameCanvas {
         background: #FF9500;
         border: none;
         display: block;
         box-shadow: 0 0 32px 8px #000;
         image-rendering: pixelated;
         image-rendering: -moz-crisp-edges;
         image-rendering: crisp-edges;
         -webkit-image-rendering: pixelated;
         -webkit-image-rendering: -webkit-optimize-contrast;
         max-width: 100%;
         height: auto;
         max-height: 80vh;
         width: auto;
       }
       
       @media (max-width: 768px) {
         #gameCanvas {
           max-width: 95vw;
           max-height: 70vh;
         }
         .page-header {
           font-size: 2rem;
         }
         .timer-bar {
           font-size: 1.2rem;
         }
         .bonkman-week-bar {
           font-size: 1rem;
         }
         .bonkman-week-score {
           font-size: 0.7rem;
         }
         .controls button {
           width: 48px;
           height: 48px;
           font-size: 1.5rem;
         }
       }
       
       @media (max-width: 480px) {
         #gameCanvas {
           max-width: 98vw;
           max-height: 60vh;
         }
         .page-header {
           font-size: 1.5rem;
         }
         .timer-bar {
           font-size: 1rem;
         }
         .bonkman-week-bar {
           font-size: 0.9rem;
         }
         .bonkman-week-score {
           font-size: 0.6rem;
         }
         .controls button {
           width: 44px;
           height: 44px;
           font-size: 1.3rem;
         }
       }

.controls {
  position: static;
  margin-top: 24px;
  pointer-events: auto;
}
.controls-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
       .controls button {
         width: 56px;
         height: 56px;
         margin: 4px;
         font-size: 2rem;
         border-radius: 50%;
         border: 2px solid #FF9500;
         background: linear-gradient(145deg, #fff 60%, #e0a040 100%);
         color: #FF9500;
         font-weight: bold;
         box-shadow: 0 6px 16px #0006, 0 2px 0 #fff8 inset, 0 1px 0 #fff4 inset;
         outline: none;
         cursor: pointer;
         transition: background 0.2s, color 0.2s, box-shadow 0.2s;
         opacity: 0.95;
         pointer-events: auto;
         position: relative;
         -webkit-tap-highlight-color: transparent;
         touch-action: manipulation;
       }
.controls button:active {
  background: linear-gradient(145deg, #e0a040 60%, #fff 100%);
  color: #fff;
  opacity: 1;
  border-color: #ff3333;
  box-shadow: 0 2px 4px #0008, 0 1px 0 #fff4 inset;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
       .modal-content {
         background: #FF9500;
         border-radius: 16px;
         padding: 32px 24px;
         box-shadow: 0 4px 32px #000a;
         text-align: center;
         font-family: 'Bangers', cursive;
         color: #fff;
         max-width: 90vw;
         display: flex;
         flex-direction: column;
         align-items: center;
       }
.modal-content h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
}
       .modal-rules {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-bottom: 24px;
         align-items: center;
         width: 100%;
       }
       .modal-rule {
         display: flex;
         align-items: center;
         font-size: 1.3rem;
         color: #fff;
         text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
         justify-content: center;
         text-align: center;
       }
.modal-rule-ghost {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  vertical-align: middle;
}
.modal-content button {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  background: #fff;
  color: #FF9500;
  border: 2px solid #FF9500;
  border-radius: 8px;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 2px 8px #0002;
  transition: background 0.2s, color 0.2s;
}
.modal-content button:active {
  background: #FF9500;
  color: #fff;
}

.score-bar, .timer-bar, .timer-score, .overlay-text {
  font-family: 'Bangers', cursive;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 4px 4px 8px #000;
}