@charset "utf-8";
/* CSS Document */
:root {
 --clr-opacity: 80%;
 --clr-red-code: 0, 48%, 36%;
 --clr-yellow-code: 56, 39%, 53%;
 --clr-blue-code: 216, 52%, 35%;
 --clr-green-code: 115, 55%, 27%;
 --clr-black-code: 0, 0%, 26%;
 --bgr-size-1: 201%;
 --bgr-size-2: 300%;
 --bgr-size-3: 250%;
 --bgr-size-4: 150%;
 --bgr-size-5: 400%;
 --bgr-position-1: 0% 0%;
 --bgr-position-2: 20% 20%;
 --bgr-position-3: 30% 30%;
 --bgr-position-4: 50% 50%;
 --bgr-position-5: 60% 60%;
 --bgr-position-6: 70% 70%;
 --bgr-position-7: 80% 80%;
 --bgr-position-8: 90% 90%;
}

body {
	 --clr-red: hsla(var(--clr-red-code), var(--clr-opacity));
	--clr-yellow: hsla(var(--clr-yellow-code), var(--clr-opacity));
	--clr-blue: hsla(var(--clr-blue-code), var(--clr-opacity));
	--clr-green: hsla(var(--clr-green-code), var(--clr-opacity));
--clr-black: hsla(var(--clr-black-code), var(--clr-opacity));
	margin : 0;	
	background-image: url(images/kemet_image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	backdrop-filter: brightness(.7);
	height: 100vh;
	font-family: "Times New Roman", Times, serif;
}
h2 {
  margin-block: 0;
  padding: 0.5rem;
  backdrop-filter: opacity(0.3) brightness(0.3);
  border-radius: 1rem;
  color: goldenrod;
  text-align: center;
  width: 100%;
  font-size: 1.2rem;
  box-shadow: 0 0 5px rgba(0 0 0 /.5) inset;
  font-family: serif;
  font-weight: lighter;
  text-shadow: 2px 2px 4px rgba(0 0 0 / .5), -2px -2px 4px rgba(0 0 0 / .5);
}
.order-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.order-field-bg.card {
  width: calc(100% / 5 + 1rem);
  position: relative;
  display: flex;
  justify-content: center;
}
.player-order {
  display: flex;
  justify-content: center;
}

.points {
	display: flex; 
	gap: 0.5rem;
	height: calc(100% - 1rem);
	width: calc(100% / 13 * 12 - 1rem);
	position: absolute;
	left: calc(100% / 13 + 0.5rem);
}
.points:has(> :last-child:nth-child(n + 9)):before {
  content: '\26A0';
  position: absolute;
  top: -.5em;
  left: -1.5em;
  height: 35%;
  aspect-ratio: 1;
  background: #b52828;
  color: gold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 2vw;
  border: .1vw outset gold;
  box-shadow: 0 0 10px rgba(0 0 0 / .6);
}
.point {
  height: 100%;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  filter: drop-shadow(0 0 5px rgba(0 0 0 / .7));
  cursor: pointer;
}
.card {
  width: calc(100% / 13);
  aspect-ratio: 1;
  border: 0.1em inset goldenrod;
  background: #cec9c1;
  display: flex;
  border-radius: 0.6rem;
  box-shadow: 3px 3px 10px rgba(0 0 0 / .5) inset;
}
.player {
	position: relative;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  /*! border: 0.1px outset goldenrod; */
	border-radius: 0.5rem;
	margin-block: 0.2rem;
	box-shadow: 0 0 15px rgba(0 0 0 / .5);
}
.dialog {
  position: absolute;
  background-color: rgba(0 0 0 / .5);
  padding: 1rem;
  z-index: 99;
  border-radius: 1.5rem;
  box-shadow: 0 0 5px rgba(255 255 255 / .3) inset;
  display: none;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  /*! border: 0.1rem outset gold; */
  left: 9%;
  bottom: 0;
  translate: 0 50%;
  height: max-content;
  filter: drop-shadow(0px 0px 15px rgba(0 0 0 / .7));
}
#black-dialog {
	translate: 0;
}
#green-dialog {
  translate: 0 30%;
}
.player-dialog {
	left: auto;
	height: max-content;
	position: absolute;
	translate: 0;
	top: 120%;
	flex-wrap: nowrap;
	/*! clip-path: polygon(-20px -30px,-20px calc(100% + 20px), calc(100% + 20px) calc(100% + 20px), calc(100% + 20px) -30px, 55% -30px,55% 2px, 45% 2px, 45% -2px, 55% -2px, 55% -30px); */
}
.player-dialog::-webkit-scrollbar {
	display:none;
}
.player-dialog::before {
  content: '';
  height: 20%;
  aspect-ratio: 1;
  background-color: rgba(0 0 0 / .7);
  position: absolute;
  top: -10%;;
  clip-path: polygon(-19px -19px, -30% 133%, 163% -64%);
  rotate: 45deg;
}
.dominance {
  background-image: url(images/dominanz.jpg);
}
.battle {
	background-image: url(images/kampf.jpg);
}
.temple {
	background-image: url(images/tempel.png);
}
.pyramid {
	background-image: url(images/pyramide.png);
}
button {
  width: calc(50% - 0.5rem);
  aspect-ratio: 1;
  background-size: contain;
  border: 0;
  padding: .1rem;
  margin: 0;
  background-color: transparent;
  filter: drop-shadow(0 0 4px rgba(0 0 0 / .5));
  background-repeat: no-repeat;
  cursor: pointer;
}
.order-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7vw;
  aspect-ratio: 1;
  box-shadow: 0 0 10px rgba(0 0 0 / .7), 0 0 3px rgba(255 255 255 / .8) inset;
  border-radius: 5px;
  backdrop-filter: blur(5px);
}
.no-player {
	display: none;
}
.no-player:after {
  content: '';
  width: 5px;
  height: 128%;
  background: maroon;
  position: absolute;
  rotate: 45deg;
}
.field-item {
  background-repeat: no-repeat;
  width: 80%;
}
header {
  display: flex;
  width: calc(100% + 1rem);
  gap: 1rem;
  padding: 0.5rem;
  margin: -1rem -1rem 0;
  border-radius: 1.5rem 1.5rem 0 0;
  /*! border-bottom: 0.1rem outset gold; */
  background: rgba(0 0 0/ .7);
  cursor: move;
}

header > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

.close {
  background: darkred;
  color: goldenrod;
  font-weight: bold;
  border-radius: 0 1.5rem;
  font-size: 2rem;
  width: 17%;
  aspect-ratio: 1 / 0.8;
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0 0 0 /.5), 0 0 3px #c66464 inset;
}
.close:before {
  content: '\00D7';
  position: absolute;
  line-height: 1;
}
.fields-wrapper {
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 1.5%;
	background: #6a5938cc;
	margin-top: 1rem;
	width: 40%;
	/*! border: 0.15em outset goldenrod; */
	border-radius: 2rem;
	box-shadow: 0 0 15px rgba(0 0 0 / .5);
}
.reset-order {
  background: maroon;
}
.player-order-button:before {
  content: '';
  position: absolute;
  width: 10%;
  height: 70%;
  background: goldenrod;
  rotate: 45deg;
}
.player-order-button:after {
  content: '';
  width: 10%;
  height: 70%;
  background: goldenrod;
  rotate: -45deg;
}
.player-order-button {
  height: 50%;
  width: 5%;
  margin: auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 4px #c66464 inset;
}
.add-player {
  background: #0f4639;
}
.add-player::before {
  rotate: 90deg;
}
.add-player:after {
  rotate: 0deg;
}
.scorepad {
  display: flex;
  flex-direction: column;
  margin: 1rem;
}
.point-card:nth-child(n+12) {
  background-color: burlywood;
}
.point-card {
  background-image: url(images/card_bg.jpg);
  background-blend-mode: multiply;
  background-size: cover;
}

