:root { --font-pirate: 'Permanent Marker', cursive; --font-manuscrit: 'Permanent Marker', cursive; --font-sans: 'Oswald', Arial, Helvetica, sans-serif; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); background: radial-gradient(circle at top, #0077cc 0%, #0057b8 45%, #002266 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; /* La planche tient toujours entièrement à l'écran, jamais de défilement */ } button { font-family: inherit; } /* Le plateau garde toujours le ratio réel de l'image (2800 x 1527) et tient entièrement dans la fenêtre (mode "letterbox") : sa largeur ou sa hauteur est limitée par la plus petite des deux dimensions de l'écran, l'autre se calculant en conséquence pour respecter le ratio. Le fond dégradé du remplit l'espace qui reste sur les côtés (ou en haut/bas). Les éléments internes (îles, pions, boutons, fenêtres...) peuvent ainsi se dimensionner en unités de conteneur (cqw/cqh/cqmin) pour rester proportionnels au plateau lui-même plutôt qu'à la fenêtre du navigateur. */ #game-container { position: relative; width: min(100vw, 100vh * 1.8337); height: min(100vh, 100vw / 1.8337); container-type: size; } #game-board { position: relative; /* CRUCIAL : définit le (0,0) pour les pions */ width: 100%; height: 100%; display: block; overflow: hidden; /* Optionnel : évite que les pions sortent du cadre */ } #players-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Laisse passer les clics vers le dé */ z-index: 10; /* Doit être au dessus de la carte mais peut-être sous le dé */ } .pion { position: absolute; width: 100px; /* Ajuste selon la taille de tes îles */ height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1000; /* Pour un mouvement fluide lors du déplacement */ transition: left 0.6s ease-in-out, top 0.6s ease-in-out; /* Centre le pion sur ses coordonnées (évite qu'il soit décalé) */ transform: translate(-50%, -50%) scaleX(-1); /* Effet de base 3D (socle) */ background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.4)); } /* On prépare les classes pour chaque équipe */ #pion-voilier { background-image: url('../images/pion-voilier.png'); left: 11%; top: 94%; } #pion-sousmarin { background-image: url('../images/pion-sousmarin.png'); left: 10%; top: 86%; } #pion-catamaran { background-image: url('../images/pion-catamaran.png'); left: 9%; top: 78%; } #pion-hydroptere { background-image: url('../images/pion-hydroptere.png'); left: 8%; top: 70%; } /* 1308 Tout fonctionne avant tentative d'amélioration */ #dice-scene { position: absolute; width: 60px; height: 60px; perspective: 1000px; left: 46.98%; top: 47.38%; transform: translate(-50%, -50%); cursor: pointer; z-index: 100; } #dice-offset { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-45deg) rotateY(30deg); /* L'angle parfait */ } #cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: none; /* Important pour ne pas casser l'animation */ } .face { position: absolute; width: 60px; height: 60px; border: 2px solid #003366; line-height: 56px; font-family: "Arial Black", "Gadget", sans-serif; font-size: 42px; font-weight: 900; text-align: center; border-radius: 8px; /* Bleu Iridescent standard */ background: radial-gradient(circle at 30% 30%, #3399ff 0%, #0044cc 100%); /* CHIFFRES GRIS CREUSÉS (sur les côtés) */ color: #ACACAC; /* Gris clair pour le fond du chiffre */ text-shadow: 1px 1px 1px rgba(255,255,255,0.2), /* Reflet léger */ -1px -1px 2px rgba(0,0,0,0.6); /* Ombre de profondeur */ } .face.top { /* Bleu plus éclairé */ background: radial-gradient(circle at 30% 30%, #80d5ff 0%, #3399ff 100%); /* CHIFFRE BLANC CREUSÉ (face du dessus) */ color: #ffffff; /* Blanc pur */ /* On utilise une ombre portée plus sombre pour bien marquer le "trou" dans le blanc */ text-shadow: 0px -1px 2px rgba(0,0,0,0.4), 0px 1px 1px rgba(255,255,255,0.3); transform: rotateX(90deg) translateZ(30px); } .face.front { transform: rotateY(0deg) translateZ(30px); } /* Face 1 (ou n'importe) */ .face.back { transform: rotateY(180deg) translateZ(30px); } /* Face opposée à Front */ .face.top { transform: rotateX(90deg) translateZ(30px); } /* Face 2 */ .face.bottom { transform: rotateX(-90deg) translateZ(30px); } /* Face opposée à Top */ .face.right { transform: rotateY(90deg) translateZ(30px); } /* Face 3 */ .face.left { transform: rotateY(-90deg) translateZ(30px); } /* Face opposée à Right */ @keyframes jump-natural-anim { 0% { transform: scale(1) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } /* Au sommet, le dé a déjà fait 1.5 tour et continue de tourner sans pause */ 50% { transform: scale(1.3) translateY(-140px) rotateX(540deg) rotateY(540deg) rotateZ(180deg); } /* À l'arrivée, il a complété 3 tours (1080°) sur chaque axe */ 100% { transform: scale(1) translateY(0) rotateX(1080deg) rotateY(1080deg) rotateZ(360deg); } } .jump { /* On utilise 'linear' pour la rotation ou une courbe plus tendue */ animation: jump-natural-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } #overlay-setup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); /* Un peu plus transparent pour voir la carte */ z-index: 2000; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; /* Laisse passer le clic vers le dé par défaut... */ } .setup-card h1 { font-family: var(--font-pirate); font-size: clamp(0.85rem, 8.5cqw, 1.7rem); letter-spacing: 0.5px; color: #7a3b0e; margin-top: 0; } .setup-card { background: #f4e4bc; border: 5px solid #8b4513; padding: 4cqw; border-radius: 15px; text-align: center; box-shadow: 0 0 30px black; margin-bottom: 1%; pointer-events: auto; /* ...mais réactive le clic sur la carte elle-même */ /* Largeur fixe (~1/3 de la planche) plutôt qu'une largeur maximale : le texte à l'intérieur (voir règles ci-dessous, en unités cqw calées sur CETTE carte) rétrécit pour tenir sans jamais avoir besoin de défiler, et reste donc toujours bien en dessous du dé. */ width: 33cqw; box-sizing: border-box; container-type: inline-size; font-size: clamp(0.6rem, 4.5cqw, 1rem); } .setup-buttons button { padding: 3cqw 4cqw; margin: 1.5cqw; cursor: pointer; background: #8b4513; color: white; border: none; border-radius: 5px; font-size: clamp(0.7rem, 5cqw, 1rem); font-weight: bold; transition: transform 0.2s; } .setup-buttons button:hover { transform: scale(1.1); background: #a8631f; } .nom-equipe-champ { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2.5cqw; margin: 3cqw 0; text-align: left; } .nom-equipe-champ input { width: 42cqw; flex-shrink: 0; padding: 1.5cqw 2cqw; border: 2px solid #8b4513; border-radius: 5px; font-size: clamp(0.7rem, 5cqw, 1rem); box-sizing: border-box; } .avatar-choix { display: flex; flex-wrap: wrap; gap: 1.5cqw; } .avatar-vignette { width: clamp(20px, 8cqw, 40px); height: clamp(20px, 8cqw, 40px); object-fit: contain; padding: 4px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.5); transition: transform 0.15s, border-color 0.15s; } .avatar-vignette:hover { transform: scale(1.12); } .avatar-vignette.avatar-selectionne { border-color: #cc4400; background: #fffbcc; } #btn-valider-noms { margin-top: 15px; padding: 3cqw 4cqw; cursor: pointer; background: #2e7d32; color: white; border: none; border-radius: 5px; font-size: clamp(0.7rem, 5cqw, 1rem); font-weight: bold; transition: transform 0.2s; } #btn-valider-noms:hover { transform: scale(1.1); } .instruction-etape { font-size: clamp(0.75rem, 5.5cqw, 1.15rem); } .label-paquet { display: block; text-align: left; margin: 0 auto; font-weight: bold; font-size: clamp(0.7rem, 5cqw, 1rem); } .btn-choisir-paquet { display: block; width: 100%; margin: 6px auto 20px auto; padding: 2cqw; border: 2px solid #8b4513; border-radius: 5px; font-size: clamp(0.65rem, 4.5cqw, 0.95rem); font-family: var(--font-sans); background: white; cursor: pointer; text-align: left; transition: background-color 0.15s; box-sizing: border-box; } .btn-choisir-paquet:hover:not(:disabled) { background: #fffbcc; } .btn-choisir-paquet:disabled { opacity: 0.6; cursor: not-allowed; } .btn-choisir-paquet.choisi { background: #fffbcc; font-weight: bold; border-color: #cc4400; } .modal-choix-paquet-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 4000; display: none; justify-content: center; align-items: center; } .modal-choix-paquet { background: #f4e4bc; border: 5px solid #8b4513; border-radius: 15px; padding: 3cqw 3.5cqw; /* Contrairement aux autres fenêtres (texte + boutons), celle-ci contient des contrôles natifs (select, recherche) qui ont une largeur minimale incompressible — la rétrécir à 1/3 de la planche les rend inutilisables. Elle garde donc une largeur plus généreuse ; seule la liste de résultats défile en interne (nombre de paquets/sauvegardes non borné), contrairement au reste du contenu qui rétrécit plutôt que de défiler. Largeur en % (pas cqw) : ce modal peut se retrouver imbriqué dans .setup-card, qui est elle-même un conteneur cqw — utiliser cqw ici se calerait alors sur .setup-card (33% de la planche) plutôt que sur la planche entière, donnant une fenêtre ridiculement étroite. Le % se cale correctement sur son propre conteneur flex (100% de la planche) peu importe l'imbrication. Même raisonnement pour le font-size, en vw plutôt que cqw. */ width: 55%; max-width: 700px; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 0 30px black; box-sizing: border-box; container-type: inline-size; font-size: clamp(0.7rem, 1.8vw, 1rem); } /* Variante étroite (~1/3 de la planche) pour les fenêtres simples qui réutilisent ce style mais n'ont ni select ni recherche (ex: Quitter). */ .modal-choix-paquet-etroit { width: 33%; max-width: none; font-size: clamp(0.6rem, 3vw, 1rem); } .modal-choix-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; gap: 15px; } .modal-choix-entete h2 { font-family: var(--font-pirate); color: #7a3b0e; margin: 0; font-size: clamp(0.85rem, 4.5cqw, 1.6rem); } .btn-fermer-modal { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #8b4513; line-height: 1; flex-shrink: 0; } .btn-fermer-modal:hover { color: #cc4400; } .modal-filtres { display: flex; gap: 1.5cqw; flex-wrap: wrap; margin-bottom: 15px; } .modal-filtres select, .modal-filtres input { padding: 1.2cqw 1.5cqw; border-radius: 6px; border: 2px solid #8b4513; font-family: var(--font-sans); font-size: 0.9em; box-sizing: border-box; } .modal-filtres input { flex: 1; min-width: 40%; } .modal-liste-paquets { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 4px 6px; /* jeu autour des cartes pour que le survol n'accroche pas les bords */ } .carte-paquet-choix { background: rgba(255, 255, 255, 0.6); border: 2px solid #8b4513; border-radius: 10px; padding: 12px 15px; margin: 0 2px 12px 2px; cursor: pointer; transition: transform 0.15s, background-color 0.15s; text-align: left; } .carte-paquet-choix:hover { transform: scale(1.01); background: #fffbcc; } .carte-paquet-choix .titre { font-family: var(--font-pirate); font-size: 1.1em; color: #4a2f13; } .carte-paquet-choix .meta { font-size: 0.8em; color: #7a5a2a; margin-top: 4px; } .badge-paquet { display: inline-block; background: #e8d9b8; border-radius: 5px; padding: 2px 8px; margin-right: 5px; font-size: 0.9em; } .carte-paquet-ligne-titre { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .carte-paquet-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .btn-favori-modal { background: none; border: none; cursor: pointer; font-size: 1.3em; color: #ccc; line-height: 1; padding: 0 4px; transition: transform 0.15s; } .btn-favori-modal.actif { color: #e8a800; } .btn-favori-modal:hover { transform: scale(1.2); } .modal-filtre-favoris { display: flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; white-space: nowrap; } .modal-filtre-favoris input { width: auto; } .btn-toggle-desc { background: none; border: none; cursor: pointer; font-size: 1em; color: #8b4513; flex-shrink: 0; padding: 2px 6px; transition: transform 0.2s; } .btn-toggle-desc:hover { color: #cc4400; } .carte-paquet-choix.description-ouverte .btn-toggle-desc { transform: rotate(180deg); } .description-repliable { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .carte-paquet-choix.description-ouverte .description-repliable { max-height: 200px; } .description-contenu { font-size: 0.85em; color: #4a2f13; font-style: italic; margin-top: 6px; } .site-liste-vide { text-align: center; color: #7a5a2a; padding: 30px; font-style: italic; } #btn-continuer-paquets { margin-top: 10px; padding: 3cqw 4cqw; cursor: pointer; background: #2e7d32; color: white; border: none; border-radius: 5px; font-size: clamp(0.7rem, 5cqw, 1rem); font-weight: bold; transition: transform 0.2s; } #btn-continuer-paquets:hover { transform: scale(1.1); } #btn-continuer-paquets:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .erreur-paquets { color: #cc2222; margin-top: 10px; font-weight: bold; display: none; font-size: clamp(0.65rem, 4.5cqw, 0.9rem); } .lien-creer-paquet { display: block; margin-top: 12px; color: #7a3b0e; font-size: clamp(0.65rem, 4.5cqw, 0.9rem); } .tirage-regle { font-size: clamp(0.7rem, 5.5cqw, 1.1rem); margin: 0 0 15px 0; font-weight: bold; } .tirage-invite { font-size: clamp(0.8rem, 6cqw, 1.3rem); font-weight: bold; color: #cc4400; margin: 10px 0; } /* --- Annonce de début de partie --- */ .annonce-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 2500; display: none; justify-content: center; align-items: center; } .annonce-carte { background: #f4e4bc; border: 6px solid #8b4513; border-radius: 15px; padding: 4cqw 5cqw; text-align: center; box-shadow: 0 0 40px black; font-family: var(--font-sans); /* Largeur fixe (~1/3 de la planche) et conteneur pour son propre texte (voir .setup-card) : tout rétrécit ensemble, jamais de défilement. */ width: 33cqw; box-sizing: border-box; container-type: inline-size; font-size: clamp(0.6rem, 4.2cqw, 1rem); animation: pop-annonce 0.4s ease-out; } .annonce-image-tresor { height: clamp(30px, 18cqw, 80px); object-fit: contain; margin-bottom: 10px; } .annonce-carte h2 { margin: 0 0 25px 0; font-size: clamp(0.85rem, 7.5cqw, 1.6rem); font-family: var(--font-sans); color: #7a3b0e; line-height: 1.4; } .annonce-carte h2.annonce-manuscrite { font-size: clamp(0.85rem, 7.5cqw, 1.6rem); font-family: var(--font-manuscrit); letter-spacing: 0.5px; line-height: 1.3; } /* --- Fenêtre d'activation d'un trésor --- */ #overlay-tresor-action { z-index: 3600; } .tresor-action-description { font-size: 1.1em; line-height: 1.5; margin-bottom: 15px; } .tresor-action-boutons { display: flex; gap: 2cqw; justify-content: center; flex-wrap: wrap; margin-top: 15px; } .tresor-action-souscription { font-weight: bold; margin: 15px 0 8px 0; } .kraken-choix-groupe { display: flex; gap: 1.5cqw; justify-content: center; flex-wrap: wrap; } .kraken-choix-equipe-btn { padding: 1.8cqw 2.8cqw; border: 2px solid #8b4513; border-radius: 20px; background: rgba(255, 255, 255, 0.85); cursor: pointer; font-family: var(--font-sans); font-size: inherit; opacity: 0.6; transition: transform 0.15s, background-color 0.15s, opacity 0.15s, box-shadow 0.15s; } .kraken-choix-equipe-btn:hover { transform: scale(1.05); opacity: 0.85; } .kraken-choix-equipe-btn.choisi { background: #fffbcc; border-color: #cc4400; opacity: 1; font-weight: bold; box-shadow: 0 0 0 3px rgba(204, 68, 0, 0.35); } .kraken-choix-equipe-btn.choisi::before { content: '✓ '; } .kraken-choix-couleur { padding: 1.8cqw 3.2cqw; border: 3px solid transparent; border-radius: 20px; cursor: pointer; color: white; font-weight: bold; font-family: var(--font-sans); font-size: inherit; opacity: 0.55; transition: transform 0.15s, border-color 0.15s, opacity 0.15s, box-shadow 0.15s; } .kraken-choix-couleur:hover { transform: scale(1.05); opacity: 0.8; } .kraken-choix-couleur.choisi { border-color: #fff; opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4); } .kraken-choix-couleur.choisi::before { content: '✓ '; } .kraken-rouge { background: #cc4400; } .kraken-bleue { background: #0044cc; } #btn-commencer { padding: 3cqw 5cqw; cursor: pointer; background: #2e7d32; color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 1.1em; transition: transform 0.2s; } #btn-commencer:hover { transform: scale(1.08); } @keyframes pop-annonce { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } #turn-indicator { width: min(500px, 40%); position: absolute; top: 25%; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.9); padding: clamp(8px, 1.2cqw, 15px); border: 3px solid #8b4513; border-radius: 10px; font-family: var(--font-sans); font-weight: bold; z-index: 50; font-size: clamp(0.8rem, 1.6cqw, 1.15rem); text-align: center; box-sizing: border-box; } /* En phase de jeu : 2 groupes de boîtes d'équipe, un de chaque côté du plateau, pour ne jamais chevaucher le logo au centre. */ .indicateur-groupe { position: absolute; top: 9%; display: flex; gap: 1cqw; /* Doit rester au-dessus de l'annonce (2500) et de la carte de question (3000) pour que les icônes de trésor restent cliquables pendant que ces fenêtres sont affichées ; reste sous la fenêtre d'activation d'un trésor (3600). */ z-index: 3100; } .indicateur-gauche { left: 5%; } .indicateur-droite { right: 5%; } .boite-equipe { width: clamp(110px, 13cqw, 200px); font-size: clamp(0.7rem, 1.3cqw, 1rem); text-align: center; transition: transform 0.2s, filter 0.2s, opacity 0.2s; } .boite-equipe .nom-equipe { background-image: url('../images/equipe-bg.png'); background-size: 100% 100%; padding: 1.1em 0.8em; font-family: var(--font-pirate); font-size: 1.15em; letter-spacing: 0.5px; color: #4a2f13; } .boite-equipe.actif { transform: scale(1.08); filter: drop-shadow(0 0 8px #cc4400); } .boite-equipe.actif .nom-equipe { color: #cc4400; } /* Les équipes qui ne jouent pas sont grisées pour faire ressortir celle qui joue */ .boite-equipe:not(.actif) { filter: grayscale(80%); opacity: 0.7; } .tresors-equipe { display: flex; gap: 0.25em; justify-content: center; margin-top: -0.5em; } .tresor-case { width: 2.2em; height: 2.2em; background: rgba(244, 228, 188, 0.9); border: 2px solid #8b4513; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4); transition: transform 0.15s; } .tresor-case:hover { transform: scale(1.15); } .tresor-case img { width: 1.9em; height: 1.9em; object-fit: contain; } /* --- Carte de question (péage) --- */ .carte-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 3000; display: none; justify-content: center; align-items: center; } .carte-parchemin { background: #f4e4bc; border: 6px solid #8b4513; border-radius: 15px; padding: 4cqw 5cqw; /* Largeur fixe (~1/3 de la planche) et conteneur pour son propre texte : tout rétrécit ensemble, jamais de défilement. */ width: 33cqw; text-align: center; box-shadow: 0 0 40px black; font-family: var(--font-sans); box-sizing: border-box; container-type: inline-size; font-size: clamp(0.6rem, 4cqw, 1rem); } .carte-parchemin.carte-rouge { border-color: #cc4400; } .carte-parchemin.carte-bleue { border-color: #0044cc; } .carte-entete { font-family: var(--font-pirate); font-size: clamp(0.95rem, 8cqw, 1.9rem); letter-spacing: 0.5px; margin-bottom: 15px; } .carte-question { font-family: var(--font-manuscrit); font-size: clamp(0.8rem, 6.5cqw, 1.5rem); letter-spacing: 0.5px; line-height: 1.4; margin-bottom: 25px; } .carte-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; } .carte-actions-principale { display: flex; justify-content: center; gap: 2.5cqw; } .carte-actions-principale button { padding: 3cqw 4cqw; cursor: pointer; border: none; border-radius: 8px; font-weight: bold; font-size: 1em; transition: transform 0.2s; } .carte-actions-principale button:hover { transform: scale(1.08); } .btn-bonne { background: #2e7d32; color: white; } .btn-mauvaise { background: #c62828; color: white; } .btn-afficher { background: transparent; color: #8b4513; border: 2px solid #8b4513; padding: 1.8cqw 3.5cqw; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 0.9em; transition: transform 0.2s, background-color 0.2s, color 0.2s; } .btn-afficher:hover { background: #8b4513; color: white; transform: scale(1.05); } .carte-reponse { font-family: var(--font-manuscrit); font-size: 1.2em; font-weight: bold; color: #cc5500; letter-spacing: 0.5px; margin-bottom: 10px; } .carte-explication { font-family: var(--font-manuscrit); font-size: 1.05em; color: #3a3a3a; letter-spacing: 0.5px; margin-bottom: 20px; padding-top: 10px; border-top: 1px dashed #8b4513; } /* --- Mise en évidence de la case cible avant le tirage --- */ #surbrillance-case { position: absolute; width: 9cqmin; height: 9cqmin; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 900; display: none; box-sizing: border-box; animation: pulse-surbrillance 1.2s ease-in-out infinite; } #surbrillance-case.surbrillance-rouge { border: 5px solid #cc4400; box-shadow: 0 0 20px #cc4400; } #surbrillance-case.surbrillance-bleue { border: 5px solid #0044cc; box-shadow: 0 0 20px #0044cc; } #surbrillance-case.surbrillance-jaune { border: 5px solid #e6c200; box-shadow: 0 0 20px #e6c200; } #surbrillance-case.surbrillance-arrivee { border: 5px solid #2e7d32; box-shadow: 0 0 20px #2e7d32; } @keyframes pulse-surbrillance { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; } } #btn-tirer-carte { position: absolute; transform: translate(-50%, 0); z-index: 1500; padding: 10px 18px; border-radius: 20px; cursor: pointer; font-weight: bold; background: #f4e4bc; border: 3px solid #8b4513; display: none; animation: bounce-btn-tirer 1s ease-in-out infinite; } #btn-tirer-carte:hover { background: #fff3d6; } @keyframes bounce-btn-tirer { 0%, 100% { transform: translate(-50%, 0) translateY(0); } 50% { transform: translate(-50%, 0) translateY(-6px); } } /* Les deux boutons de tirage de la case Arrivée (une carte de chaque couleur) */ .btn-tirer-arrivee { position: absolute; transform: translate(-50%, 0); z-index: 1500; width: 170px; padding: 10px 12px; border-radius: 20px; cursor: pointer; font-weight: bold; text-align: center; color: white; border: 3px solid #8b4513; display: none; animation: bounce-btn-tirer 1s ease-in-out infinite; } #btn-tirer-rouge { background: #cc4400; } #btn-tirer-rouge:hover { background: #e0551a; } #btn-tirer-bleue { background: #0044cc; } #btn-tirer-bleue:hover { background: #3366e0; } /* --- Boutons flottants aux coins du plateau (Quitter, Aide, Son) --- Positionnés en % à l'intérieur de #game-container (et non plus en position fixed par rapport à la fenêtre), pour rester bien calés sur les coins du plateau et garder une taille proportionnelle peu importe la taille de l'écran (petit portable ou grand TBI projeté). */ .btn-coin { padding: 0.5em 1em; background: rgba(139, 69, 19, 0.85); color: white; border: 2px solid #f4e4bc; border-radius: 20px; cursor: pointer; font-weight: bold; font-family: var(--font-sans); font-size: clamp(0.75rem, 1.4cqw, 1.05rem); transition: background-color 0.15s, transform 0.15s; } .btn-coin:hover { transform: scale(1.05); } #btn-quitter { position: absolute; top: 2%; right: 2.5%; z-index: 2100; } #btn-quitter:hover { background: #cc2222; } #barre-boutons-gauche { position: absolute; top: 2%; left: 2.5%; z-index: 2100; display: flex; gap: 0.6em; } #btn-aide:hover { background: #0057b8; } #btn-son:hover { background: #0057b8; } #btn-son.coupe { background: rgba(90, 90, 90, 0.85); } .champ-nom-sauvegarde { margin: 15px 0; text-align: left; } .champ-nom-sauvegarde label { display: block; font-weight: bold; margin-bottom: 5px; } .champ-nom-sauvegarde input { width: 100%; box-sizing: border-box; padding: 2cqw 2.5cqw; border: 2px solid #8b4513; border-radius: 5px; font-size: 1em; font-family: var(--font-sans); } .boutons-quitter { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .btn-action-quitter { padding: 2.5cqw; border: none; border-radius: 5px; font-weight: bold; font-family: var(--font-sans); font-size: 1em; cursor: pointer; transition: transform 0.15s; } .btn-action-quitter:hover { transform: scale(1.02); } .btn-action-quitter:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-sauvegarder-quitter { background: #2e7d32; color: white; } .btn-danger-quitter { background: #cc2222; color: white; } .btn-annuler-quitter { background: #e0d0a8; color: #4a2f13; } /* --- Reprendre une partie sauvegardée --- */ .liste-parties-sauvegardees { max-height: 26cqh; overflow-y: auto; overflow-x: hidden; padding: 4px 6px; } .carte-partie-sauvegardee { background: rgba(255, 255, 255, 0.6); border: 2px solid #8b4513; border-radius: 10px; padding: 12px 15px; margin: 0 2px 12px 2px; text-align: left; } .carte-partie-sauvegardee .titre { font-family: var(--font-pirate); font-size: 1.1em; color: #4a2f13; } .carte-partie-sauvegardee .meta { font-size: 0.8em; color: #7a5a2a; margin-top: 4px; } .carte-partie-sauvegardee .actions { display: flex; gap: 10px; margin-top: 10px; } .carte-partie-sauvegardee .actions button { padding: 8px 16px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; font-family: var(--font-sans); transition: transform 0.15s; } .carte-partie-sauvegardee .actions button:hover { transform: scale(1.05); } .btn-charger-partie { background: #2e7d32; color: white; } .btn-supprimer-partie { background: #cc2222; color: white; } .btn-retour-etape { margin-top: 10px; padding: 10px 20px; background: #e0d0a8; color: #4a2f13; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: transform 0.15s; } .btn-retour-etape:hover { transform: scale(1.05); }