html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent scrolling */
  position: fixed; /* Prevent any scrollable area */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

body {
  touch-action: none; /* Prevent touch scrolling */
  overscroll-behavior: none; /* Prevent pull-to-refresh and overscroll effects */
  -webkit-tap-highlight-color: transparent; /* Prevent tap highlight on mobile */
  -webkit-touch-callout: none; /* Disable the iOS context menu on long press */
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none; /* Prevent dragging of the canvas */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  cursor: none; /* Hide default cursor */
}

/* Global styles */
* {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  
  /* Force cursor: none on all elements */
  cursor: none !important;
}

/* Ensure canvas and other elements don't interfere with cursor */
canvas, body, html {
  cursor: none !important;
}

/* Ensure all interactive elements use custom cursor */
button, select, option, [role="button"], [onclick], [tabindex] {
  cursor: none !important;
}

/* Settings dropdown menu */
.settings-dropdown {
  position: absolute;
  background: black;
  border: 1px solid rgb(150,150,150);
  padding: 0;
  z-index: 9999;
  display: none;
  min-width: 150px;
  box-shadow: none;
  font-family: monospace;
  font-size: 14px;
  color: rgb(200,200,200);
  text-align: center;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  overflow: hidden;
  outline: none;
}

.settings-dropdown.show {
  display: block;
}

.settings-dropdown-item {
  color: rgb(200,200,200);
  padding: 8px 0;
  cursor: none !important;
  position: relative;
  white-space: nowrap;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  margin: 0;
  border: none;
  background-color: black;
  width: 100%;
  display: block;
  box-sizing: border-box;
  transition: background-color 0s ease;
  text-indent: 1px;
  text-overflow: '';
  text-align-last: center;
}

.settings-dropdown-item:hover {
  background-color: rgb(50,50,50);
  color: white;
}

.settings-dropdown-item.has-submenu::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

/* Submenu styles */
.settings-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: black !important;
  border: 1px solid rgb(150,150,150) !important;
  border-radius: 0;
  padding: 0;
  min-width: 100px;
  display: none;
  box-shadow: none;
  margin: 0;
  list-style: none;
  z-index: 10001; /* Ensure submenu appears above other elements */
}

/* Enhanced submenu visibility - Only show on hover */
.themes-main-item:hover .themes-submenu,
.themes-submenu:hover {
  visibility: visible !important;
}

/* Additional submenu styling */
.themes-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background-color: black !important;
  border: 1px solid rgb(150,150,150) !important;
  border-radius: 0;
  padding: 0;
  min-width: 120px;
  display: block;
  visibility: hidden; /* Hidden by default */
  box-shadow: none;
  margin: 0;
  list-style: none;
  z-index: 10002 !important;
}

