html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Mobile optimizations */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent browser zoom */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ensure proper scaling */
  zoom: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  /* Prevent browser gestures */
  touch-action: none;
  /* Remove focus outlines globally */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

#canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
  /* Ensure canvas is properly sized */
  max-width: 100vw;
  max-height: 100vh;
  /* Prevent any scaling */
  zoom: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  /* Prevent browser gestures and selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Remove focus outline and touch highlights */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-focus-ring-color: transparent;
  /* Additional mobile touch styling */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Prevent any visual feedback on touch */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px outset White;
  border-radius: 7px;
  color: White;
  padding: 5px;
  width: 259px;
  height: 259px;
  background-image: url('assets/menu-bg.jpg');
  display: block;
}
/* #menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/menu-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
} */
#menu_b {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 24px;
  height: 24px;
  padding: 4px;
  fill: White;
  cursor: pointer;
  opacity: .42;
}
#menu_b:hover {
  fill: aqua;
  opacity: 1;
}
#menu_b:active {
  fill: darkmagenta;
}

#title_b {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
}

/* Lasso Selection Box Styles */
#lasso-selection-box {
  position: absolute;
  border: 1px dashed aqua;
  /* background-color: rgba(0, 255, 0, 0.1); */
  pointer-events: none;
  z-index: 1000;
  /* border-radius: 2px; */
  /* box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); */
  display: none;
  top: 0;
  left: 0;
}

#lasso-selection-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid rgba(0, 255, 0, 0.5);
  border-radius: 2px;
  pointer-events: none;
}

/* Selection Count Indicator Styles */
#selection-count-indicator {
  animation: selectionCountFadeIn 0.3s ease-out;
}

@keyframes selectionCountFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#title_b:hover {
  color: aqua;
}
#title_b:active {
  color: darkmagenta;
}

#close_b {
 fill: White;
 position: absolute;
 cursor: pointer;
 top: 0px;
 right: 0px;
 width: 37px;
}
#close_b:hover {
  fill: aqua;
}
#close_b:active {
  fill: darkmagenta;
}

#trophy_b {
  stroke: White;
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 2px;
  width: 31px;
 }
#trophy_b:hover {
  stroke: aqua;
}
#trophy_b:active {
  stroke: darkmagenta;
}

#settings_b {
  stroke: White;
  position: absolute;
  cursor: pointer;
  bottom: 0px;
  right: 4px;
  width: 32px;
}
#settings_b:hover {
  stroke: aqua;
}
#settings_b:active {
  stroke: darkmagenta;
}
#player_b {
  position: absolute;
  bottom: 2px;
  left: 5px;
  padding: 3px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
}
#player_b:hover {
  color: aqua !important;
}
#player_b:active {
  color: darkmagenta !important;
}

#game_menu {
  text-align: center;
  width: 100%;
  margin-top: -7px;
  color: lightgray;
}
#game_menu td {
  white-space: nowrap;
}
#game_menu_header{
  font-size: .6em;
}
#game_menu_type{
  min-width: 120px;
}
.game_menu_type_b{
  border: 1px outset lightblue;
  border-radius: 7px;
  cursor: pointer;
  padding: 1px;
  font-size: .93em;
  font-weight: bold;
  height: 23px;
  color: White;
  background-color: #0003;
}
.game_menu_type_b:hover {
  border-color: aqua;
  background-color: #0004;
}
.game_menu_type_b:active {
  border-color: darkmagenta;
}

.lobby_b{
  border: 1px outset lightblue;
  border-radius: 7px;
  cursor: pointer;
  padding: 1px;
  font-size: .93em;
  font-weight: bold;
  height: 23px;
  width: auto;
  text-align: center;
  color: White;
  background-color: #0003;
}
.lobby_b:hover {
  border-color: aqua;
  background-color: #0004;
}
.lobby_b:active {
  border-color: darkmagenta;
}

.menu_menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 55px;
  bottom: 33px;
  padding: 4px;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
.menu_title {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 33px;
  text-align: center;
  font-weight: 1.1em;
  font-weight: bold;
}

#settings_menu {
  display: none;
}
#fps_meter {

  position: absolute;
  top: 6px;
  right: 34px;
  font-size: .8em;
  font-family: monospace;
}

#player_menu {
  display: none;
}

#trophy_menu {
  display: none;
}

