/* ============================================ */
/* BOARD STYLES */
/* ============================================ */
.board-container {
	border: 2px solid #ddd;
	border-radius: 10px;
	background: white;
	position: relative;
	overflow: hidden;
}

#plateau {
	width: 100%;
	height: 100%;
}

/* ============================================ */
/* BOARD CONTROLS CONTAINERS */
/* ============================================ */
.board-controls-top-left {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
}

.board-controls-top-left button {
	margin: 0px;
	padding: 3px 4px;
	font-size: 12px;
	background: rgba(255,255,255,0.9);
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
}

.board-controls-bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.board-controls-bottom-right {
	position: absolute;
	bottom: calc(var(--dice-size) / 3);
	right: calc(var(--dice-size) / 3);
	display: flex;
	gap: calc(var(--dice-size) / 6);
	align-items: baseline;
	z-index: 10;
}

.board-controls-top-right {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
}

/* ============================================ */
/* BOARD CONTROLS ELEMENTS */
/* ============================================ */
/* grande balance */
.great-balance-container {
	display: flex;
	padding: 5px;
}

#greatBalanceDisplay {
	width: var(--great-balance-width);
	height: calc(var(--great-balance-width) * 0.6);    /* ratio 200x120 */
}

#darkSectionGB, #lightSectionGB {
	filter: blur(1.5px);
}

/* DICE */
.dice-container {
	display: flex;
	z-index: 1;
}

.dice {
	width: var(--dice-size);
	height: var(--dice-size);
	background: white;
	border: 2px solid #333;
	border-radius: 8px;
	position: relative;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	transform: scale(0.9);
}

.dice.rolling {
	animation: diceRoll 0.3s ease-in-out;
}

@keyframes diceRoll {
	0% { transform: rotate(0deg) scale(1); }
	25% { transform: rotate(90deg) scale(1.1); }
	50% { transform: rotate(180deg) scale(1.2); }
	75% { transform: rotate(270deg) scale(1.1); }
	100% { transform: rotate(360deg) scale(1); }
}

.dice-container.active-turn {
	animation: pulse 1.5s infinite;
	border: 2px solid #007bff;
	border-radius: 12px;
	transform: scale(1.1);
	padding: 5px;
}

