html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body { display: flex; align-items: center; justify-content: center; }
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}
@font-face { font-family: 'BrawlzArcade'; src: url('../fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); }
#touch { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
/* linke Bildhälfte: Joystick erscheint dort, wo der Daumen hinkommt */
#stickZone { position: absolute; left: 0; top: 15%; width: 50%; bottom: 0; pointer-events: auto; touch-action: none; }
#stick {
  position: absolute; left: 90px; top: calc(100% - 100px);
  width: 128px; height: 128px; margin: -64px 0 0 -64px; pointer-events: none;
  background: rgba(20,12,36,0.28);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  opacity: 0.45; transition: opacity 0.15s;
}
#stick::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.28);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%, 0 30%, 4px 30%, 4px 70%, 30% calc(100% - 4px), 70% calc(100% - 4px), calc(100% - 4px) 70%, calc(100% - 4px) 30%, 70% 4px, 30% 4px, 4px 30%, 0 30%);
}
#stick.on { opacity: 1; }
#knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  background: rgba(255,210,63,0.7);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.25);
}
#btns {
  position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: 10px;
  width: 210px; height: 190px; pointer-events: none;
}
.btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: 'BrawlzArcade', monospace; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  background: rgba(20,12,36,0.45);
  clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
  pointer-events: auto; touch-action: none;
  box-shadow: inset 0 0 0 4px var(--c), inset 0 -8px 0 rgba(0,0,0,0.3);
}
.btn.on { background: var(--c); opacity: 0.85; transform: translateY(2px); }
#bA { --c: rgba(76,201,76,0.85); right: 0; bottom: 0; width: 96px; height: 96px; font-size: 26px; }
#bB { --c: rgba(232,65,60,0.85); right: 108px; bottom: 10px; width: 68px; height: 68px; font-size: 18px; }
#bC { --c: rgba(61,123,240,0.85); right: 14px; bottom: 110px; width: 68px; height: 68px; font-size: 18px; }
#bPause {
  display: none; position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 36px; z-index: 6;
  font: 14px 'BrawlzArcade', monospace; color: #fff; text-align: center; line-height: 36px;
  background: rgba(20,12,36,0.55); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.45);
  clip-path: polygon(15% 0, 85% 0, 100% 20%, 100% 80%, 85% 100%, 15% 100%, 0 80%, 0 20%);
}
#rotate {
  display: none; position: fixed; inset: 0; z-index: 20; background: #140c24;
  align-items: center; justify-content: center;
}
#rotcv { width: 90vw; image-rendering: pixelated; }