@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; touch-action: none; -webkit-touch-callout: none; }
body { cursor: default; user-select: none; -webkit-user-select: none; }
canvas { display: block; touch-action: none; }
#game { position: fixed; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#gui { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; image-rendering: pixelated; display: none; }

/* Minecraft Bedrock Mobile Touch Overlay */
#touch-layer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  font-family: 'Press Start 2P', 'TerraBorne', 'Minecraft', monospace, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.touch-layer-hidden { display: none !important; }
.touch-layer-visible { display: block !important; }

/* Top Bar: Pause, Chat, Camera, Drop, Debug */
#touch-top-bar {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 8px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  pointer-events: auto;
  align-items: center;
}
.touch-btn {
  background: rgba(45, 48, 55, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(20, 22, 26, 0.85);
  border-radius: 8px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0,0,0,0.45);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.08s, background 0.08s;
  box-sizing: border-box;
  padding: 0;
}
.touch-btn:active, .touch-btn.active {
  background: rgba(26, 28, 32, 0.82);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.25);
  transform: scale(0.94);
}
.touch-btn-debug {
  font-size: 13px;
  width: 40px;
  font-family: inherit;
  text-shadow: 1px 1px 0 #000;
  opacity: 0.9;
}

/* Minecraft Bedrock Virtual Joystick Controller (Bottom-Left) */
#touch-joystick {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 16px));
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#touch-joystick-base {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.joystick-base-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}
#touch-joystick-knob {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d8dde4 40%, #a4aab4 75%, #767b84 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 2px 2px 2px #ffffff, inset -2px -2px 2px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate(0px, 0px);
  will-change: transform;
  transition: transform 0.06s ease-out;
  box-sizing: border-box;
}
#touch-joystick-knob.active {
  transition: none;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ccd1d8 40%, #949aa4 75%, #666a74 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65), inset 1px 1px 2px #ffffff, inset -2px -2px 2px rgba(0, 0, 0, 0.5);
}
.joystick-knob-indent {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 55, 62, 0.65) 0%, rgba(100, 105, 115, 0.2) 70%, transparent 100%);
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Minecraft Bedrock Classic D-Pad Controller (Bottom-Left) */
#touch-dpad {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 16px));
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  width: 140px;
  height: 140px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dpad-btn {
  position: absolute;
  background: rgba(45, 48, 55, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(20, 22, 26, 0.85);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.06s, background 0.06s;
}
.dpad-btn:active, .dpad-btn.active {
  background: rgba(26, 28, 32, 0.82);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.25);
  transform: scale(0.95);
}
#dpad-up {
  top: 0;
  left: 47px;
  width: 46px;
  height: 46px;
  border-radius: 10px 10px 4px 4px;
}
#dpad-down {
  bottom: 0;
  left: 47px;
  width: 46px;
  height: 46px;
  border-radius: 4px 4px 10px 10px;
}
#dpad-left {
  top: 47px;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px 4px 4px 10px;
}
#dpad-right {
  top: 47px;
  right: 0;
  width: 46px;
  height: 46px;
  border-radius: 4px 10px 10px 4px;
}
#dpad-center {
  top: 47px;
  left: 47px;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: rgba(38, 40, 46, 0.65);
}
#dpad-center.sneak-locked {
  background: rgba(230, 160, 20, 0.45) !important;
  border-color: #ffaa00 !important;
  box-shadow: inset 2px 2px 0 #ffe082, inset -2px -2px 0 #b26a00, 0 0 12px rgba(255, 180, 30, 0.75) !important;
}

/* Minecraft Bedrock Action & Movement Buttons (Bottom-Right) */
#touch-actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 16px));
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  display: flex;
  gap: 12px;
  pointer-events: auto;
  touch-action: none;
  align-items: flex-start;
  user-select: none;
  -webkit-user-select: none;
}
.touch-action-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.touch-action-col.col-right {
  margin-top: 33px; /* Staggers Sprint between Jump & Sneak, and Hand between Sneak & Attack */
}

