/* Ordre des z-index :
    0) Panel classique
    1) Les lignes Entête (nom + classement) et Totaux du tableau de score
    20) Les boutons du menu en bas du tableau de score
    25) Les boutons supplémentaires du DropDownMenu affichés au-dessus du bouton "Menu" en bas du tableau de score
    100) Modale classique
    110) Modale "Chwazi"
    111) Animation du loader de la modale "Chwazi"
    112) iFrame de la modale "Chwazi"
    200) Modale "Message" (confirmation, alert, etc)
*/

html, body {
    height: 100%;
    overflow: auto;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* pour un effet smartphone sur grand écran */
}
main {
    padding: 0px;
	margin: 0px;
	width: 100%;
	position: relative;
}
.hidden {
    display: none !important;
}
.list-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

/* ============================ */
/* Style des boutons génériques */
/* ============================ */
button {
    margin: 1rem auto;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 10px;
    border: none;
    color: white;
    cursor: pointer;
	background-color: #4CAF50;
}
button.validate {
    background-color: #4CAF50;
}
button.cancel {
    background-color: #ccc;
}
button.delete {
    background-color: red;
}
button.param {
    background-color: rgb(43, 71, 163);
}
button.menu {
    background-color: rgb(0, 0, 0);
}

/* =================== */
/* Slider Switch Style */
/* =================== */
.switch-label-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    margin: 0.5em 0;
}
.switch-label {
    margin-bottom: 5px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider::before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #4CAF50;
}
input:checked + .slider::before {
    transform: translateX(20px);
}


/* ================= */
/*  Panel générique  */
/* ================= */
.panel .list-actions {
    margin: 0px;
    text-align: left;
    gap: 0px;
}
.panel .list-actions button {
    min-height: 3em;
    padding: 0px 2rem;
    width: 90%;
    text-align: left;
}
.panel .list-actions .icon {
    margin-right: 0.5em;
    vertical-align: middle;
}


/* ========================== */
/*  Modale générique (Popup)  */
/* ========================== */
.modal {
    position: fixed;
	width: 100%;
    height: 100%;
	top: 0;
	left: 0;
    background: white;
    z-index: 100;
    overflow-y: auto; /* sinon scroll impossible */
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
	position: absolute;
	padding: 20px;
    width: 320px; /* ou 400 si je remets 480 au global */
	top: 0px;
	background-color: #fff;
	margin: 10px;
	border-radius: 8px;
	max-width: 380px; /* ou 400 si je remets 480 au global */
	text-align: center;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.modal-content h2 {
	margin-top: 0px;
}
.modal-content p {
    font-size: 1.4em;
}
.modal-content .corner-close {
    top: 0px;
    position: absolute;
    right: 0px;
    border: 0px;
    background-color: #cccccc;
    color: white;
    width: 25px;
    height: 25px;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 8px;
    font-size: 1.2rem;
    padding: 1px 1px 1px 2px;
    cursor: pointer;
}
.modal-content .list-actions {
    margin: 0px;
    text-align: left;
}
.modal-content .list-actions .icon {
    vertical-align: middle;
    margin-right: 0.5em;
}


/* ===================================== */
/* Grille affichant tous jeux de société */
/* ===================================== */
#boardGamesPanel .games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}
#boardGamesPanel .game-card {
    border: 1px solid #ccc;
    border-radius: 12px;
	margin: 10px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}
#boardGamesPanel .game-card:hover {
    transform: scale(1.03);
}
#boardGamesPanel .game-image {
    width: 100%;
    border-radius: 8px;
}
#boardGamesPanel .game-title {
    margin-top: 8px;
    font-size: 1.1em;
    font-weight: 600;
}


/* ==================== */
/*  Tableau des scores  */
/* ==================== */
#scorePanel .panel-content {
    overflow-x: visible;
    overflow-y: auto;
    max-height: 90vh;
    width: 100%;
}
#scorePanel table {
    /* width: max-content; Finalement pas utile */
	min-width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#scorePanel th, td {
    padding: 10px 8px;
}
/* Les lignes Entête (nom + classement) et Totaux sont collées en haut du tableau */
#scorePanel tr.entete, tr.totals {
    background-color: #f5f5f5;
    font-weight: bold;
	position: sticky;
    top: 0;
    z-index: 1;
	border: 0px;
}
#scorePanel tr.entete th {
    padding-bottom: 5px;
    border-bottom: 2px solid #f5f5f5; /* TODO : à supprimer */
}
#scorePanel tr.entete th.current-player {
    position: relative; /* Indispensable pour positionner le triangle par rapport à lui */
}
#scorePanel tr.entete th.current-player::after {
    content: ''; /* Obligatoire pour afficher le pseudo-élément */
    position: absolute;
    bottom: -5px; /* Positionne le triangle juste en dessous */
    left: 50%; /* Centre le triangle horizontalement */
    transform: translateX(-50%); /* Ajuste le centrage parfait */
    width: 0;
    height: 0;
    border-left: 10px solid transparent; /* Côté gauche du triangle */
    border-right: 10px solid transparent; /* Côté droit du triangle */
    border-bottom: 10px solid black; /* Base du triangle (couleur et hauteur) */
}

