/* Define CSS custom properties for tweakable values related to the menu design */
:root {
  /* General Menu Overlay */
  /* @tweakable The background color of the full-screen menu overlay, typically a semi-transparent black. */
  --menu-background-overlay-color: rgba(0, 0, 0, 0.5);
  /* @tweakable The default text color for general menu elements like instructions. */
  --menu-text-color: #eee;
  /* @tweakable The font size for general menu instructions. */
  --menu-instructions-font-size: 1.1em;

  /* Main Menu Specific Tweakable Values */
  /* @tweakable The maximum width of the central content box within the main menu. */
  --main-menu-content-box-max-width: 500px;
  /* @tweakable The padding applied inside the central menu content box for the main menu. */
  --main-menu-content-box-padding: 40px;
  /* @tweakable The background color of menu buttons for the main menu. */
  --main-menu-button-background-color: rgba(160, 160, 160, 0.2);
  /* @tweakable The border color of menu buttons for the main menu. */
  --main-menu-button-border-color: #555;
  /* @tweakable The background color of menu buttons when hovered for the main menu. */
  --main-menu-button-hover-background-color: rgba(180, 180, 180, 0.3);
  /* @tweakable The text color for the main menu title. */
  --main-menu-title-color: white;
  /* @tweakable The font size for the main menu title. */
  --main-menu-title-font-size: 3.5em;
  /* @tweakable The font size for main menu buttons. */
  --main-menu-button-font-size: 1.5em;
  /* @tweakable The gap between menu elements in the main menu. */
  --main-menu-element-gap: 15px;

  /* Pause Menu Specific Tweakable Values */
  /* @tweakable The maximum width of the central content box specifically for the pause menu. */
  --pause-menu-content-box-max-width: 600px; /* Increased for wider menu */
  /* @tweakable The padding applied inside the central menu content box for the pause menu. */
  --pause-menu-content-box-padding: 20px; /* Decreased for smaller menu */
  /* @tweakable The background color of the actual menu content box for the pause menu. */
  --pause-menu-content-box-bg-color: rgba(60, 60, 60, 0.95); /* Dark grey, almost opaque */
  /* @tweakable The border color for the menu content box in the pause menu. */
  --pause-menu-content-box-border-color: #333; /* Darker border */
  /* @tweakable The border size for the menu content box in the pause menu. */
  --pause-menu-content-box-border-size: 3.4px;
  /* @tweakable The text color for the pause menu title. */
  --pause-menu-title-color: white;
  /* @tweakable The font size for the pause menu title. */
  --pause-menu-title-font-size: 3.4em;
  /* @tweakable The background color of buttons in the pause menu. */
  --pause-menu-button-bg-color: #585858; /* Minecraft button dark grey */
  /* @tweakable The border color of buttons in the pause menu. */
  --pause-menu-button-border-color: #333;
  /* @tweakable The hover background color of buttons in the pause menu. */
  --pause-menu-button-hover-bg-color: #707070; /* Lighter grey on hover */
  /* @tweakable The text color of buttons in the pause menu. */
  --pause-menu-button-text-color: white;
  /* @tweakable The font size of buttons in the pause menu. */
  --pause-menu-button-font-size: 2.04em; /* Slightly smaller than main menu */
  /* @tweakable The gap between buttons in the pause menu. */
  --pause-menu-button-gap: 10px; /* Decreased for smaller menu */
  /* @tweakable The global font family used throughout the application. */
  --global-font-family: 'Dangrek', cursive;

  /* Hotbar Specific Tweakable Values */
  /* @tweakable The size (width/height) of a single hotbar slot. */
  --hotbar-slot-size: 64px;
  /* @tweakable The spacing (gap) between slots in the hotbar. */
  --hotbar-slot-gap: 5px;
  /* @tweakable The background color of the hotbar container. */
  --hotbar-background-color: rgba(0, 0, 0, 0.6);
  /* @tweakable The border color for inactive hotbar slots. */
  --hotbar-slot-border-color: #333;
  /* @tweakable The border color for the currently selected hotbar slot. */
  --hotbar-selected-border-color: #f4e842; /* Bright yellow */

  /* Close Button Specific Tweakable Values */
  /* @tweakable The background color of the close button (X). */
  --close-button-background-color: #f44336;
  /* @tweakable The hover background color of the close button (X). */
  --close-button-hover-background-color: #d32f2f;
  /* @tweakable The text color of the close button (X). */
  --close-button-text-color: white;
  /* @tweakable The font size of the close button (X). */
  --close-button-font-size: 1.2em;
  /* @tweakable The padding of the close button (X). */
  --close-button-padding: 5px 10px;
  /* @tweakable The border-radius of the close button (X). */
  --close-button-border-radius: 5px;
  /* @tweakable The top offset of the close button (X). */
  --close-button-top-offset: 15px;
  /* @tweakable The right offset of the close button (X). */
  --close-button-right-offset: 15px;

  /* Reset Button Specific Tweakable Values */
  /* @tweakable The background color for the "Reset to Default" buttons. */
  --reset-button-background-color: #616161; /* Grey for reset button */
  /* @tweakable The hover background color for the "Reset to Default" buttons. */
  --reset-button-hover-background-color: #757575; /* Lighter grey on hover */
  /* @tweakable The text color for the "Reset to Default" buttons. */
  --reset-button-text-color: white;
  
  /* Item Picker Tooltip Tweakable Values */
  /* @tweakable The background color of the item picker tooltip. */
  --tooltip-background-color: rgba(30, 30, 30, 0.95);
  /* @tweakable The text color for the item picker tooltip. */
  --tooltip-text-color: #fff;
  /* @tweakable The padding inside the item picker tooltip. */
  --tooltip-padding: 5px 10px;
  /* @tweakable The border radius of the item picker tooltip. */
  --tooltip-border-radius: 4px;
  
  /* Trash Area Tweakable Values */
  /* @tweakable The background color of the trash area in the item picker. */
  --trash-area-background-color: rgba(255, 0, 0, 0.1); 
  /* @tweakable The border color of the trash area in the item picker when nothing is hovered. */
  --trash-area-border-color: #f44336; 
  /* @tweakable The border color of the trash area in the item picker when an item is hovered over it for removal. */
  --trash-area-hover-border-color: #ff9800;
  /* @tweakable The font size of the trash icon. */
  --trash-icon-font-size: 3em; 

  /* Compass Bar Specific Tweakable Values */
  /* @tweakable The height of the compass bar container. */
  --compass-bar-height: 30px;
  /* @tweakable The background color of the compass bar container. */
  --compass-background-color: rgba(0, 0, 0, 0.5);
  /* @tweakable The font size of the direction text in the compass bar. */
  --compass-text-font-size: 1.1em;
  /* @tweakable The text color for the compass bar directions. */
  --compass-text-color: #fff;
  /* @tweakable The text color for the active (current) direction in the compass bar. */
  --compass-active-text-color: #f4e842;

  /* Splash Screen Specific Tweakable Values */
  /* @tweakable The background color of the initial splash screen. */
  --splash-screen-background-color: white;
  /* @tweakable The maximum width of the splash image on the splash screen. */
  --splash-image-max-width: 80%;
  /* @tweakable The duration of the splash screen fade-out animation in seconds. */
  --splash-fade-duration: 1.0s;
  /* @tweakable The total duration the splash screen is displayed before starting the fade-out, in seconds. */
  --splash-display-duration: 3.0s;

  /* Mobile UI Tweakable Values */
  /* @tweakable The size (width/height) of mobile menu buttons. */
  --mobile-btn-size: 50px;
  /* @tweakable The background color of mobile menu buttons. */
  --mobile-btn-bg-color: rgba(0, 0, 0, 0.5);
  /* @tweakable The color of the icon/text in mobile menu buttons. */
  --mobile-btn-text-color: #fff;
  /* @tweakable The font size of the icon/text in mobile menu buttons. */
  --mobile-btn-font-size: 1.5em;
  /* @tweakable The spacing between mobile menu buttons. */
  --mobile-btn-spacing: 10px;

  /* @tweakable The size (width/height) of a single hotbar slot on mobile. */
  --hotbar-slot-size-mobile: 50px;
  /* @tweakable The spacing (gap) between slots in the hotbar on mobile. */
  --hotbar-slot-gap-mobile: 3px;

  /* @tweakable The Z-index for the Pause Menu, lower than editors. */
  --pause-menu-z-index: 2000;
  /* @tweakable The Z-index for all utility menus (Customize Avatar, Settings, Hacks, Item Picker), higher than the Pause Menu. */
  --utility-menu-z-index: 2001; 
  /* @tweakable The Z-index for tooltips, ensuring they are displayed above all menus and controls. */
  --tooltip-z-index: 3000;
}

