TableturfBattleApp/TableturfBattleClient/tableturf.css

@font-face {
	font-family: 'Splatoon 1';
	src: url('assets/external/splatoon1.woff2') format('woff2');
}

@font-face {
	font-family: 'Splatoon 2';
	src: url('assets/external/splatoon2.woff2') format('woff2');
}

html, body {
	overflow-x: hidden;  /* TODO: This stops the page from scrolling into whitespace on mobile Chrome. A better solution is probably possible. */
}

body {
	margin: 0;
	font-family: 'Splatoon 2', sans-serif;
	/* Default colours - normally the game data sent from the server will override these */
	--primary-colour-1       : hsl(63, 99%, 49%);
	--special-colour-1       : hsl(38, 100%, 49%);
	--special-accent-colour-1: hsl(60, 95%, 55%);
	--primary-colour-2       : hsl(234, 97%, 64%);
	--special-colour-2       : hsl(184, 99%, 50%);
	--special-accent-colour-2: hsl(180, 17%, 86%);
	--primary-colour-3       : hsl(306, 95%, 50%);
	--special-colour-3       : hsl(270, 95%, 50%);
	--special-accent-colour-3: hsl(285, 95%, 85%);
	--primary-colour-4       : hsl(155, 95%, 50%);
	--special-colour-4       : hsl(120, 95%, 50%);
	--special-accent-colour-4: hsl(135, 95%, 85%);
	--player-primary-colour: var(--primary-colour-1);
	--player-special-colour: var(--special-colour-1);
	--player-special-accent-colour: var(--special-accent-colour-1);
	--theme-colour: #0c92f2;
	color: white;
	background: url('assets/external/BannerBackground.png') black;
	background-position: 50% -72px;
	color-scheme: dark;
}
dialog {
	background: black;
}

#gamePage {
	background: linear-gradient(to bottom, #3B3064 80%, #3B3B3D);
	--player-primary-colour: var(--primary-colour-1);
	--player-special-colour: var(--special-colour-1);
	--player-special-accent-colour: var(--special-accent-colour-1);
	--player-ui-base-colour: var(--player-primary-colour);
	--player-ui-highlight-colour: var(--player-special-colour);
	--player-ui-highlight2-colour: var(--player-special-accent-colour);
}
#gamePage[data-my-player-index="0"], .playContainer[data-index="0"] {
	--player-primary-colour: var(--primary-colour-1);
	--player-special-colour: var(--special-colour-1);
	--player-special-accent-colour: var(--special-accent-colour-1);
}
#gamePage[data-my-player-index="1"], .playContainer[data-index="1"] {
	--player-primary-colour: var(--primary-colour-2);
	--player-special-colour: var(--special-colour-2);
	--player-special-accent-colour: var(--special-accent-colour-2);
}
#gamePage[data-my-player-index="2"], .playContainer[data-index="2"] {
	--player-primary-colour: var(--primary-colour-3);
	--player-special-colour: var(--special-colour-3);
	--player-special-accent-colour: var(--special-accent-colour-3);
}
#gamePage[data-my-player-index="3"], .playContainer[data-index="3"] {
	--player-primary-colour: var(--primary-colour-4);
	--player-special-colour: var(--special-colour-4);
	--player-special-accent-colour: var(--special-accent-colour-4);
}
#gamePage[data-ui-base-colour-is-special-colour="true"] {
	--player-ui-base-colour: var(--player-special-colour);
	--player-ui-highlight-colour: var(--player-primary-colour);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Splatoon 1', sans-serif;
	font-weight: 599;
}

.error {
	border: 1px solid red;
	background: #ff000040;
	padding: 0 0.5em;
}

/* Home page */

#preGamePage {
	text-align: center;
	padding-top: 40px;
}

#logoBanner {
	background: grey;
}

#logo {
	height: 8em;
}

footer {
	font-family: sans-serif;
}

#preGameImplicitSubmitButton {
	position: absolute;
	left: -9999px;
}

#turnTimeLimitBox {
	width: 8ch;
	text-align: right;
}

/* Lobby page */

#lobbyPage:not([hidden]) {
	display: grid;
	grid-template-columns: 27em 1fr;
}

.submitButtonContainer {
	display: flex;
	gap: 0.5em;
	align-items: center;
}

#lobbyPlayerListSection {
	overflow-y: auto;
	box-sizing: border-box;
}

#lobbyStageSection, #lobbyDeckSection {
	overflow-y: scroll;
	height: calc(100vh - 16px);
	box-sizing: border-box;
}

#playerList {
	padding-left: 0;
	list-style: none;
}

#playerList li {
	width: calc(100% - 3em);
	margin: 0.5em 1em;
	background: #111;
	border-radius: 0.5em;
	padding: 0.5em;
	text-shadow: 1px 1px black;
}

#playerList .filled {
	background: var(--theme-colour);
	position: relative;
	animation: 0.33s linear playerListFlyIn;
}

#playerList .ready::after {
	content: '\2714';
	position: absolute;
	bottom: 0;
	right: 0.5em;
	font-weight: bold;
	font-size: x-large;
}

@keyframes playerListFlyIn {
	from { left: -100%; }
	to { left: 0; }
}

.wins {
	display: flex;
}
.wins > div {
	display: inline-block;
	background: url('assets/external/IconMedal_00.webp') center/cover;
	width: 2em;
	height: 2em;
}
.winCount {
	font-size: larger;
	text-align: center;
	text-shadow: 0.1em 0.1em 0 black;
}
.winCount:not(:first-child) { display: none; }

#playerList .wins {
	float: right;
	margin-right: 1.5em;
}

#lobbyTimeLimitBox {
	width: 8ch;
	text-align: right;
}

dialog {
	text-align: center;
}
dialog::backdrop {
	background: black;
	opacity: 0.5;
}

#qrCode {
	background: white;
	border: 1em solid white;
}

/* Stages */

#stageList {
	display: flex;
	flex-wrap: wrap;
}

.stage, .stageRandom {
	font: inherit;
	color: currentColor;  /* Override disabled colour */
	background: black;
	width: 12em;
	height: 18em;
	border: 1px solid grey;
	position: relative;
	align-items: center;
	display: flex;
	flex-flow: column;
	margin: 5px;
}

