body {
	background: #353336;
	background-image: url(../images/background/shutterstock_1798382128-scaled.jpg);
	background-repeat: no-repeat;
	background-size: 100dvw 100dvh;
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}

/* Animation */

@keyframes color-spin {
	from {
		--angle: 0deg;
	}

	to {
		--angle: 360deg;
	}
}

@keyframes pulsate-fwd {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.15)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

@property --angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.animate-spin {
	animation: spin 1s linear infinite
}

.ease-in-out {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.pulsate-fwd {
	animation: pulsate-fwd 2s ease-in-out infinite both
}

/* End of animation block */

.main-field {
	display: flex;
	justify-content: center;
	margin-top: 1dvh;
}

.top-player-score {
	background-color: #666268;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	justify-self: center;
	width: fit-content;
}


/* table settings*/
.info-table,
.top-player-score-table {

	td,
	th {
		padding: .25rem;
		text-align: center;
	}

	th {
		color: #121214;
	}
}

.top-player-score-table {

	tr:nth-child(1) {
		color: #ffd700;
	}

	tr:nth-child(2) {
		color: #c0c0c0;
	}

	tr:nth-child(3) {
		color: #825e2f;
	}
}

.current-climber {
	border-color: conic-gradient(from var(--angle), transparent .5%, #00ff99, #78A465, #3F74B8, #00ff99, #78A465, #4077BE, #00ff99, #78A465, #4077BE);
	background-color: #5C6E78;
}


.game-settings {
	background-color: #666268;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	justify-self: center;
	width: fit-content;
}

.canvas-size,
.game-level,
.information,
.control-rules {
	background-color: #666268;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
}

.canvas-size,
.game-level {
	width: 6.75dvw;
}

.canvas-size {
	margin-right: .75rem;
}

.control-rules {
	margin-top: .5rem;
	width: fit-content;

	ul {
		margin: .25rem 0 0;
		padding-left: .75dvw;
	}

	li {
		font-size: .75rem;
		margin: 0;
	}

	span {
		color: #3F74B8;
		font-size: 1rem;
	}
}

.information {
	display: flex;
	flex-direction: row;
	margin-top: .5rem;
	padding-left: .25rem;
	width: max-content;
}

.sour,
.sweet {
	display: flex;
	flex-direction: row;

	p {
		align-self: center;
		margin: 0 .35dvw;
		text-orientation: upright;
		writing-mode: vertical-lr;
	}
}

.canvas-size legend,
.control-rules legend,
.game-level legend,
.game-settings legend,
.information legend,
.top-player-score legend {
	color: #444444;
	padding: 0 .25rem;
}

.canvas-size label,
.game-level label {
	color: #e4e4e4;
}

.central {
	/* background: #353336; */
	background-image: url(../images/background/game-field-full.png);
	background-repeat: no-repeat;
	border-radius: 1.125rem;
	justify-self: center;
	margin: 0 2dvw;
}

.control-block {
	align-items: center;
}

.canvas-wrapper {
	background-color: #161618;
	border: .625rem solid #161618;
	border-radius: 0.5vmin;
	box-shadow: 0 0 4vmin 1vmin #161618;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.2'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23525053'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.game-header {
	display: flex;
	justify-content: center;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
}

.game-score {
	align-items: center;
	background: #121214;
	border-radius: 0.5vmin;
	display: flex;
	height: 3vmin;
	justify-content: center;
	min-width: 4vmin;
	padding: .5vmin 1.5vmin;
}

.main {
	display: flex;
	flex-direction: row;
	width: 19dvw;
}

.info {
	margin: 0;
	padding: 0;
}

.radio-block {
	display: flex;
	flex-direction: row;
	justify-self: center;
	margin: .5rem 0;
}

.score-count {
	font-size: 3vmin;
	color: #D21855;
	font-weight: bold;
}

#audio-container {
	display: grid;
	justify-content: center;
}

.chat-container {
	border: none;
	border-radius: .5rem;

	legend {
		align-items: baseline;
		display: flex;
		color: #ffd700;
		justify-content: space-between;
		width: 100%;
	}

	img {
		height: 4dvh;
	}

	input {
		border: none;
		border-radius: .25rem;
		margin: .5rem .25rem 0 0;
		outline: none;
		width: 32.5dvw;
	}

	button {
		border-radius: .25rem;
		border: none;
	}
}

#chat-field {
	background-color: #e4e4e4;
	border-radius: .25rem;
	max-height: 23dvh;
	overflow-x: hidden;
	overflow-y: auto;
	outline: none;
	scroll-snap-align: end;
}

#game {
	align-items: center;
	/* background-image: url(../images/background/game-field.png);
	background-repeat: no-repeat; */
	display: flex;
	flex-direction: column;
	justify-content: center;

	/* img {
		height: 12dvh;
		margin: 3dvh 28dvw 0 0;		
		position: absolute;		
	} */
}

#game-canvas {
	border-radius: 0.5vmin;
	display: block;
}

#start-game {
	background-color: #e4e4e4;
	animation: 9s color-spin linear infinite;
	background-image: conic-gradient(from var(--angle), transparent .5%, #00ff99, #78A465, #3F74B8, #00ff99, #78A465, #4077BE, #00ff99, #78A465, #4077BE);
	border-radius: .5rem;
	color: #3F74B8;
	font-size: 1.25rem;
	margin-top: 4dvh;
	outline: none;
	padding: .25rem 1.5rem;
	position: absolute;
}

