/* Basic set up stuff. */
body {
	background-color: #444;
	color: #fff;
	font-family: 'Karla';
	overflow: hidden;
}

/* Disable text selection on everything since we'll be doing lots of dragging and dropping. */
* {
	-webkit-user-select: none;
	user-select: none;
}

/* The table is green. */
#table {
	position: absolute;
	top: 1em;
	bottom: 1em;
	left: 1em;
	right: 1em;
	min-width: 500px;
	border: 2px solid #142;
	border-radius: 8px;
	padding: 1em 3rem;
	margin-top: 1em;
	box-shadow: 0px 8px 50px rgba(0,0,0,0.5);
	background: 
		linear-gradient(-20deg, rgba(16,128,48,0.88),rgba(16,128,48,0.94) ),
  		url("data:image/svg+xml,%3Csvg viewBox='0 0 100% 100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
	;
}

/* Cards and glass are 'invisible' <div>s used to interact with the cards. */
#cards,
#glass {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}
	/* Affordances for mouse cursors. */
	#glass.canClick {
		cursor: pointer;
	}
	#glass.canDrag {
		cursor: grab;
	}

/* The masthead is the element at the top of the page with the menu options in it. */
#masthead {
	position: absolute;
	top: 0;
	padding: 0.5em;
	display: flex;
	left: 0;
	right: 1rem;
}
	#masthead ul {
		flex: 10;
		display: inline-flex;
		gap: 1rem;
		margin: 0;
		padding-inline-start: 1rem;
	}
	#masthead ul li {
		list-style-type: none;
	}
	#masthead li.home a {
		display: block;
		height: 2rem;
		width: 1.9rem;
		margin-top: -0.5rem;
		background-color: white;
		flex: 1;
		overflow: hidden;
		border-radius: 0.5rem;
		border: 2px solid black;
		color: black;
		font-size: 2rem;
		transform: rotate(6deg);
		box-shadow: 0px 8px 50px rgba(0,0,0,0.45);
	}
	#masthead li.home a.red {
		color: #f22;
		border-color: #f22;
	}
	#masthead li.home a:hover {
		box-shadow: 0px 0px 8px rgba(255,255,255);
	}
	#masthead li.home a span {
		transform: rotate(-20deg);
		display: block;
		margin-left: 0.5rem;
		margin-top: -0.1rem;
	}

	/* Styles affecting the list of games appearing in the masthead. */
	#masthead ul a.selected {
		color: white;
		border-bottom: 1px solid #fff;
	}
	#masthead ul a {
		border: 1px solid transparent;
		text-decoration: none;
		padding: 0px 2px;
	}
	#masthead a:hover {
		color: #fff;
		border-bottom: 1px solid #fff;
	}

	/* Styles affecting the game options (restart/settings) appearing in the masthead. */
	#masthead div {
		display: flex;
		gap: 1rem;
		position: relative;
		margin-top: -6px;
	}
	#masthead div a {
		padding: 5px 6px 0px 6px;
		border: 1px solid transparent;
	}
	#masthead div a:hover {
		border: 1px solid #fff;
		border-radius: 5px;
	}

/* Banner overlays the game at the start and end. */
#banner {
	position: absolute;
	left: 0;
	right: 0;
	top: 25%;
	bottom: 40%;
	background-color: rgba(0,0,0,0.75);
	padding: 3em 6em;
	box-shadow: 0px 8px 50px rgba(0,0,0,1);
	backdrop-filter: blur(2rem);
	text-shadow: #000 2px 2px 5px;
}
	#banner h1 {
		margin-bottom: 0;
	}
	#banner p {
		margin: 1em 0 2em;
	}

#banner.lookingGlass {
	background-color: rgba(0,0,0,0);
	backdrop-filter: none;
	box-shadow: none;
}
	#banner.lookingGlass * {
		display: none;
	}
	#banner.lookingGlass > #looking-glass {
		display: block;
	}
	#banner #looking-glass {
		position: absolute;
		top: 4.15rem;
		left: 2rem;
		box-shadow: 0px 8px 32px rgba(0,0,0,0.25);
		border: 1px solid #666;
		padding: 0.5rem;
		border-radius: 2rem;
		background-color: #111;
	}

/* Buttons are blue. */
a.btn {
	background-color: #36f;
	padding: 0.5em 2em;
	border: 1px solid #006;
	border-radius: 6px;
	color: #fff;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
	text-decoration: none;
}
	a.btn:hover {
		background-color: #139;
	}