.stageBody {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
	justify-content: center;
}

.stageGrid {
	margin: 0 auto;
	border-spacing: 0;
}

.stageGrid td {
	width: 0.5em;
	height: 0.5em;
	box-sizing: border-box;
}

.stageGrid td.Empty { outline: 1px solid grey; outline-offset: -1px; }
.stageGrid td.Start1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
.stageGrid td.Start2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
.stageGrid td.Start3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
.stageGrid td.Start4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }

:is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled)::before {
	content: '';
	background: #808080;
}
:is(.stage, .stageRandom).checked::before {
	content: '';
	background: #FFFFFF;
}

/* Cards */

.card, .cardBack {
	box-sizing: border-box;
	width: 10em;
	height: 12em;
	border: 1px solid var(--colour);
	border-radius: 0.5em;
}

.cardBack {
	--colour: grey;
	background: #000000C0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 14em;
}
.cardBack.waiting::before {
	content: '';
	width: 2em;
	height: 2em;
	background: url(assets/external/IconUp_00.webp) center/cover;
	animation: 2s infinite linear loadingSpinner;
	opacity: 0.333;
}

.card {
	position: relative;
	color: currentColor;  /* Override disabled colour */
	background: black;
	font-family: 'Splatoon 1', 'Arial Black', sans-serif;
	font-size: inherit;
	font-weight: 599;
	margin: 0.5em;
}
.card:not([hidden]) {
	display: inline-block;
}

:is(#deckCardListView, #deckCardListEdit, .cardListGrid) .card.upcoming { background: midnightblue; }

.card.common { --colour: rgb(89, 49, 255); }
.card.rare { --colour: rgb(231, 180, 39); }
.card.fresh { --colour: white; }

.cardHeader {
	height: 2.5em;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.cardNumber {
	display: none;
}

.cardListGrid .card:hover .cardNumber {
	display: block;
	position: absolute;
	background: grey;
	border: 1px solid black;
	top: -1.5em;
	left: -1em;
	padding: 0 1em;
	transform: rotate(-10deg);
	z-index: 1;
}

.cardName {
	text-align: center;
	line-height: 1.25em;
	flex-grow: 1;
}
.card:is([data-card-number="163"], [data-card-number="166"], [data-card-number="196"], [data-card-number="197"], [data-card-number="199"],
	[data-card-number="202"], [data-card-number="-3"], [data-card-number="-5"], [data-card-number="-12"]) .cardName {
	position: absolute;
	left: -1em;
	right: -1em;
	transform: scaleX(0.8);
}

.card.common .cardName {
	color: var(--colour);
}
.card.rare .cardName {
	background: var(--colour);
	background: linear-gradient(90deg, rgb(255, 242, 129) 0%, rgb(255, 255, 224) 15%, rgb(231, 180, 39) 50%, rgb(255, 255, 224) 85%, rgb(255, 242, 129) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.card.fresh .cardName {
	background: var(--colour);
	background: linear-gradient(120deg, rgba(253, 217, 169, 1) 0%, rgba(200, 58, 141, 1) 50%, rgba(55, 233, 207, 1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	flex-grow: 0;
}

.cardGrid {
	position: relative;
	margin: 0 auto;
	border-spacing: 0;
}
.cardGrid td {
	width: 1.2ex;
	height: 1.2ex;
	outline: 1px solid #80808080;
	outline-offset: -1px;
}
.cardGrid td.ink { background: url('assets/InkOverlay.png') center/cover, var(--player-primary-colour); outline: none; }
.cardGrid td.special { background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour); outline: none; }

.cardFooter {
	position: relative;
	display: flex;
	align-items: center;
	height: 2.5em;
}

.cardSize {
	display: inline-block;
	width: 2em;
	text-align: center;
}

.cardSpecialCost {
	display: inline-flex;
	width: 6em;
	flex-wrap: wrap-reverse;
	row-gap: 4px;
}

.cardSpecialPoint, .playHintSpecial {
	display: inline-block;
	color: transparent;
	background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour);
	width: 1ch;
	height: 1ch;
	vertical-align: middle;
}
.cardSpecialPoint {
	margin-right: 0.3em;
}
.playHintSpecial {
	width: 1.5ch;
	height: 1.5ch;
}
.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }

:is(.card, .stage, .stageRandom)::before {
	/* If it exists */
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 0.5em;
	opacity: 0.25;
	z-index: 0;
}
.card.checked, .card:is(:hover, :focus-within):not([disabled]) {
	transform: rotate(-2deg);
}
.card:is(:hover, :focus-within):not(.checked, .disabled, [disabled])::before {
	content: '';
	background: grey;
}
.card.checked::before {
	content: '';
	background: var(--colour);
}

.card.disabled {
	opacity: 0.5;
}

/* Board */

#gameBoard {
	height: calc(3.5% * var(--board-height));
	aspect-ratio: var(--board-width)/var(--board-height);
	table-layout: fixed;
	border-spacing: 0;
	margin: auto;
	z-index: 1;
}

#gameBoard td.Empty { background: #000000C0; outline: 1px solid #80808080; outline-offset: -1px; }
#gameBoard td.Wall { background: url('assets/Wall.png') center/cover, grey; }
#gameBoard td.Ink1 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1); }
#gameBoard td.Ink2 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-2); }
#gameBoard td.Ink3 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-3); }
#gameBoard td.Ink4 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-4); }
#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }

#gameBoard.specialAttackVisual td:is(.Ink1, .Ink2, .Ink3, .Ink4) {
	opacity: 0.5;
}

#gameBoard.enableInkAnimation td.inkAnimation { animation: 0.333s inkPlaceAnimation; }
#gameBoard td.submitted { animation: 0.333s inkPlaceAnimation; }

@keyframes inkPlaceAnimation {
	from { box-shadow: 0 0 0px 0 #ffffffff; }
	to { box-shadow: 0 0 50px 10px #ffffff00; }
}

:is(#gameBoard td, .specialAnimation) > div {
	position: absolute;
	border-radius: var(--anim-size);
	filter: blur(calc(var(--anim-size) * 0.1));
	animation: 1.5s linear infinite specialSpaceAnimation;
	left: calc(var(--x) * 0.01 * var(--anim-size));
	top: calc(var(--y) * 0.01 * var(--anim-size));
	width: calc(var(--w) * 0.01 * var(--anim-size));
	height: calc(var(--w) * 0.01 * var(--anim-size));
	z-index: 1;
}
#gameBoard td > div { --anim-size: min(3.5vh, 3.5vw); }
#gameBoard td.SpecialActive1 > div { background: color-mix(in srgb, var(--special-colour-1), var(--special-accent-colour-1) 75%); }
#gameBoard td.SpecialActive2 > div { background: color-mix(in srgb, var(--special-colour-2), var(--special-accent-colour-2) 75%); }
#gameBoard td.SpecialActive3 > div { background: color-mix(in srgb, var(--special-colour-3), var(--special-accent-colour-3) 75%); }
#gameBoard td.SpecialActive4 > div { background: color-mix(in srgb, var(--special-colour-4), var(--special-accent-colour-4) 75%); }

:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 1) { --x: -12; --y: 29; --w: 36; animation-delay:  -900ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 2) { --x: -10; --y: 20; --w: 52; animation-delay:  -300ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 3) { --x:   1; --y:  4; --w: 48; animation-delay:  -600ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 4) { --x:  12; --y:  7; --w: 46; animation-delay:  -750ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 5) { --x:  20; --y: -1; --w: 52; animation-delay: -1350ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 6) { --x:  29; --y:  3; --w: 52; animation-delay:  -150ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 7) { --x:  44; --y: 11; --w: 42; animation-delay:  -450ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 8) { --x:  50; --y:  9; --w: 50; animation-delay: -1200ms; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type( 9) { --x:  66; --y: 20; --w: 36; animation-delay:     0  ; }
:is(#gameBoard td, .specialAnimation) > div:nth-of-type(10) { --x:  72; --y: 16; --w: 46; animation-delay: -1050ms; }

@keyframes specialSpaceAnimation {
	from { transform: translateY(0) scale(0); }
	 20% { transform: translateY(calc(var(--anim-size) * -0.15)) scale(1); }
	 60% { transform: translateY(calc(var(--anim-size) * -0.45)) scale(1); }
	  to { transform: translateY(calc(var(--anim-size) * -0.75)) scale(0); }
}

#gameBoard td {
	position: relative;
}

#gameBoard td.hover::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
	background: repeating-linear-gradient(135deg, var(--hover-colour) 0, var(--hover-colour) 0.6ex, transparent 0.6ex, transparent 1.2ex);
	background-attachment: fixed;
}
#gameBoard td.hoverspecial { overflow: hidden; }
#gameBoard td.hoverspecial::after {
	left: -50%;
	top: -50%;
	right: -50%;
	bottom: -50%;
	background: radial-gradient(circle, var(--hover-colour) 0, var(--hover-colour) 0.25ex, transparent 0.35ex, transparent 0.6ex);
	background-size: 1ex 1ex;
	transform: rotate(-20deg);
}

#gameBoard td.hover1:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-1); }
#gameBoard td.hover2:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-2); }
#gameBoard td.hover3:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-3); }
#gameBoard td.hover4:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-4); }
#gameBoard td.hoverspecial.hover1:not(.hoverillegal)::after { --hover-colour: var(--special-colour-1); }
#gameBoard td.hoverspecial.hover2:not(.hoverillegal)::after { --hover-colour: var(--special-colour-2); }
#gameBoard td.hoverspecial.hover3:not(.hoverillegal)::after { --hover-colour: var(--special-colour-3); }
#gameBoard td.hoverspecial.hover4:not(.hoverillegal)::after { --hover-colour: var(--special-colour-4); }
#gameBoard td.hoverillegal::after { --hover-colour: grey; }

/* Card list */

#cardList {
	grid-row: 2;
	grid-column: 1 / -1;
}
.cardListControl {
	display: grid;
	grid-template-rows: auto 1fr;
}
.cardListGrid:not([hidden]) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
	overflow-y: auto;
	justify-items: center;
	grid-auto-rows: max-content;
}

