:root {
	--color-lightest: #eee;
	--color-lightest-highlight: #e6e6e6;
	--color-light: #ddd;
	--color-light-highlight: #ccc;
	--color-grey: #808080;
	--color-darkest: #111;
	--color-darkest-highlight: #181818;
	--color-dark: #222;
	--color-dark-highlight: #333;
	--color-red: #e24;

	--color-text: var(--color-darkest);
	--color-background: var(--color-lightest);
	--color-secondary: var(--color-light);
	--color-tertiary: var(--color-lightest-highlight);
	--color-highlight: var(--color-light-highlight);

	--color-card-face: var(--color-lightest);
	--color-card-border: var(--color-dark);
	--color-card-pts: var(--color-dark);
	--color-card-black: var(--color-darkest);
	--color-card-red: var(--color-red);

	--padding-page-sides: 8rem;
	--padding-page-top: 4rem;

	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	font-family: var(--font-family);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-background);
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", sans-serif;
	background-color: #1e1e2f;
	color: #fff;
	height: 100vh;
	overflow: hidden;
	touch-action: none ;
}
#table-list-container *{
	display: block;
	width:100%
}
#table-list option{
	padding: 0.3rem;
	font-size : 1.2rem; 
}

.hidden{
	visibility: hidden;
}
.blurred{
	filter: blur(5px) ;
}


#table-list {
	list-style: none;
	height: max-content;
	max-height: 10rem;
	color:white ;
	justify-content:center ;
	gap:2rem;
	background-color: #1e1e2f;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;
}


.description {
  text-align: center;
  margin: 2em;
  font-size: 1.2em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.selectedCard{
	transform: translateY(-2rem); /* move upward (forward) */
	box-shadow: 0 0 10px 4px gold !important; /* glowing border */
}

.connection_options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em;
  padding: 2em;
}

.home-button{
  color: #f0c420;
  background-color: #282848;
  border: 1px solid #555;
  border-radius: 10px;
  padding: 1em;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
  cursor: pointer;
  width: 180px;
}

.home-button:hover {
  background-color: #ddb80e !important;
  color:black
}
.regle {
	display: flex;
	justify-content: center;
	align-items: center;
}
#historyPosition{
	display:grid;
	grid-template-rows: max-content;
	height: 0 ; 
	width: 0 ; 
	justify-content: center;
}

#history-container.open {
	max-height : 20rem  ;
	transition: max-height 1s ease;
	padding : 0.5rem;
	padding-bottom : 2rem;
  	border: 3px solid #555;
}
tbody{
	text-align: center;
}
tr{
	width:100%
}

table tr:first-child {
	border-bottom: 2px solid black;
}

table td:nth-child(1) { translate: 0 1.5rem ; text-align: right; padding:0 }
table td:nth-child(4) { translate: 0 1.5rem ; text-align: left; padding:0}
table td:nth-child(2) { text-align: right; }
table td:nth-child(3) { text-align: left; }

table th:nth-child(2) { text-align: right; }
table th:nth-child(3) { text-align: left; }
td,th{
	padding:0.5rem;
	width: 20%; 
	text-overflow: ellipsis;
	overflow: hidden;
}

#history-container {
	display: grid;
	gap:1rem;
  	background-color: #282848;
	padding : 0rem;
  	border: 0px solid #555;
	border-radius: 10px ;


	z-index: 2;
	width: max-content;
	overflow : scroll;
	position: relative;
	max-height: 0;
	transition: all 0.5s ease;
	margin-top: 2rem;
}

#center{
	display: flex;
	flex-direction: column;
	align-items:center ;
}
  
  

#game-container {
	display: none;
	padding-top:0.5rem;
	flex-direction: column;
	align-items: center;
	align-items: center;
	justify-content: center;
}
.in-game{
	display: none;
}

header {
  width: 100%;
  background-color: #282848;
  padding: 0.5rem 2rem;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2.5em;
  color: #f0c420;
}

.game-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

#header-buttons .home-button{
	width:auto;
}