/* Import Dangrek font */
@font-face {
  font-family: 'Dangrek';
  src: url('Dangrek-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--global-font-family); /* Use the new global font */
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  touch-action: manipulation;
  -webkit-touch-callout: none; /* iOS Safari */
  background-color: black; /* Default body background when game container is not visible */
}

#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* New Splash Screen Styles (using .full-screen-menu base) */
#splash-screen {
    background-color: var(--splash-screen-background-color);
    z-index: 5000; /* Highest Z-index to ensure it covers everything */
    opacity: 1;
    transition: opacity var(--splash-fade-duration) ease-out;
    pointer-events: all;
}

.splash-image {
    max-width: var(--splash-image-max-width);
    max-height: 80vh;
    object-fit: contain;
    /* Ensure image is not dragged */
    user-select: none;
    -webkit-user-select: none;
}

/* New Compass Bar Styles */
#compass-bar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: var(--compass-bar-height);
    background-color: var(--compass-background-color);
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 1500;
    font-family: var(--global-font-family);
    pointer-events: none; /* Do not block interaction with elements beneath */
}

.compass-direction {
    font-size: var(--compass-text-font-size);
    color: var(--compass-text-color);
    transition: color 0.1s;
    font-weight: bold;
}

.compass-direction.active {
    color: var(--compass-active-text-color);
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}