/* Game page */

#gamePage:not([hidden]) {
	--controls-width: 11em;
	display: grid;
	grid-template-columns: var(--controls-width) var(--controls-width) [score-column] 1fr [board-column] auto 1fr [play-column-1] 10em [play-column-2] 10em;
	grid-template-rows: [player-row-1] auto [player-row-3] auto [hand-row] 1fr [player-row-2] auto [player-row-0] auto;
	height: 100vh;
}
#gamePage.deckTest {
	--controls-width: 14em;
}
#gamePage:where([data-players="2"]):not([hidden]) {
	grid-template-columns: var(--controls-width) var(--controls-width) [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 20em;
}

.playerBar[data-index="0"] {
	--colour: var(--primary-colour-1);
	--special-colour: var(--special-colour-1);
	--special-accent-colour: var(--special-accent-colour-1);
	grid-row: player-row-0;
}
.playerBar[data-index="1"] {
	--colour: var(--primary-colour-2);
	--special-colour: var(--special-colour-2);
	--special-accent-colour: var(--special-accent-colour-2);
	grid-row: player-row-1;
}
.playerBar[data-index="2"] {
	--colour: var(--primary-colour-3);
	--special-colour: var(--special-colour-3);
	--special-accent-colour: var(--special-accent-colour-3);
	grid-row: player-row-2;
}
.playerBar[data-index="3"] {
	--colour: var(--primary-colour-4);
	--special-colour: var(--special-colour-4);
	--special-accent-colour: var(--special-accent-colour-4);
	grid-row: player-row-3;
}

#gamePage.boardFlipped .playerBar[data-index="0"] { grid-row: player-row-1; }
#gamePage.boardFlipped .playerBar[data-index="1"] { grid-row: player-row-0; }
#gamePage.boardFlipped .playerBar[data-index="2"] { grid-row: player-row-3; }
#gamePage.boardFlipped .playerBar[data-index="3"] { grid-row: player-row-2; }