#scorePanel tr.totals {
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2); /* remplace la bordure basse */
}

#scorePanel tr.totals {
	font-size: 1.4em;
    top: 60px;
}

#scorePanel tr.round {
    cursor: pointer;
}
#scorePanel tr.round.even {
    background-color: #fff;
}
#scorePanel tr.round.odd {
    background-color: #f9f9f9;
}

#scorePanel th.roundNumber, td.roundNumber {
    padding: 0px;
	width: 20px;
	font-size: 10px;
}
#scorePanel th.roundNumber.truncate-name, td.roundNumber {
    max-width: 20px;
}

#scorePanel .rank-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#scorePanel .rank-wrapper .rank-value {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-bottom: 4px;
}
#scorePanel tr.round .first-player {
    /*text-decoration: underline;*/
    position: relative; /* Indispensable pour positionner le triangle par rapport à lui */
}
#scorePanel tr.round .first-player::after {
    content: ''; /* Obligatoire pour afficher le pseudo-élément */
    position: absolute;
    bottom: 6px; /* Positionne le triangle juste en dessous */
    left: 50%; /* Centre le triangle horizontalement */
    transform: translateX(-50%); /* Ajuste le centrage parfait */
    width: 0;
    height: 0;
    border-left: 4px solid transparent; /* Côté gauche du triangle */
    border-right: 4px solid transparent; /* Côté droit du triangle */
    border-bottom: 4px solid black; /* Base du triangle (couleur et hauteur) */
}
#scorePanel th.truncate-name {
    padding-left: 2px;
    padding-right: 2px;
}
#scorePanel .rank-wrapper .player-name-header.truncate-name {
    max-width: 50px;
    overflow: hidden;
    /*text-overflow: ellipsis; Afficher des points de suspension */
    white-space: nowrap;
}

#scoreControls {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 400px;
    transform: translateX(-50%);
    background: #ffffff;
    border-top: 1px solid #ccc;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 20;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
}
#scoreControls button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    margin: 0px;
    padding: 0px;
}


/* ============================= */
/*  Modale de saisie des scores  */
/* ============================= */
#roundModal .modal-content {
	top: 0px;
}

/* Animation d'entrée */
#roundModal .points-board .step.transition {
    animation: fadeSlide 0.3s ease-in-out;
}
@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#roundModal .points-board .step-header {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}
#roundModal .points-board .step-header img {
    height: 60px;
    object-fit: contain;
    width: auto;
}
#roundModal .points-board .player-block {
    border-bottom: 2px solid #ccc;
    padding: 15px 0px;
    text-align: center;
}
#roundModal .points-board .player-name {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    padding: 0px 15px 10px 15px;
}
#roundModal .points-board .score-value {
    font-size: 2.5rem;
    margin: 10px 0;
    color: #555;
}
#roundModal .points-board .field-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#roundModal .points-board .field-block button {
    color: black;
    background: #d0d6fc;
	border-color: #a3affc;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    border-style: solid;
	border-width: 1px;
    font-size: 1rem;
    cursor: pointer;
	min-width: 65px;
}
#roundModal .points-board .field-block button.selected {
    background-color: goldenrod;
    color: white;
}
#roundModal .points-board .field-block button.positive {
    background: #d0d6fc;
	border-color: #a3affc;
}
#roundModal .points-board .field-block button.negative {
    background: #ffcece;
	border-color: #ff9f9f;
}
#roundModal .points-board .field-block .buttons-change {
    display: inline;
}
#roundModal .points-board .field-block .buttons-change button {    
    margin: 5px;
}
#roundModal .points-board .field-block .buttons-select button {
    min-width: 0px;
    margin: 3px;
}

#roundModal .points-board .step .navigate button {
    width: 45%;
    padding: 1rem 0px;
    margin: 1rem 5px;
}