/* General full-screen menu containers */
.full-screen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--menu-background-overlay-color); /* Semi-transparent overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--menu-text-color);
  z-index: var(--pause-menu-z-index); /* Use tweakable variable */
  text-align: center;
  font-family: var(--global-font-family); /* Apply font to main menu container */
}

/* General menu content box styling */
.menu-content-box {
  background-color: rgba(0, 0, 0, 0.75); /* Default darker, more opaque for the inner box, overridden by specific menus */
  padding: var(--main-menu-content-box-padding); /* Default, overridden by specific menus */
  border-radius: 12px;
  max-width: var(--main-menu-content-box-max-width); /* Default, overridden by specific menus */
  width: 90%; /* Responsive width */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Default, overridden by specific menus */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--main-menu-element-gap); /* Default, overridden by specific menus */
}

/* General h1 styling for full-screen menus */
.full-screen-menu h1 {
  font-size: var(--main-menu-title-font-size); /* Default, overridden by specific menus */
  color: var(--main-menu-title-color); /* Default, overridden by specific menus */
  margin-bottom: 0.5em; 
  text-shadow: none;
  font-family: var(--global-font-family); /* Explicitly apply font */
}

/* Common button styling for all menu buttons */
.menu-button {
  padding: 15px 30px;
  font-size: var(--main-menu-button-font-size); /* Default, overridden by specific menus */
  background-color: var(--main-menu-button-background-color); /* Default, overridden by specific menus */
  color: white;
  border: 2px solid var(--main-menu-button-border-color); /* Default, overridden by specific menus */
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Removed transform for general menu buttons */
  box-shadow: none;
  width: 80%; /* Make buttons fill reasonable width */
  max-width: 300px; /* Max width for buttons */
  font-family: var(--global-font-family); /* Explicitly apply font */
}

.menu-button:hover {
  background-color: var(--main-menu-button-hover-background-color); /* Default, overridden by specific menus */
  transform: none; /* Ensures no transform by default on hover unless explicitly set */
}