.playerBar {
	grid-column: 1 / span 2;
	margin: 0 10px;
	border-left: 8px solid var(--colour);
	padding-left: 10px;
}
#gamePage:not(.boardFlipped):not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]),
#gamePage.boardFlipped:not([data-players="2"]) .playerBar:is([data-index="0"], [data-index="3"]) {
	text-align: right;
	border-left: none;
	border-right: 8px solid var(--colour);
	padding-right: 10px;
}

#gamePage:not(.boardFlipped):not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]) .wins,
#gamePage.boardFlipped:not([data-players="2"]) .playerBar:is([data-index="0"], [data-index="3"]) .wins {
	float: left;
}

#gamePage.deckTest #scoreSection { display: none; }
#scoreSection:not([hidden]) {
	grid-column: score-column;
	grid-row: 2 / -2;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 2em;
}

#gamePage.boardFlipped .pointsContainer[data-index="2"] { order: 0; }
#gamePage.boardFlipped .pointsContainer[data-index="0"] { order: 1; }
#gamePage.boardFlipped .pointsContainer[data-index="3"] { order: 2; }
#gamePage.boardFlipped .pointsContainer[data-index="1"] { order: 3; }

#gameControls {
	grid-column: 1 / span 2;
	grid-row: hand-row;
	align-self: center;
}
#gameControls:not([hidden]) {
	display: flex;
	flex-flow: column;
	justify-content: center;
}

#handContainer:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	background: #00000080;
	border-radius: 0 0.5em 0.5em 0;
	text-align: center;
}

#playRow:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.gameButton {
	border: none;
	margin: 0.25rem;
	padding: 0.25rem 0.5rem;
	font: inherit;
	text-align: center;
	background: var(--player-ui-base-colour);
	text-shadow: 0 0 4px black;
	border-radius: 0.5rem;
	line-height: 1.5em;
}
.gameButton:hover { background: var(--player-ui-highlight-colour); }
.gameButton:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
.gameButton:is(:active, .checked) { background: var(--player-ui-highlight2-colour); }
.gameButton.disabled:not(.checked) { background: grey; }

:is(#playRow, #testControlsHeader, #spectatorRow) > button.replayButton:not([hidden]) {
	font-size: 60%;
	flex-basis: 7em;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 0.5em;
}

#spectatorRow:not([hidden]) {
	display: flex;
	gap: 0.25em;
}
#spectatorRow > * {
	flex-grow: 1;
}

#nextGameButton:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25em;
}

#debugColour input {
	width: 6ch;
	text-align: right;
	font-family: monospace;
}
#debugColour input[type="text"] {
	width: 10ch;
}

#showDeckContainer {
	grid-column: 1 / span 3;
	grid-row: 2 / -2;
	background: #000000C0;
	z-index: 2;
}
#showDeck {
	display: flex;
	flex-flow: column;
	height: 100%;
	text-align: center;
}
#showDeckList, #testDeckList {
	display: grid;
	grid-template-columns: auto auto auto;
	list-style-type: none;
	font-size: smaller;
	overflow-y: auto;
	padding: 0;
	margin: 0;
	justify-items: center;
	align-items: center;
}
#showDeckList > li {
	margin: 0.25em;
	border-radius: 0.5em;
	text-align: center;
}
#showDeckList > li.inHand {
	outline: 0.25em solid var(--player-ui-highlight-colour);
}
#showDeckList > li.used {
	opacity: 0.35;
}
#showDeckCloseButton {
	width: 40%;
}

#testControls:not([hidden]) {
	grid-column: 1 / span 2;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: [header] auto [list] 1fr [buttons] auto;
}
#testControlsHeader, #testControlsFooter {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
#testDeckContainer {
	grid-row: list;
	overflow: hidden;
}
#testDeckList {
	height: 100%;
}
#testAllCardsContainer:not([hidden]) {
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row: 2;
}
#testAllCardsMobileButton {
	display: none;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0.25em solid var(--player-ui-base-colour);
}
#testAllCardsMobileButton:hover { border-color: var(--player-ui-highlight-colour); }
#testAllCardsMobileButton:focus-within { outline: 2px solid var(--player-special-accent-colour); }
#testAllCardsMobileButton:active { border-color: var(--player-special-accent-colour); }

#testDeckList, #testAllCardsList {
	flex-grow: 1;
}

#testAllCardsHeader {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	justify-content: end;
}

#testAllCardsList:not([hidden]) {
	font-size: 62%;
}
#testCardListBackdrop {
	background: #00000080;
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.playContainer { text-align: center; margin: 8em 0; }

.playContainer[data-index="2"] { grid-column: play-column-2; grid-row: 2 / -1; align-self: end; }
.playContainer[data-index="1"] { grid-column: play-column-2; grid-row: 1 / 4; align-self: start; }
.playContainer[data-index="0"] { grid-column: play-column-1; grid-row: 2 / -1; align-self: end; }
.playContainer[data-index="3"] { grid-column: play-column-1; grid-row: 1 / 4; align-self: start; }

#gamePage.boardFlipped .playContainer[data-index="3"] { grid-column: play-column-2; grid-row: 2 / -1; align-self: end; }
#gamePage.boardFlipped .playContainer[data-index="0"] { grid-column: play-column-2; grid-row: 1 / 4; align-self: start; }
#gamePage.boardFlipped .playContainer[data-index="1"] { grid-column: play-column-1; grid-row: 2 / -1; align-self: end; }
#gamePage.boardFlipped .playContainer[data-index="2"] { grid-column: play-column-1; grid-row: 1 / 4; align-self: start; }

.playContainer .card {
	margin: 0;
}

