body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: #0f1117;
      color: #e2e8f0;
      font-family: 'Arial Black', Impact, sans-serif;
      overflow: hidden;
      user-select: none;
      touch-action: none;
    }
    .game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #1e293b 0%, #0f1117 100%);
    }
    canvas {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      box-shadow: 0 0 50px rgba(0,0,0,0.8);
      cursor: crosshair;
    }
    .ui-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2vw;
      box-sizing: border-box;
      z-index: 10;
    }
    .hud-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .stat-box {
      border: 4px solid #e2e8f0;
      background: #0f1117;
      padding: 10px 20px;
      text-transform: uppercase;
      box-shadow: 8px 8px 0px #ef4444;
    }
    .hud-title {
      font-size: clamp(1rem, 2vw, 1.5rem);
      color: #ef4444;
      margin: 0;
      line-height: 1;
    }
    .hud-value {
      font-size: clamp(2rem, 4vw, 3rem);
      margin: 0;
      line-height: 1;
    }
    .pointer-auto {
      pointer-events: auto;
    }
    .btn-brutal {
      background: #eab308;
      color: #0f1117;
      border: 6px solid #e2e8f0;
      padding: 15px 30px;
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: bold;
      font-family: inherit;
      cursor: pointer;
      text-transform: uppercase;
      box-shadow: 8px 8px 0px #ef4444;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .btn-brutal:hover, .btn-brutal:active {
      transform: translate(4px, 4px);
      box-shadow: 4px 4px 0px #ef4444;
      background: #ef4444;
      color: #e2e8f0;
    }
    .btn-share {
      background: #0f1117;
      color: #38bdf8;
      border-color: #38bdf8;
      box-shadow: 8px 8px 0px #38bdf8;
    }
    .btn-share:hover, .btn-share:active {
      box-shadow: 4px 4px 0px #38bdf8;
      background: #38bdf8;
      color: #0f1117;
    }
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 17, 23, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      z-index: 20;
      backdrop-filter: blur(5px);
    }
    .massive-text {
      font-size: clamp(4rem, 10vw, 8rem);
      color: #ef4444;
      text-align: center;
      margin: 0;
      line-height: 0.9;
      letter-spacing: -2px;
      text-shadow: 10px 10px 0px #e2e8f0;
      transform: rotate(-5deg);
      margin-bottom: 40px;
    }
    .shake {
      animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }
    @keyframes shake {
      10%, 90% { transform: translate3d(-10px, 0, 0) rotate(-1deg); }
      20%, 80% { transform: translate3d(20px, 0, 0) rotate(1deg); }
      30%, 50%, 70% { transform: translate3d(-40px, 0, 0) rotate(-2deg); }
      40%, 60% { transform: translate3d(40px, 0, 0) rotate(2deg); }
    }
    .instructions {
      font-size: 1.2rem;
      max-width: 600px;
      text-align: center;
      margin-bottom: 30px;
      background: #0f1117;
      padding: 15px;
      border: 3px dashed #eab308;
    }
    .highlight { color: #eab308; }