/* =========================================================
   JDR Fog of War - Interface joueurs
   Optimisée pour ordinateur et tablette récente
   ========================================================= */

:root {
	--bg: #171717;
	--text: #f2eee7;
	--accent: #d9b66f;
}

* { box-sizing: border-box; }

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--bg);
	color: var(--text);
}

button {
	border: 0;
	border-radius: 0.45rem;
	padding: 0.55rem 0.8rem;
	color: #111;
	background: var(--accent);
	cursor: pointer;
	font-weight: 650;
}

button:hover { filter: brightness(1.1); }

button:disabled {
	opacity: 0.45;
	cursor: default;
}


/* =========================================================
   Structure générale
   Le body ne scrolle pas : seule la zone de carte scrolle.
   Le header et le panneau joueurs restent donc toujours visibles.
   ========================================================= */

.player {
	height: 100vh;   /* fallback */
	height: 100dvh;  /* Safari / navigateurs mobiles récents */
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.player header {
	flex: 0 0 auto;

	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;

	padding: 10px 20px;

	background: #222;
	border-bottom: 1px solid #333;

	z-index: 10;
}

.playerZoomControl {
	justify-self: center;
}

.player header #status {
	justify-self: end;
	margin-left: 0;
	opacity: 0.8;
}

.player header h1 {
	justify-self: start;
	margin: 0;
	font-size: 1.25rem;
}

.player main {
	flex: 1;
	min-height: 0;
	width: 100%;
	display: flex;
	overflow: hidden;
}


/* ---------- Zoom ---------- */

.playerZoomControl {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
}

.playerZoomControl input[type="range"] { width: 180px; }

.playerZoomControl output { min-width: 55px; }


/* =========================================================
   Panneau joueurs
   Il ne se déplace pas quand on navigue dans la carte.
   ========================================================= */

.playerSidePanel {
	flex: 0 0 210px;
	width: 210px;
	min-width: 0;
	margin-top: 40px;
	padding: 12px;
	background: #000;
	color: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.playerSidePanel h2 {
	margin: 0 0 12px;
	font-size: 1.05rem;
}

.playerSidePanel h3 {
	margin: 20px 0 8px;
	font-size: 0.9rem;
}

.playerList {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.playerNameButton {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 8px;
	text-align: left;
	background: #ddd;
	color: #222;
	border: 2px solid transparent;
}

.playerNameButton.selected {
	background: rgb(159, 250, 163);
	border-color: #222;
}

.playerColorDot {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #555;
}

.noPlayers {
	margin: 0;
	font-size: 0.8rem;
	opacity: 0.7;
}

#playerStatus {
	display: block;
	min-height: 1.2em;
	margin-top: 12px;
	font-size: 0.75rem;
	opacity: 0.75;
}


/* ---------- Palette de couleurs ---------- */

.colorPalette {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.colorChoice {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 3px solid transparent;
	border-radius: 50%;
}

.colorChoice.selected {
	border-color: #fff;
	box-shadow: 0 0 0 2px #111;
}

.colorChoice:disabled {
	opacity: 0.3;
	cursor: default;
}


/* =========================================================
   Zone de carte
   C'est la SEULE zone qui défile lorsque la carte est zoomée.
   ========================================================= */

.playerCanvas {
	flex: 1;
	min-width: 0;
	min-height: 0;
	position: relative;
	overflow: auto;
	background: #050505;
	border-radius: 0;
	box-shadow: none;

	/* Défilement plus naturel sur iOS / iPadOS. */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.playerCanvas canvas {
	display: block;
	max-width: none;
	margin: auto;

	/*
	 * Important sur tablette :
	 * - un tap continue à générer le click utilisé pour placer le PJ ;
	 * - un glissement du doigt déplace la carte zoomée ;
	 * - contrairement au MJ, le canvas ne bloque donc pas le pan tactile.
	 */
	touch-action: pan-x pan-y;

	user-select: none;
	-webkit-user-select: none;
}


/* =========================================================
   Tablettes / écrans plus étroits
   ========================================================= */

@media (max-width: 850px) {
	.player header {
		gap: 8px 12px;
		padding: 8px 10px;
	}

	.player header h1 { font-size: 1rem; }

	.player header #status {
		justify-self: end;
		font-size: 0.8rem;
	}
	.playerZoomControl { font-size: 0.8rem; }

	.playerZoomControl input[type="range"] { width: 120px; }

	.playerSidePanel {
		flex-basis: 180px;
		width: 180px;
		margin-top: 25px;
		padding: 8px;
	}

	.playerNameButton {
		min-height: 42px;
		padding: 7px;
	}

	.colorPalette { gap: 5px; }

	.colorChoice {
		width: 35px;
		height: 35px;
	}
}