#header-buttons {
	display: none ;
	gap: 2rem;
	user-select: none;
}

#privateBox, #soundBox, #cardOrder {
	transform: scale(2); /* 1 = normal size */
	transform-origin: left;
	width:auto !important
}
/*
#settingsDialog{
	min-width:60vw;
}
*/
#changePlaceLabel{
	text-align: center;
}
#quantity{
	width:auto;
}
#changePlaceContainer{
	justify-items: center;
	align-items: center;
	height: max-content;
	min-height:10rem;
	min-width:10rem;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,1fr);
	background-color: #1e1e2f;
	border-radius: 8px;
	padding: 1rem;
	margin: 0.5rem 0rem;
}
.placerContainer{
  text-align: center;
  background-color: #282848;
  padding:0.5rem;
  border: 1px solid #555;
  border-radius: 10px;
}
.placerContainer:hover{
  background-color: #ddb80e;
  color:black ;
}

.dialog-inputs{
	gap:0.4rem;
	min-width: 20rem;
	padding: 1em;
	padding-bottom: 0.5em;
	display:grid;
	grid-template-columns: max-content auto;
}
.dialog-inputs label{
	padding-right: 0.5em;
	justify-self: right;
}
.dialog-inputs input{
	width:100%;
	justify-self:left;
}
.dialog{
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	padding : 1em;
  	background-color: #282848;
  	color: #f0c420;
	border-radius: 1em;
}
.dialog menu button{
	padding:0.5em ;
	width:auto;
}
#player1-name-container{
	transform: rotate(180deg);
}

.dialog h2{
	text-align: center;
}
.dialog menu{
	display: flex;
	justify-content: center;
	gap:2em ;
}

.card {
	padding: 2.77rem 1.77rem;
	position: relative;
	display: inline-block;
	border-radius: 4px;
	background-color: var(--color-card-face);
	background-size: 100% 100%;
	background-position: 50% 50%;
	border: 2px solid var(--color-card-border);
	box-shadow: 0 0 0 4px var(--color-background);
  }

.card-hand {
	display: flex;
	justify-content: center;
}

.card-hand > .card {
	transition: 0.2s ease transform;
}

.myhand > .card:not(.placeholder):hover {
	transform: translateY(-1rem);
}

.card-hand > .card:hover {
	cursor: pointer;
	transform: scale(1.2);
	z-index: 10;
}


.card-hand.myhand{
	gap:0.7em;
}

#gear-container{
	align-self: start;
	margin-top:1rem;
	justify-self: center;
	padding:5px;
	border: 2px solid #d2d7ff;
	border-radius:10px;
}

#gear-container:hover{
	background-color: #ddb80e;
}

#gear {
	background-image: url("/graphics/gear.svg");
	color: white;
	background-size: contain;
	height: 40px;
	width: 40px;
}
  
  .card.face-down {
	background-image: url(/graphics/face-down.svg);
  }
  
  .card.blank {
	background: none;
	border: none;
  }
  
  .card.highlight {
	box-shadow: 0 0 0 2px var(--color-red),
				0 0 0 4px var(--color-background);
  }
  
  .card.placeholder {
	background-color: var(--color-secondary);
	border-color: var(--color-highlight);
	display:flex;
	align-items: center;
	justify-content: center;
	color:black;
	height: 0;
	width: 0;
	font-size: 2em;
  }
  
  .card::before {
	display: inline-block;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--color-card-black);
	font-feature-settings: "ss01" on;
  }
  
  .card::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 66%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.375rem;
	height: 2.375rem;
	background-size: 100%;
	background-position: 50%;
  }
  
  
  .card:is(.hearts, .diamonds)::before {
	color: var(--color-card-red);
  }
  
  .card:is(.five, .ten, .ace) {
	background-image: url(/graphics/face-points.svg);
  }
  
  .card.five::before { content: "5"; }
  .card.six::before { content: "6"; }
  .card.seven::before { content: "7"; }
  .card.eight::before { content: "8"; }
  .card.nine::before { content: "9"; }
  .card.ten::before { content: "10"; }
  .card.jack::before { content: "J"; }
  .card.queen::before { content: "Q"; }
  .card.king::before { content: "K"; }
  .card.ace::before { content: "A"; }
  
  .card.clubs::after { background-image: url(/graphics/clubs.svg); }
  .card.diamonds::after { background-image: url(/graphics/diamonds.svg); }
  .card.hearts::after { background-image: url(/graphics/hearts.svg); }
  .card.spades::after { background-image: url(/graphics/spades.svg); }