#ingame_menu {
  display: none;
}

#adventure_lobby {
  display: none;
}

#onevsone_lobby {
  display: none;
}

#ffa_lobby {
  display: none;
}

#koth_lobby {
  display: none;
}

#teams_lobby {
  display: none;
}


/* scrollbars */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-thumb {
  background: #1c1c1c;
  border: 1px solid #888;
  -webkit-border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover {
  background: #291C1C;
}
::-webkit-scrollbar-thumb:active {
  background: #37181B;
}
/* links */
a {
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  font-size: .8em;
}
a:hover {
  color: aqua;
}
a:active {
  color: darkmagenta;
}
a:visited {
  color: White;
}
a[href^="mailto"] {
  color: White;
}
a[href^="mailto"]:hover {
  color: aqua;
}
a[href^="mailto"]:active {
  color: darkmagenta;
}
a:before{
  content:"\300C\000A0";
}
a:after{
  content:"\000A0\300D";
}

#privacy_poli {
  font-size: .5em;
  text-align: right;
  height: 42px;
  margin: 24px;
  margin-top: -8px;
  margin-bottom: -3px;
  color: lightgrey;
  background: black;
  overflow: auto;
}

/* inspector */
#scene-explorer-host {
  z-index: 10;
  position: absolute! important;
  /* pointer-events: auto !important; */
}
#inspector-host {
  /* pointer-events: auto !important; */
  /* z-index: 10; */
  position: absolute! important;
}

.menu_anchor{
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px outset #ffffff3d;
  border-radius: 7px;
  color: White;
  width: 33px;
  height: 33px;
  cursor: pointer;
  /* background-image: url('assets/menu-bg.jpg'); */
  display: block;
}
.menu_anchor:hover {
  border-color: aqua;
}
#anchor_n {
  top: 58px;
  left: 50%;
}
#anchor_s {
  bottom: 25px;
  left: 50%;
}
#anchor_e {
  right: 25px;
  top: 50%;
}
#anchor_w {
  left: 58px;
  top: 50%;
}

/* Radial Menu System */
.radial-menu-button {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1000;
}

.radial-menu-button.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.radial-menu-button:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: aqua;
  transform: translate(-50%, -50%) scale(1.1);
}

.radial-menu-button:active {
  background: rgba(139, 0, 139, 0.2);
  border-color: darkmagenta;
  transform: translate(-50%, -50%) scale(0.95);
}

.radial-menu-button.selected {
  background: rgba(0, 255, 255, 0.3);
  border-color: aqua;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Container for tooltip/label */
.radial-menu-label {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.radial-menu-button:hover .radial-menu-label {
  opacity: 1;
}

#stat_w {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: none;
  /* backdrop-filter: blur(2px); */
  /* display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  min-width: 120px; */
}

#stat_food, #stat_wood, #stat_stone, #stat_minerals, #stat_pop {
  /* display: flex;
  align-items: center;
  gap: 6px; */
  padding: 4px 8px;
  /* background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease; */
}

/* #stat_food:hover, #stat_wood:hover, #stat_stone:hover, #stat_minerals:hover, #stat_pop:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
} */

#stat_food {
  color: #4CAF50; /* Green for food */
}

#stat_wood {
  color: #8D6E63; /* Brown for wood */
}

#stat_stone {
  color: #9E9E9E; /* Gray for stone */
}

#stat_minerals {
  color: #FF9800; /* Orange for minerals */
}

#stat_pop {
  color: #2196F3; /* Blue for population */
}


.disabled_b {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;  
}




.binary_switch {
  width: 50px; 
  height: 25px;
  background: #ccc;
  border-radius: 2px; 
  position: relative; 
  cursor: pointer;
  transition: background 0.2s;
}

/* Default state - 2D HUD (left position) */
.binary_switch[data-on="false"] {
  background: #ccc;
}

.binary_switch[data-on="false"] .switch_handle {
  left: 2px;
}

/* 3D HUD state (right position) */
.binary_switch[data-on="true"] {
  background: #4CAF50;
}

.binary_switch[data-on="true"] .switch_handle {
  left: 27px;
}

.switch_handle {
  width: 21px; 
  height: 21px; 
  background: white; 
  border-radius: 2px;
  position: absolute; 
  top: 2px; left: 2px; 
  transition: left 0.1s; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.settings_option {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}