.hintError {
	animation: 1s infinite hintError;
}
.hintError.repeated {
	animation: 1s infinite hintError, 0.5s linear 1 hintShake;
}
@keyframes hintError {
	from { background: #ff0000ff; }
	50% { background: #ff000080; }
	to { background: #ff0000ff; }
}
@keyframes hintShake {
	0% { transform: translate(1px, 1px); }
	10% { transform: translate(-1px, -2px); }
	20% { transform: translate(-3px, 0px); }
	30% { transform: translate(3px, 2px); }
	40% { transform: translate(1px, -1px); }
	50% { transform: translate(-1px, 2px); }
	60% { transform: translate(-3px, 1px); }
	70% { transform: translate(3px, 1px); }
	80% { transform: translate(-1px, -1px); }
	90% { transform: translate(1px, 2px); }
	100% { transform: translate(0px, 0px); }
}

.hintSpecial:before {
	content: '';
	position: absolute;
	left: -24em;
	top: -31em;
	right: -24em;
	bottom: -31em;
	transform: scaleY(0.05) rotateZ(0deg);
	z-index: -1;
	background: radial-gradient(grey, transparent 50%), conic-gradient(hsl(0, 100%, 75%), hsl(45, 100%, 75%), hsl(90, 100%, 75%), hsl(135, 100%, 75%), hsl(180, 100%, 75%), hsl(225, 100%, 75%), hsl(270, 100%, 75%), hsl(315, 100%, 75%), hsl(360, 100%, 75%));
	animation: 3s linear infinite hintSpecial;
}

@keyframes hintSpecial {
	to { transform: scaleY(0.05) rotateZ(360deg); }
}

#cardHint:not([hidden]) {
	position: absolute;
	left: -1em;
	width: 16em;
	margin: 0 0 30em 0em;
	padding: 0 1em 0 3em;
	font-size: larger;
	background: #80808080;
	border-radius: 0.5em;
	z-index: 0;
	overflow: hidden;
}
#playHint:not([hidden]) {
	position: relative;
	grid-column: -3 / -1; grid-row: -2 / -1; align-self: end;
	justify-self: end;
	width: 16em;
	margin: 0 -1em 1.5em 0;
	padding: 0 3em 0 1.5em;
	font-size: larger;
	background: #00000080;
	border-radius: 0.5em;
	z-index: 1;
	overflow: hidden;
}

#testPlacementList {
	display: none;
}
#gamePage.deckTest #testPlacementList {
	grid-column: -3 / -1;
	grid-row: 1 / -1;
	display: flex;
	flex-flow: column;
	margin: 1em;
	gap: 1em;
}
#testPlacementList div {
	background: #222;
	padding: 0.5em;
}
#testPlacementList div.deckCard {
	background: #246;
}

#gameButtonsContainer {
	grid-column: score-column;
	grid-row: 1 / -1;
	align-self: end;
	flex-flow: column;
	align-items: center;
	z-index: 1;
}
#gameButtonsContainer:not([hidden]) {
	display: flex;
}

#gameButtonsContainer button {
	background: none;
	border: none;
	color: var(--player-ui-base-colour);
	opacity: 0.5;
	font-size: 400%;
	width: 1.5em;
	height: 1.5em;
}
#gameButtonsContainer button:is(:hover, :focus) {
	opacity: 1;
}
#gameButtonsContainer button:active {
	opacity: 1;
	color: var(--player-ui-highlight-colour);
}
#gamePage.deckTest #gameDeckButton {
	display: none;
}
#gamePage.replay :is(#rotateLeftButton, #rotateRightButton) {
	display: none;
}

#boardSection {
	grid-column: board-column;
	grid-row: 1 / -1;
	align-self: center;
	position: relative;
	height: min(100vh, calc(100vw - 30em));
	aspect-ratio: 19 / 26;
	display: flex;
}

/* Player bars */

.name {
	font-size: 150%;
	font-weight: 599;
	margin: 0.5em 0;
}

.specialPoints div {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	text-align: center;
}

.playerBar .specialPoint {
	position: relative;
	color: transparent;
  background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
}
.playerBar .specialPoint.specialAnimation {
	background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
}
.playerBar .specialPoint.specialAnimation > div {
	background: color-mix(in srgb, var(--special-colour), var(--special-accent-colour) 75%);
	--anim-size: 1.25em;
}

.specialPoints div {
	margin-right: 0.25em;
}

.specialPoint:nth-of-type(5n) {
	margin-right: 0.5em;
}

.playerBar .specialPoint:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 100%;
	outline: 2px solid var(--special-accent-colour);
	animation: 333ms linear forwards specialPointRing;
}

@keyframes specialPointRing {
	from { outline-offset: 1em; }
	66% { outline-offset: -0.5em; background: transparent; }
	67% { left: 0; top: 0; right: 0; bottom: 0; background: var(--special-accent-colour); }
	to { left: 50%; top: 50%; right: 50%; bottom: 50%; background: var(--special-accent-colour); visibility: hidden; }
}

#gamePage .wins {
	float: right;
	margin-top: 1.25em;
}

.result {
	font-family: 'Splatoon 1';
	color: var(--colour);
	text-transform: uppercase;
}
.result.win {
	font-size: larger;
}

.playerStats {
	margin: 0 1em;
	background: rgba(64, 64, 64);
	color: white;
	display: flex;
	justify-content: space-around;
	text-align: center;
}
#gamePage:not(.gameEnded) .playerStats {
	display: none;
}

.statValue {
	font-family: 'Splatoon 1';
	font-size: 150%;
	line-height: 1.5em;
}

#midGameContainer {
	height: 28em;
}

/* Score bar */

#timeSection {
	grid-column: score-column;
	grid-row: 1 / 4;
	width: 5em;
	height: 5em;
	font-family: 'Splatoon 1', sans-serif;
	justify-self: center;
	margin-top: 2em;
	z-index: 1;
}

#turnNumberContainer:not([hidden]) {
	background: radial-gradient(circle, rgb(128, 128, 128) 0%, rgb(128, 128, 128) 70%, rgba(0, 0, 0, 0) 70%);
	height: 5em;
	width: 5em;
	display: flex;
	justify-content: center;
	align-items: center;
}
#turnNumberContainer p {
	text-align: center;
	margin: 0;
	font-size: smaller;
	position: absolute;
	margin-bottom: 4em;
}

#turnNumberLabel {
	text-align: center;
	font-size: 200%;
	margin-top: 0.333em;
  text-shadow: #00000040 0.2rem 0.2rem 0;
}
#turnNumberLabel.nowOrNever {
	color: red;
}