#play-area {
	padding-top:0.5rem ;
	justify-self: center;
	justify-content: center;
	display: grid;
	grid-template-columns: repeat(3, 18rem) ;
	grid-template-rows: auto repeat(2, 18rem);
	gap: 2rem;
}

.table-center {
	background: radial-gradient(circle, #282848 60%, #1e1e2f 70%);
	border-radius: 50rem; 
	display: flex;
	justify-content: center;
	align-items: center;
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

.table-center > ol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	gap: 0 1rem;
}

.player {
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
	align-self: stretch;
}

.sidePlayer {
	flex-direction: column !important ;
}
#player2-hand .card{
	margin-left : -2rem;
}
#player2-hand{
	translate: 1rem 0  ;
}

#player1-hand{ 
	translate: -1rem -2rem  ;
}
#player3-hand{ 
	translate: 1rem -2rem  ;
}
.sidePlayer .card{
	transform: rotate(90deg);
	height:0 ;
	width:0;
	margin-bottom : -4rem ; 
}
#gameType-container{
	display: flex; 
	flex-direction: column
}

#gameType-container label input {
	width:max-content
}
  
.sidePlayer .card:hover {
transform: rotate(90deg) scale(1.2);
}
  

.table-center > ol > :nth-child(1) {
	grid-area: 3 / 2;
}
.table-center > ol > :nth-child(2) {
	grid-area: 2 / 1;
	justify-self: right;
}
.table-center > ol > :nth-child(3) {
	grid-area: 1 / 2;
}
.table-center > ol > :nth-child(4) {
	grid-area: 2 / 3;
	justify-self: left;
}
.table-center > ol > :nth-child(5) {
	grid-area: 3 / 1;
}
.table-center > ol > :nth-child(6) {
	grid-area: 3 / 3;
}
.table-center > ol > :nth-child(7) {
	grid-area: 1 / 1;
}
.table-center > ol > :nth-child(8) {
	grid-area: 1 / 3;
}
.bid-button{
	height: 0;
	display: none;
	align-items: center;
	justify-content: center;
	width: 0;
	font-size: 2.5rem  !important;
	padding: 1.3rem 1.8rem  !important ;
	justify-self: center; 
	user-select: none;
}

#passBid{
	background-color: red;
}

#confirmBid{
	background-color: green;
}

.pass-button{
	user-select: none;
	color:white;
	display: none;
	height: 0;
	align-items: center;
	justify-content: center;
	width: 0;
	font-size: 1rem  !important;
	padding : 1.3rem 1.8rem !important ;
	justify-self: center; 
}

.card-hand-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}


.gameButtons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	background-color: #11111b;
	align-items: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	margin: auto;
	border: 2px solid #d2d7ff;
}

.gameButtons:hover {
	transform: translateY(-0.2rem);
	box-shadow: 0 0 0 3px #d2d7ff;
}

#player0 {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}


#player1 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	justify-self: right;
	flex-direction: row-reverse;
}

#player3 {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	justify-content: flex-end;
	flex-direction: row;
	justify-self:  left;
}
#player1-name, #player3-name {
	writing-mode: vertical-lr;
}
#player1-name{
	translate: 2rem 0;
}
#player3-name{
	translate: 2rem 0;
}

#player2 {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	justify-content: flex-end;
}
#trump{
	height:min-content;
	width: min-content;
}
.glow{
	color: #ffd700;
	text-shadow: 0 0 5px #ffd700, 0 0 10px #ffa500, 0 0 15px #ff8c00;
	font-weight: bold;
	animation : pulse-scale 3s ease-in-out infinite;
}
@keyframes pulse-scale {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.13); }
	100% { transform: scale(1); }
  }

