/* Styles for RGB Warrior.
 *
 * This game is canvas-based (Phaser) with HTML/CSS overlays on top, so the
 * layout strategy differs from games 1 & 2:
 *   - #warrior-root is a full-viewport positioning context.
 *   - #game-container (the Phaser canvas) fills it.
 *   - #overlays and its children are ABSOLUTELY positioned on top of the canvas.
 *
 * The modal, table and gold/silver/bronze medal rules below are copied from the
 * other games' stylesheets so overlays look consistent across the site.
 */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	width: 100%;
	overflow-x: hidden; /* no horizontal rubber-band; vertical scroll allowed
	                       so the always-visible leaderboard is reachable */
	background-color: #222;
	font-family: Arial, sans-serif;
	/* Disable the long-press/callout and tap-highlight on touch devices. */
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* ===== Page layout: play area on top, leaderboard below ===== */

#warrior-root {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 12px;
}

/*
 * #play-area is the BOUNDED box the canvas + in-game overlays live in. It is the
 * positioning context (position: relative) for the absolutely-placed overlays
 * inside it. Landscape-ish, capped height so the leaderboard stays on-screen.
 */
#play-area {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* landscape play field */
	max-height: 70vh; /* but never taller than 70% of the viewport */
	background-color: #1d1f27;
	border-radius: 10px;
	overflow: hidden; /* clip the canvas + overlays to the rounded box */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Phaser injects its <canvas> into this div. It fills the play area. */
#game-container {
	position: absolute;
	inset: 0; /* top/right/bottom/left = 0 */
	width: 100%;
	height: 100%;
}

#game-container canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/*
 * #overlays itself is a click-through layer: pointer-events:none means taps fall
 * through to the canvas, EXCEPT on children that explicitly re-enable them. That
 * way the HUD can sit over the game without eating the player's input, while
 * buttons and modals stay interactive.
 */
#overlays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}

.overlay {
	position: absolute;
}

/* A generic "fills the screen, centres a card" overlay (the start menu).
 * Uses position:fixed so it covers the whole VIEWPORT — not just the bounded
 * #play-area — otherwise the menu card would be clipped on short phone screens.
 * overflow-y:auto lets it scroll if the card is ever taller than the screen. */
.overlay-screen {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.6);
	pointer-events: auto;
	z-index: 50; /* above the in-game overlays, below the modals (z:100) */
}

.overlay-card {
	background-color: #fff;
	color: #333;
	padding: 28px 24px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	text-align: center;
	width: 90%;
	max-width: 420px;
}

.overlay-card h1 {
	margin-top: 0;
}

/* Colour-blindness mode selector on the start screen. */
.colour-mode-row {
	margin: 14px 0 4px 0;
	font-size: 15px;
}

.colour-mode-row label {
	font-weight: 500;
	margin-right: 8px;
}

.colour-mode-row select {
	font-size: 15px;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #f9f9f9;
	color: #333;
}

/* Utility: the script toggles this to show/hide overlays. */
.hidden {
	display: none !important;
}

/* ===== On-screen swing controls (touch) — bottom-RIGHT corner ===== */
.overlay-controls {
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: flex-end; /* push the three buttons to the right */
	gap: 14px;
	padding: 16px;
	pointer-events: none; /* the row is transparent... */
}

.swing-btn {
	pointer-events: auto; /* ...but the buttons themselves are tappable */
	width: 56px;
	height: 56px;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: transform 0.1s ease;
}

.swing-btn:active {
	transform: scale(0.92);
}

#swingRed {
	background-color: rgb(231, 76, 60);
}
#swingGreen {
	background-color: rgb(46, 204, 64);
}
#swingBlue {
	background-color: rgb(0, 116, 217);
}

@media (max-width: 480px) {
	.swing-btn {
		width: 46px;
		height: 46px;
	}
}

/* ===== Buttons (shared look with the other games) ===== */
button {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background-color: #4caf50;
	color: white;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #45a049;
}

.secondary-btn {
	background-color: #555;
}

.secondary-btn:hover {
	background-color: #444;
}

.overlay-card button {
	display: block;
	width: 70%;
	margin: 10px auto 0 auto;
}

/* ===== Modals (copied from the other games for consistency) ===== */
.modal {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.modal-content {
	background-color: #fff;
	color: #333;
	margin: 15% auto;
	padding: 20px;
	border: none;
	width: 80%;
	max-width: 500px;
	border-radius: 10px;
	position: relative;
	text-align: center;
}

.close {
	position: absolute;
	top: 10px;
	right: 20px;
	color: #aaa;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

h1,
h2 {
	text-align: center;
}

/* ===== Always-visible leaderboard card (below the play area) ===== */
#leaderboard {
	width: 100%;
	max-width: 600px;
	padding: 20px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	color: #333;
}

#leaderboard h2 {
	margin: 0 0 10px 0;
}

/* ===== Leaderboard list + medal styling (copied for consistency) ===== */
#leaderboard3List {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 18px;
	color: #333;
}

#leaderboard3List li {
	padding: 5px 0;
	border-bottom: 1px solid #ccc;
}

#leaderboard3List li.gold {
	background-color: rgba(255, 215, 0, 0.3);
}
#leaderboard3List li.silver {
	background-color: rgba(192, 192, 192, 0.3);
}
#leaderboard3List li.bronze {
	background-color: rgba(205, 127, 50, 0.3);
}

/* ===== Tutorial table (copied from the other games) ===== */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

th,
td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

/* ===== Name-entry form (mirrors rgbguessr2's #nameModal styling) ===== */
#nameForm input[type="text"] {
	width: 80%;
	padding: 10px;
	margin: 12px 0 0 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 18px;
	color: #333;
	background: #f9f9f9;
	text-align: center;
}

#nameForm button[type="submit"] {
	margin-top: 16px;
	width: 60%;
	background-color: #4caf50;
	color: white;
	font-size: 18px;
	padding: 10px 0;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.2s;
}

#nameForm button[type="submit"]:hover {
	background-color: #388e3c;
}

#nameError {
	min-height: 20px;
	font-size: 15px;
	color: #f44336;
	margin-top: 8px;
}

/* Links row on the start screen (mirrors the other pages' #link styling). */
#link {
	margin-top: 16px;
}

#link a {
	display: inline-block;
	margin: 0 8px;
	color: #0074d9;
	text-decoration: none;
}

#link a:hover {
	text-decoration: underline;
}