/* === SkullKing === */
#roundModal .points-board[data-type="skullKing"] .field-block {
    display: block;
}
#roundModal .points-board[data-type="skullKing"] .field-block .buttons-bonus button {
    position: relative;
}
#roundModal .points-board[data-type="skullKing"] .field-block .buttons-bonus button.bonus {
    font-size: 1.3em;
    padding: 1px;
    min-width: 70px;
    min-height: 42px;
    margin: 0px 3px;
}
#roundModal .points-board[data-type="skullKing"] .field-block .buttons-bonus button .bonus-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #cf0c0c;
    color: white;
    font-size: 1rem;
    border-radius: 50%;
    padding: 2px 5px;
    pointer-events: none;
}
#roundModal .points-board[data-type="skullKing"] .field-block[data-key="announced"],
#roundModal .points-board[data-type="skullKing"] .field-block[data-key="actual"],
#roundModal .points-board[data-type="skullKing"] .field-block[data-key="bonus"] {
    font-size: 1.4em;
    margin-bottom: 10px;
}

/* === Akropolis === */
#roundModal .points-board[data-type="akropolis"] .field-block {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    justify-content: left;
    font-size: 1.5rem;
    font-weight: bold;
}
#roundModal .points-board[data-type="akropolis"] .field-block .label {
    width: 15%;
}
#roundModal .points-board[data-type="akropolis"] .field-block .buttons-select,
#roundModal .points-board[data-type="akropolis"] .field-block .buttons-change {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
}
#roundModal .points-board[data-type="akropolis"] .field-block .buttons-change button {
    margin: 3px;
    min-width: 60px;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="text"] {
    display: block;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;   
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="displayScore"] {
    display: block;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="displayScore"] .label {
    position: absolute;
    text-align: center;
    left: 18px;
    font-size: 1.2em;
    font-weight: bold;
    padding-top: 6px;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="selectScore"] {
    width: 100%;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="selectScore"] button {
    background-color: #ffc83d;
    border-color: darkorange;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-type="selectScore"] button.selected {
    background-color: red;
    border-color: darkred;
    color: white;
    font-weight: bold;
}
#roundModal .points-board[data-type="akropolis"] .field-block[data-key="tiles"] .label {
    color: white;
    line-height: 40px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="house"] .field-block[data-key="tiles"] .label {
    background: #3498db;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="market"] .field-block[data-key="tiles"] .label {
    background: #ffce85;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="barrack"] .field-block[data-key="tiles"] .label {
    background: #ef3634;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="temple"] .field-block[data-key="tiles"] .label {
    background: #ce85d1;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="garden"] .field-block[data-key="tiles"] .label {
    background: #62a159;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="garden"] .field-block[data-key="stars"] .label {
    margin-left: -9px;
    margin-right: 9px;
    text-align: end;
}
#roundModal .points-board[data-type="akropolis"] .step[data-step="cube"] .field-block .buttons-change {
    width: 100%;
}

/* ================================== */
/*  Modal de saisie des participants  */
/* ================================== */
#playersModal .modal-content {
	top: 70px;
    max-width: 340px;
}
#playersModal .modal-content h2 > span[data-role="max-players"] {
    margin-left: 10px;
}
#playersModal .modal-content button {
	padding: 10px 20px;
	margin: 10px auto;
}
#playersModal .player-container {
	display: flex;
	gap: 8px;
	margin: 8px 0px;
}
#playersModal .player-container button {
	margin: 0px;
	padding: 10px 15px;
}
#playersModal .player-container .player-input {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
	padding-left: 5px;
}

#playersModal .player-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: 10px;
    justify-content: center;
}
#playersModal .player-suggestions .player-suggestion {
	margin-right: 15px;
}
#playersModal .player-suggestions .player-suggestion button {
    font-size: 0.9rem;
	font-weight: bold;
}
#playersModal .player-suggestions .player-suggestion button.add {
    background-color: #a3affc;
	color: #172bcd;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}
#playersModal .player-suggestions .player-suggestion button.delete {
    background-color: #172bcd;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	padding: 10px;
}


/* =================== */
/*  Modale 1er joueur  */
/* =================== */
#firstPlayerModal .player-list {
    background-color: antiquewhite;
    border-radius: 10px;
    padding: 10px 0px;
    margin-bottom: 20px;
}
#firstPlayerModal .player-list button {
	margin: 10px;
    padding: 10px;
    background-color: goldenrod;
}


/* =============== */
/*  Modale Chwazy  */
/* =============== */
#chwaziModal.modal {
    z-index: 110;
    overflow-y: none;
}
#chwaziModal .modal-content {
    top: 0px;
	margin: 5px;
    padding: 10px;
    height: 97%;
    width: 360px;
    max-width: 360px;
}
#chwaziModal .modal-content h2 {
    margin: 10px;
    padding: 0px;
    font-size: 1em;
}
#chwaziModal iframe {
    z-index: 112;
    position: relative;
    height: 84%;
    width: 100%;
    border: none;
}
/* Animation du loader */
#chwaziModal .loader {
    z-index: 111;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ====================== */
