/* =========================================================
   JDR Fog of War - Interface MJ
   ========================================================= */

:root {
	--bg: #171717;
	--panel: #242424;
	--text: #f2eee7;
	--accent: #d9b66f;
	--danger: #8f3434;
}

* { box-sizing: border-box; }

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

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #101010;
	border-bottom: 1px solid #333;
}

h1 {
	margin: 0;
	font-size: 1.25rem;
}

a { color: var(--accent); }

main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem;
}

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

button.danger {
	color: white;
	background: var(--danger);
}

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

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

#status { opacity: 0.8; }


/* ---------- Barre supérieure ---------- */

.topbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 15px;
}

.presetTopbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.presetTopbar label { font-size: 0.85rem; }

.presetTopbar select { min-width: 150px; }

.presetTopbar button { padding: 0.45rem 0.65rem; }


/* ---------- Mise en page MJ ---------- */

.layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

.sidePanel {
	flex: 0 0 230px;
	display: flex;
	flex-direction: column;
}

.canvasWrap {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: auto;
	border-radius: 0.9rem;
	background: #050505;
	box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

canvas {
	display: block;
	max-width: none;

	/* Sur la page MJ, le doigt / stylet sert au dessin du fog. */
	touch-action: none;
}


/* ---------- Curseur du pinceau ---------- */

#cursorPreview {
	display: none;
	position: absolute;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(255,255,255,0.75);
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: difference;
}


/* ---------- Onglets MJ ---------- */

.gmTabs {
	display: flex;
	width: 100%;
}

.gmTab {
	flex: 1;
	padding: 8px 4px;
	border: 1px solid #aaa;
	border-bottom: 0;
	background: #d0d0d0;
	color: #333;
	font-size: 0.78rem;
	cursor: pointer;
}

.gmTab:first-child { border-radius: 8px 0 0 0; }
.gmTab:last-child { border-radius: 0 8px 0 0; }

.gmTab.active {
	background: #f0f0f0;
	font-weight: bold;
}

.controls.gmTabPanel { display: none; }
.controls.gmTabPanel.active { display: flex; }


/* ---------- Panneaux de commandes ---------- */

.controls {
	width: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	background: #f0f0f0;
	color: #222;
	border: 1px solid #ccc;
	border-radius: 0 0 8px 8px;
}

.controls select { width: 100%; }

.controls h2 {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.controls label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.85rem;
}

.controls output {
	margin-top: -4px;
	font-size: 0.8rem;
}

.controls input[type="range"] {
	width: 100%;
	margin: 2px 0;
}

.controls input[type="color"] {
	width: 100%;
	height: 28px;
	padding: 1px;
}

.controls hr {
	width: 100%;
	margin: 5px 0;
	border: 0;
	border-top: 1px solid #ccc;
}

.gmPanelInfo {
	margin: 4px 0;
	font-size: 0.8rem;
	opacity: 0.7;
}


/* ---------- Configuration des joueurs ---------- */

.playerControls input[type="number"],
.playerControls input[type="text"] {
	width: 100%;
}

#playerNameFields {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

#playerConfigStatus {
	min-height: 1em;
	font-size: 0.75rem;
	opacity: 0.7;
}


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

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

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

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

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


/* ---------- Monstres / PNJ ---------- */

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

.monsterRow {
	display: flex;
	align-items: center;
	gap: 5px;
}

.monsterSelectButton {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px;
	background: #ddd;
	color: #222;
	border: 2px solid transparent;
	text-align: left;
}

.monsterSelectButton.selected {
	background: white;
	border-color: #222;
}

.monsterSymbol {
	width: 18px;
	font-size: 1.15rem;
	font-weight: bold;
	text-align: center;
}

.monsterDeadLabel {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	font-size: 0.7rem;
}

.monsterRow.dead .monsterSelectButton { opacity: 0.65; }

#monstersPanel h3 { margin: 15px 0 7px; }

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

.hint { opacity: 0.75; }


/* ---------- Écrans MJ plus étroits ---------- */

@media (max-width: 850px) {
	main { padding: 0.65rem; }

	.layout { gap: 10px; }

	.sidePanel { flex-basis: 210px; }

	.topbar { gap: 7px; }

	.presetTopbar select { min-width: 120px; }
}