.settings-submenu-item {
  color: rgb(200,200,200) !important;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  margin: 0;
  border: none;
  background: transparent !important;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.settings-submenu-item:hover,
.settings-submenu-item:focus {
  background-color: rgb(50,50,50) !important;
  color: white !important;
}

.settings-submenu-item.active {
  background-color: rgb(75,75,75) !important;
  color: white !important;
  font-weight: bold;
}

/* Style for select elements */
select, select option {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
  text-align: center;
  text-align-last: center; /* For Firefox */
  color: rgb(200,200,200) !important;
  border: 1px solid rgb(150,150,150) !important;
  background-color: black !important;
  padding: 0; /* Removed horizontal padding */
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0s ease;
}

/* BPM controls and drone boxes */
.bpm-label, .lock-button, .reset-button, .drone-box {
  border: 1px solid rgb(150,150,150) !important;
}

/* Hover effect for closed select elements */
select:not([multiple]):hover {
  background-color: rgb(50,50,50) !important;
  cursor: none !important;
}

/* Style the dropdown button when menu is open */
select:focus,
select:active,
select:focus:not(:focus-visible) {
  background-color: black !important;
  outline: none !important;
}

/* Reset hover state when dropdown is closed */
select:not(:focus):not(:active):hover {
  background-color: rgb(50,50,50) !important;
}

/* For IE10+ */
select::-ms-expand {
  display: none;
}

/* Style for dropdown options */
select option {
  text-align: center;
  background-color: black !important;
  color: rgb(200,200,200) !important;
  border: none !important;
  margin: 0;
  padding: 8px 0;
}

/* Electron-specific dropdown option styling */
select option:hover,
select option:focus,
option:hover,
option:focus {
  background-color: rgb(50,50,50) !important;
  background: rgb(50,50,50) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Selected state for dropdown options */
select option:checked,
option:checked,
select option:selected,
option:selected {
  background-color: rgb(75,75,75) !important;
  background: rgb(75,75,75) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Force override Electron/Chromium default blue highlighting */
select option {
  background-color: black !important;
  background: black !important;
  color: rgb(200,200,200) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Electron-specific overrides */
select:focus option:hover,
select:active option:hover,
select:focus option:focus,
select:active option:focus {
  background-color: rgb(50,50,50) !important;
  background: rgb(50,50,50) !important;
  color: white !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Electron Chromium engine specific */
select option::-webkit-appearance {
  background-color: black !important;
}

select option:hover::-webkit-appearance {
  background-color: rgb(50,50,50) !important;
}

/* Electron/Chromium aggressive overrides */
select {
  color-scheme: dark !important;
}

/* Force Electron dropdown colors using CSS custom properties */
select option {
  background: var(--option-bg, black) !important;
  color: var(--option-color, rgb(200,200,200)) !important;
}

select option:hover {
  background: var(--option-hover-bg, rgb(50,50,50)) !important;
  color: var(--option-hover-color, white) !important;
}

select option:checked {
  background: var(--option-selected-bg, rgb(75,75,75)) !important;
  color: var(--option-selected-color, white) !important;
}

/* Electron native styling overrides */
select::-webkit-listbox {
  background-color: black !important;
  color: rgb(200,200,200) !important;
}

select::-webkit-listbox-option {
  background-color: black !important;
  color: rgb(200,200,200) !important;
}

select::-webkit-listbox-option:hover {
  background-color: rgb(50,50,50) !important;
  color: white !important;
}

select::-webkit-listbox-option:checked {
  background-color: rgb(75,75,75) !important;
  color: white !important;
}

/* Ensure the select element gets proper hover state after closing */
select:not(:focus):not(:active) {
  transition: background-color 0s ease;
}

/* Style the dropdown button when menu is open */
select:focus,
select:active {
  background-color: black !important;
}

/* Style the dropdown list */
select:not([multiple]) {
  background-color: black !important;
  color: rgb(200,200,200) !important;
}

/* Remove inner borders and box shadow */
select:not([multiple]) option {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Specific rule for layout select */
#layout-select-container,
#layout-select-container *,
select#defaultCanvas0-layoutSelect,
select#defaultCanvas0-layoutSelect:focus,
select#defaultCanvas0-layoutSelect:active,
#layout-select-container select,
#layout-select-container select:focus,
#layout-select-container select:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: black !important;
}

/* Remove any default styling from the select element */
#layout-select-container select {
  background: transparent !important;
  color: rgb(200,200,200) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Additional browser-specific overrides for dropdown options */
select option::-webkit-option,
select option::-moz-option {
  background-color: black !important;
  color: rgb(200,200,200) !important;
}

select option:hover::-webkit-option,
select option:focus::-webkit-option,
select option:hover::-moz-option,
select option:focus::-moz-option {
  background-color: rgb(50,50,50) !important;
  color: white !important;
}

/* Force override system default selection colors */
::selection {
  background-color: rgb(50,50,50) !important;
  color: white !important;
}

::-moz-selection {
  background-color: rgb(50,50,50) !important;
  color: white !important;
}

/* Override any blue highlighting in dropdowns */
select:focus option:checked,
select:active option:checked {
  background-color: rgb(75,75,75) !important;
  background: rgb(75,75,75) !important;
  color: white !important;
}

/* Additional aggressive overrides for browser defaults */
select option:active,
select option[selected],
select option:target {
  background-color: rgb(75,75,75) !important;
  background: rgb(75,75,75) !important;
  color: white !important;
}

/* Override Windows/Chrome default blue selection */
select option:hover {
  background: rgb(50,50,50) !important;
  background-color: rgb(50,50,50) !important;
  background-image: none !important;
}

/* Force all select elements to use our colors */
select, select * {
  color: rgb(200,200,200) !important;
}

select:focus, select:active {
  background-color: black !important;
  color: rgb(200,200,200) !important;
}

/* Override system highlight colors */
select option:hover,
select option:focus,
select option:active {
  background-color: rgb(50,50,50) !important;
  background: rgb(50,50,50) !important;
  color: white !important;
  outline: none !important;
  border: none !important;
}

/* Ultimate override for all browsers - Force our colors everywhere */
select option {
  background-color: black !important;
  background: black !important;
  color: rgb(200,200,200) !important;
}

select option:hover {
  background-color: rgb(50,50,50) !important;
  background: rgb(50,50,50) !important;
  color: white !important;
}

select option:checked,
select option:selected {
  background-color: rgb(75,75,75) !important;
  background: rgb(75,75,75) !important;
  color: white !important;
}

/* Webkit specific overrides */
select option:checked:hover {
  background-color: rgb(75,75,75) !important;
  background: rgb(75,75,75) !important;
}

/* Firefox specific overrides */
@-moz-document url-prefix() {
  select option:hover {
    background-color: rgb(50,50,50) !important;
    color: white !important;
  }
  
  select option:checked {
    background-color: rgb(75,75,75) !important;
    color: white !important;
  }
}

/* Hide fullscreen navigation UI */
:fullscreen {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hide browser fullscreen controls */
::-webkit-full-screen-controls {
  display: none !important;
}

::-webkit-full-screen-ancestor {
  -webkit-appearance: none;
}

/* Hide fullscreen exit button and navigation */
::-webkit-full-screen-controls-overlay {
  display: none !important;
}

/* Firefox fullscreen controls */
::-moz-full-screen-warning {
  display: none !important;
}

/* Hide any fullscreen UI elements */
::backdrop {
  background-color: black !important;
}

/* Prevent fullscreen hover UI from appearing */
html:fullscreen,
body:fullscreen,
:fullscreen {
  cursor: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

/* Additional fullscreen UI hiding */
:fullscreen::backdrop {
  background-color: black !important;
}

/* Hide any system fullscreen controls */
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls {
  display: none !important;
}

/* Scrollbar styling for All Ratios viewport - styles are dynamically injected via JavaScript */

/* Custom input styling - override browser defaults */
input[type="text"], input[type="number"], input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  font-family: monospace !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove all focus styling from inputs */
input[type="text"]:focus, 
input[type="number"]:focus, 
input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Remove webkit focus ring */
input[type="text"]:focus::-webkit-input-placeholder,
input[type="number"]:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
  color: transparent !important;
}

/* Remove mozilla focus ring */
input[type="text"]:focus::-moz-placeholder,
input[type="number"]:focus::-moz-placeholder,
input:focus::-moz-placeholder {
  color: transparent !important;
}