/*  Modale "A propos de"  */
/* ====================== */
#aboutModal .modal-content .donation-section {
    margin: 40px 0px;
    background-color: #ffffe2;
    border: 1px solid #FFDD00;
    padding: 0px 8px 20px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* =========================================== */
/*  Modale message (confirmation, alert, etc)  */
/* =========================================== */
#messageModal {
    z-index: 200;
}


/* =========================================== */
/*  Modale de paramétrage d'un jeu de société  */
/* =========================================== */
#gameSettingsModal .modal-content {
	top: 70px;
}
#gameSettingsModal .form-group {
    text-align: left;
    /*margin: 1em 0;*/
    padding: 10px 0px;
}
#gameSettingsModal label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: bold;
}
#gameSettingsModal input,
#gameSettingsModal select {
    padding: 0.5em;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 6px;
}
#gameSettingsModal select {
    width: 100%;
}
#gameSettingsModal input {
	width: 95%;
}


/* ======================================== */
/*  Modale listant les parties disponibles  */
/* ======================================== */
#gameSavedModal .modal-content {
	top: 70px;
    max-width: 320px;
}
#gameSavedModal .game-list-item {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    text-align: left;
}
#gameSavedModal .game-list {
	display: grid;
	gap: 0px;
}
#gameSavedModal .game-list-item-wrapper {
    display: flex;
}
#gameSavedModal .game-list-item-wrapper button {
	/*font-size: 0.9rem;*/
	font-weight: bold;
}
#gameSavedModal .game-list-item-wrapper button.resume {
	padding: 10px 0px;
	width: 100%;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}
#gameSavedModal .game-list-item-wrapper button.resume .date {
	font-weight: bold;
}
#gameSavedModal .game-list-item-wrapper button.resume .players {
	font-weight: normal;
}
#gameSavedModal .game-list-item-wrapper button.delete {
    border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	padding: 10px;
}
/*
#gameSavedModal .game-list-item .players {
    font-size: 0.9em;
    color: #555;
}
*/

/* =========================== */
/*  Affichage du localstorage  */
/* =========================== */
#localstorageModal .modal-content {
	width: 85%;
	top: 0px;
}
#localstorageModal pre {
	text-align: left;
	margin: 0px;
}
.localstorage-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.localstorage-key-line {
    display: flex;
    gap: 10px;
}
.localstorage-key {
    font-weight: bold;
    color: #333;
	text-align: justify;
	padding: 5px;
}
.localstorage-value {
    background: #f5f5f5;
    padding: 0.5em;
    white-space: pre-wrap;
    border: 1px solid #ccc;
}


/* ================================ */
/*  Graphique d'évolution du score  */
/* ================================ */
#progressionChartModal .modal-content {
    display: flex;
    flex-direction: column;
    top: 10px;
    height: 90vh;
}

#progressionChartModal canvas {
    width: 100% !important;
    height: 100% !important;
    flex: 1;
}


/* =========================================== */
/*  Menu déroulant dans le tableau des scores  */
/* =========================================== */
#scoreControls .menu-container {
    position: relative;
    display: inline-block;
}
#scoreControls .menu-container button {
    padding: 6px 0px 0px 0px;
}

/* Icône Menu Sandwich */
#scoreControls .menu-container button[data-action="toggleMenuScorePanel"] {
    background-color: black;
    top: 0px;
}
#scoreControls .menu-container button[data-action="toggleMenuScorePanel"] path {
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transform-origin: center center; /* Faire pivoter autour du centre */
}
/* Transformation de l'icône sandwich en croix */
#scoreControls .menu-container button[data-action="toggleMenuScorePanel"].open path:nth-child(1) {
	transform: translateX(-4px) translateY(5px) rotate(45deg);
}
#scoreControls .menu-container button[data-action="toggleMenuScorePanel"].open path:nth-child(2) {
	opacity: 0; /* La barre du milieu devient invisible */
}
#scoreControls .menu-container button[data-action="toggleMenuScorePanel"].open path:nth-child(3) {
	transform: translateX(-3px) translateY(-4px) rotate(-45deg);
}

/* Contenu du dropDownMenu */
#dropDownMenu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 25;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    gap: 10px;
    display: grid;
}
#dropDownMenu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#dropDownMenu button[data-action="showProgressionChart"] {
    background-color: #F5A623;
}
#dropDownMenu button[data-action="paramInGame"] {
    background-color: rgb(43, 71, 163);
}
#dropDownMenu button[data-action="openChwazi"] {
    background-color: #7ED321;
}
#dropDownMenu button[data-action="about"] {
    background-color: #9B9B9B;
}
#dropDownMenu button {
    transition: background-color 0.2s ease, color 0.2s ease;
}
#dropDownMenu button:hover,
#dropDownMenu button:focus {
    filter: brightness(1.1);
}