/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  -webkit-appearance: none;
}

::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  border: 2px solid #000000;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

::-webkit-scrollbar-corner {
  background: #000000;
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #764ba2 #000000;
}

/* No swiping back or forward through history anywhere in the app (a sideways trackpad scroll that runs past the edge of
   the map, the action bar or the page would otherwise go back a page, out of the game) */
html,
body {
  overscroll-behavior-x: none;
}

/* Roboto everywhere (from Google Fonts, index.html): form controls and the toasts don't inherit it by themselves */
:root {
  --toastify-font-family: 'Roboto', sans-serif;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}

input {
  padding: 12px 20px;
  font-size: 16px;
  border: 2px solid #764ba2;
  border-radius: 25px 0 0 25px;
  background-color: white;
  color: #333;
  width: 150px;
  outline: none;
  transition: border-color 0.3s;
  vertical-align: top;
}

input, select, textarea {
  font-family: inherit;
}

button {
  font-family: 'Roboto', sans-serif;
  margin: 0 10px 0 0;
  padding: 12px 24px;
  white-space: nowrap;
  background-color: #764ba2;
  color: #ffffff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 19px;
}

button.cancel {
  background-color: #dc3545;
}

input + button {
  border-radius: 0 25px 25px 0;
}

input::placeholder {
  color: #999;
}

button:hover {
  background-color: #9370db;
}

button:hover.cancel {
  background-color: #c82333;
}

button:disabled {
  background-color: #140f1d;
  cursor: not-allowed;
}