.menu-button:active {
  transform: none;
}

/* Styling for instructions text within menus */
.menu-instructions {
  margin-top: 1.5em;
  font-size: var(--menu-instructions-font-size);
  color: var(--menu-text-color);
  text-shadow: none;
  max-width: 80%;
  text-align: center;
  line-height: 1.5;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--global-font-family); /* Explicitly apply font */
}

/* Main Menu specific overrides */
#main-menu {
  /* Uses general .full-screen-menu and .menu-content-box defaults which reference main-menu variables */
}

#main-menu .menu-content-box {
  background-color: rgba(0, 0, 0, 0.75); /* Explicitly set to default for main menu */
  padding: var(--main-menu-content-box-padding);
  max-width: var(--main-menu-content-box-max-width);
  gap: var(--main-menu-element-gap);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Keep shadow for main menu */
}

#main-menu h1 {
  font-size: var(--main-menu-title-font-size);
  color: var(--main-menu-title-color);
}

#main-menu .menu-button {
  background-color: var(--main-menu-button-background-color);
  border-color: var(--main-menu-button-border-color);
  font-size: var(--main-menu-button-font-size);
}
#main-menu .menu-button:hover {
  background-color: var(--main-menu-button-hover-background-color);
  transform: translateY(-2px); /* Specific transform for main menu buttons on hover */
}

/* Pause Menu specific styles (overrides general styles to match Minecraft) */
#pause-menu {
  /* No background image */
  background-size: cover;
  background-position: center;
  background-color: var(--menu-background-overlay-color); /* Keeps the general overlay effect on top of the image */
  font-family: var(--global-font-family); /* Apply font to pause menu container */
}

#pause-menu .menu-content-box {
  background-color: var(--pause-menu-content-box-bg-color);
  border: var(--pause-menu-content-box-border-size) solid var(--pause-menu-content-box-border-color);
  max-width: var(--pause-menu-content-box-max-width);
  padding: var(--pause-menu-content-box-padding);
  box-shadow: none; /* Minecraft menu typically has no strong shadow */
  gap: var(--pause-menu-button-gap);
}

#pause-menu h1 {
  font-size: var(--pause-menu-title-font-size);
  color: var(--pause-menu-title-color);
  /* @tweakable The bottom margin of the pause menu title, separating it from the first button. */
  margin-bottom: 15px; /* Adjusted margin for pause menu title, decreased for smaller menu */
}

#pause-menu .menu-button {
  background-color: var(--pause-menu-button-bg-color);
  border: 1px solid var(--pause-menu-button-border-color);
  color: var(--pause-menu-button-text-color);
  font-size: var(--pause-menu-button-font-size);
  padding: 8px 15px; /* Adjust button padding for Minecraft style */
  transform: none; /* No transform on hover for Minecraft style */
  box-shadow: none;
  width: calc(100% - 2px); /* Account for 1px border on each side */
  /* @tweakable The maximum width for buttons within the pause menu. */
  max-width: 500px; /* Increased to fit wider menu content box */
}

#pause-menu .menu-button:hover {
  background-color: var(--pause-menu-button-hover-bg-color);
  transform: none; /* Override hover transform for Minecraft style */
}

#pause-menu .menu-button:active {
  transform: none; /* Override active transform for Minecraft style */
}

.online-users {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  z-index: 10;
  font-family: var(--global-font-family); /* Apply font */
}

.crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  /* Ensure crosshair starts visible on desktop, hidden by default for mobile in JS if needed */
  display: block; 
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background-color: white;
}

.crosshair::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
}

.crosshair::after {
  top: 0;
  left: 9px;
  width: 2px;
  height: 20px;
}

#joystick-container {
  position: fixed;
  bottom: 50px;
  left: 50px;
  width: 120px;
  height: 120px;
  z-index: 1000;
  display: none; 
  touch-action: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

#jump-button {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: none; 
  z-index: 1000;
  touch-action: none;
  text-align: center;
  line-height: 80px;
  font-weight: bold;
  color: #333;
  user-select: none;
  font-family: var(--global-font-family); /* Apply font */
}