#timeContainer:not([hidden]) {
	margin-top: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 125%;
	font-family: 'Splatoon 2', sans-serif;
	background:
		radial-gradient(circle 1em at 25% 50%, grey 100%, transparent),
		radial-gradient(circle 1em at 75% 50%, grey 100%, transparent),
		linear-gradient(90deg, transparent 25%, grey 25%, grey 75%, transparent 75%)
}
#timeContainerContent {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.25em;
}
#timeContainerContent.warning {
	color: yellow;
	animation: 0.2s timeWarning;
}
#timeContainerContent.faded {
	opacity: 0.5;
}
#timeContainer svg {
	height: 1.5ch;
	fill: currentColor;
	vertical-align: middle;
}
#timeContainer p {
	margin: 0;
}
#timeLabel {
	width: 2ch;
	text-align: center;
}

@keyframes timeWarning {
	from { transform: scale(1); }
	 50% { transform: scale(1.5); }
	  to { transform: scale(1); }
}

.pointsContainer {
	width: 5em;
	height: 5em;
}

.pointsContainer:not([hidden]) {
	position: relative;
	display: flex;
	font-family: 'Splatoon 1', sans-serif;
	justify-content: center;
	align-items: center;
}

.points {
	font-size: 300%;
	font-style: italic;
	text-align: justify;
	padding-right: 0.15em;
	text-shadow: #00000040 0.05em 0.05em 0;
	z-index: 1;
}

.pointsToContainer {
	position: absolute;
	bottom: -1.2rem;
	right: 0;
	font-size: 150%;
}
.pointsTo {
	font-style: italic;
}

.pointsContainer[data-index="0"] { --colour: var(--primary-colour-1); }
.pointsContainer[data-index="1"] { --colour: var(--primary-colour-2); }
.pointsContainer[data-index="2"] { --colour: var(--primary-colour-3); }
.pointsContainer[data-index="3"] { --colour: var(--primary-colour-4); }

.pointsContainer::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
	background: radial-gradient(circle, color-mix(in srgb, var(--colour) 80%, black) 70%, rgba(0, 0, 0, 0) 70%);
}

.pointsContainer {
	color: var(--colour);
}

.pointsDelta {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	font-size: 150%;
	width: 2em;
	height: 2em;
	background: radial-gradient(circle, color-mix(in srgb, var(--colour) 90%, black) 70%, rgba(0, 0, 0, 0) 70%);
	z-index: 1;
	text-align: center;
	color: white;
	text-shadow: #00000080 0.1rem 0.1rem 0;
}
.pointsDelta.minus {
	--colour: darkgrey;
}

/* Board section */

#redrawModal {
	position: absolute;
	left: 0;
	top: 0;
	right: -50vw;
	bottom: 0;
  padding-right: 50vw;  /* Centre the dialog over the board but extend the backdrop all the way to the right of the page. */
	background: #000000C0;
	z-index: 1;
}

#redrawModal:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
}

#redrawBox {
	border: 1px solid grey;
	width: 15em;
	height: 10em;
	background: black;
	text-align: center;
}

#playsSection {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}

/* Error UI */

#errorDialog[open] {
	width: 20em;
	height: 12em;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}


.specialAttack, .specialAttack::after {
	box-shadow: 0px 0 8px 4px var(--player-colour);
}

.specialAttack::after {
	content: 'Special Attack!';
	position: absolute;
	left: -2em;
	top: 4em;
	right: -2em;
	height: 2em;
	background: var(--player-colour);
	color: black;
	text-align: center;
	font-size: larger;
	border-radius: 0.5em;
	animation: 3s forwards specialAttackAnimation;
}

@keyframes specialAttackAnimation {
	from {
		transform: scale(0);
		opacity: 0;
	}
	15% {
		transform: scale(0.9);
		opacity: 1;
	}
	85% {
		transform: scale(1.1);
		opacity: 1;
	}
	to {
		transform: scale(1.1);
		opacity: 0;
	}
}

.playContainer[data-index="0"] { --player-colour: var(--primary-colour-1); }
.playContainer[data-index="1"] { --player-colour: var(--primary-colour-2); }
.playContainer[data-index="2"] { --player-colour: var(--primary-colour-3); }
.playContainer[data-index="3"] { --player-colour: var(--primary-colour-4); }

.passLabel {
	font-family: 'Splatoon 2', sans-serif;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: #00000080;
	justify-content: center;
	align-items: center;
	font-size: larger;
}
.passLabel.timeout {
	color: red;
}

/* Deck editor */

:is(#deckListPage, #deckEditPage):not([hidden]) {
	height: 100vh;
	display: flex;
	justify-content: center;
}

.deckList {
	display: flex;
	flex-flow: column;
}

.deckList button, #addDeckControls button {
	display: flex;
	justify-content: center;
	align-items: center;
	font: inherit;
	color: inherit;
	border: inherit;
	text-shadow: 0 0 4px black;
}
button.dragging {
	opacity: 0.5;
}
.deckList > button, #addDeckControls {
	width: 20rem;
	height: 3rem;
	margin: 0.5em;
}
.deckList > button { background: var(--primary-colour-2); position: relative;}
.deckList > button:hover { background: var(--special-colour-2); }
.deckList > button:focus-within { outline: 2px solid var(--special-accent-colour-2); }
.deckList > button:is(:active, .checked) { background: var(--special-accent-colour-2); }
.deckList > button.disabled { background: grey; }
#addDeckControls {
	display: flex;
	align-items: stretch;
	gap: 1em;
}
#addDeckControls > button {
	flex-basis: 8em;
	flex-grow: 1;
	background: black;
	border: 0.25em solid var(--primary-colour-2);
}
#addDeckControls > button:hover { border-color: var(--special-colour-2); }
#addDeckControls > button:focus-within { outline: 2px solid var(--special-accent-colour-2); }
#addDeckControls > button:is(:active, .checked) { border-color: var(--special-accent-colour-2); }

