:root {
    /* Color Palette */
    --color-background: #050300;
    --color-white: #fff;
    --color-black: #050300;
    --color-primary: #FF2370;
    --color-primary-dark: #C71453;
    --color-shadow-pink: rgba(255, 35, 112, 0.6);
    --color-shadow-white: #d1d1d1;
  
    /* Typography */
    --font-family-main: 'Play', sans-serif;
    --font-family-mobile: 'Hanken Grotesk', sans-serif;
    --font-family-mobile-subtext: 'Inter', sans-serif;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-lg: 60px;
    --font-size-xl: 100px;
  
    /* Spacing */
    --margin-header-top: 30px;
    --margin-header-bottom: 20px;
    --margin-subtext-bottom: 48px;
    --margin-gameover-text-bottom: 80px;
    --gap-btns: 20px;
  
    /* Transitions & Effects */
    --transition-fast: 0.1s ease-in;
    --transition-medium: 0.2s ease;
    --transition-entrance: 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    --button-movement: 0.5s cubic-bezier(.22,.68,0,1.71);
    --scale-hover: 1.05;
    --shadow-depth: 6px;
    --shadow-depth-hover: 4px;
    --shadow-depth-pressed: 2px;
  }
  
  /* Styles */
  
  body {
      margin: 0;
      padding: 0;
      background-color: var(--color-background);
      color: var(--color-white);
      font-family: var(--font-family-main);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: top;
      min-height: 100vh;
      cursor: default;
  }
  
  canvas {
      display: block;
      cursor: crosshair;
      opacity: 0;
  }
  
  #mainContainer {
      position: relative;
      display: block;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
  }
  
  #gameContainer, #mobileContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      opacity: 0;
      transition: opacity var(--transition-fast), transform var(--transition-fast);
      transform: translateY(20px);
      animation: fadeIn var(--transition-entrance) forwards;
      animation-delay: 0.7s;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
  }
  
  .header-row {
      display: flex;
      padding: 0;
  }
  
  .header-col {
      flex: 1;
      display: flex;
      align-items: flex-end;
      height: 100%;
      margin: var(--margin-header-top) auto var(--margin-header-bottom);
  }
  
  .left-col {
      justify-content: flex-start;
      text-align: left;
  }
  
  .center-col {
      justify-content: center;
  }
  
  .right-col {
      justify-content: flex-end;
      text-align: right;
  }
  
  .logo {
      height: 30px;
      width: 30px;
      margin-top: 10px;
      z-index: 1000;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-20px);
      animation: fadeIn var(--transition-entrance) forwards;
      animation-delay: 0.3s;
      display: flex;
  }
  
  @keyframes fadeIn {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  .game-info {
      display: none;
      font-weight: 400;
      text-transform: uppercase;
      font-size: var(--font-size-xs);
      color: var(--color-primary);
      transform: translateY(-20px);
      animation: fadeIn var(--transition-entrance) forwards;
      animation-delay: 0s;
      opacity: 0;
  }
  
  .game-info .game-detail {
      font-size: var(--font-size-md);
      font-weight: bold;
  }
  
  .life-icon {
      width: var(--font-size-md);
      height: var(--font-size-md);
      vertical-align: middle;
  }
  
  #startMessage {
      display: block;
      text-align: center;
      opacity: 1;
      color: var(--color-primary);
      text-transform: uppercase;
      isolation: isolate;
      position: absolute;
      top: 450px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      cursor: crosshair;
      pointer-events: none;
  }
  
  #startMessage .startText {
      font-size: var(--font-size-md);
      animation: gameOverPulse 2s infinite forwards;
  }
  
  #startMessage.hidden {
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
  }
  
  #audioToggle {
      all: unset;
      cursor: pointer;
      margin: 8px;
      opacity: 0.8;
      transition: opacity var(--transition-medium);
  }
  
  #audioToggle:hover {
      opacity: 1;
      transform: scale(var(--scale-hover));
  }
  
  #audioToggle svg {
      display: none;
      width: 24px;
      height: 24px;
      fill: var(--color-primary);
  }
  
  .heavy {
      font-weight: bold;
      text-shadow: 0 0 8px var(--color-shadow-pink);
      text-transform: uppercase;
  }
  
  #gameOver {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      flex-direction: column;
  }
  
  .game-over-text {
      font-size: var(--font-size-xl);
      line-height: 75px;
      margin-bottom: var(--margin-gameover-text-bottom);
      font-weight: bold;
      color: var(--color-white);
      letter-spacing: -5px;
      text-align: center;
      text-transform: uppercase;
      animation: gameOverPulse 2s infinite;
  }
  
  .game-over-subtext {
      width: 100%;
      font-size: var(--font-size-md);
      line-height: 28px;
      margin-bottom: var(--margin-subtext-bottom);
      color: var(--color-white);
      text-align: center;
  }
  
  .game-over-subtext span {
      font-weight: bold;
  }
  
  @keyframes gameOverPulse {
      0% {
          opacity: 0.7;
          transform: scale(1);
      }
      50% {
          opacity: 1;
          transform: scale(1.05);
      }
      100% {
          opacity: 0.7;
          transform: scale(1);
      }
  }
  
  .game-over-btns {
      display: flex;
      width: 400px;
      gap: var(--gap-btns);
  }
  
  .btn-3d {
      flex: 1;
      padding: 6px 20px;
      color: var(--color-white);
      font-family: var(--font-family-main);
      font-size: var(--font-size-sm);
      border: none;
      border-radius: 0;
      transition: all var(--button-movement);
      cursor: pointer;
      text-transform: none;
      align-items: center;
      justify-content: center;
      display: inline-flex;
  }
  
  .btn-3d img {
      height: 16px;
      margin-right: 10px;
  }
  
  .btn-red {
      color: var(--color-white);
      font-weight: bold;
      background-color: var(--color-primary);
      box-shadow: 0 var(--shadow-depth) 0 var(--color-primary-dark);
  }
  
  .btn-red:hover {
      transform: translateY(2px);
      box-shadow: 0 var(--shadow-depth-hover) 0 var(--color-primary-dark);
  }
  
  .btn-red:active {
      transform: translateY(4px);
      box-shadow: 0 var(--shadow-depth-pressed) 0 var(--color-primary-dark);
  }
  
  .btn-white {
      font-weight: 400;
      color: var(--color-black);
      background-color: var(--color-white);
      box-shadow: 0 var(--shadow-depth) 0 var(--color-shadow-white);
  }
  
  .btn-white:hover {
      transform: translateY(2px);
      box-shadow: 0 var(--shadow-depth-hover) 0 var(--color-shadow-white);
  }
  
  .btn-white:active {
      transform: translateY(4px);
      box-shadow: 0 var(--shadow-depth-pressed) 0 var(--color-shadow-white);
  }
  
  
  .mobile-message {
      max-width: 100%;
      width: 100%;
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      font-family: var(--font-family-mobile-subtext);
  }
  
  .mobile-message h2 {
      color: var(--color-white);
      margin: 20px;
      letter-spacing: -2px;
      line-height: 0.95;
      font-size: var(--font-size-lg);
      font-family: var(--font-family-mobile);   
  }
  
  .mobile-message p {
      align-items: center;
      text-align: center;
      color: var(--color-white);
      font-size: var(--font-size-md);
      line-height: 1.4;
      margin-top: 50px;
      margin-bottom: 40px;
      font-weight: 300;
  }

  .mobile-message button {
    font-family: var(--font-family-mobile-subtext);
    font-size: var(--font-size-xs);
    font-weight: 400;
  }

  .mobile-message p img {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin: 0 10px;
}
  
  /* Mobile device detection and container switching */
  @media screen and (max-width: 768px) {
      #gameContainer {
          display: none !important;
      }
      
      #mobileContainer {
          display: block;
      }
  }
  
  /* For JavaScript-based detection */
  .is-mobile #gameContainer {
      display: none !important;
  }
  
  .is-mobile #mobileContainer {
      display: block;
  }