TableturfBattleApp/TableturfBattleClient/tableturf.css

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

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

body, dialog {
	color: white;
	background: black;
	color-scheme: dark;
}
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;
}

#gamePage {
	--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-ui-base-colour-is-special-colour="true"] {
	--player-ui-base-colour: var(--player-special-colour);
	--player-ui-highlight-colour: var(--player-primary-colour);
}
#gamePage[data-my-player-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"] {
	--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"] {
	--player-primary-colour: var(--primary-colour-4);
	--player-special-colour: var(--special-colour-4);
	--player-special-accent-colour: var(--special-accent-colour-4);
}

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;
}

#logo {
	height: 8em;
}

footer {
	font-family: sans-serif;
}

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

/* 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; }
}

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 {
	width: 12em;
	height: 18em;
	border: 1px solid grey;
	position: relative;
	text-align: center;
	display: flex;
	flex-flow: column;
	margin: 5px;
}

:is(.stage, .stageRandom) input {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.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 { border: 1px solid grey; }
.stageGrid td.Start1 { background: var(--special-colour-1); }
.stageGrid td.Start2 { background: var(--special-colour-2); }
.stageGrid td.Start3 { background: var(--special-colour-3); }
.stageGrid td.Start4 { background: var(--special-colour-4); }

:is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled) {
	background: #80808040;
}
:is(.stage, .stageRandom).checked {
	background: #FFFFFF40;
}

/* Cards */

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

.cardBack {
	--colour: grey;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card {
	position: relative;
	font-family: 'Splatoon 1', 'Arial Black', sans-serif;
	font-weight: 599;
	margin: 0.5em;
}
.card:not([hidden]) {
	display: inline-block;
}

.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;
	padding: 0 5px;
	justify-content: center;
}

.card input {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
}

.cardNumber {
	display: none;
}

.cardName {
	text-align: center;
	line-height: 1.25em;
	flex-grow: 1;
}
.card[data-card-number="166"] .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 {
	margin: 0 auto;
	border-spacing: 0;
}
.cardGrid td {
	width: 0.5em;
	height: 0.5em;
	border: 1px solid grey;
}
.cardGrid td.ink { background: var(--player-primary-colour); border: 1px solid var(--player-primary-colour);}
.cardGrid td.special { background: var(--player-special-colour); border: 1px solid var(--player-special-colour);}

.cardFooter {
	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 {
	display: inline-block;
	color: transparent;
	background: var(--player-special-colour);
	width: 1ch;
	height: 1ch;
	margin-right: 0.3em;
}

.card::before {
	/* If it exists */
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	opacity: 0.25;
}
.card:is(:hover, :focus-within):not(.checked, .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;
}

#gameBoard td { border: 1px solid grey; }
#gameBoard td.OutOfBounds { border-color: transparent; }
#gameBoard td.Wall { background: grey; }
#gameBoard td.Ink1 { background: var(--primary-colour-1); }
#gameBoard td.Ink2 { background: var(--primary-colour-2); }
#gameBoard td.Ink3 { background: var(--primary-colour-3); }
#gameBoard td.Ink4 { background: var(--primary-colour-4); }
#gameBoard td.SpecialInactive1 { background: var(--special-colour-1); }
#gameBoard td.SpecialInactive2 { background: var(--special-colour-2); }
#gameBoard td.SpecialInactive3 { background: var(--special-colour-3); }
#gameBoard td.SpecialInactive4 { background: var(--special-colour-4); }
#gameBoard td.SpecialActive1 { background: radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
#gameBoard td.SpecialActive2 { background: radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
#gameBoard td.SpecialActive3 { background: radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
#gameBoard td.SpecialActive4 { background: radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }

#gameBoard td.hover {
	position: relative;
}

#gameBoard td.hover::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
}

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

#gameBoard td.hoverillegal::after { background: 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);
	grid-row: player-row-0;
}
.playerBar[data-index="1"] {
	--colour: var(--primary-colour-2);
	--special-colour: var(--special-colour-2);
	grid-row: player-row-1;
}
.playerBar[data-index="2"] {
	--colour: var(--primary-colour-3);
	--special-colour: var(--special-colour-3);
	grid-row: player-row-2;
}
.playerBar[data-index="3"] {
	--colour: var(--primary-colour-4);
	--special-colour: var(--special-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.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; }

#playControls, #resultContainer, #replayControls {
	grid-column: 1 / span 2;
	grid-row: hand-row;
	align-self: center;
}
#playControls:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: [hand-row] auto [button-row] auto;
}

#handContainer {
	grid-column: 1 / -1;
	grid-row: hand-row;
	text-align: center;
}

