:root {
	--ctp-mocha-rosewater: #f5e0dc;
	--ctp-mocha-rosewater-rgb: 245 224 220;
	--ctp-mocha-rosewater-hsl: 9.600 55.556% 91.176%;
	--ctp-mocha-flamingo: #f2cdcd;
	--ctp-mocha-flamingo-rgb: 242 205 205;
	--ctp-mocha-flamingo-hsl: 0.000 58.730% 87.647%;
	--ctp-mocha-pink: #f5c2e7;
	--ctp-mocha-pink-rgb: 245 194 231;
	--ctp-mocha-pink-hsl: 316.471 71.831% 86.078%;
	--ctp-mocha-mauve: #cba6f7;
	--ctp-mocha-mauve-rgb: 203 166 247;
	--ctp-mocha-mauve-hsl: 267.407 83.505% 80.980%;
	--ctp-mocha-red: #f38ba8;
	--ctp-mocha-red-rgb: 243 139 168;
	--ctp-mocha-red-hsl: 343.269 81.250% 74.902%;
	--ctp-mocha-maroon: #eba0ac;
	--ctp-mocha-maroon-rgb: 235 160 172;
	--ctp-mocha-maroon-hsl: 350.400 65.217% 77.451%;
	--ctp-mocha-peach: #fab387;
	--ctp-mocha-peach-rgb: 250 179 135;
	--ctp-mocha-peach-hsl: 22.957 92.000% 75.490%;
	--ctp-mocha-yellow: #f9e2af;
	--ctp-mocha-yellow-rgb: 249 226 175;
	--ctp-mocha-yellow-hsl: 41.351 86.047% 83.137%;
	--ctp-mocha-green: #a6e3a1;
	--ctp-mocha-green-rgb: 166 227 161;
	--ctp-mocha-green-hsl: 115.455 54.098% 76.078%;
	--ctp-mocha-teal: #94e2d5;
	--ctp-mocha-teal-rgb: 148 226 213;
	--ctp-mocha-teal-hsl: 170.000 57.353% 73.333%;
	--ctp-mocha-sky: #89dceb;
	--ctp-mocha-sky-rgb: 137 220 235;
	--ctp-mocha-sky-hsl: 189.184 71.014% 72.941%;
	--ctp-mocha-sapphire: #74c7ec;
	--ctp-mocha-sapphire-rgb: 116 199 236;
	--ctp-mocha-sapphire-hsl: 198.500 75.949% 69.020%;
	--ctp-mocha-blue: #89b4fa;
	--ctp-mocha-blue-rgb: 137 180 250;
	--ctp-mocha-blue-hsl: 217.168 91.870% 75.882%;
	--ctp-mocha-lavender: #b4befe;
	--ctp-mocha-lavender-rgb: 180 190 254;
	--ctp-mocha-lavender-hsl: 231.892 97.368% 85.098%;
	--ctp-mocha-text: #cdd6f4;
	--ctp-mocha-text-rgb: 205 214 244;
	--ctp-mocha-text-hsl: 226.154 63.934% 88.039%;
	--ctp-mocha-subtext1: #bac2de;
	--ctp-mocha-subtext1-rgb: 186 194 222;
	--ctp-mocha-subtext1-hsl: 226.667 35.294% 80.000%;
	--ctp-mocha-subtext0: #a6adc8;
	--ctp-mocha-subtext0-rgb: 166 173 200;
	--ctp-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
	--ctp-mocha-overlay2: #9399b2;
	--ctp-mocha-overlay2-rgb: 147 153 178;
	--ctp-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
	--ctp-mocha-overlay1: #7f849c;
	--ctp-mocha-overlay1-rgb: 127 132 156;
	--ctp-mocha-overlay1-hsl: 229.655 12.775% 55.490%;
	--ctp-mocha-overlay0: #6c7086;
	--ctp-mocha-overlay0-rgb: 108 112 134;
	--ctp-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
	--ctp-mocha-surface2: #585b70;
	--ctp-mocha-surface2-rgb: 88 91 112;
	--ctp-mocha-surface2-hsl: 232.500 12.000% 39.216%;
	--ctp-mocha-surface1: #45475a;
	--ctp-mocha-surface1-rgb: 69 71 90;
	--ctp-mocha-surface1-hsl: 234.286 13.208% 31.176%;
	--ctp-mocha-surface0: #313244;
	--ctp-mocha-surface0-rgb: 49 50 68;
	--ctp-mocha-surface0-hsl: 236.842 16.239% 22.941%;
	--ctp-mocha-base: #1e1e2e;
	--ctp-mocha-base-rgb: 30 30 46;
	--ctp-mocha-base-hsl: 240.000 21.053% 14.902%;
	--ctp-mocha-mantle: #181825;
	--ctp-mocha-mantle-rgb: 24 24 37;
	--ctp-mocha-mantle-hsl: 240.000 21.311% 11.961%;
	--ctp-mocha-crust: #11111b;
	--ctp-mocha-crust-rgb: 17 17 27;
	--ctp-mocha-crust-hsl: 240.000 22.727% 8.627%;
}