/* New Mobile Menu Button Styles (Desktop hidden by default) */
#mobile-menu-buttons {
    position: fixed;
    top: 10px;
    left: 10px;
    display: none; 
    flex-direction: column;
    gap: var(--mobile-btn-spacing);
    z-index: 1500;
}

.mobile-menu-btn {
    width: var(--mobile-btn-size);
    height: var(--mobile-btn-size);
    background-color: var(--mobile-btn-bg-color);
    color: var(--mobile-btn-text-color);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--mobile-btn-font-size);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    touch-action: manipulation;
}

.mobile-menu-btn:active {
    background-color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
  #joystick-container {
    bottom: 10px;
    left: 10px;
    display: block;
  }
  
  #jump-button {
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 1em;
    display: block;
  }

  /* Show mobile menu buttons */
  #mobile-menu-buttons {
      display: flex;
  }
  
  /* Reposition online users counter */
  .online-users {
      top: unset;
      bottom: 80px; 
      left: 20px;
      right: unset;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1501;
  }

  /* Adjust hotbar size for smaller screens by overriding properties */
  #hotbar-container {
    gap: var(--hotbar-slot-gap-mobile);
  }
  .hotbar-slot {
      width: var(--hotbar-slot-size-mobile);
      height: var(--hotbar-slot-size-mobile);
      border-width: 3px;
      border-radius: 4px;
  }
  
  /* Custom Block Editor adjustments for mobile */
  #custom-block-editor {
      width: 100%;
      max-width: 100%;
  }

  /* Ensure scrollability of the editor */
  .player-editor {
      overflow-y: auto;
  }

  /* Hide crosshair on mobile, as joystick is used */
  .crosshair {
    display: none;
  }
}

/* Hotbar Styles */
#hotbar-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--hotbar-slot-gap);
  padding: 5px;
  background-color: var(--hotbar-background-color);
  border-radius: 10px;
  z-index: 1500;
}

.hotbar-slot {
  width: var(--hotbar-slot-size);
  height: var(--hotbar-slot-size);
  border: 4px solid var(--hotbar-slot-border-color);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: border-color 0.1s;
}

.hotbar-slot.selected {
  border-color: var(--hotbar-selected-border-color);
}

.item-visual {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
  /* background-color is set by JS based on item color */
  border-radius: 4px; 
}

.item-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 0.8em;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-family: Arial, sans-serif;
}

/* Player Editor Styles */
#player-editor, #settings-editor, #hacks-editor, #item-picker-editor, #custom-block-editor { 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.85);
  padding: 25px 35px;
  border-radius: 12px;
  color: #fff;
  z-index: var(--utility-menu-z-index); /* Use tweakable variable, ensures editors are on top of pause menu */
  display: none; /* Hidden by default */
  width: 350px;
  max-width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  
  /* @tweakable The maximum height of the player editor in relation to the viewport height */
  max-height: 80vh; /* Allow editor to scroll if content exceeds this height */
  overflow-y: auto; /* Enable vertical scrolling */
  padding-right: 45px; /* Add extra padding on the right for scrollbar */
  font-family: var(--global-font-family); /* Apply font to editor containers */
}

/* Close button for editor/settings/hacks panels */
.close-editor-button {
  position: absolute;
  top: var(--close-button-top-offset);
  right: var(--close-button-right-offset);
  background-color: var(--close-button-background-color);
  color: var(--close-button-text-color);
  border: none;
  border-radius: var(--close-button-border-radius);
  padding: var(--close-button-padding);
  font-size: var(--close-button-font-size);
  cursor: pointer;
  z-index: 1001; /* Ensure it's above other editor content */
  transition: background-color 0.2s ease;
  font-family: var(--global-font-family); /* Apply font */
}

.close-editor-button:hover {
  background-color: var(--close-button-hover-background-color);
}

/* Pause menu specific styles - now mostly handled by .full-screen-menu and .menu-content-box */
#pause-menu {
  display: none; /* Always start hidden */
  /* Remove old width/max-width/padding-right as .menu-content-box handles it */
}