/* Hyperlinks are yellow. */
a {
	color: yellow;
	cursor: pointer;
}
	a:hover {
		text-decoration: none;
	}

/* This element appears on the banner. */
#banner .btn {
	margin-right: 3rem;
}

/* Hidden elements are hidden :| */
.hidden {
	display: none;
}

/* Piles are boxes with dark outlines, */
.pile {
	width: 12.5%;
	border-radius: 5%;
	aspect-ratio: 0.692;
	position: relative;
	border: 1px solid #040;
	container-type: size;
	user-select: none;
}

/* Piles and cards being interacted with are white and glow a bit. */
.pile.interactive {
	border: 1px solid #fff;
	box-shadow: 0px 0px 24px #fff;
}
.card.interactive {
	box-shadow: 0px 0px 24px #fff;
}

/* Pile labels are dark unless in hover state. */
.pile .label,
.pile .bottomlabel {
	color: #040;
}
.pile.interactive .label,
.pile.interactive .bottomlabel {
	color: #fff;
}

/* Cards look like playing cards :| */
.card {
	border: 1px solid #040;
	border-radius: 5%;
	aspect-ratio: 0.692;
	background-color: white;
	position: absolute;
	container: card / size;
	user-select: none;
}

/* Face down cards show the nice blue printed back graphic. */
.card.faceDown {
	background-image: url('../assets/blueback.png');
	background-size: cover;
	background-position: center;
}

/* Red suits are red, black suits are black! */
.hearts, .diamonds {
	color: #f22;
}
.clubs, .spades {
	color: black;
}

/* Cards have two labels in opposing corners. */
.label {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin: 0cqh 2cqh
}
	.label .ordValue {
		font-size: 13cqh;
		text-align: center;
		min-width: 12cqw;
	}
	.label .symbol {
		font-size: 9cqh;
		text-align: center;
		width: 0;
		line-height: 0;
		margin-left: -1cqh;
		margin-top: 4cqh;
	}

/* The bottom label is upside-down. */
.bottomlabel {
	position: absolute;
	bottom: -1px;
	right: 1px;
	transform: rotate(180deg);
}

/* Facias are an arrangement of glyphs on the card face. */
.facia {
	position: absolute;
	top: 17cqh;
	bottom: 15cqh;
	left: 28cqw;
	right: 28cqw;
	font-size: 18cqh;
	display: flex;
	justify-content: space-between;
}
	.facia > div {
		display: flex;
		width: 0;
		line-height: 0;
	}

/* One glyph columns are centered vertically ... */
.facia1 {
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
	/* ... except on 7s */
	.css7 .facia1 {
		justify-content: start;
		margin-top: 16cqh;
	}

/* Two-glyph columns are top and bottom of the column */
.facia2, .facia3, .facia4 {
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
	/* ... except on 8s ... */
	.css8 .facia2 {
		justify-content: start;
		margin-top: 1cqh;
		line-height: unset;
	}
	/* ... and 10s ... */
	.css10 .facia2 {
		line-height: 22cqh;
	}
	
/* Aces are a big single glyph. */
.cssace .facia {
	font-size: 20cqh;
	align-items: center;
	justify-content: space-around;
}
	.cssace.spades .facia {
		font-size: 43cqh;
		align-items: center;
		justify-content: space-around;
	}

/* Twos and threes have a single column of glyphs so put it up the middle. */
.css2 .facia,
.css3 .facia {
	justify-content: center;
}

/* Picture cards use big chess HTML entities for their glyphs. */
.cssking .facia,
.cssqueen .facia,
.cssjack .facia {
	align-items: center;
	justify-content: space-around;
}
	.cssking .facia {
		font-size: 75cqh;
		margin-top: 6cqh;
	}
	.cssqueen .facia {
		font-size: 70cqh;
		margin-top: 14cqh;
	}
	.cssjack .facia {
		font-size: 60cqh;
		margin-top: 7cqh;
	}

	.cssking .facia .facia2 div:last-child {
		margin-top: 37cqh;
		font-size: 17cqh;
	}
	.cssqueen .facia .facia2 div:last-child {
		margin-top: 37cqh;
		font-size: 17cqh;
	}
	.cssjack .facia .facia2 div:last-child {
		margin-top: 33cqh;
		font-size: 17cqh;
	}

/* The list of games shows on the root page and is a simple <ul> list. */
#listOfGames {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-inline-start: 0rem;
	width: 100%;
	margin-top: 2rem;
}
	#listOfGames li {
		display: flex;
		flex-direction: row;
		width: calc(50% - 1rem);
		border: 1px solid #040;
		border-radius: 0.5rem;
		margin-bottom: 2rem;
		box-shadow: 0px 8px 50px rgba(0,0,0,0.15);
	}
	#listOfGames li:has(a:hover) {
		box-shadow: 0px 8px 50px rgba(0,0,0,0.45);
		background-color: rgba(255,255,255,0.15);
	}
	#listOfGames li a {
		padding: 1rem;
		flex: 8;
		text-decoration: none;
		font-size: 1.2rem;
	}
	#listOfGames li a.icon span {
		transform: rotate(-20deg);
		display: block;
		margin-top: -1rem;
	}

	#listOfGames li a span.sub {
		display: block;
		color: #fff;
		margin-top: 0.25rem;
		font-size: 1rem;
	}
	#listOfGames li a.icon {
		display: block;
		height: 4rem;
		background-color: white;
		flex: 1;
		overflow: hidden;
		border-radius: 0.5rem;
		border: 4px solid black;
		color: black;
		font-size: 6rem;
		transform: rotate(6deg);
		box-shadow: 0px 8px 50px rgba(0,0,0,0.45);
	}
	#listOfGames li a.icon.red {
		color: #f22;
		border-color: #f22;
	}