:root {
	--standard-padding: 8px;
	--standard-border-radius: 12px;
	--tile-size: 6vmin;
}

html {
	height: 100svh;
	box-sizing: border-box;
}

body {
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background: var(--ctp-mocha-base);
	color: var(--ctp-mocha-text);
}

#content {
	height: 100%;
}

/* I have to use the direct ascendant selector because otherwise the rule */
/* will not be used, since there is a similar rule in reset.css */
#content>h1 {
	text-align: center;
	font-size: 2.5rem;
	padding: var(--standard-padding);
}

.game {
	display: flex;
	justify-content: space-between;
	height: 100%;
	padding: var(--standard-padding);
}

.left,
.right {
	width: 50vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gameboard {
	display: grid;
	grid-template-columns: repeat(10, var(--tile-size));
	grid-template-rows: repeat(10, var(--tile-size));
}

.tile {
	width: var(--tile-size);
	height: var(--tile-size);
	border: 1px solid var(--ctp-mocha-rosewater);
}

div[class^="one"],
div[class^="two"],
div[class^="three"],
div[class^="four"] {
	height: var(--tile-size);
	width: var(--tile-size);
	background-color: var(--ctp-mocha-yellow);
}

div[class^="two"].E {
	width: calc(2*var(--tile-size));
}

div[class^="two"].S {
	height: calc(2*var(--tile-size));
}

div[class^="three"].E {
	width: calc(3*var(--tile-size));
}

div[class^="three"].S {
	height: calc(3*var(--tile-size));
}

div[class^="four"].E {
	width: calc(4*var(--tile-size));
}

div[class^="four"].S {
	height: calc(4*var(--tile-size));
}

.shipSelectionContainer {
	display: flex;
	gap: 2px;
}

.shipSelectionContainer:has(.E) {
	flex-direction: column;
}

.miss {
	background-color: var(--ctp-mocha-subtext0);
}

.hit {
	background-color: var(--ctp-mocha-red);
}

button {
	padding: var(--standard-padding);
	background-color: var(--ctp-mocha-blue);
	border-radius: var(--standard-border-radius);
	border: none;
	cursor: pointer;
}

button:hover {
	filter: brightness(90%);
}

button:active {
	filter: brightness(80%);
}

input[type="text"] {
	background-color: var(--ctp-mocha-base);
	border: none;
	color: var(--ctp-mocha-text);
	padding: var(--standard-padding);
	display: block;
	border-bottom: 1px solid var(--ctp-mocha-subtext1);
}

input[type="text"]:focus {
	outline: none;
	border-bottom: 2px solid var(--ctp-mocha-blue);
}

.right:has(.shipSelectionContainer) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 2rem 1fr;
	gap: var(--standard-padding)
}

.right:has(.shipSelectionContainer)>button,
.right:has(.shipSelectionContainer)>div {
	align-self: flex-start;
}

.right:has(.shipSelectionContainer)>input[type="checkbox"] {
	justify-self: flex-end;
}

.statText {
	font-size: 1.5rem;
}

.statNum {
	font-size: 1.5rem;
	font-weight: 700;
}

.winnerNameText {
	font-size: 2rem;
	font-weight: 700;
}

.stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, 1fr);
	height: 80vh;
	gap: var(--standard-padding);
}

.stats>img {
	height: 50vh;
	min-width: auto;
	object-fit: contain;
}

.textBubble {
	margin-top: 5vh;
	border-radius: 24px;
	background-color: var(--ctp-mocha-text);
	color: var(--ctp-mocha-base);
	line-height: 1.5rem;
	padding: var(--standard-padding);
	text-align: center;
	height: 2rem;
	z-index: 1;
}

.textBubble:before {
	position: relative;
	border-left: 2vh solid var(--ctp-mocha-text);
	border-right: 2vh solid transparent;
	border-top: 1vh solid var(--ctp-mocha-text);
	border-bottom: 2vh solid transparent;
	width: 0;
	height: 0;
	content: "";
	z-index: 0;
}