#pause-menu h1 {
  /* No specific styles needed here, .full-screen-menu h1 handles it */
}

#pause-menu .menu-button {
  /* No specific styles needed here, .menu-button handles it */
}

#player-editor h2, #settings-editor h2, #hacks-editor h2, #item-picker-editor h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  color: #4CAF50; /* A distinct color for the title */
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor .editor-section, #settings-editor .editor-section, #hacks-editor .editor-section, #item-picker-editor .editor-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#player-editor .editor-section:last-of-type, #settings-editor .editor-section:last-of-type, #hacks-editor .editor-section:last-of-type, #item-picker-editor .editor-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#player-editor h3, #settings-editor h3, #hacks-editor h3, #item-picker-editor h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #ADD8E6; /* Light blue for section titles */
  font-size: 1.1em;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor label, #settings-editor label, #hacks-editor label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.95em;
  width: 150px;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor input[type="color"], #settings-editor input[type="color"], #custom-block-editor input[type="color"] {
  width: 80px;
  height: 30px;
  border: none;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor input[type="range"], #settings-editor input[type="range"], #hacks-editor input[type="range"] {
  width: calc(100% - 160px); /* Adjust width to make room for label and value span */
  vertical-align: middle;
  margin-bottom: 8px;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor span, #settings-editor span, #hacks-editor span {
  display: inline-block;
  width: 30px;
  text-align: right;
  font-size: 0.9em;
  vertical-align: middle;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor input[type="checkbox"], #hacks-editor input[type="checkbox"], #settings-editor input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 5px;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor select, #settings-editor select, #custom-block-editor select {
  width: calc(100% - 150px);
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid #555;
  border-radius: 4px;
  font-family: var(--global-font-family);
  vertical-align: middle;
  margin-bottom: 8px;
}

#player-editor input[type="file"], #custom-block-editor input[type="file"] {
  width: 100%;
  padding: 8px 0;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
  font-family: var(--global-font-family); /* Apply font */
}

/* New: Styling for Block Name Input */
#custom-block-editor input[type="text"] {
    width: calc(100% - 70px); /* Adjust width to make room for label */
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1em;
    font-family: var(--global-font-family);
    vertical-align: middle;
}

/* Adjust label width for consistency in custom block editor */
#custom-block-editor label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.95em;
    /* @tweakable The fixed width of labels next to input fields in the custom block editor. */
    width: 60px; 
    font-family: var(--global-font-family);
}

/* Save and Reset buttons common style */
#player-editor button:not(.close-editor-button), 
#settings-editor button:not(.close-editor-button), 
#hacks-editor button:not(.close-editor-button) {
  background-color: #f44336; /* Default red for clear, overridden for save */
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  float: right;
  margin-top: 5px;
  font-family: var(--global-font-family); /* Apply font */
  display: block; /* Make them block elements to stack properly */
  width: calc(100% - 0px); /* Fill width, adjust for scrollbar padding */
  margin: 10px 0 0px 0; /* Add margin to separate them */
  text-align: center;
}

#player-editor #save-settings-button, #settings-editor #save-global-settings-button, #hacks-editor #save-hacks-button {
  background-color: #4CAF50; /* Green for save button */
  margin-top: 20px; /* More space above save button */
}

#player-editor #save-settings-button:hover:not(:disabled), #settings-editor #save-global-settings-button:hover:not(:disabled), #hacks-editor #save-hacks-button:hover:not(:disabled) {
  background-color: #45a049;
}

.reset-button {
  background-color: var(--reset-button-background-color) !important; /* Grey for reset button, !important to override previous button style */
  color: var(--reset-button-text-color) !important;
}

.reset-button:hover:not(:disabled) {
  background-color: var(--reset-button-hover-background-color) !important;
}

#player-editor button:hover:not(:disabled):not(.reset-button), #settings-editor button:hover:not(:disabled):not(.reset-button), #hacks-editor button:hover:not(:disabled):not(.reset-button) {
  background-color: #d32f2f; /* Red hover for other non-save/reset buttons */
}