.deckList .handle {
	position: absolute;
	background: url('assets/grip-horizontal.svg') 0.5em center/1em no-repeat;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.touchmode .handle {
	width: 2em;
}

.card.emptySlot {
	--colour: dimgrey;
	background: url('assets/plus-circle.svg') center/2em no-repeat, black;
}

#deckCardListView, #deckCardListEdit {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-items: center;
	grid-column: 2;
	grid-row: 2 / -1;
	overflow-y: scroll;
	width: 33em;
}

#deckEditorDeckViewSection:not([hidden]), #deckEditorDeckEditPage {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto 1fr;
	height: 100vh;
}

#deckViewBackButton, #deckCardListBackButton {
	display: none;
}

#deckName, #deckName2 {
	grid-column: 1 / -1;
	grid-row: 1;
}

#deckEditToolbar, #deckListToolbar {
	grid-column: 1;
	grid-row: 3;
	display: flex;
	flex-flow: column;
}
:is(#deckListToolbar, #deckEditToolbar) button {
	margin: 0.25em;
	width: 5em;
	height: 4em;
}

.deckSizeContainer {
	grid-column: 1;
	grid-row: 2;
	background: dimgrey;
	text-align: center;
	line-height: 1.5em;
	margin: 0.25em;
	min-width: 4em;
}

#deckEditorCardListSection {
	flex-grow: 1;
	background: #00000080;
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr;
	gap: 1em;
}

#deckEditorCardListSection > label {
	grid-column: 2;
	grid-row: 1;
}

#cardListHeader {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin: 0 0.5em;
}
#cardListHeader h3 {
	flex-grow: 1;
}

#deckEditorCardListBackdrop {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: black;
	opacity: 0.5;
}

#testStageSelectionList {
	max-width: 52em;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#deckImportForm, #deckImportTextSection:not([hidden]) {
	display: flex;
	flex-flow: column;
}

#deckImportDialog ol {
	text-align: start;
}

/* Help */

#helpControls {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
#helpControls table { border-spacing: 1ch 0; }
#helpControls th { text-align: right; }
#helpControls td { text-align: left; }

/* Small display layout */
@media (max-width: 89rem) or (max-height: 42rem) {
	#gamePage, #deckCardListView, #deckCardListEdit {
		font-size: small;
	}
	#cardList {
		font-size: 75%;
		grid-row: 2;
		grid-column: 1 / -1;
	}

	#gamePage:not([hidden]) {
		grid-template-columns: var(--controls-width) var(--controls-width) [score-column] 1fr [board-column] auto 1fr [play-column-1 play-column-2] 10em;
	}

	.playContainer { position: relative; }
	#gamePage:not([data-players="2"]) .playContainer[data-index="0"] {
		left: -3em;
	}
	#gamePage:not([data-players="2"]) .playContainer[data-index="2"] {
		top: -3em;
	}
	#gamePage:not([data-players="2"]) .playContainer[data-index="3"] {
		left: -3em;
		top: 3em;
	}
	.playerBar[data-index="0"] { grid-row: player-row-0; }
	.playerBar[data-index="1"] { grid-row: player-row-1; }
	.playerBar[data-index="2"] { grid-row: player-row-0; }
	.playerBar[data-index="3"] { grid-row: player-row-1; }

  #gamePage.boardFlipped .playerBar[data-index="0"] { grid-row: player-row-1; }
	#gamePage.boardFlipped .playerBar[data-index="1"] { grid-row: player-row-0; }
	#gamePage.boardFlipped .playerBar[data-index="2"] { grid-row: player-row-1; }
	#gamePage.boardFlipped .playerBar[data-index="3"] { grid-row: player-row-0; }

	#gamePage:not(.boardFlipped):not([data-players="2"]) .playerBar:is([data-index="1"], [data-index="2"]) .wins,
  #gamePage.boardFlipped:not([data-players="2"]) .playerBar:is([data-index="0"], [data-index="3"]) .wins {
    float: initial;
		justify-content: end;
  }
}