#radio-station {
	appearance: base-select;
	border: .125rem solid #4077BE;
	width: 10dvw;
}

select option {
	border-radius: .125rem;
}

.wrap-item-row {
	display: flex;
}

.radio-player *,
.radio-player ::before,
.radio-player ::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: #9ca3af
}

*,
::backdrop,
:after,
:before {
	--tw-border-opacity: 1;
	--tw-bg-opacity: 1;
	--tw-text-opacity: 1;
	--tw-space-y-reverse: 0;
	--tw-space-x-reverse: 0;
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-opacity: 1;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #3b82f680;
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(.125rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

.radio-player {
	align-self: center;
	font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal;
	margin: 0;
}

.radio-player button,
.radio-player [role=button] {
	align-self: center;
	cursor: pointer;
	height: 2.5dvh;
	padding: .125rem;
	width: 1.25dvw;
}

.radio-player :disabled {
	cursor: default
}

.radio-player [hidden] {
	display: none
}

.radio-player {
	border-radius: 1rem;
	background-color: #e4e4e4;
}

.radio-player .info-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.radio-player .current-song {
	align-self: center;
	color: #222D42;
	display: flex;
	font-size: 1rem;
	padding-left: .5rem;
	width: 6dvw;
}

.radio-player .volume-wrapper {
	display: none;
	margin: .5dvh 0;
}

.control-field {
	align-content: center;
	margin-left: -.75dvw;
}

.radio-player .player-control {
	border-radius: 1rem;
	background-color: #e4e4e4;
}

.radio-player .player-control:hover {
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(64 119 190 / var(--tw-ring-opacity));
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(.2rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));
}

.radio-player .player-control[data-state=buffering] .play-icon {
	display: none;
}

.radio-player .player-control[data-state=buffering] .pause-icon {
	display: none;
}

.radio-player .player-control[data-state=buffering] .buffer-icon {
	display: block;
	padding-left: .225dvw;
}

.radio-player .player-control[data-state=playing] .play-icon {
	display: none;
}

.radio-player .player-control[data-state=playing] .pause-icon {
	display: block;
	padding-left: .225dvw;
}

.radio-player .player-control[data-state=playing] .buffer-icon {
	display: none;
}

.radio-player .player-control[data-state=stopped] .play-icon {
	display: block;
	padding-left: .225dvw;
}

.radio-player .player-control[data-state=stopped] .pause-icon {
	display: none;
}

.radio-player .player-control[data-state=stopped] .buffer-icon {
	display: none;
}

form.volume {
	--min: 0;
	--max: 100;
	--val: 9;
	--k: calc((var(--val) - var(--min)) / (var(--max) - var(--min)));
	--pos: calc(1.125em + var(--k) * (100% - 2.25em));
	display: grid;
	grid-gap: .25em;
	place-self: center;
	min-width: 8dvw;
	width: calc(100% - 1.5em);
	max-width: 10dvw;
	transition: filter .3s ease-out
}

form.volume input[type=range] {
	background: rgba(0, 0, 0, 0);
	cursor: pointer;
	width: 10dvw;
}

form.volume input[type=range],
form.volume input[type=range]::-webkit-slider-runnable-track,
form.volume input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none
}

form.volume input[type=range][list]::-webkit-slider-container {
	min-height: .375em
}

form.volume input[type=range]::-webkit-slider-container {
	-webkit-user-modify: read-write !important;
	height: .5rem;
	margin: .375dvh .2dvw 0 0;
	border-radius: .75em;
	box-shadow: inset 0 .0625rem .25rem #c5c5c5;
	background: linear-gradient(#4077BE, #3F74B8) 0/var(--pos) no-repeat, linear-gradient(#efefef, #c9c9c9)
}

form.volume input[type=range]::-webkit-slider-runnable-track {
	margin: -0.375em
}

form.volume input[type=range]::-moz-range-track {
	margin: .375rem;
	height: 1.5dvh;
	border-radius: .75em;
	box-shadow: inset 0 .0625rem .25rem #8c8c8c;
	background: linear-gradient(#4077BE, #3F74B8) 0/var(--pos) no-repeat, linear-gradient(#efefef, #c9c9c9)
}

form.volume input[type=range]::-webkit-slider-thumb {
	box-sizing: border-box;
	border: solid .375rem rgba(0, 0, 0, 0);
	width: 1dvw;
	height: 1.95dvh;
	border-radius: 50%;
	box-shadow: 0 .125rem .3125rem #7d7d7d;
	background: linear-gradient(#4077BE, #3F74B8) padding-box, linear-gradient(#fbfbfb, #c2c2c2) border-box;
	cursor: ew-resize
}

form.volume input[type=range]::-moz-range-thumb {
	box-sizing: border-box;
	border: solid .375rem rgba(0, 0, 0, 0);
	width: 1dvw;
	height: 1.95dvh;
	border-radius: 50%;
	box-shadow: 0 .125rem .3125rem #7d7d7d;
	background: linear-gradient(#4077BE, #3F74B8) padding-box, linear-gradient(#fbfbfb, #c2c2c2) border-box;
	cursor: ew-resize
}

form.volume input[type=range]:focus {
	outline: none
}

@media(min-width: 640px) {
	.radio-player .volume-wrapper {
		display: block;
		width: 12dvw;
	}

	.radio-player .volume-wrapper .volume {
		margin: 0px
	}
}

@media(max-width: 639px) {
	.radio-player {
		width: auto !important
	}
}