/* Authentic Bedrock Button Texture */
.bedrock-touch-btn {
  width: 54px;
  height: 54px;
  background: rgba(45, 48, 55, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(20, 22, 26, 0.85);
  border-radius: 8px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.06s, background 0.06s;
  box-sizing: border-box;
  padding: 0;
}
.bedrock-touch-btn:active, .bedrock-touch-btn.active {
  background: rgba(26, 28, 32, 0.82);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
}
.bedrock-touch-btn.locked {
  background: rgba(230, 160, 20, 0.45);
  border-color: #ffaa00;
  box-shadow: inset 2px 2px 0 #ffe082, inset -2px -2px 0 #b26a00, 0 0 12px rgba(255, 180, 30, 0.75);
}
.bedrock-touch-btn.sprint-active {
  background: rgba(40, 160, 60, 0.45);
  border-color: #55ff55;
  box-shadow: inset 2px 2px 0 #b9f6ca, inset -2px -2px 0 #1b5e20, 0 0 12px rgba(85, 255, 85, 0.75);
}
.bedrock-touch-btn.flying {
  background: rgba(40, 160, 220, 0.45);
  border-color: #33b5e5;
  box-shadow: inset 2px 2px 0 #b3e5fc, inset -2px -2px 0 #0277bd, 0 0 12px rgba(51, 181, 229, 0.85);
}
.bedrock-icon {
  width: 32px;
  height: 32px;
  pointer-events: none;
  display: block;
}

/* Touch Layout Variations */
.touch-layout-buttons #touch-joystick { display: flex !important; }
.touch-layout-buttons #touch-dpad { display: none !important; }
.touch-layout-buttons #touch-actions { display: flex !important; }

.touch-layout-classic #touch-joystick { display: none !important; }
.touch-layout-classic #touch-dpad { display: block !important; }
.touch-layout-classic #touch-actions .col-right { display: none !important; }
.touch-layout-classic #touch-actions #btn-touch-break { display: none !important; }

/* Touch Size Variations */
.touch-size-normal #touch-joystick { width: 140px; height: 140px; }
.touch-size-normal #touch-joystick-base { width: 130px; height: 130px; }
.touch-size-normal #touch-joystick-knob { width: 52px; height: 52px; }
.touch-size-normal .bedrock-touch-btn { width: 54px; height: 54px; }
.touch-size-normal .bedrock-icon { width: 32px; height: 32px; }
.touch-size-normal #touch-dpad { width: 140px; height: 140px; }
.touch-size-normal .dpad-btn { width: 46px; height: 46px; }

.touch-size-large #touch-joystick { width: 160px; height: 160px; }
.touch-size-large #touch-joystick-base { width: 150px; height: 150px; }
.touch-size-large #touch-joystick-knob { width: 60px; height: 60px; }
.touch-size-large .bedrock-touch-btn { width: 64px; height: 64px; }
.touch-size-large .bedrock-icon { width: 38px; height: 38px; }
.touch-size-large .touch-action-col.col-right { margin-top: 38px; }
.touch-size-large #touch-dpad { width: 160px; height: 160px; }
.touch-size-large .dpad-btn { width: 53px; height: 53px; }
.touch-size-large #dpad-up, .touch-size-large #dpad-down { left: 53px; }
.touch-size-large #dpad-left, .touch-size-large #dpad-right { top: 53px; }
.touch-size-large #dpad-center { top: 53px; left: 53px; }

.touch-size-xlarge #touch-joystick { width: 180px; height: 180px; }
.touch-size-xlarge #touch-joystick-base { width: 170px; height: 170px; }
.touch-size-xlarge #touch-joystick-knob { width: 68px; height: 68px; }
.touch-size-xlarge .bedrock-touch-btn { width: 74px; height: 74px; }
.touch-size-xlarge .bedrock-icon { width: 44px; height: 44px; }
.touch-size-xlarge .touch-action-col.col-right { margin-top: 43px; }
.touch-size-xlarge #touch-dpad { width: 180px; height: 180px; }
.touch-size-xlarge .dpad-btn { width: 60px; height: 60px; }
.touch-size-xlarge #dpad-up, .touch-size-xlarge #dpad-down { left: 60px; }
.touch-size-xlarge #dpad-left, .touch-size-xlarge #dpad-right { top: 60px; }
.touch-size-xlarge #dpad-center { top: 60px; left: 60px; }

/* Minecraft Bedrock Hotbar Inventory Button ("···") */
#touch-hotbar-bar {
  position: absolute;
  bottom: max(10px, env(safe-area-inset-bottom, 10px));
  left: 50%;
  pointer-events: auto;
  z-index: 105;
}
.touch-bedrock-dots {
  position: absolute;
  bottom: 0;
  left: 96px;
  width: 26px;
  height: 24px;
  background: rgba(45, 48, 55, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 2px solid rgba(20, 22, 26, 0.85);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.08s, background 0.08s;
  box-sizing: border-box;
  padding: 0;
}
.touch-bedrock-dots:active {
  background: rgba(26, 28, 32, 0.82);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.25);
  transform: scale(0.93);
}