.dice-container.active-turn:hover {
	transform: scale(1.2);
	box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.dice-container.active-turn::after {
	content: "👆";
	position: absolute;
	top: calc(var(--dice-size) * 0.5);      /* ← Proportionnel */
	left: calc(var(--dice-size) * 0.5);     /* ← Proportionnel */
	font-size: calc(var(--dice-size) * 0.5); /* ← Proportionnel */
	pointer-events: none;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* Faces du dé */
.dice-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	box-sizing: border-box;
	padding: 8px;
}

.dice-face.active {
	display: flex;
}

/* Points du dé */
.dice-dots {
	display: grid;
	width: 100%;
	height: 100%;
	gap: 0;
	place-items: center;
}

.dice-dot {
	background: #333;
	border-radius: 50%;
	width: calc(var(--dice-size) * 0.13);   /* ← Proportionnel */
	height: calc(var(--dice-size) * 0.13);  /* ← Proportionnel */
}

/* Face 1 - Centre parfait */
.dice-face-1 .dice-dots {
	grid-template: 1fr / 1fr;
}

/* Face 2 - Diagonale */
.dice-face-2 .dice-dots {
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
.dice-face-2 .dice-dot:nth-child(1) { 
	grid-area: 1 / 1; 
	justify-self: start;
	align-self: start;
}
.dice-face-2 .dice-dot:nth-child(2) { 
	grid-area: 3 / 3; 
	justify-self: end;
	align-self: end;
}

/* Face 3 - Diagonale avec centre */
.dice-face-3 .dice-dots {
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
.dice-face-3 .dice-dot:nth-child(1) { 
	grid-area: 1 / 1; 
	justify-self: start;
	align-self: start;
}
.dice-face-3 .dice-dot:nth-child(2) { 
	grid-area: 2 / 2; 
}
.dice-face-3 .dice-dot:nth-child(3) { 
	grid-area: 3 / 3; 
	justify-self: end;
	align-self: end;
}

/* Face 4 - Quatre coins */
.dice-face-4 .dice-dots {
	grid-template: 1fr 1fr / 1fr 1fr;
	gap: calc(var(--dice-size) * 0.13);   /* ← Proportionnel */
}
.dice-face-4 .dice-dot:nth-child(1) { 
	grid-area: 1 / 1; 
	justify-self: center;
	align-self: center;
}
.dice-face-4 .dice-dot:nth-child(2) { 
	grid-area: 1 / 2; 
	justify-self: center;
	align-self: center;
}
.dice-face-4 .dice-dot:nth-child(3) { 
	grid-area: 2 / 1; 
	justify-self: center;
	align-self: center;
}
.dice-face-4 .dice-dot:nth-child(4) { 
	grid-area: 2 / 2; 
	justify-self: center;
	align-self: center;
}

/* Face 5 - Quatre coins + centre */
.dice-face-5 .dice-dots {
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
.dice-face-5 .dice-dot:nth-child(1) { 
	grid-area: 1 / 1; 
	justify-self: start;
	align-self: start;
}
.dice-face-5 .dice-dot:nth-child(2) { 
	grid-area: 1 / 3; 
	justify-self: end;
	align-self: start;
}
.dice-face-5 .dice-dot:nth-child(3) { 
	grid-area: 2 / 2; 
}
.dice-face-5 .dice-dot:nth-child(4) { 
	grid-area: 3 / 1; 
	justify-self: start;
	align-self: end;
}
.dice-face-5 .dice-dot:nth-child(5) { 
	grid-area: 3 / 3; 
	justify-self: end;
	align-self: end;
}

/* Face 6 - Deux colonnes de trois */
.dice-face-6 .dice-dots {
	grid-template: 1fr 1fr 1fr / 1fr 1fr;
	gap: calc(var(--dice-size) * 0.13) calc(var(--dice-size) * 0.067);   /* ← Proportionnel */
}
.dice-face-6 .dice-dot:nth-child(1) { 
	grid-area: 1 / 1; 
	justify-self: center;
	align-self: center;
}
.dice-face-6 .dice-dot:nth-child(2) { 
	grid-area: 1 / 2; 
	justify-self: center;
	align-self: center;
}
.dice-face-6 .dice-dot:nth-child(3) { 
	grid-area: 2 / 1; 
	justify-self: center;
	align-self: center;
}
.dice-face-6 .dice-dot:nth-child(4) { 
	grid-area: 2 / 2; 
	justify-self: center;
	align-self: center;
}
.dice-face-6 .dice-dot:nth-child(5) { 
	grid-area: 3 / 1; 
	justify-self: center;
	align-self: center;
}
.dice-face-6 .dice-dot:nth-child(6) { 
	grid-area: 3 / 2; 
	justify-self: center;
	align-self: center;
}

/* DECK de cartes dans les contrôles */
.deck-container {
	position: relative;
	margin-right: 20px;
	width: var(--deck-width);
	height: calc(var(--deck-width) * 10 / 7);    /* ratio 100x70 */
	cursor: pointer;
}

.deck-stack {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #8B4513, #A0522D);
	border: 2px solid #654321;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--deck-width) * 0.8);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.deck-animation-overlay {
	position: absolute;
	top: -2px;
	left: -2px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	background: rgba(255, 215, 0, 0.4);
	border-radius: 8px;
	opacity: 0;
	transform: scale(1);
	transition: all 0.5s ease;
	pointer-events: none;
}

.deck-animation-overlay.pulse {
	opacity: 1;
	transform: scale(1.2);
	box-shadow: 0 0 15px gold;
}