.red .card:nth-child(2n+1),
.yellow .card:nth-child(7n+1),
.blue .card:nth-child(11n+1),
.green .card:nth-child(6n+1),
.black .card:nth-child(13n+1),
.order-field-bg.card:nth-child(n){
  background-position: var(--bgr-position-1);
  background-size: var(--bgr-size-1);
}
.red .card:nth-child(3n+1),
.yellow .card:nth-child(11n+1),
.blue .card:nth-child(13n+1),
.green .card:nth-child(7n+1),
.black .card:nth-child(2n+1),
.order-field-bg.card:nth-child(2n){
  background-position: var(--bgr-position-2);
  background-size: var(--bgr-size-2);
}
.red .card:nth-child(4n+1),
.yellow .card:nth-child(13n+1),
.blue .card:nth-child(2n+1),
.green .card:nth-child(11n+1),
.black .card:nth-child(3n+1),
.order-field-bg.card:nth-child(3n) {
  background-position: var(--bgr-position-3);
  background-size: var(--bgr-size-3);
}
.red .card:nth-child(5n+1),
.yellow .card:nth-child(2n+1),
.blue .card:nth-child(3n+1),
.green .card:nth-child(13n+1),
.black .card:nth-child(4n+1),
.order-field-bg.card:nth-child(4n) {
  background-position: var(--bgr-position-4);
  background-size: var(--bgr-size-1);
}
.red .card:nth-child(6n+1),
.yellow .card:nth-child(3n+1),
.blue .card:nth-child(4n+1),
.green .card:nth-child(2n+1),
.black .card:nth-child(5n+1),
.order-field-bg.card:nth-child(5n) {
  background-position: var(--bgr-position-5);
  background-size: var(--bgr-size-4);
}
.red .card:nth-child(7n+1),
.yellow .card:nth-child(4n+1),
.blue .card:nth-child(5n+1),
.green .card:nth-child(3n+1),
.black .card:nth-child(6n+1) {
  background-position: var(--bgr-position-6);
  background-size: var(--bgr-size-5);
}
.red .card:nth-child(11n+1),
.yellow .card:nth-child(5n+1),
.blue .card:nth-child(6n+1),
.green .card:nth-child(4n+1),
.black .card:nth-child(7n+1) {
  background-position: var(--bgr-position-7);
  background-size: var(--bgr-size-3);
}
.red .card:nth-child(13n+1),
.yellow .card:nth-child(6n+1),
.blue .card:nth-child(7n+1),
.green .card:nth-child(5n+1),
.black .card:nth-child(11n+1) {
  background-position: var(--bgr-position-8);
  background-size: var(--bgr-size-2);
}


.player-image{
	border-radius: 50%;
	border-style: outset;
	box-shadow: 0 0 10px rgba(0 0 0 / .5);
	background-size: 100%;
	background-position: center;
	cursor: pointer;
}

.player-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.red-image {
	background-image: url('images/horus.jpg');
}
.blue-image {
	background-image: url('images/sobek.jpg');
}
.green-image {
	background-image: url('images/wadjet.jpg');
}
.yellow-image {
	background-image: url('images/bastet.jpg');
}
.black-image {
	background-image: url('images/anubis.jpg');
}

.red.order-item {
  border: 0.1rem outset var(--clr-red);
}
.yellow.order-item {
  border: 0.1rem outset var(--clr-yellow);
}
.blue.order-item {
  border: 0.1rem outset var(--clr-blue);
}
.green.order-item {
  border: 0.1rem outset var(--clr-green);
}
.black.order-item {
  border: 0.1rem outset var(--clr-black);
}
.yellow.order-item.field-item {
  background-attachment: scroll;
}
.order-item:before {
  content: '';
  background-image: url(images/pharao.png);
  height: 100%;
  width: 100%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
}
.active {
	box-shadow: 0 0 5px 2px gold;
}
.hidden {
	display: none;
}
.red {
  background-color: var(--clr-red);
}

.yellow {
  background-color: var(--clr-yellow);
}
.yellow h2 {
}
.blue {
  background-color: var(--clr-blue);
}

.green {
  background-color: var(--clr-green);
}

.black {
  background-color: var(--clr-black);
}