@media (max-width: 40rem) {
	.card {
		margin: 0;
	}
	.cardListGrid:not([hidden]) {
		justify-items: stretch;
	}
.cardListGrid .card {
	width: auto;
	justify-self: stretch;
	}

	/* Lobby - Mobile layout */

	#lobbyPage:not([hidden]) {
		grid-template-rows: auto 1fr;
		grid-template-columns: initial;
		height: 100vh;
	}

	#lobbyStageSection, #lobbyDeckSection {
		height: initial;
	}

	#stageList, #testStageSelectionList {
		font-size: 75%;
	}

	.stage, .stageRandom {
		flex-basis: 10em;
		flex-grow: 1;
	}

	/* Game - Mobile layout */

	#gamePage:not([hidden]) {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto 1fr auto auto auto;
		height: 100vh;
	}

	.playerBar[data-index="0"] { grid-column: 1 / span 4; grid-row: 3; }
	.playerBar[data-index="1"] { grid-column: 1 / span 4; grid-row: 1; }
	.playerBar[data-index="2"] { grid-column: 1 / span 4; grid-row: 3; }
	.playerBar[data-index="3"] { grid-column: 1 / span 4; grid-row: 1; }

	.wins { margin-right: 8em; }

	#gamePage.boardFlipped .playerBar[data-index="3"] { grid-column: 1 / span 4; grid-row: 3; }
	#gamePage.boardFlipped .playerBar[data-index="2"] { grid-column: 1 / span 4; grid-row: 1; }
	#gamePage.boardFlipped .playerBar[data-index="1"] { grid-column: 1 / span 4; grid-row: 3; }
	#gamePage.boardFlipped .playerBar[data-index="0"] { grid-column: 1 / span 4; grid-row: 1; }

	#boardSection {
		grid-column: 2 / -1;
		grid-row: 2;
		height: initial;
		align-self: stretch;
	}

	#gameBoard {
		height: min(calc(min(3.5%, calc(75vw / var(--board-width))) * var(--board-height)));
		margin: auto;
	}

	#gameControls:not([hidden]) {
		grid-template-rows: [button-row] auto [hand-row] auto;
	}

	#gameControls {
		grid-column: 1 / -1;
		grid-row: 5;
		width: initial;
		min-height: 12em;
	}

	#cardHint:not([hidden]) {
		left: auto;
		align-self: center;
		margin: 0 0 16em 0;
		padding: 0;
		text-align: center;
	}

	#playHint:not([hidden]) {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-bottom: 0;
	}

	#scoreSection:not([hidden]) {
		grid-column: 1;
		grid-row: 2;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
	}

	#timeSection {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.pointsContainer {
		margin: 0.5em 0;
	}

	#handContainer:not([hidden]) {
		font-size: x-small;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		width: 100vw;
		overflow: scroll hidden;
	}

	#showDeckContainer {
		grid-column: 1 / -1;
		grid-row: 2 / -1;
	}
	#showDeckList .card {
		width: 30vw;
	}

	#gamePage:is(.boardFlipped, *) .playContainer:is([data-index="0"], [data-index="1"], [data-index="2"], [data-index="3"]) {
		font-size: x-small;
		grid-column: 1 / -1;
		left: auto;
		top: auto;
		display: flex;
	}
	.playContainer[data-index="0"] { grid-row: 2 / span 2; justify-content: start; margin: 0 0 2em 1em; }
	.playContainer[data-index="1"] { grid-row: 1 / span 2; justify-content: end; margin: 4em 1em 0 0; }
	.playContainer[data-index="2"] { grid-row: 2 / span 2; justify-content: end; margin: 0 1em 2em 0; }
	.playContainer[data-index="3"] { grid-row: 1 / span 2; justify-content: start; margin: 4em 0 0 1em; }
	#gamePage[data-players="2"] .playContainer[data-index="0"] { justify-content: end; margin: 0 1em 0 0; }
	#gamePage[data-players="2"] .playContainer[data-index="1"] { justify-content: end; margin: 0 1em 0 0; }

	#gamePage.boardFlipped .playContainer[data-index="1"] { grid-row: 2 / span 2; justify-content: start; margin: 0 0 2em 1em; }
	#gamePage.boardFlipped .playContainer[data-index="0"] { grid-row: 1 / span 2; justify-content: end; margin: 2em 1em 0 0; }
	#gamePage.boardFlipped .playContainer[data-index="3"] { grid-row: 2 / span 2; justify-content: end; margin: 0 1em 2em 0; }
	#gamePage.boardFlipped .playContainer[data-index="2"] { grid-row: 1 / span 2; justify-content: start; margin: 2em 0 0 1em; }
	#gamePage.boardFlipped[data-players="2"] .playContainer[data-index="0"] { justify-content: end; margin: 0 1em 0 0; }
	#gamePage.boardFlipped[data-players="2"] .playContainer[data-index="1"] { justify-content: end; margin: 0 1em 0 0; }

	#gameButtonsContainer {
		grid-column: 1;
		grid-row: 2;
	}

	#gameButtonsContainer button {
		font-size: 250%;
	}

	#gamePage > #testAllCardsContainer:not([hidden]) {
		grid-row: 1 / -1;
		grid-column: 1 / -1;
		background: black;
		z-index: 2;
		margin-top: 5em;
	}

	/* Deck editor - Mobile layout */

	:is(#deckListPage, #deckEditPage):not([hidden]) {
		display: block;
	}

	:is(#deckListPage, #deckEditPage) section {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

  #deckListPage:not(.showingDeck) #deckEditorDeckViewSection {
		display: none;
	}
  #deckListPage.showingDeck #deckEditorDeckListSection {
		display: none;
	}

	#deckEditorDeckViewSection:not([hidden]) {
		z-index: 10;
		grid-template-columns: auto 1fr auto;
	}

	#deckViewBackButton {
		display: block;
		grid-column: 1;
		grid-row: 1;
	}

	#deckCardListBackButton {
		display: block;
		grid-column: 1;
		grid-row: 1;
	}

	#deckName {
		grid-column: 2 / -1;
	}

	#deckListToolbar, #deckEditToolbar {
		grid-row: 2;
		grid-column: 1 / -2;
		flex-flow: row;
	}

	:is(#deckListToolbar, #deckEditToolbar) button {
		width: auto;
		flex-grow: 1;
		flex-basis: 4em;
	}

	.deckSizeContainer {
		grid-column: -2;
		grid-row: 2;
		justify-self: end;
	}

	#deckCardListView, #deckCardListEdit {
		grid-column: 1 / -1;
		grid-row: 3;
		overflow-y: scroll;
		font-size: 80%;
		grid-template-columns: 1fr 1fr 1fr;
		width: 100%;
	}

	#deckEditorCardListSection:not(.selecting) {
		display: none;
	}

	#deckEditorCardListSection.selecting + #deckEditorCardListBackdrop {
		display: block;
	}

	#deckEditPage #deckEditorCardListSection {
		z-index: 1;
		top: 4em;
		height: calc(100vh - 4em);
	}

	#cardList {
		font-size: 55%;
	}

	#cardList .card {
		height: 13em;
	}

	#testControls:not([hidden]) {
		grid-column: 1 / -1;
		grid-row: -2;
	}
	#testControlsHeader {
		display: none;
	}
	#testAllCardsMobileButton {
		display: inline-block;
		width: 7em;
	}
	#testDeckContainer:not([hidden]) {
		display: grid;
		grid-template-columns: auto auto;
		overflow-x: scroll;
	}
	#testDeckList {
		width: max-content;
		display: inline-block;
		padding: 0;
		margin: 0;
		justify-items: center;
		align-items: center;
		overflow: initial;
	}

	#gamePage.deckTest #testPlacementList {
		grid-column: 1 / -1;
		grid-row: 1;
		height: 7em;
		flex-flow: row wrap;
		align-content: flex-start;
		margin: 0.5em;
		gap: 0.5em;
	}
	#testPlacementList div {
		padding: 0 0.5em;
	}
}

/* Loading spinner */

.loadingContainer:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}
.loadingSpinner {
	background: url(assets/external/IconUp_00.webp) center/cover;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	animation: 2s infinite linear loadingSpinner;
}
@keyframes loadingSpinner {
	to { transform: rotate(360deg); }
}