/* Mobile Chat Bar & Commands */
#touch-chat-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  background: rgba(18, 20, 24, 0.96);
  border-top: 2px solid #555;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100010;
}
.touch-chat-bar-hidden { display: none !important; }
.touch-chat-bar-visible { display: flex !important; }

#touch-cmd-suggestions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 2px 2px 4px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#touch-cmd-suggestions::-webkit-scrollbar {
  display: none;
}
.touch-cmd-chip {
  background: rgba(40, 44, 52, 0.95);
  color: #55ff55;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: 'Press Start 2P', monospace, sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.touch-cmd-chip:active {
  background: #2e7d32;
  color: #ffffff;
  border-color: #81c784;
}

#touch-chat-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

#touch-chat-input {
  flex: 1;
  background: #000;
  border: 2px solid #666;
  color: #fff;
  padding: 8px 12px;
  font-size: 16px;
  font-family: 'Press Start 2P', monospace, sans-serif;
  border-radius: 4px;
  outline: none;
}
#touch-chat-input:focus {
  border-color: #55ff55;
}
#touch-chat-send {
  background: #3f9b45;
  border: 2px solid #2e7d32;
  border-top-color: #81c784;
  border-left-color: #81c784;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
#touch-chat-close {
  background: #666;
  border: 2px solid #444;
  color: #fff;
  font-size: 16px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.touch-btn-cmd {
  font-size: 20px !important;
  font-weight: bold;
  color: #55ff55 !important;
}

/* Real synchronized mobile active field overlay */
#touch-active-field-overlay {
  position: fixed;
  box-sizing: border-box;
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 2px 6px;
  font-family: 'Press Start 2P', monospace, sans-serif;
  font-size: 16px;
  z-index: 100005;
  display: none;
  outline: none;
  border-radius: 0;
  box-shadow: 0 0 0 1px #000000, 0 4px 12px rgba(0,0,0,0.5);
  pointer-events: auto;
}

/* Landscape Orientation Warning Overlay */
#orientation-warning {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 20, 0.96);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

@media (orientation: portrait) {
  #orientation-warning {
    display: flex;
  }
}

#orientation-warning.dismissed {
  display: none !important;
}

.warning-box {
  background: #2c2d30;
  border: 4px solid #3c3d40;
  box-shadow: 0 8px 24px rgba(0,0,0,0.85);
  padding: 30px 20px;
  max-width: 420px;
  width: 100%;
  border-radius: 12px;
  box-sizing: border-box;
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 20px;
  animation: rotatePhone 2.5s infinite ease-in-out;
}

@keyframes rotatePhone {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(90deg); }
  65% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

.warning-box h2 {
  font-size: 14px;
  color: #ff5555;
  margin: 0 0 15px 0;
  line-height: 1.6;
  text-transform: uppercase;
}

.warning-box p {
  font-size: 10px;
  color: #aaaaaa;
  margin: 0 0 25px 0;
  line-height: 1.8;
}

.warning-button {
  display: inline-block;
  background: #3f4042;
  border: 2px solid #5a5a5c;
  border-bottom-color: #222324;
  border-right-color: #222324;
  color: #ffffff;
  font-size: 9px;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
  transition: background 0.08s;
}

.warning-button:active {
  background: #222324;
  border-color: #3f4042;
}