#player-editor button:disabled,
#player-editor input[type="file"]:disabled,
#settings-editor button:disabled,
#hacks-editor button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#player-editor p, #settings-editor p, #hacks-editor p {
  font-size: 0.85em;
  margin-top: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor .editor-instructions, #settings-editor .editor-instructions, #hacks-editor .editor-instructions {
  margin-top: 25px;
  font-style: italic;
  color: #999;
}

#player-editor #avatar-status {
  font-size: 0.8em;
  color: #aaa;
  text-align: left;
  margin-top: 5px;
  font-family: var(--global-font-family); /* Apply font */
}

#player-editor #player-preview-canvas {
  display: block;
  margin: 15px auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background-color: #333; /* Darker background for contrast */
}

/* Specific styling for the Admin Tools section in Hacks Panel */
#hacks-editor .editor-section h3 {
  margin-bottom: 10px;
}

#hacks-editor .editor-section p {
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #fff;
}

#hacks-editor .editor-section p span {
  float: right;
  width: auto;
  min-width: 40px; /* Ensure enough space for the value */
}

/* Item Picker Specific Styles */
#item-picker-editor {
  width: 700px; /* Wider for inventory grid */
  max-width: 95%;
}

.menu-buttons-container {
    display: flex;
    justify-content: center;
    border-bottom: none !important;
    padding-bottom: 5px !important;
}

#open-custom-block-editor-button {
    width: 100%;
    max-width: 300px;
    padding: 8px 15px;
    font-size: 1.1em;
    background-color: #007bff;
    color: white;
    border: 1px solid #0056b3;
    border-radius: 5px;
    cursor: pointer;
}

#open-custom-block-editor-button:hover {
    background-color: #0056b3;
}

#item-picker-grid {
  display: grid;
  /* @tweakable The number of columns in the item selection grid within the Item Picker. */
  grid-template-columns: repeat(10, var(--hotbar-slot-size)); /* 10 columns for wide selection */
  gap: 10px;
  justify-content: center;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-picker-item {
  width: var(--hotbar-slot-size);
  height: var(--hotbar-slot-size);
  border: 2px solid #555;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: grab;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-picker-item:hover {
  border-color: #aaa;
}

.hotbar-in-picker {
  display: flex;
  gap: var(--hotbar-slot-gap);
  padding: 10px;
  justify-content: center;
}

.hotbar-in-picker .hotbar-slot {
  /* Reset border for slots inside the picker since they act as drop targets */
  border: 2px dashed #999; 
  background-color: rgba(255, 255, 255, 0.05);
}

.hotbar-in-picker .hotbar-slot.drag-over {
  border-color: green;
}

/* New Trash Area Styles */
.trash-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
    border: 2px dashed var(--trash-area-border-color);
    border-radius: 8px;
    background-color: var(--trash-area-background-color);
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
    /* Ensure it's the last section and has no bottom border */
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.trash-area.drag-over {
    background-color: rgba(255, 0, 0, 0.3);
    border-color: var(--trash-area-hover-border-color);
}

#trash-icon {
    font-size: var(--trash-icon-font-size);
    margin-bottom: 5px;
}

.trash-area h3 {
    color: var(--trash-area-border-color);
    margin-bottom: 5px;
}

.trash-area p {
    font-size: 0.9em;
    color: #ccc;
    margin-top: 0;
}

/* Tooltip Styles */
.item-tooltip {
    position: absolute;
    background-color: var(--tooltip-background-color);
    color: var(--tooltip-text-color);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-border-radius);
    pointer-events: none; /* Crucial for not blocking mouse events */
    white-space: nowrap;
    z-index: var(--tooltip-z-index); /* Use tweakable variable, ensures it's above all editors/menus */
    font-size: 0.9em;
    transform: translate(10px, -100%); /* Position above and slightly to the right of the cursor/element */
}

/* New: Styling for the splash screen title */
.splash-screen-title {
    font-size: 3em;
    color: #333;
    text-align: center;
    margin-top: 20px;
    font-family: var(--global-font-family);
}