/* Plateau de jeu : cartes, pions, emplacements, annonces et ecran de victoire (views/fragments/jeu.html). Le badge joueur (avatar/etoiles/pseudo colore) partage avec la preparation vit dans commun.css. */ .bois { background: url(/images/wood.jpg); background-size: 14rem; } .ombre_bois { width: 100%; height: 100%; background: -o-radial-gradient(50%, circle, rgba(255, 255, 255, 0.0) 57%, rgba(0, 0, 0, 1) 100%); background: radial-gradient(circle at 50%, rgba(255, 255, 255, 0.0) 57%, rgba(0, 0, 0, 1) 100%); } #div_main { position: fixed; left: 50%; width: 0%; top: 92.5%; height: 20%; z-index: 11; } #div_jeu { -webkit-box-shadow: -1px -1px 20px 7px rgba(0, 0, 0, 0.38); box-shadow: -1px -1px 20px 7px rgba(0, 0, 0, 0.38); border: 0.2em solid #252525; z-index: 1; } .plateau { position: fixed; height: 86%; border-radius: 50%; } /* Legacy/non utilise actuellement. */ #attente { text-align: center; color: white; position: relative; top: 50%; left: 15%; width: 70%; font-weight: 600; font-family: 'Atma', cursive; } /* Avatars/etoiles/pseudo autour du plateau, generes par toc.js (creerEmplacementsEtPions) avec un id numerote par joueur. Les classes correspondantes (.image_profil_joueur, .etoiles_joueur, .pseudo_joueur_N), partagees avec la preparation, vivent dans commun.css. */ #image_profil0 { right: -3%; top: 3%; } #image_profil1 { right: -3%; bottom: 16%; } #image_profil2 { left: -3%; bottom: 16%; } #image_profil3 { left: -3%; top: 3%; } div#etoiles_joueur0 { right: -3%; top: 15.5%; } div#etoiles_joueur1 { right: -3%; bottom: 15.5%; } div#etoiles_joueur2 { left: -3%; bottom: 15.5%; } div#etoiles_joueur3 { left: -3%; top: 15.5%; } .pseudo { font-family: 'Comfortaa', sans-serif; position: absolute; text-align: center !important; width: 44%; min-height: 6%; padding: 0.35em 0em 0.1em 0em; color: white; border-radius: 0.4em; z-index: 1; -moz-transform: scale(0.6); -webkit-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } #pseudo0 { left: 74%; top: 16%; } #pseudo1 { left: 74%; top: 82%; } #pseudo2 { left: -18%; top: 82%; } #pseudo3 { left: -18%; top: 16%; } .tour_en_cours { box-shadow: 0px 0px 0.5em 0px white; } /* Bulle de reaction IA (V0 emoji texte, docs/IDEES_REACTIONS_IA.md). Positionnee par ReactionsIA.js en position fixed (calcul JS des coordonnees), ajoutee a plutot qu'a l'avatar pour ne jamais etre rognee. Bascule automatiquement au-dessus (reaction_ia_haut) ou en dessous (reaction_ia_bas) de l'avatar selon la place disponible sous le header. */ .reaction_ia { position: fixed; z-index: 20; pointer-events: none; transform: translate(-50%, -100%); } .reaction_ia.reaction_ia_bas { transform: translate(-50%, 0); } .reaction_ia_contenu { position: relative; min-width: 2.6em; min-height: 2.2em; padding: 0.15em 0.4em; display: flex; align-items: center; justify-content: center; background-color: white; border: 0.15em solid #252525; border-radius: 1em; box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.35); font-size: 1.7em; line-height: 1; transform-origin: center bottom; animation: reaction_ia_pop 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .reaction_ia_bas .reaction_ia_contenu { transform-origin: center top; } /* Queue de bulle BD pointant vers l'avatar (double triangle : bordure + remplissage) */ .reaction_ia_haut .reaction_ia_contenu::after, .reaction_ia_haut .reaction_ia_contenu::before { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 0.5em solid transparent; border-bottom: 0; } .reaction_ia_haut .reaction_ia_contenu::after { border-top-color: #252525; } .reaction_ia_haut .reaction_ia_contenu::before { margin-top: -0.14em; border-width: 0.4em; border-top-color: white; } .reaction_ia_bas .reaction_ia_contenu::after, .reaction_ia_bas .reaction_ia_contenu::before { content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); border: 0.5em solid transparent; border-top: 0; } .reaction_ia_bas .reaction_ia_contenu::after { border-bottom-color: #252525; } .reaction_ia_bas .reaction_ia_contenu::before { margin-bottom: -0.14em; border-width: 0.4em; border-bottom-color: white; } @keyframes reaction_ia_pop { 0% { transform: scale(0.2); opacity: 0; } 12% { transform: scale(1.2); opacity: 1; } 22% { transform: scale(1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0; } } /* Emplacements (cases du plateau) */ #emplacements { position: absolute; top: 7%; height: 86%; left: 7%; width: 86%; display: none; } .emplacements_victoire { background-image: none !important; } .emplacement { position: absolute; height: 2.5%; width: 2.5%; border-radius: 50%; -webkit-box-shadow: -0.05rem 0.2rem 0rem 0rem rgba(0, 0, 0, 0.3) inset; box-shadow: -0.05rem 0.2rem 0rem 0rem rgba(0, 0, 0, 0.3) inset; border: 0.05em solid rgba(51, 51, 51, 0.94); font-size: 0.5em; text-align: center; line-height: 2.5em; color: #333; font-family: "Comfortaa"; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2 ease-outs; transition: all 0.2s ease-out; } .emplacement.sans_numeros { color: rgba(0, 0, 0, 0); } .emplacement.mesure { border: 0.1em solid white; color: rgba(0, 0, 0, 0); } .emplacement.mesure_arrivee { background-color: white; border: 0.1em solid white; color: rgba(0, 0, 0, 0); } .emplacement.chemin_deplacement { background-color: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.72); box-shadow: -0.05rem 0.2rem 0rem 0rem rgba(0, 0, 0, 0.2) inset, 0 0 0.45em rgba(255, 255, 255, 0.48); color: rgba(0, 0, 0, 0); } .emplacement.chemin_deplacement_arrivee { background-color: rgba(255, 255, 255, 0.88); border-color: white; box-shadow: -0.05rem 0.2rem 0rem 0rem rgba(0, 0, 0, 0.16) inset, 0 0 0.75em 0.16em rgba(255, 255, 255, 0.82); color: rgba(0, 0, 0, 0); animation: chemin_deplacement_arrivee_pulse 0.72s ease-in-out infinite; } @keyframes chemin_deplacement_arrivee_pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.24); } } .joueur_0_sortie, .joueur_0_arrivee, .joueur_0_rentre, .joueur_0_depart { background-color: rgba(255, 134, 134, 0.8); } .joueur_1_sortie, .joueur_1_arrivee, .joueur_1_rentre, .joueur_1_depart { background-color: rgba(170, 208, 247, 0.8); } .joueur_2_sortie, .joueur_2_arrivee, .joueur_2_rentre, .joueur_2_depart { background-color: rgba(90, 159, 80, 0.8); } .joueur_3_sortie, .joueur_3_arrivee, .joueur_3_rentre, .joueur_3_depart { background-color: rgba(249, 168, 54, 0.8); } #mesure { width: 5%; height: 5%; top: 10%; font-size: 0.9em; text-align: center; position: absolute; line-height: 1.5em; border-radius: 20%; background-color: white; display: none; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; z-index: 1000; } /* Pions */ .pion_joueur_0 { background: -o-radial-gradient(10% 10%, circle, #d05f5f, #ff0000 20%, #272727); background: radial-gradient(circle at 10% 10%, #d05f5f, #ff0000 20%, #272727); } .pion_joueur_1 { background: -o-radial-gradient(10% 10%, circle, #5e97c2, #0093ff 20%, #272727); background: radial-gradient(circle at 10% 10%, #5e97c2, #0093ff 20%, #272727); } .pion_joueur_2 { background: -o-radial-gradient(10% 10%, circle, #9ece99, #1fb24b 20%, #272727); background: radial-gradient(circle at 10% 10%, #9ece99, #1fb24b 20%, #272727); } .pion_joueur_3 { background: -o-radial-gradient(10% 10%, circle, #ffbd60, #faa936 20%, #272727); background: radial-gradient(circle at 10% 10%, #ffbd60, #faa936 20%, #272727); } .pion_jouable .selection { position: relative; background: -o-radial-gradient(rgba(255, 255, 255, 0) 45%, white); background: radial-gradient(rgba(255, 255, 255, 0) 45%, white); width: 150%; height: 150%; border-radius: 50%; border: 2px solid white; top: -25%; left: -25%; cursor: pointer; pointer-events: none; } .pion_jouable { cursor: pointer; } .pion { position: absolute; height: 4%; width: 4%; border-radius: 50%; -webkit-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.3); box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.14s; -o-transition: all 0.14s; transition: all 0.14s; } .pion .selection { pointer-events: none; } .pion_en_deplacement { z-index: 1200; -webkit-filter: drop-shadow(-0.35em 0.22em 0.16em rgba(255, 255, 255, 0.42)); filter: drop-shadow(-0.35em 0.22em 0.16em rgba(255, 255, 255, 0.42)); -webkit-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.3), 0 0 0.55em 0.25em rgba(255, 255, 255, 0.72); box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.3), 0 0 0.55em 0.25em rgba(255, 255, 255, 0.72); } .pion_en_deplacement .selection { position: absolute; width: 170%; height: 170%; top: -35%; left: -35%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.92); background: radial-gradient(rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.58)); animation: pion_halo_pulse 0.72s ease-in-out infinite; } .pion_flash_arrivee .selection { position: absolute; width: 180%; height: 180%; top: -40%; left: -40%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); background: radial-gradient(rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.55)); animation: pion_flash_arrivee 0.52s ease-out forwards; } @keyframes pion_halo_pulse { 0%, 100% { opacity: 0.58; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } } @keyframes pion_flash_arrivee { 0% { opacity: 0.92; transform: scale(0.72); } 100% { opacity: 0; transform: scale(1.8); } } .pieu { border-radius: 25%; } /* Cartes */ .card:hover { -webkit-box-shadow: 0 1px 0.5rem rgb(252, 252, 252); box-shadow: 0 1px 0.5rem rgb(252, 252, 252); } /* Legacy/non utilise actuellement. */ #game_message { background-color: white; position: absolute; top: 3%; z-index: 10; left: 20%; width: 60%; opacity: 0.8; } .donneur_card { border-radius: 10%; border: 1px solid #333333; position: absolute; background-image: url(/designs/default/faces/back.png); background-size: 100% 100%; background-color: white; width: 4%; height: 5.64%; } /* Choix du Valet (echanger ou avancer) */ #echange { background: url("/images/echange.png"); background-size: 100% 100%; } #valet_avance { background-size: 100% 100% !important; } .icone_choix { position: absolute; top: 78%; display: none; border-radius: 50%; -webkit-box-shadow: 0 1px 0.5rem rgb(0, 0, 0); box-shadow: 0 1px 0.5rem rgb(0, 0, 0); z-index: 1; } /* Choix du 7 (repartition de l'avancement) */ #sept_plus { background: url("/images/sept_plus.png"); background-size: 100% 100%; } #sept_moins { background: url("/images/sept_moins.png"); background-size: 100% 100%; } #sept_valeur { background-color: white; color: #06aa9f; } .sept { position: absolute; top: 78%; display: none; border-radius: 50%; -webkit-box-shadow: 0 1px 0.5rem rgb(0, 0, 0); box-shadow: 0 1px 0.5rem rgb(0, 0, 0); text-align: center; font-weight: 600; padding-top: 0.3em; z-index: 1; } /* Confirmation d'echange de carte (phase d'echange) */ #iconeCarteEchange { background: url("/images/carteEchange.png"); background-size: 100% 100%; position: absolute; top: 78%; display: none; border-radius: 50%; -webkit-box-shadow: 0 1px 0.5rem rgb(0, 0, 0); box-shadow: 0 1px 0.5rem rgb(0, 0, 0); text-align: center; font-weight: 600; padding-top: 0.3em; z-index: 1; width: 100px; } /* Annonce (description de l'action en cours / de la carte selectionnee) */ #container_annonce { font-family: "Comfortaa"; position: relative; width: 36%; background-size: 100%; height: 26%; display: flex; top: 36%; left: 32%; border-radius: 1em; z-index: 100; flex-direction: column; justify-content: center; pointer-events: none; } #annonce { text-align: center; box-shadow: -1px -1px 9px 2px rgba(0, 0, 0, 0.38); background-color: rgba(255, 255, 255, 0.93); font-size: 19.9305px; padding: 0.2em; border-radius: 0.5em; pointer-events: all; } /* Legacy/non utilise actuellement. */ .title { font-size: 1.4em; font-weight: bold; } #annonce_title { font-size: 1.2em; margin-bottom: 0.2em; } span#nom_joueur_tour { border: none; display: block; } #annonce_content { line-height: 1.2em; font-size: 0.8em; } div#annonce_desc { background-color: rgb(255, 223, 176); border-radius: 0.4em; padding-left: 0.2em; padding-right: 0.2em; border: 0.1em solid #ffa014; z-index: 33; font-size: 0.9em; margin-top: 0.3em; min-height: 3.5em; } #annonce_title_desc { color: #FF9800; font-size: 1.1em; font-weight: bold; position: relative; padding-left: 1.75em; margin-right: 0.8em; } #img_desc_card { display: inline-block; height: 2.6em; width: 1.70em; border-radius: 0.2em; position: absolute; box-shadow: none; margin: 0.1em 0.9em -0.4em 0.1em; top: 0.1em; left: -0.2em; border: 1px solid orange; } #img_desc_card:before { content: ""; } #img_desc_card:after { content: ""; } div#annonce_content_desc { padding-left: 1.7em; } #croix_hide_desc { height: 0.8em; float: right; margin-right: 0em; margin-top: 0.1em; display: none; } span.avance { color: #205531; font-weight: bold; } span.recule { color: #bf0a0a; font-weight: bold; } img.img_desc { height: 1.2em; margin-bottom: -0.3em; display: none; } span.regle_carte { width: 3.2em; font-weight: bold; float: left; } span.regle_carte.regle_carte_special { color: #ce9339; text-shadow: white 0.1rem 0.1rem 0.3rem; } /* Victoire */ #victoire { position: absolute; width: 100%; height: 100%; display: none; text-align: center; border-radius: 11%; top: 0%; left: 0%; font-family: "Comfortaa"; } #victoire_title { position: absolute; left: 20%; top: 8%; width: 60%; z-index: 1000; background-color: none; color: #ffffff; font-weight: bold; border: none; font-family: comfortaa, sans-serif; border-radius: 4px; font-size: 2.7em; } /* Legacy/non utilise actuellement. */ #victoire_score { position: absolute; left: 0%; top: 50%; font-size: 2.5em; width: 100%; } /* Transparence de la distribution des cartes (docs/TRANSPARENCE_DISTRIBUTION_CARTES.md) */ #victoire_stats { position: absolute; left: 10%; top: 18%; width: 80%; height: 69%; max-height: 69%; overflow: hidden; z-index: 900; background-color: rgba(0, 0, 0, 0.55); border-radius: 12px; padding: 1.2em 1.5em; box-sizing: border-box; color: #ffffff; font-family: "Comfortaa", sans-serif; } #distribution_bilan { font-size: 1.3em; font-weight: bold; margin-bottom: 0.2em; } #distribution_symbole { font-size: 1.1em; } #distribution_avantage { font-size: 1em; opacity: 0.85; margin-bottom: 0.8em; } .distribution_table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-bottom: 0.6em; } .distribution_table th, .distribution_table td { padding: 0.25em 0.5em; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .distribution_table th:first-child, .distribution_table td:first-child { text-align: left; } .distribution_table th { font-weight: bold; opacity: 0.85; } .distribution_table .distribution_ligne_totale { font-weight: bold; } #distribution_ecart { font-size: 0.95em; margin-bottom: 0.4em; } #distribution_note { font-size: 0.8em; opacity: 0.75; margin: 0; } .stats_note { font-size: 0.85em; opacity: 0.8; } .stats_ligne_moi { font-weight: bold; background-color: rgba(255, 255, 255, 0.08); } .stats_donne_ligne { cursor: pointer; } .stats_donne_ligne:hover { background-color: rgba(255, 255, 255, 0.08); } .stats_donne_detail { display: none; } .distribution_table_detail { margin: 0.4em 0 0.6em 0; font-size: 0.85em; } /* Rapport stats V1 : resume fixe + contenu detaille scrollable, sans onglets */ .stats_container { height: 100%; display: flex; flex-direction: column; min-height: 0; font-size: 0.86em; } .stats_resume_fixe { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.28); border-left-width: 0.45em; border-radius: 0.45em; padding: 0.65em 0.8em; margin-bottom: 0.8em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .stats_container.distribution_niveau_tres_favorable .stats_resume_fixe { border-left-color: #50c878; background: linear-gradient(90deg, rgba(80, 200, 120, 0.34), rgba(80, 200, 120, 0.08)); } .stats_container.distribution_niveau_favorable .stats_resume_fixe { border-left-color: #8bc34a; background: linear-gradient(90deg, rgba(139, 195, 74, 0.28), rgba(139, 195, 74, 0.07)); } .stats_container.distribution_niveau_equilibre .stats_resume_fixe { border-left-color: #b8b8b8; background: linear-gradient(90deg, rgba(184, 184, 184, 0.24), rgba(184, 184, 184, 0.06)); } .stats_container.distribution_niveau_defavorable .stats_resume_fixe { border-left-color: #e57373; background: linear-gradient(90deg, rgba(229, 115, 115, 0.30), rgba(229, 115, 115, 0.07)); } .stats_container.distribution_niveau_tres_defavorable .stats_resume_fixe { border-left-color: #d32f2f; background: linear-gradient(90deg, rgba(211, 47, 47, 0.38), rgba(211, 47, 47, 0.09)); } .stats_scroll_content { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0.45em; padding: 0.75em; background-color: rgba(0, 0, 0, 0.12); } .stats_section { margin-bottom: 1em; } .stats_section h3 { margin: 0 0 0.45em; font-size: 0.92em; font-weight: bold; } #distribution_bilan { font-size: 1.08em; margin-bottom: 0.15em; } #distribution_symbole { font-size: 1em; } #distribution_avantage { display: inline-block; font-size: 0.84em; margin-bottom: 0.5em; padding: 0.18em 0.55em; border-radius: 0.35em; background-color: rgba(255, 255, 255, 0.12); } .distribution_resume_scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; margin: 0.1em 0 0.5em; } .distribution_resume_scores div { background-color: rgba(0, 0, 0, 0.16); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0.35em; padding: 0.35em 0.45em; min-width: 0; } .distribution_resume_scores strong, .distribution_resume_scores span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .distribution_resume_scores strong { font-size: 0.96em; } .distribution_resume_scores span { font-size: 0.72em; opacity: 0.78; } .distribution_table { font-size: 0.78em; } #distribution_ecart { font-size: 0.82em; margin-bottom: 0.25em; } #distribution_note { font-size: 0.72em; } /* Icône stats dans la barre d'icônes (#menu_parametres, commun.css) */ #icone_stats { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 1.6em; line-height: 1; cursor: pointer; user-select: none; } #bouton_stats { display: none; } #bouton_stats.stats_indisponibles { display: none !important; } /* Menu stats consultable en cours de partie */ #menu_stats_partie { display: none; position: fixed; left: 1.5%; right: 1.5%; top: 6%; bottom: 1.5%; width: auto; max-width: none; max-height: none; overflow: hidden; z-index: 9998; background-color: rgba(20, 20, 20, 0.92); border-radius: 12px; padding: 1em 1.5em 1.5em; box-sizing: border-box; color: #ffffff; font-family: "Comfortaa", sans-serif; font-size: 0.92em; box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.12), 0 0.8em 2em rgba(0, 0, 0, 0.45); } #menu_stats_partie_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8em; position: sticky; top: -1em; padding-top: 1em; padding-bottom: 0.6em; background-color: rgba(20, 20, 20, 0.96); z-index: 1; } #menu_stats_partie_title { font-size: 1em; font-weight: bold; } #menu_stats_partie_content { height: calc(100% - 3.1em); min-height: 0; } #fermer_menu_stats { cursor: pointer; width: 1.2em; height: 1.2em; } .bouton_fin_partie { width: 25%; top: 92%; position: absolute; font-size: 1em; } #revanche { left: 51%; } #retour_menu { left: 24%; }