:is(#playControls, #testControlsHeader) > label {
	grid-row: button-row;
	margin: 0.5em;
	padding: 0 0.5em;
	text-align: center;
	background: var(--player-ui-base-colour);
	text-shadow: 0 0 4px black;
	border-radius: 0.5em;
}
:is(#playControls, #testControlsHeader) > label input {
	position: absolute;
	left: -333px;
}
:is(#playControls, #testControlsHeader) > label:hover { background: var(--player-ui-highlight-colour); }
:is(#playControls, #testControlsHeader) > label:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
:is(#playControls, #testControlsHeader) > label:is(:active, .checked) { background: var(--player-ui-highlight2-colour); }
:is(#playControls, #testControlsHeader) > label.disabled { background: grey; }

#showDeckContainer {
	grid-column: 1 / span 3;
	grid-row: 2 / -2;
	background: black;
	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, #testControlsFooter button {
	border: none;
	font-family: inherit;
	color: inherit;
	margin: 0.5em;
	padding: 0 0.5em;
	text-align: center;
	background: var(--player-ui-base-colour);
	text-shadow: 0 0 4px black;
	border-radius: 0.5em;
	font-size: inherit;
}
#showDeckCloseButton {
  width: 40%;
	grid-row: button-row;
}
:is(#showDeckCloseButton, #testControlsFooter button):hover { background: var(--player-ui-highlight-colour); }
:is(#showDeckCloseButton, #testControlsFooter button):focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
:is(#showDeckCloseButton, #testControlsFooter button):active { background: var(--player-ui-highlight2-colour); }

#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: 70%;
}
#testCardListBackdrop {
	background: #00000080;
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.playContainer { text-align: center; }

.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;
}

#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;
}

#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: 1em;
	height: 1em;
	border: 1px solid;
	text-align: center;
}

.playerBar .specialPoint {
	color: transparent;
	background: var(--special-colour);
}

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

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

.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 */

#turnNumberContainer {
	grid-column: score-column;
	grid-row: 1 / 4;
	width: 5em;
	height: 5em;
	background: radial-gradient(circle, rgb(128, 128, 128) 0%, rgb(128, 128, 128) 70%, rgba(0, 0, 0, 0) 70%);
	font-family: 'Splatoon 1', sans-serif;
	justify-self: center;
	margin-top: 2em;
}

#turnNumberContainer p {
	text-align: center;
	margin: 0;
	font-size: smaller;
}

#turnNumberLabel {
	text-align: center;
	font-size: 150%;
}
#turnNumberLabel.nowOrNever {
	color: red;
}

.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: 200%;
}

.pointsToContainer {
	position: absolute;
	bottom: 0;
	right: 0;
}

.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;
	z-index: -1;
	background: radial-gradient(circle, var(--colour) 0%, var(--colour) 70%, rgba(0, 0, 0, 0) 70%);
}

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

.pointsDelta {
	position: absolute;
	bottom: 0;
	right: 1em;
}

/* Board section */

#redrawModal {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #000000C0;
}

#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;
}

/* Deck editor */

:is(#deckListPage, #deckEditPage):not([hidden]) {
	height: 100vh;
	display: grid;
	grid-template-columns: auto 1fr;
}

.deckList > label, #addDeckControls > button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: inherit;
	color: inherit;
	font-size: inherit;
	border: inherit;
	text-shadow: 0 0 4px black;
}
.deckList > * {
	width: 20rem;
	height: 3rem;
	margin: 0.5em;
}
.deckList > label { background: var(--primary-colour-2); }
.deckList > label:hover { background: var(--special-colour-2); }
.deckList > label:focus-within { outline: 2px solid var(--special-accent-colour-2); }
.deckList > label:is(:active, .checked) { background: var(--special-accent-colour-2); }
.deckList > label.disabled { background: grey; }
#addDeckControls {
	display: flex;
	align-items: stretch;
	gap: 1em;
}
#addDeckControls > button {
	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 {
	display: flex;
	flex-flow: column;
}

.deckList input {
	position: absolute;
	left: -333px;
}

.card.emptySlot {
	--colour: dimgrey;
}

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

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

#deckViewBackButton, #deckCardListBackButton {
	display: none;
}

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

:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
	grid-row: 2;
	grid-column: 1;
}

.deckSizeContainer {
	grid-column: 1;
	grid-row: 3;
}

#deckEditorCardListSection {
	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;
}

/* 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;
	}
}

@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; }

	#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;
	}

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

	#playControls, #resultContainer, #replayControls {
		grid-column: 1 / -1;
		grid-row: 5;
		width: initial;
	}

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

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

	.pointsContainer {
		margin: 0.5em 0;
	}

	#handContainer {
		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;
		z-index: -1;
		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;
		background: black;
		left: 0;
		right: 0;
		top: 0;
	}

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

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

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

	#deckName {
		grid-column: 2;
	}

	:is(#deckEditorDeckViewSection, #deckEditordeckEditPage) > h3 + div {
		grid-row: 1;
		grid-column: -2;
	}

	.deckSizeContainer {
		grid-column: 1 / -1;
		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;
	}

	#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 - based on loading.io */

.loadingContainer:not([hidden]) {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}
.lds-ripple {
	--border-width: 0.15em;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
}
.lds-ripple div {
	position: absolute;
	border: var(--border-width) solid #fff;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}
@keyframes lds-ripple {
	0% {
		top: calc(50% - var(--border-width));
		left: calc(50% - var(--border-width));
		right: calc(50% - var(--border-width));
		bottom: calc(50% - var(--border-width));
		opacity: 0;
	}
	4.9% {
		top: calc(50% - var(--border-width));
		left: calc(50% - var(--border-width));
		right: calc(50% - var(--border-width));
		bottom: calc(50% - var(--border-width));
		opacity: 0;
	}
	5% {
		top: calc(50% - var(--border-width));
		left: calc(50% - var(--border-width));
		right: calc(50% - var(--border-width));
		bottom: calc(50% - var(--border-width));
		opacity: 1;
	}
	100% {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}
}