.last-trick-container{
	align-items: left;
	width: 100%;
	display : flex ;
	align-items: center;
	flex-direction: column;
	gap: 0.25rem ;
}
.last-trick-container label{
	text-align: center;
}

#top-info-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#roomIdCopy{
  border: 2px solid var(--color-secondary);
  padding: 0.2rem 0.8rem !important ;
  width: min-content;
}

#game-infos {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.score output{
	background-color: #282848;
  	color: #f0c420;
}

.score output:hover{
	background-color: #f0c420;
  	color: black;
}

.score label {
	align-self: center;
}

.score output {
  align-content: center;
  min-width: 6.5ch ;
  height: 3rem ;
  border: 2px solid var(--color-secondary);
  border-radius: 4px;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

.bid{
	align-self: center;
	white-space: nowrap;
}

#id-container{
	display:flex;
	flex-direction: column;
	align-items: center;
	gap : 0.25rem ;
}


.trump, .score, #id-container {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  gap: .25rem;
}
.trump label{
	text-align: center;
}
@keyframes shake {
	0%, 100%   { transform: translateX(0); }
	20%, 60%   { transform: translateX(-10px); }
	40%, 80%   { transform: translateX(10px); }
}
  
.shake-error {
	animation: shake 0.5s ease;
	box-shadow: 0 0 10px 4px red!important; /* glowing border */
	border: 2px solid red;
}

.fading-out{
	animation: fadeout 3s forwards;
}

@keyframes fadeout{
	0%  { opacity:1 ; }
	100%  { opacity:0 ; }
}

@media screen and (max-width: 750px) {
	*{
		user-select: none;
	}

	#game-container {
		padding-top:0rem;
	}

	h1 {
		font-size: 1.5rem;
	}
	#trump, #last-trick{
		padding: 7vw 5vw !important ;
	}

	#player0-hand{
		flex-wrap:wrap;
		width:100vw;
	}

	h2 {
		font-size: 1rem;
	}
	#header-buttons{
		justify-content: center;
	}

	button {
		padding: 1rem 0.5rem;
	}
	#header{
		display: block;
		padding: 0.5rem;
	}
	#header h1{
		font-size: 1.3rem;
	}
	.card::after{
		width:1.5rem;
		height:1.5rem;
	}
	.card::before{
		font-size: 1.5em ;
	}
	.card {
		padding: 7vw 5vw;
	}
	#mobileScore{
		display: flex;
		gap: 2em ;
	}
	#player3{
		justify-content: left;
	}
	#player1{
		justify-content: right;
	}

	.other{
		display:none;
	}

	#play-area {
		padding-top:2rem ;
		justify-content: center;
		grid-template-columns: repeat(3, 45vw) ;
		grid-template-rows: auto repeat(2, 45vw);
		justify-content: center;
	}
	.home-button{
		padding:0.3rem;
	}

	.player {
		width: 100%;
	}

	.gameButtons {
		font-size: 0.8rem;
		padding: 0.5rem;
	}

	.score output {
		min-width: max-content;
		padding: 0rem 0.2rem ;
	}
	#player2{
		height:0;
	}
	#player1-name{
		translate: -2rem 0;
	}
	#player2-name{
		translate: 0 0rem;
	}
	#player3-name{
		translate: -2rem 0;
	}
}


@media screen and (max-width: 450px) {
	*{
		user-select: none;
	}
	#player2-name{
		translate: 0 2rem;
	}

	#game-container {
		padding-top:1rem;
	}
	#header-buttons{
		gap:0.5rem ;
	}

	#trump, #last-trick{
		padding: 7vw 5vw !important ;
	}

	.card {
		padding: 7vw 5vw;
	}

	#play-area {
		padding-top:0rem ;
		justify-content: center;
		grid-template-columns: repeat(3, 13rem) ;
		grid-template-rows: auto repeat(2, 13rem);
		justify-content: center;
	}
}