/* 2016.08.09 to 2023 - Atlee Brink */

:root {
  --ts-touch-size: 3em;
  --ts-vis-size: 1em;
  --ts-color: silver;
  --ts-border: 2px solid black;
  --ts-limit-border: 1px dashed rgba(0,0,0,0.5);
}

* {
  touch-action: none;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.25s ease-in-out;
}

body {
  --track-height: 8px;
  --thumb-size: 32px;
  --border: 1px solid black;
  --border-radius: 4px;
  position: relative;
}

head, body {
  width: 100dvw;
  height: 100dvh;
	margin: 0px;
  padding: 0px;
	overflow: hidden;
	font-family: 'Consolas', 'Courier', monospace;
	font-weight: bold;
}

button, select {
	background: rgb(255,255,255);
	color: black;
	font-size: 100%;
	padding: 0.1em 0.2em 0.1em 0.2em;
	text-decoration: none;
	cursor: pointer;
}

button:active {
	color: black;
}

button, input[type='color'], select {
  border: var(--border);
  border-radius: var(--border-radius);
}

input[type='color'] {
  padding: 0;
}

select {
  text-align: center;
  width: auto;
}

.colorInput {
	min-width: 4em;
	max-width: 8em;
	font-size: 100%; 
	width: 95%; /* in Safari, 100% exceeds the div */
	text-align: center;
	border: var(--border);
	border-radius: 4px;
  user-select: all;
}

.opacity-0 {
  opacity: 0;
}

.display-none {
  opacity: 0;
  z-index: 1 !important;
}

.errorPage {
  z-index: 3;
	display: table;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: skyblue;
}

.errorText {
	color: white;
	font-size: large;
	text-align: center;
	text-shadow: 0px 0px 3px black;
}

.modal::backdrop {
  backdrop-filter: brightness(66%) blur(10px);
  -webkit-backdrop-filter: brightness(66%) blur(10px);
}

.progress {
  --t: 0;
  height: 1em;
  min-width: 100%;
  width: 50vw;
  border: var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.progress::before {
  content: '';
  display: block;
  background-color: hsl(120, 90%, 50%);
  height: 100%;
  width: calc(100% * var(--t));
}

.text-shadow {
	text-shadow: 0px 0px 5px black;
}

.uiText {
	user-select: none;
	-webkit-touch-callout: none;
	background: none;
	text-shadow: 0px 0px 3px black;
}

#canvas {
  z-index: 1;
  position: absolute;
  width: 100dvw;
  height: 100dvh;
}

#complex-sliders {
  display: flex;
  align-items: end;
  position: relative;
}
#complex-sliders > span {
  flex: 1;
  position: relative;
}
#complex-sliders > span > input { display: block; }

#show-button {
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

/*
customized sliders (input[type=range])
thanks to: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
note: I've tweaked these quite a bit from what's on that page
*/

input[type=range] {
	appearance: none;
	width: 100%;
	background: none;
	margin: 0;
	cursor: pointer;
}

input[type=range] {
	height: var(--thumb-size);
	background: none;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: var(--track-height);
	background: lightgray;
	border: var(--border);
	border-radius: 4px;
	cursor: pointer;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: lightgray;
	border: var(--border);
	border-radius: 4px;
	cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: var(--border);
	height: var(--thumb-size);
	width: var(--thumb-size);
	border-radius: 25%;
	background: white;
	margin: 0px;
	cursor: pointer;
  translate: 0% calc((var(--track-height) - var(--thumb-size)) * 0.5);
}

input[type=range]::-moz-range-thumb {
	border: var(--border);
	height: var(--thumb-size);
	width: var(--thumb-size);
	border-radius: 25%;
	background: white;
	cursor: pointer;
}

.touch-stick {
  --d: 200px;
  --x: 0px;
  --y: 0px;
  --limit-border-radius: 50%;
  position: absolute;
  z-index: 10;
}

.touch-stick::before {
  position: absolute;
  box-sizing: border-box;
  z-index: 3;
  display: inline-block;
  content: '';
  left: var(--x);
  top: var(--y);
  width: var(--ts-vis-size);
  height: var(--ts-vis-size);
  border-radius: 50%;
  background-color: var(--ts-color);
  border: var(--ts-border);
  translate: -50% -50%;
}

.touch-stick::after {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  display: inline-block;
  content: '';
  left: var(--x);
  top: var(--y);
  width: var(--ts-touch-size);
  height: var(--ts-touch-size);
  border-radius: 50%;
  translate: -50% -50%;
}