/* Keyframes which manage the tray sliding in and out by setting its left position. */
@keyframes slideIn {
  0% { left: 100% }
  100% { left: 40% }
}
@keyframes slideOut {
  0% { left: 40% }
  100% { left: 100%; display: none; }
}

/* Styling and layout for the slide-in tray itself. */
#tray {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 60%;
	background-color: #333;
	border-left: 1px solid #888;
	z-index: 2;
	display: none;
}
	/* These two classes are applied to the tray to trigger its animations in and out. */
	#tray.open {
		display: block;
		animation: slideIn 0.5s forwards;
	}
	#tray.closed {
		display: block;
		animation: slideOut 0.5s forwards;
	}

	#tray div {
		padding: 0rem 1rem;
	}
	#tray div.header {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #666;
		align-items: center;
	}
		#tray div.header a.close {
			text-decoration: none;
			font-size: 2rem;
			border: 1px solid transparent;
			padding: 0rem 0.5rem 0.1rem 0.5rem;
			border-radius: 5px;
			max-height: fit-content;
		}
			#tray div.header a.close:hover {
				color: #fff;
				background-color: #666;
				border: 1px solid #888;
			}
	#tray div.about {
		margin-top: 5rem;
		border-bottom: 1px solid #666;
	}
	#tray div.settings {
		margin-top: 1rem;
	}
	#tray div.settings label {
		padding-left: 1.5rem;
		position: relative;
		display: block;
		cursor: pointer;
		min-height: 4rem;
		color: #ccc;
	}
	#tray div.settings label strong {
		color: #fff;
	}
	#tray div.settings input {
		position: absolute;
		left: 0;
	}
	#tray div.settings a.btn {
		margin-top: 1rem;
		display: inline-block;
	}

/* Lightbox is a non-interactive element that appears under the slide-in tray. It fades in and out. */
#lightbox {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}
	/* The show class is applied to the lightbox when it is needed which triggers its transition. */
	#lightbox.show {
		visibility: visible;
		opacity: 1;
		transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
	}

/* These rules implement X-ray by making all the cards translucent-ish ... */
#cards.xray > div {
	opacity: 0.1;
}

/* ... except the ones that match the CSS classes on the #cards div. */
#cards.xray.cssace > div.cssace,
#cards.xray.css2 > div.css2,
#cards.xray.css3 > div.css3,
#cards.xray.css4 > div.css4,
#cards.xray.css5 > div.css5,
#cards.xray.css6 > div.css6,
#cards.xray.css7 > div.css7,
#cards.xray.css8 > div.css8,
#cards.xray.css9 > div.css9,
#cards.xray.css10 > div.css10,
#cards.xray.cssjack > div.cssjack,
#cards.xray.cssqueen > div.cssqueen,
#cards.xray.cssking > div.cssking {
	opacity: 1;
}