@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Special+Elite&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #2c1810;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none;
  user-select: none;
}
canvas {
  display: block; width: 100%; height: 100%;
  cursor: crosshair;
}

#fullscreen-btn {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  background: rgba(92, 64, 51, 0.7); border: 2px solid #C4A882;
  color: #f5e6d3; font-size: 20px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: 0.2s;
  font-family: 'Special Elite', monospace;
}
#fullscreen-btn:hover { background: rgba(92, 64, 51, 0.9); transform: scale(1.05); }
#fullscreen-btn:active { transform: scale(0.95); }

#mute-btn {
  position: fixed; top: 12px; right: 60px; z-index: 100;
  background: rgba(92, 64, 51, 0.7); border: 2px solid #C4A882;
  color: #f5e6d3; font-size: 18px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: 0.2s;
  font-family: 'Special Elite', monospace;
}
#mute-btn:hover { background: rgba(92, 64, 51, 0.9); transform: scale(1.05); }

#mobile-controls {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: none; justify-content: space-between; padding: 16px 20px;
  pointer-events: none;
}
#mobile-controls.visible { display: flex; }
#mobile-controls > * { pointer-events: auto; }

.joystick-area {
  width: 130px; height: 130px; position: relative;
}
.joystick-base {
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(92, 64, 51, 0.5); border: 3px solid rgba(196, 168, 130, 0.5);
  position: absolute; bottom: 0; left: 0;
}
.joystick-stick {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(196, 168, 130, 0.7); border: 2px solid #f5e6d3;
  position: absolute; bottom: 40px; left: 40px;
  transition: none;
}

.action-buttons {
  display: flex; gap: 12px; align-items: flex-end;
}
.action-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(114, 47, 55, 0.6); border: 3px solid rgba(196, 168, 130, 0.5);
  color: #f5e6d3; font-family: 'Special Elite', monospace;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.2; cursor: pointer;
  backdrop-filter: blur(4px); pointer-events: auto;
}
.action-btn:active { background: rgba(114, 47, 55, 0.9); transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}