/* Police "caractère unique" + lueur néon appliquées à tous les boutons du jeu */ button { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; letter-spacing: 0.6px; text-shadow: 0 0 3px rgba(255,255,255,0.45), 0 0 9px currentColor; } /* ====================================================================== V237 — LE CHOIX SE FAIT SUR LA TABLE ====================================================================== */ body.token-theme { --ch-brillance: 520; /* eclat d'une enseigne a prendre, en % */ --ch-cadence: 1.15s; /* cadence — VOLONTAIREMENT differente de la charge (5s) : deux effets de meme rythme se confondraient. */ --ch-souleve: 1.18; /* grossissement au sommet de la pulsation */ --ch-survol: 1.3; /* grossissement au survol */ --ch-camp: 300; /* eclat du plateau dont c'est le tour, en % */ } /* L'enseigne que l'on peut prendre : cliquable, et elle le dit. */ body.token-selection .token-node.ch-a-prendre { pointer-events: auto !important; cursor: pointer; opacity: 1 !important; text-decoration: none !important; animation: chAPrendre var(--ch-cadence) ease-in-out infinite; } @keyframes chAPrendre { 0%, 100% { box-shadow: 0 0 10px var(--chip, #888), 0 0 26px color-mix(in srgb, var(--chip, #888) 60%, transparent); transform: scale(1); } 50% { box-shadow: 0 0 calc(var(--ch-brillance) * .10px) var(--chip, #888), 0 0 calc(var(--ch-brillance) * .28px) var(--chip, #888), inset 0 0 16px color-mix(in srgb, var(--chip, #888) 70%, transparent); transform: scale(var(--ch-souleve)); } } body.token-selection .token-node.ch-a-prendre:hover { transform: scale(var(--ch-survol)); animation-play-state: paused; box-shadow: 0 0 calc(var(--ch-brillance) * .14px) var(--chip, #888), 0 0 calc(var(--ch-brillance) * .40px) var(--chip, #888); } /* Le camp dont c'est le tour. Selecteur avec identifiant : la regle du jeu cible les plateaux par id, il faut la battre (lecon de la V236). */ body.token-theme #board-player.ch-a-toi, body.token-theme #board-opponent.ch-a-toi { box-shadow: 0 0 calc(var(--ch-camp) * .10px) color-mix(in srgb, #fff 70%, transparent), inset 0 0 calc(var(--ch-camp) * .06px) color-mix(in srgb, #fff 40%, transparent) !important; } /* La fenetre passe en retrait : plus rien ne recouvre la table. Le bouton d'abandon reste atteignable — c'est la sortie de secours. */ body.token-theme.token-selection #token-pick-modal { background: transparent !important; pointer-events: none; } body.token-theme.token-selection #token-pick-modal .modal-content { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; } body.token-theme.token-selection #token-pick-modal h2, body.token-theme.token-selection #token-pick-modal #token-pick-subtitle, body.token-theme.token-selection #token-pick-modal #token-pick-choices { display: none !important; } body.token-theme.token-selection #token-pick-abandon { pointer-events: auto; opacity: .5; font-size: 1.3vh !important; } body.token-theme.token-selection #token-pick-abandon:hover { opacity: 1; } /* ====================================================================== V234 — NUIT SUR LES TAPIS TANT QU'AUCUNE ENSEIGNE N'EST PRISE Une dizaine de regles derivent de --board-glow : bordure, ombre interne, halo du plateau actif, degrade de bordure, filtres. Plutot que de les neutraliser une par une — en en oubliant forcement — on remplace la VALEUR de la variable par une teinte de nuit : tout ce qui en derive s'eteint d'un coup, y compris ce que je n'ai pas lu. .player-board porte deja transition: all 0.3s : l'allumage se fait donc en fondu a la prise, sans une ligne de plus. ====================================================================== */ body.token-theme { --rz-nuit: #0a1116; } /* V236 : la V234 posait la bonne idee avec un selecteur trop faible. Le jeu ecrit body.game-active #board-player -> specificite (1,1,1). Ma regle etait body.token-theme .player-board.rz-sans-enseigne -> (0,3,1). Un identifiant l'emporte sur n'importe quel nombre de classes : la regle du jeu gagnait, et les plateaux arrivaient allumes. On reprend donc le meme identifiant, avec deux classes en plus -> (1,3,1). On substitue toujours la VARIABLE, jamais la propriete : la bordure et l'ombre du jeu sont !important, aucune surcharge de propriete ne les battrait. Mais elles LISENT var(--board-glow) — et cette variable, on peut la redefinir sur le meme element. Le !important s'applique alors a notre valeur. On ne se bat pas contre les regles, on change ce qu'elles lisent. */ body.token-theme.game-active #board-player.rz-sans-enseigne, body.token-theme.game-active #board-opponent.rz-sans-enseigne, body.token-theme #board-player.rz-sans-enseigne, body.token-theme #board-opponent.rz-sans-enseigne { --board-glow: var(--rz-nuit); --board-glow-2: var(--rz-nuit); } /* Le fond de scene, cote par cote. */ body.token-theme.rz-nuit-haut { --tk-a: var(--rz-nuit); } body.token-theme.rz-nuit-bas { --tk-b: var(--rz-nuit); } /* ====================================================================== V233 — AMORCAGE D'UNE MANCHE. Valeurs validees en atelier. ====================================================================== */ body.token-theme { --am-charge: 5s; /* respiration d'une enseigne libre */ --am-charge-int: 420; /* intensite de la charge, en % */ --am-vidage: .45s; /* temps que met l'enseigne a se calmer */ --am-flux: 1.1s; /* descente du courant */ --am-onde: 120; /* longueur de l'impulsion, en px */ --am-allum: .8s; /* fondu d'allumage du tapis */ --am-retard: 55; /* retard du tapis sur le flux, en % */ --am-eteint: 8; /* ce qu'on voit d'un reseau non alimente, en % */ } /* Le tapis non alimente : eteint, mais pas absent. Reglable en une valeur. */ body.token-theme .rz-morte { opacity: calc(var(--am-eteint) / 100) !important; } /* L'allumage est un fondu, pas un basculement sec. */ body.token-theme .rz-colonne, body.token-theme .rz-piste { transition: opacity var(--am-allum) ease, stroke-width var(--am-allum) ease; } /* CHARGEE : une enseigne encore libre, pendant la selection uniquement. Hors de cette phase, .eteint signifie grillee — et doit le rester. */ body.token-selection .token-node.eteint { opacity: 1 !important; text-decoration: none !important; border-color: var(--chip, #888) !important; color: var(--chip, #888) !important; animation: amCharge var(--am-charge) ease-in-out infinite; cursor: pointer; } @keyframes amCharge { 0%, 100% { box-shadow: 0 0 8px var(--chip, #888), 0 0 20px color-mix(in srgb, var(--chip, #888) 55%, transparent); transform: scale(1); } 50% { box-shadow: 0 0 calc(var(--am-charge-int) * .12px) var(--chip, #888), 0 0 calc(var(--am-charge-int) * .30px) color-mix(in srgb, var(--chip, #888) 70%, transparent), inset 0 0 14px color-mix(in srgb, var(--chip, #888) 60%, transparent); transform: scale(1.08); } } /* VIDEE : elle vient d'etre prise. Elle alimente, elle n'attend plus. */ body.token-theme .token-node.am-videe { animation: amVidage var(--am-vidage) ease-out; } @keyframes amVidage { 0% { box-shadow: 0 0 calc(var(--am-charge-int) * .12px) var(--chip, #888), 0 0 calc(var(--am-charge-int) * .30px) var(--chip, #888); transform: scale(1.14); } 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--chip, #888) 45%, transparent); transform: scale(1); } } /* L'impulsion qui descend du jeton vers le camp qui l'a pris. */ #reseau-token .am-flux { fill: none; stroke: #fff; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 9px currentColor); } /* ====================================================================== V231 — ECLATS DE PROGRESSION. Valeurs validees en atelier. ====================================================================== */ body.token-theme { --ec-courbe: 1; /* <1 : l'ecart se creuse tot ; >1 : tout a la fin */ --ec-base: 30; /* opacite au 1er palier, en % */ --ec-ep-max: 5; /* epaisseur au palier 5, en multiples */ --ec-petit: 420; /* petit eclat : intensite, en % */ --ec-petit-duree: 1.35s; --ec-grand: 430; /* vrai eclat : intensite, en % */ --ec-grand-duree: 1.8s; --ec-onde: 150; /* portee de l'onde, en px */ --ec-onde-duree: .9s; --ec-badge: 29px; --ec-badge-recul: 16px; --ec-badge-duree: .5s; } /* L'intensite d'une colonne suit son avancement, calcule au trace. */ #reseau-token .rz-colonne { stroke-width: calc(var(--rz-contour) * var(--ec-ep, 1)); opacity: var(--ec-op, .1); } /* Le petit eclat : bref et local — il peut se produire quatre fois. */ .ec-petit { animation: ecPetit var(--ec-petit-duree) ease-out; } @keyframes ecPetit { 0% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .2) currentColor); } 32% { filter: drop-shadow(0 0 calc(var(--rz-neon) * var(--ec-petit) / 100) currentColor) brightness(1.5); } 100% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .2) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * .55) currentColor); } } /* Le vrai eclat : il a le droit d'occuper l'ecran une seconde. */ .ec-grand { animation: ecGrand var(--ec-grand-duree) ease-out; } @keyframes ecGrand { 0% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .2) currentColor); stroke-width: calc(var(--rz-contour) * var(--ec-ep, 1)); } 16% { filter: drop-shadow(0 0 calc(var(--rz-neon) * var(--ec-grand) / 100) currentColor) brightness(2.1); stroke-width: calc(var(--rz-contour) * var(--ec-ep, 1) * 1.9); } 100% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .2) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * .55) currentColor); stroke-width: calc(var(--rz-contour) * var(--ec-ep, 1)); } } /* L'onde part du contour et se propage vers l'exterieur. */ .ec-onde { fill: none; stroke-width: 2px; opacity: 0; animation: ecOnde var(--ec-onde-duree) ease-out; } @keyframes ecOnde { 0% { opacity: .9; stroke-width: 3px; } 100% { opacity: 0; stroke-width: .5px; transform: scale(var(--ec-echelle, 1.5)); } } /* Une fois accomplie, la colonne respire — elle ne retombe pas au repos. */ .ec-accompli { animation: ecRespire var(--rz-pulsation) ease-in-out infinite; } @keyframes ecRespire { 0%,100% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .3) currentColor); } 50% { filter: drop-shadow(0 0 calc(var(--rz-neon) * 2.2) currentColor) brightness(1.4); } } /* Le badge : pose dans le plan du jeu, PAS une fenetre. Il ne recouvre rien d'utile et ne bloque aucun clic hors de lui-meme. */ #rz-badges { position: absolute; inset: 0; z-index: 6; pointer-events: none; } /* ==================================================================== V246 — ÉCHELLE DE LUMINOSITÉ, SOUFFLE, PANNEAU BONUS ==================================================================== */ /* Le palier de gain de la colonne. L'opacité et l'épaisseur sont déjà pilotées par --ec-op / --ec-ep depuis le tracé ; ici on ajoute ce que le calcul ne peut pas faire : la nervosité de l'animation. */ .bn-p1 { animation: none; } .bn-p3 { animation: ecRespire calc(var(--rz-pulsation) * 0.75) ease-in-out infinite; } .bn-p5, .bn-p10 { animation: bnEclat 1.1s ease-in-out infinite; } @keyframes bnEclat { 0%,100% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .6) currentColor); } 50% { filter: drop-shadow(0 0 calc(var(--rz-neon) * 2.2) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * 4) currentColor) brightness(1.6); } } /* Le souffle encaissé par le plateau d'en face quand une combinaison met fin à la partie. Volontairement bref : c'est un coup, pas un état. */ .bn-souffle { animation: bnSouffle 1.5s cubic-bezier(.2,.9,.3,1); } @keyframes bnSouffle { 0% { transform: none; filter: none; } 8% { transform: translateX(-6px) scale(1.015); filter: brightness(2.4) saturate(0.2); } 16% { transform: translateX(7px) scale(0.985); filter: brightness(0.35); } 24% { transform: translateX(-5px); filter: brightness(1.8); } 34% { transform: translateX(4px) scale(1.008); filter: brightness(0.55); } 46% { transform: translateX(-2px); filter: brightness(1.25); } 60% { transform: translateX(1px); filter: brightness(0.85); } 100% { transform: none; filter: none; } } /* ---- Bouton et panneau Bonus ---- */ #bn-bouton { position: absolute; top: 0.6vh; left: 0.8vw; z-index: 13; display: flex; align-items: center; gap: 0.4vw; padding: 0.5vh 0.8vw; cursor: pointer; background: rgba(4, 12, 16, 0.9); color: var(--w-text-main); border: 1px solid var(--board-glow, var(--neon-cyan)); border-radius: 6px; font-family: inherit; font-size: 1.25vh; font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 0 10px -2px var(--board-glow, var(--neon-cyan)); } #bn-bouton:hover { background: rgba(0, 229, 255, 0.18); } #bn-compteur { padding: 0 0.4vw; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--w-text-muted); font-variant-numeric: tabular-nums; } #bn-compteur.a-des-points { background: var(--w-gold); color: #201400; } body:not(.token-theme) #bn-bouton, body:not(.token-theme) #bn-panneau { display: none; } #bn-panneau { position: absolute; top: 4.4vh; left: 0.8vw; z-index: 14; width: 27vw; max-width: 420px; max-height: 62vh; overflow-y: auto; display: none; box-sizing: border-box; padding: 0.8vh 0.9vw 1vh; background: rgba(3, 10, 14, 0.97); color: var(--w-text-main); border: 1px solid var(--board-glow, var(--neon-cyan)); border-radius: 8px; box-shadow: 0 0 26px rgba(0,0,0,0.9); font-size: 1.25vh; line-height: 1.45; } #bn-panneau.ouvert { display: block; } .bn-titre { display: flex; justify-content: space-between; align-items: center; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--board-glow, var(--neon-cyan)); border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 0.5vh; margin-bottom: 0.5vh; } .bn-total { color: var(--w-gold); font-size: 1.6vh; } .bn-ligne { display: flex; align-items: flex-start; gap: 0.6vw; padding: 0.5vh 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .bn-ligne.est-acquis { background: rgba(255, 170, 0, 0.07); } .bn-col { flex: 0 0 auto; width: 2.4vw; min-width: 26px; font-weight: 800; color: var(--w-text-muted); } .bn-corps { flex: 1 1 auto; min-width: 0; } .bn-ok { color: var(--w-gold); } .bn-rien { color: var(--w-text-muted); font-style: italic; } .bn-cible { display: block; color: #cfe9f2; } .bn-cible b { color: #fff; } .bn-cible em { color: var(--neon-vert); font-style: normal; font-weight: 800; letter-spacing: 0.04em; } .bn-libres { flex: 0 0 auto; color: var(--w-text-muted); text-align: right; } .bn-libres small { display: block; font-size: 0.9vh; } .bn-note { margin-top: 0.6vh; color: var(--w-text-muted); font-size: 1vh; line-height: 1.4; } @media (prefers-reduced-motion: reduce) { .bn-p3, .bn-p5, .bn-p10, .bn-souffle { animation: none !important; } } /* V245 : sélecteur de taille d'un tournoi, visible du seul créateur. */ .lobby-tour-taille { margin-left: 0.6vw; padding: 0.2vh 0.4vw; background: rgba(0,0,0,0.5); color: var(--w-gold); border: 1px solid var(--w-gold); border-radius: 4px; font-size: 1.15vh; font-family: inherit; cursor: pointer; } /* ==================================================================== V244 — RENDRE LES BONUS EVIDENTS ==================================================================== */ /* Le gain, en clair, dans le badge : c'est l'information que le joueur cherche, elle ne doit pas etre repliee derriere le survol. */ .rz-badge .rz-gain { font-weight: 900; color: #fff; background: var(--cb); color: #04080b; border-radius: calc(var(--ec-badge) / 2); padding: 0 6px; margin-left: 2px; font-size: calc(var(--ec-badge) * .40); } /* Un badge qui vient d'apparaitre respire quelques secondes. */ .rz-badge-neuf { animation: ecBadge var(--ec-badge-duree) cubic-bezier(.2,1.4,.4,1), rzBadgeAppel 1.1s ease-in-out 3; } @keyframes rzBadgeAppel { 0%,100% { box-shadow: 0 0 10px var(--cb), 0 0 26px color-mix(in srgb, var(--cb) 55%, transparent); } 50% { box-shadow: 0 0 20px var(--cb), 0 0 54px var(--cb); } } /* Le "+N" qui jaillit de la colonne au moment ou le bonus tombe. */ .rz-pop { position: absolute; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-weight: 900; font-size: 4.2vh; line-height: 1; color: var(--cb); text-shadow: 0 0 10px var(--cb), 0 0 28px var(--cb), 0 2px 4px #000; pointer-events: none; z-index: 7; animation: rzPop 1.6s cubic-bezier(.15,1.2,.35,1) forwards; } @keyframes rzPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 34% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1.05); } } /* Le sigle x2, dore, permanent tant que la couleur est tenue. */ .rz-x2 { position: absolute; top: 0.6vh; right: 0.8vw; z-index: 12; display: flex; align-items: center; justify-content: center; width: 4.6vh; height: 4.6vh; border-radius: 50%; font-family: Georgia, 'Times New Roman', serif; font-weight: 900; font-size: 2.1vh; letter-spacing: -0.02em; color: #2a1c00; background: radial-gradient(circle at 38% 32%, #ffe9a8 0%, #ffc23d 46%, #d99100 100%); border: 2px solid #ffe9a8; box-shadow: 0 0 12px rgba(255,194,61,0.9), 0 0 30px rgba(255,194,61,0.55), inset 0 -2px 6px rgba(0,0,0,0.3); opacity: 0; transform: scale(.4) rotate(-25deg); transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.5,.4,1); pointer-events: none; } .rz-x2.on { opacity: 1; transform: scale(1) rotate(0deg); animation: rzX2 2.4s ease-in-out infinite; } @keyframes rzX2 { 0%,100% { box-shadow: 0 0 12px rgba(255,194,61,0.9), 0 0 30px rgba(255,194,61,0.55), inset 0 -2px 6px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 20px rgba(255,194,61,1), 0 0 52px rgba(255,194,61,0.8), inset 0 -2px 6px rgba(0,0,0,0.3); } } /* Le sigle n'appartient qu'au mode Token. */ body:not(.token-theme) .rz-x2 { display: none; } @media (prefers-reduced-motion: reduce) { .rz-pop { animation-duration: .01s; } .rz-x2.on, .rz-badge-neuf { animation: none !important; } } body:not(.token-theme) #rz-badges { display: none; } .rz-badge { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 5px; height: var(--ec-badge); padding: 0 9px 0 6px; border-radius: calc(var(--ec-badge) / 2); background: var(--w-bg-app, #04080b); color: var(--cb); border: 1.6px solid var(--cb); box-shadow: 0 0 10px var(--cb), 0 0 26px color-mix(in srgb, var(--cb) 55%, transparent); font-size: calc(var(--ec-badge) * .42); font-weight: 800; white-space: nowrap; cursor: default; transform: translate(-50%, -50%); animation: ecBadge var(--ec-badge-duree) cubic-bezier(.2,1.4,.4,1); } @keyframes ecBadge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* L'interactivite demandee : on peut y revenir apres coup, au lieu de devoir lire un message qui s'efface. */ .rz-badge:hover { transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 0 16px var(--cb), 0 0 40px var(--cb); } .rz-badge .rz-detail { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .28s ease, opacity .2s ease; } .rz-badge:hover .rz-detail { max-width: 200px; opacity: 1; } /* ====================================================================== V230 — LA BANDE DE ROUTAGE Le rail recoit 12vh ; les cartes rendent exactement 6vh par plateau. grid-h = 4 x overlap + c-h : la formule est verifiee avant et apres. avant : 4 x 5.8 + 16.5 = 39.7vh apres : 4 x 4.93 + 14.0 = 33.7vh (facteur 0.849) 2 x 6vh rendus = 12vh pris : la page ne peut pas deborder. Uniquement en mode Token, en partie, et en bureau paysage — le seul contexte ou la place existe. ====================================================================== */ @media (min-width: 1024px) and (orientation: landscape) { body.token-theme.game-active { --c-w: min(10vh, 7.65vw); --c-h: min(14vh, 10.7vw); --c-overlap: min(4.93vh, 3.74vw); --grid-h: min(33.7vh, 25.7vw); } body.token-theme.game-active .battle-line { height: 12vh; margin: 0; /* Le filet gris d'origine est remplace par l'epine du reseau, qui enfile les spheres a leur ordonnee exacte. */ background: transparent; } } /* ====================================================================== V229 — RESEAU NEON DU MODE TOKEN Valeurs validees en atelier. Tout est sous body.token-theme : les autres modes ne voient rien de ce qui suit. ====================================================================== */ body.token-theme { --rz-piste: 1.8px; --rz-contour: 2.4px; --rz-virage: 10px; --rz-neon: 20px; --rz-diffusion: 100; --rz-coeur: 55; --rz-pastille: 4px; --rz-equerre: 22px; --rz-colmarge: 5px; --rz-colrayon: 8px; --rz-courant: 6s; --rz-impulsion: 150; --rz-brillance: 360; --rz-pulsation: 3.6s; --rz-repos: 100; --rz-encours: 100; --rz-ep-encours: 1.5; --rz-ep-bonus: 2.2; --rz-eteinte: 16; } /* Le calque doit se positionner par rapport au conteneur de jeu. On ne touche a .game-wrapper QUE dans ce mode, pour ne rien deplacer ailleurs. */ body.token-theme .game-wrapper { position: relative; } /* V230 : z-index 5, AU-DESSUS des plateaux. .player-board porte un fond opaque et un backdrop-filter, qui creent un contexte d'empilement ; a z-index auto et venant apres dans le document, il recouvrait entierement le calque. Les contours de plateau restaient seuls visibles car leur halo deborde vers l'exterieur. Sans risque pour les cartes : les pistes s'arretent au bord du contour de colonne et n'en traversent aucune. */ #reseau-token { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; display: none; } body.token-theme #reseau-token { display: block; } /* V230 : la regle sur .board-layout a ete retiree — le jeu la posait deja, et elle contribuait a masquer le reseau. */ #reseau-token path, #reseau-token circle { vector-effect: non-scaling-stroke; } .rz-piste { fill: none; stroke-width: var(--rz-piste); stroke-linecap: round; stroke-linejoin: round; } /* Le coeur : un trait clair et fin POSE SUR la piste. Sans lui, un neon n'est qu'une trace floue ; c'est le coeur qui lui donne son tranchant. */ .rz-coeur { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: calc(var(--rz-piste) * .42); opacity: calc(var(--rz-coeur) / 100); } .rz-contour { fill: none; stroke-width: var(--rz-contour); stroke-linecap: round; stroke-linejoin: round; opacity: .6; } .rz-equerre { fill: none; stroke-width: calc(var(--rz-contour) * 1.3); stroke-linecap: round; stroke-linejoin: round; opacity: .8; } .rz-colonne { fill: none; stroke-width: var(--rz-contour); opacity: calc(var(--rz-repos) / 100); } .rz-colonne.rz-encours { opacity: calc(var(--rz-encours) / 100); stroke-width: calc(var(--rz-contour) * var(--rz-ep-encours)); } .rz-colonne.rz-bonus { opacity: 1; stroke-width: calc(var(--rz-contour) * var(--rz-ep-bonus)); animation: rzBrille var(--rz-pulsation) ease-in-out infinite; } .rz-piste.rz-repos { opacity: calc(var(--rz-repos) / 100); } .rz-piste.rz-encours { opacity: calc(var(--rz-encours) / 100); stroke-width: calc(var(--rz-piste) * var(--rz-ep-encours)); } .rz-piste.rz-bonus { opacity: 1; stroke-width: calc(var(--rz-piste) * var(--rz-ep-bonus)); animation: rzBrille var(--rz-pulsation) ease-in-out infinite; } .rz-pulse { fill: none; stroke: #fff; stroke-width: calc(var(--rz-piste) * .9); stroke-linecap: round; stroke-linejoin: round; animation: rzCourant var(--rz-courant) linear infinite; } @keyframes rzCourant { to { stroke-dashoffset: 0; } } /* Un vrai neon a plusieurs lueurs de rayons croissants, pas une seule. */ @keyframes rzBrille { 0%, 100% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .18 * var(--rz-diffusion) / 100) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * .5 * var(--rz-diffusion) / 100) currentColor); } 50% { filter: drop-shadow(0 0 calc(var(--rz-neon) * .3 * var(--rz-diffusion) / 100) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * var(--rz-brillance) / 100) currentColor) brightness(1.35); } } .rz-halo { filter: drop-shadow(0 0 calc(var(--rz-neon) * .16 * var(--rz-diffusion) / 100) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * .45 * var(--rz-diffusion) / 100) currentColor) drop-shadow(0 0 calc(var(--rz-neon) * 1.1 * var(--rz-diffusion) / 100) currentColor); } /* Gravee mais pas alimentee : le cuivre existe, le courant n'y passe pas. */ .rz-eteinte { opacity: calc(var(--rz-eteinte) / 100) !important; stroke: #4a5560 !important; animation: none !important; filter: none !important; } .rz-morte { opacity: .07 !important; animation: none !important; filter: none !important; } /* ====================================================================== LOGO DE CONNEXION (V227) — seul DJINKI brille. Valeurs issues de l'atelier valide par Angelos. ====================================================================== */ :root { /* ================================================================== V235 — PALETTE NEON. Ces quatre couleurs etaient ecrites en dur 74 fois dans la feuille de style, dont une cinquantaine dans des regles globales : aucun mode ne pouvait donc avoir sa propre identite, il ne pouvait que recouvrir celle de base, regle par regle. Elles sont desormais pilotables. Les valeurs sont INCHANGEES : cette version ne modifie strictement rien a l'ecran. ================================================================== */ --neon-vert: #39ff14; --neon-rose: #ff0055; --neon-cyan: #00e5ff; --neon-or: #ffaa00; --lg-coupe: 53.5%; /* hauteur ou s'arrete DJINKI */ --lg-douceur: 0%; /* degrade de la coupe (0 = franc) */ --lg-halo: 80px; /* rayon du halo */ --lg-halo-op: 1; /* intensite du halo (100%) */ --lg-lumi: 1.06; /* luminosite (106%) */ /* Taille CONSERVEE telle qu'elle etait : l'atelier proposait 64vw par defaut, ce qui aurait plus que double le logo. Une seule valeur a changer ici si vous le souhaitez finalement plus grand. */ --lg-largeur: 360px; /* RIVERS etant masque, sa place resterait vide sous le logo. On remonte donc ce qui suit d'exactement la hauteur cachee : hauteur image = largeur x 1143/2048 = largeur x 0.558 part cachee = 1 - 0.535 = 0.465 -> 0.558 x 0.465 = 0.26 Le halo, lui, deborde volontairement par-dessus. */ --lg-remontee: calc(var(--lg-largeur) * -0.26); } /* L'ENVELOPPE porte le filtre. Elle n'est PAS masquee : le halo qu'elle fabrique peut donc s'etendre sous la coupe au lieu d'y etre tranche. */ #login-logo-enveloppe { display: inline-block; line-height: 0; width: var(--lg-largeur); max-width: 70vw; margin-bottom: var(--lg-remontee); /* FIX : le masque CSS cache l'image visuellement mais pas sa zone cliquable, qui reste celle de l'image entière (non coupée). Avec la marge négative ci-dessus, la partie invisible de l'image déborde par-dessus les boutons du dessous et intercepte le clic avant qu'il n'atteigne le vrai bouton. Purement décoratif : ne doit jamais capter d'interaction. */ pointer-events: none; } /* V251 : les boutons/liens de TOUT l'ecran de connexion (pas seulement le choix initial) reprennent la meme charte que le fond -- sans ca, changer d'ecran (Se connecter, Creer un compte...) faisait retomber sur le style rouge par defaut, incoherent avec le reste. */ #login-content-wrap .login-input { padding: 1.1vh 1.2vh; border-radius: 16px; border: 1px solid #ff4d4d; background: rgba(0,0,0,0.53); color: #ffffff; font-family: inherit; font-size: 1.6vh; width: 220px; box-shadow: 0 0 0px #ff4d4d; box-sizing: border-box; } #login-content-wrap .login-input::placeholder { color: #999999; opacity: 1; } #login-content-wrap .login-input:focus { outline: none; border-color: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; } #login-content-wrap .btn { font-family: Georgia, serif; color: #ffffff; background: rgba(0,0,0,0.52); border: 3px solid #ff4d4d; border-radius: 40px; box-shadow: 0 0 8px #ff4d4d; padding: 2.3vh 0vw; font-size: calc(1.8vh * 1.18); min-width: calc(220px * 1.18); } #login-content-wrap .btn:hover { background: rgba(0,0,0,0.67); } .login-logo-glow { filter: brightness(var(--lg-lumi)) drop-shadow(0 0 var(--lg-halo) rgba(255,255,255,var(--lg-halo-op))); opacity: 1; } /* L'IMAGE porte le masque : elle ne laisse voir que DJINKI. */ #login-logo-img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--lg-coupe) - var(--lg-douceur)), transparent calc(var(--lg-coupe) + var(--lg-douceur))); mask-image: linear-gradient(to bottom, #000 calc(var(--lg-coupe) - var(--lg-douceur)), transparent calc(var(--lg-coupe) + var(--lg-douceur))); } .login-logo-pulse { animation: loginLogoPulse 0.65s ease; } @keyframes loginLogoPulse { 0% { filter: brightness(var(--lg-lumi)) drop-shadow(0 0 var(--lg-halo) rgba(255,255,255,var(--lg-halo-op))); transform: scale(1); } 40% { filter: brightness(calc(var(--lg-lumi) * 1.5)) drop-shadow(0 0 calc(var(--lg-halo) * 1.6) rgba(255,255,255,1)); transform: scale(1.05); } 100% { filter: brightness(var(--lg-lumi)) drop-shadow(0 0 var(--lg-halo) rgba(255,255,255,var(--lg-halo-op))); transform: scale(1); } } /* Favoris + info par mode */ .lobby-mode-wrap { position: relative; display: inline-block; } /* z-index 30 : la tuile survolée monte à 6 et recouvrait l'étoile, qui devenait invisible et surtout inaccessible au clic. Les outils doivent rester au-dessus de la tuile dans tous les états. */ .lobby-mode-tools { position: absolute; top: 0.8vh; right: 0.9vh; display: flex; gap: 0.5vh; z-index: 30; } .mode-star, .mode-info { cursor: pointer; user-select: none; width: 2.4vh; height: 2.4vh; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; font-size: 1.4vh; line-height: 1; border: 1px solid rgba(255,255,255,0.25); } .mode-star.is-fav { color: var(--w-gold, #ffcc55); } .mode-star:not(.is-fav) { color: #cfd3dc; } /* Repère visuel au survol de l'étoile elle-même : sans ça, sur une tuile très colorée, rien n'indiquait qu'elle était cliquable. */ .mode-star:hover { background: rgba(0,0,0,0.8); border-color: var(--w-gold, #ffcc55); transform: scale(1.12); } .mode-star { transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .mode-info { color: #cfd3dc; } #lobby-favorites-bar { display: none; flex-wrap: wrap; justify-content: center; gap: 1vh; max-width: 92vw; margin: 0 auto 1.5vh; } .lobby-fav-btn { display: flex; align-items: center; gap: 0.6vh; padding: 1vh 1.6vh; border-radius: 20px; background: var(--w-bg-darker); border: 1px solid var(--w-gold, #ffcc55); color: var(--w-gold, #ffcc55); font-size: 1.4vh; font-weight: 700; cursor: pointer; } /* Logo du menu "vivant" : les lettres arrivent en serpentin (une seule origine commune, trajectoire courbe) et se réunissent sans à-coup à leur place d'origine. */ @keyframes menuLogoSnake { 0% { transform: translate(var(--sx), var(--sy)) rotate(var(--srot)) scale(0.55); opacity: 0; } 22% { opacity: 1; } 58% { transform: translate(var(--mx), var(--my)) rotate(calc(var(--srot) * 0.25)) scale(1.06); } 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } } .menu-logo-piece { opacity: 0; will-change: transform, opacity; /* Couleurs animables : une variable CSS ordinaire change d'un coup: en la déclarant via @property avec un type , le navigateur sait l'interpoler, ce qui permet au néon du logo et des flèches de fondre progressivement d'une teinte à l'autre. Navigateur sans @property : la couleur change instantanément, sans rien casser. */ @property --logo-glow { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, 0.92); } @property --carousel-accent { syntax: ''; inherits: true; initial-value: #8b93a5; } /* La transition est portée par les conteneurs : les enfants héritent de la valeur en cours d'interpolation à chaque image. */ /* V173 : la teinte est desormais posee morceau par morceau (le logo est bicolore sur l'accueil), la transition doit donc vivre sur les morceaux et plus seulement sur le conteneur — sinon le passage d'une couleur a l'autre serait instantane. */ #menu-logo-img, .menu-logo-piece { transition: --logo-glow 0.55s ease, --logo-halo-a 0.55s ease, --logo-halo-b 0.55s ease; } /* La lueur deborde volontairement de la boite du logo : aucun ancetre ne doit la rogner. overflow:visible est explicite pour que le point reste vrai meme si une regle ajoutee plus tard posait un overflow sur ces conteneurs. */ #menu-logo-img, #start-container { overflow: visible; } /* ---- VOILE LUMINEUX ---- Un drop-shadow, meme tres large, reste une ombre portee : son rayon utile est limite et il coute cher a peindre. Pour que la lumiere habille vraiment le noir autour du mot, on ajoute derriere le logo deux halos peints — un par couleur — dans une boite volontairement bien plus grande que le logo lui-meme. Un degrade radial s'eteint tout seul : aucun bord, aucun rectangle, et un cout de rendu negligeable compare a un flou de 150 px. La boite deborde de 45 % de la largeur de chaque cote et de 130 % de la hauteur en haut comme en bas — soit environ trois fois la surface du logo. */ @property --logo-halo-a { syntax: ''; inherits: true; initial-value: rgba(255,255,255,0.9); } @property --logo-halo-b { syntax: ''; inherits: true; initial-value: rgba(255,255,255,0.9); } #menu-logo-img::before { content: ""; position: absolute; left: -45%; right: -45%; top: -130%; bottom: -130%; pointer-events: none; /* Repli sans color-mix() : un voile blanc tres discret plutot que rien. */ background: radial-gradient(58% 52% at 30% 50%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%), radial-gradient(58% 52% at 70% 50%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%); background: radial-gradient(58% 52% at 30% 50%, color-mix(in srgb, var(--logo-halo-a, #ffffff) 36%, transparent) 0%, color-mix(in srgb, var(--logo-halo-a, #ffffff) 13%, transparent) 38%, transparent 72%), radial-gradient(58% 52% at 70% 50%, color-mix(in srgb, var(--logo-halo-b, #ffffff) 36%, transparent) 0%, color-mix(in srgb, var(--logo-halo-b, #ffffff) 13%, transparent) 38%, transparent 72%); } /* Le voile est pose avant les lettres dans l'ordre du document : elles restent donc au-dessus, sans avoir a jouer avec z-index (un z-index negatif l'aurait fait passer derriere le fond de la page). */ /* Logo du menu passé en blanc pour reprendre l'identité de l'écran de connexion. grayscale() efface la teinte mais conserve les dégradés internes (les volutes gravées restent lisibles), brightness() ramène le trait à un blanc franc, et les trois lueurs blanches reproduisent le halo néon du logo de connexion. L'animation serpentin n'est pas touchée : elle vit sur transform/opacity, indépendamment de ce filtre. Pour revenir au logo coloré : remettre le bloc d'origine ci-dessous. saturate(1.35) brightness(1.08) drop-shadow(0 0 4px var(--glow,#fff)) ... (10px, 22px) Les couleurs par lettre restent posées en --glow sur chaque image. */ /* V171 : brightness(1.5) saturait le trait (le blanc partait en bouillie et mangeait les volutes gravees) et les halos de 14/30 px noyaient le contour. L'image fournie est deja blanche et son fond est passe en transparence, donc ni grayscale() ni correction de luminosite ne sont necessaires : on garde le trait tel quel et on ne pose que le halo, plus serre. Le halo prend toujours --logo-glow, donc la couleur du mode selectionne, exactement comme avant. */ /* V175 : quatre couches de lueur au lieu de trois, la derniere tres large et tres diluee — c'est elle qui deborde de la boite et eclaire l'ecran autour du mot. Chaque drop-shadow s'applique au resultat du precedent : les rayons se cumulent, la lueur porte donc bien au-dela des 75 px annonces. Le dosage passe par color-mix() : sans lui les quatre couches prendraient la teinte a pleine opacite et le halo redeviendrait un bloc opaque. La declaration du dessus sert de repli aux navigateurs qui ignorent color-mix(). */ filter: drop-shadow(0 0 2px rgba(255,255,255,0.90)) drop-shadow(0 0 9px rgba(255,255,255,0.50)) drop-shadow(0 0 28px rgba(255,255,255,0.30)); /* V178 : l'image ne porte plus aucune lueur, uniquement le trace. Toute la lumiere vient donc d'ici — et elle est teintee, donc saturee, jamais laiteuse. Quatre rayons etages : le cerne serre qui fait le tube de neon, puis trois diffusions de plus en plus larges et diluees. */ filter: drop-shadow(0 0 2px color-mix(in srgb, var(--logo-glow, #ffffff) 95%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--logo-glow, #ffffff) 70%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--logo-glow, #ffffff) 48%, transparent)) drop-shadow(0 0 46px color-mix(in srgb, var(--logo-glow, #ffffff) 30%, transparent)); } .menu-logo-piece.assembling { animation-name: menuLogoSnake; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.30,.74,.27,1.02); animation-fill-mode: both; } :root { /* Thème : Néon & Vitrail sur Velours Noir Absolu */ --w-bg-app: #000000; --w-bg-panel: rgba(22, 22, 30, 0.85); --w-bg-darker: #040406; --w-red: var(--neon-rose); --w-red-hover: #cc0044; --w-text-main: #ffffff; --w-text-muted: #8b92a5; --w-border: rgba(255, 255, 255, 0.1); --w-highlight: var(--neon-cyan); --w-gold: var(--neon-or); /* STYLE DES CARTES (Blanc Pur par défaut) */ --card-bg: #ffffff; --suit-red: #e51d23; --suit-blue: #1976d2; --suit-orange: #e67e22; --suit-green: #2e7d32; --card-border: 1px solid #d1d5db; --card-inner-bg: #fcf1b3; /* Dimensions de base (Menu) explicitement calculées pour éviter le bug CSS calc(min()) */ --c-w: min(9vh, 10vw); --c-h: min(12.6vh, 14vw); /* Ratio 1.4 */ --c-overlap: min(4.4vh, 4.9vw); /* Ratio 0.35 */ --grid-h: min(30.2vh, 33.6vw); /* h + 4*overlap */ --font-sm: calc(var(--c-w) * 0.22); --font-lg: calc(var(--c-w) * 0.55); } /* ZOOM DYNAMIQUE MAXIMAL LORS DE LA PARTIE (MOBILE) */ body.game-active { --c-w: min(11vh, 12.5vw); --c-h: min(15.4vh, 17.5vw); --c-overlap: min(5.4vh, 6.1vw); --grid-h: min(37vh, 41.9vw); } /* Ajustement pour PC pour toucher presque les bords (Zoom Max) */ @media (min-width: 1024px) and (orientation: landscape) { :root { --c-w: min(8vh, 6vw); --c-h: min(11.2vh, 8.4vw); --c-overlap: min(3.9vh, 2.9vw); --grid-h: min(26.8vh, 20vw); } body.game-active { --c-w: min(11.8vh, 9vw); --c-h: min(16.5vh, 12.6vw); --c-overlap: min(5.8vh, 4.4vw); --grid-h: min(39.7vh, 30.2vw); } } /* THÈME CARTES SOMBRES */ body.dark-cards { --card-bg: #121215; --suit-red: var(--neon-rose); --suit-blue: var(--neon-cyan); --suit-orange: var(--neon-or); --suit-green: var(--neon-vert); --card-border: 1px solid rgba(255, 255, 255, 0.15); --card-inner-bg: #1a1a20; } /* THÈME CARTES NÉON */ body.neon-cards { --card-bg: #000000; --suit-red: var(--neon-rose); --suit-blue: var(--neon-cyan); --suit-orange: var(--neon-or); --suit-green: var(--neon-vert); --card-border: 2px solid var(--neon-cyan); --card-inner-bg: rgba(0, 229, 255, 0.05); } body.neon-cards .card { box-shadow: 0 0 10px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2); } /* COULEURS LOGO DYNAMIQUES (Seulement en jeu) */ body.game-active.dark-cards .t-djin, body.game-active.neon-cards .t-djin { color: var(--suit-orange); } body.game-active.dark-cards .t-ki, body.game-active.neon-cards .t-ki { color: var(--suit-green); } body.game-active.dark-cards .t-riv, body.game-active.neon-cards .t-riv { color: var(--suit-red); } body.game-active.dark-cards .t-ers, body.game-active.neon-cards .t-ers { color: var(--suit-blue); } .t-djin, .t-ki, .t-riv, .t-ers { transition: color 0.3s; } html, body { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; background-color: var(--w-bg-app); color: var(--w-text-main); margin: 0; padding: 0; min-height: 100vh; width: 100vw; transition: background-color 0.3s ease; } html { overflow-y: auto; overflow-x: hidden; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; box-sizing: border-box; height: auto; min-height: 100vh; } /* Sur PC uniquement : verrouillage de la hauteur pour éviter le scroll si l'écran le permet */ @media (min-width: 1024px) and (orientation: landscape) { html, body { height: 100vh; /* V191 : le verrouillage total (overflow: hidden) coupait le bandeau bas (version invisible) quand le plateau depasse 100vh. Le blocage horizontal est conserve, un defilement vertical de secours est rendu au cas ou. */ overflow-y: auto; overflow-x: hidden; } /* Le verrouillage à 100vh sert à la table de jeu (aucun défilement pendant une partie). Hors partie, le menu est plus haut que l'écran depuis le carrousel : on lui rend le défilement, sinon le bouton « Retour » reste hors champ. */ html:has(body:not(.game-active)) { height: auto; overflow: visible; } body:not(.game-active) { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; } body { justify-content: space-between; } } body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cstyle%3E%20path%2C%20circle%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23ffffff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20%7D%20%3C/style%3E%3Cg%20id%3D%22rosette%22%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%2830%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%2860%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28120%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28150%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28210%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28240%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28300%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28500%2C500%29%20rotate%28330%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2040%2C-120%20160%2C-120%20200%2C0%20C%20160%2C120%2040%2C120%200%2C0%22%20stroke-width%3D%222.5%22%20/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2025%2C-75%2075%2C-75%20100%2C0%20C%2075%2C75%2025%2C75%200%2C0%22%20stroke-width%3D%221%22%20/%3E%3Cpath%20d%3D%22M%20200%2C0%20C%20260%2C-60%20340%2C-60%20400%2C0%20C%20340%2C60%20260%2C60%20200%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%20400%2C0%20C%20430%2C-80%20470%2C40%20500%2C0%22%20stroke-width%3D%223%22%20/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2210%22%20stroke-width%3D%222%22%20/%3E%3C/g%3E%3C/g%3E%3Cg%20id%3D%22c%22%3E%3Cpath%20d%3D%22M%200%2C20%20L%20480%2C20%20C%20400%2C20%20300%2C100%20300%2C250%20C%20300%2C400%20100%2C480%200%2C480%22%20stroke-width%3D%223%22%20/%3E%3Cpath%20d%3D%22M%2020%2C0%20L%2020%2C480%20C%2020%2C400%20100%2C300%20250%2C300%20C%20400%2C300%20480%2C100%20480%2C0%22%20stroke-width%3D%223%22%20/%3E%3Cpath%20d%3D%22M%200%2C80%20C%20150%2C80%20200%2C150%20200%2C250%20C%20200%2C350%2050%2C420%200%2C420%22%20stroke-width%3D%221.5%22%20/%3E%3Cpath%20d%3D%22M%2080%2C0%20C%2080%2C150%20150%2C200%20250%2C200%20C%20350%2C200%20420%2C50%20420%2C0%22%20stroke-width%3D%221.5%22%20/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2240%22%20stroke-width%3D%222%22%20/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2255%22%20stroke-width%3D%221%22%20/%3E%3C/g%3E%3Cuse%20href%3D%22%23c%22%20/%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%281000%2C%200%29%20scale%28-1%2C%201%29%22%20/%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%280%2C%201000%29%20scale%281%2C%20-1%29%22%20/%3E%3Cuse%20href%3D%22%23c%22%20transform%3D%22translate%281000%2C%201000%29%20scale%28-1%2C%20-1%29%22%20/%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22300%22%20stroke-width%3D%224%22%20/%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22320%22%20stroke-width%3D%221%22%20/%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22400%22%20stroke-width%3D%221%22%20/%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%22500%22%20r%3D%22420%22%20stroke-width%3D%223%22%20/%3E%3C/svg%3E"); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.12; /* Transparence UNIFORME appliquée au dessin déjà aplati */ mix-blend-mode: screen; } body::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.5) 100%); pointer-events: none; } /* BANDEAU INFÉRIEUR */ .bottom-banner { width: 100%; background-color: var(--w-bg-panel); border-top: 1px solid var(--w-gold); display: flex; justify-content: space-between; align-items: center; padding: 1vh 2vw; box-sizing: border-box; position: relative; z-index: 1000; height: 7vh; box-shadow: 0 -4px 20px rgba(255, 170, 0, 0.2), 0 0 15px rgba(255, 0, 85, 0.4); } /* BANDEAU SUPÉRIEUR */ .top-banner { width: 100%; background-color: var(--w-bg-panel); border-bottom: 1px solid var(--w-gold); display: flex; justify-content: space-between; align-items: center; padding: 1vh 2vw; box-sizing: border-box; position: relative; z-index: 1000; height: 7vh; /* CRITICAL FIX for clicks */ box-shadow: 0 4px 20px rgba(255, 170, 0, 0.2), 0 0 15px rgba(255, 0, 85, 0.4); } .banner-score { font-size: 2vh; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--w-text-muted); display: flex; align-items: center; gap: 1vw; } .score-badge { background: #ffffff !important; padding: 0.5vh 1vw; border-radius: 4px; color: #000000 !important; font-weight: 800; border: 1px solid var(--w-border); } .score-badge span { color: var(--w-red); font-size: 2.2vh; font-weight: 900;} .banner-deck { display: flex; align-items: center; gap: 1vw; } .mini-deck-visual { width: 2.2vh; height: 3.1vh; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22f%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2278%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230b2537%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23061320%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2302040a%22/%3E%3C/radialGradient%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22/%3E%3C/filter%3E%3ClinearGradient%20id%3D%22cadre%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22/%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22/%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23f%29%22/%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.85%22%20stroke-width%3D%223%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C64%20M%2034%2C34%20L%2064%2C34%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C64%20M%20366%2C34%20L%20336%2C34%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C496%20M%2034%2C526%20L%2064%2C526%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C496%20M%20366%2C526%20L%20336%2C526%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20transform%3D%22translate%28200%2C280%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%20stroke-opacity%3D%220.55%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3C/g%3E%3Cg%20transform%3D%22translate%28200%2C280%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%220.95%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.7%22/%3E%3C/g%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C280%29%22%3E%3Ccircle%20r%3D%22152%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221.2%22/%3E%3Ccircle%20r%3D%22166%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222.4%22/%3E%3Ccircle%20r%3D%2226%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.2%22/%3E%3Ccircle%20r%3D%229%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.9%22%20stroke%3D%22none%22/%3E%3C/g%3E%3C/svg%3E"); background-color: #000; background-size: cover; background-position: center; border: 1px solid var(--w-border); border-radius: 2px; } .deck-info { font-weight: 700; font-size: 2vh; color: var(--w-text-main); } /* MENU DÉROULANT */ .menu-container { position: relative; } .menu-btn { background: transparent; color: var(--w-text-main); border: 1px solid var(--w-border); padding: 0.8vh 1.5vw; font-size: 1.6vh; font-weight: 700; border-radius: 4px; cursor: pointer; transition: all 0.2s; text-transform: uppercase; } .menu-btn:hover { background: var(--w-border); } .dropdown-content { display: none; position: absolute; right: 0; top: 120%; background: var(--w-bg-panel); color: #fff; min-width: 260px; box-shadow: 0px 8px 15px rgba(0,0,0,0.5); border-radius: 4px; border: 1px solid var(--w-border); overflow-y: auto; max-height: 65vh; z-index: 100; } .dropdown-content button { color: var(--w-text-main); padding: 1.5vh 2vw; text-decoration: none; display: block; width: 100%; text-align: left; background: none; border: none; font-size: 1.6vh; cursor: pointer; border-bottom: 1px solid var(--w-bg-app); transition: background 0.2s; font-weight: 600; text-transform: uppercase; } .dropdown-content button:hover { background: var(--w-border); } .dropdown-content button.highlight { color: var(--w-red); font-weight: 800; } .dropdown-content button.mode-btn { color: var(--w-text-main); font-weight: 600; border-bottom: none; } .dropdown-content button.active-mode { color: var(--w-highlight); font-weight: 800; border-left: 4px solid var(--w-highlight); background: rgba(0, 229, 255, 0.1); } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 0, 85, 0.5); } 50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 0, 85, 0.9); } 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 0, 85, 0.5); } } .show { display: block; } /* LORSQUE LA PARTIE COMMENCE : MASQUAGE LOGO ET CENTRAGE */ body.game-active .logo-placeholder { display: none; } body.game-active .game-wrapper { justify-content: center; } /* MASQUAGE DES PLATEAUX AVANT LANCEMENT ET ZOOM DU LOGO */ body:not(.game-active) #board-opponent, body:not(.game-active) #board-player, body:not(.game-active) .battle-line { display: none !important; } /* L'astuce est de dire au wrapper de s'aligner en HAUT (flex-start) */ body:not(.game-active) .game-wrapper { justify-content: flex-start !important; /* V173 : 12vh laissaient un grand vide sous le liseré du haut alors que le logo se retrouvait tasse contre les deux tuiles. On remonte l'ensemble et on rend l'air perdu ici a l'espace sous le logo (voir #menu-logo-img). */ padding-top: 4vh !important; } /* Le logo prend sa vraie taille, sans zoom artificiel qui bug */ body:not(.game-active) .logo-placeholder { transform: none !important; /* Annule l'ancien effet de zoom */ font-size: min(11vh, 18vw) !important; /* Très grand texte */ line-height: 1.1; margin-bottom: 8vh !important; /* Espace pour pousser le bouton Lancer */ height: auto !important; border: none !important; } body:not(.game-active) #start-container { margin: 0 !important; } /* ZONE DE JEU PRINCIPALE */ .game-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5vh; width: 100%; box-sizing: border-box; padding: 0.5vh 0; flex: 1; } .logo-placeholder { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 900; font-family: 'Georgia', serif; letter-spacing: 2px; text-shadow: 0 0 10px var(--w-gold), 0 0 20px var(--w-red), 0 0 30px var(--w-highlight); color: #fff; line-height: 1.1; margin-bottom: 1vh; } .instruction-text { font-size: 1.8vh; color: var(--w-text-main); margin-top: -0.5vh; font-weight: 700; text-align: center; background: var(--w-red); padding: 0.8vh 2.5vw; border-radius: 4px; box-shadow: 0 0 15px rgba(255, 0, 85, 0.4); text-transform: uppercase; letter-spacing: 0.5px; min-height: 2.2vh; display: flex; align-items: center; justify-content: center; } .instruction-text.neutral { background: var(--w-bg-panel); border: 1px solid var(--w-border); color: var(--w-text-muted); } /* PLATEAUX JOUEURS */ .player-board { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--w-bg-panel); padding: 0.8vh 2vw; border-radius: 6px; border: 1px solid var(--w-border); box-sizing: border-box; width: fit-content; max-width: 98vw; transition: all 0.3s; backdrop-filter: blur(10px); position: relative; } .board-layout { display: flex; align-items: center; justify-content: center; gap: 2vw; } .timer-badge { background: #000; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #fff; font-size: 1.4vh; border: 1px solid rgba(255,255,255,0.2); } /* --- DEFINITION DES PODS (Chronomètres et Noms) --- */ .pod { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid var(--w-border); color: var(--w-text-main) !important; padding: 0.4vh 1.2vw; border-radius: 4px; font-size: 1.5vh; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; z-index: 20; margin-bottom: 0.5vh; white-space: nowrap; min-width: 6vw; backdrop-filter: blur(5px); box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: all 0.3s; } .pod-p1 { border-color: rgba(57, 255, 20, 0.5) !important; background: rgba(57, 255, 20, 0.15) !important; color: var(--neon-vert) !important; } .pod-p2 { border-color: rgba(255, 0, 85, 0.5) !important; background: rgba(255, 0, 85, 0.15) !important; color: var(--neon-rose) !important; } /* --- LISERETS NÉON DES PLATEAUX --- */ /* Présents dès que la partie commence avec une forte couleur de base */ /* Couleurs de liseret pilotables : le mode Djinki Token les redéfinit selon le Token choisi */ body.game-active #board-player { --board-glow: var(--neon-vert); border: 2px solid var(--board-glow) !important; box-shadow: 0 0 10px var(--board-glow), inset 0 0 10px var(--board-glow) !important; } body.game-active #board-opponent { --board-glow: var(--neon-rose); border: 2px solid var(--board-glow) !important; box-shadow: 0 0 10px var(--board-glow), inset 0 0 10px var(--board-glow) !important; } /* ETATS ACTIFS (Le joueur dont c'est le tour s'illumine encore plus fort) */ body.game-active #board-player.active-board, body.game-active #board-opponent.active-board { box-shadow: 0 0 35px var(--board-glow), inset 0 0 20px var(--board-glow) !important; } /* Illuminations des Pods quand c'est le tour du joueur */ .active-board .pod-p1 { background: var(--neon-vert) !important; color: #000 !important; box-shadow: 0 0 20px rgba(57, 255, 20, 0.8); } .active-board .pod-p2 { background: var(--w-red) !important; color: #000 !important; box-shadow: 0 0 20px rgba(255, 0, 85, 0.8); } /* Suppression de l'effet de transparence (opacity) pour garder les néons toujours visibles */ body.game-active #board-player.inactive-board, body.game-active #board-opponent.inactive-board { opacity: 1; } .action-slot-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.8vh; width: 13vw; min-width: 90px; flex-shrink: 0; } .action-slot-wrapper .pod { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* --- CIRCUIT IMPRIMÉ LUMINEUX (thème Néon uniquement) --- */ /* Décor cosmétique dans les zones latérales : pistes cuivre + pastilles de soudure. Volontairement discret (faible opacité, statique) pour ne pas fatiguer l'œil. */ body.neon-cards .action-slot-wrapper, body.token-theme .action-slot-wrapper { position: relative; } /* V223 : en mode Djinki Rivers, le tapis (V221) habille deja cette zone - le circuit du theme Neon viendrait s'y superposer, d'autant qu'il deborde volontairement de sa colonne (inset:-2vh -1vw). On le neutralise donc LA, et uniquement la : il reste intact en mode Token, ou il a ete concu et ou aucun tapis ne le concurrence. */ body.neon-cards:not(.token-theme):not(.mystery-theme):not(.flash-theme) .action-slot-wrapper::before { display: none; } body.neon-cards .action-slot-wrapper::before, body.token-theme .action-slot-wrapper::before { content: ""; position: absolute; inset: -2vh -1vw; z-index: -1; pointer-events: none; opacity: 0.30; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.85%22%3E%20%3Cpath%20d%3D%22M0%2026%20H38%20L52%2040%20V72%20H96%22/%3E%20%3Cpath%20d%3D%22M140%2018%20H104%20L92%2030%20V58%22/%3E%20%3Cpath%20d%3D%22M0%20104%20H30%20L44%2090%20V62%22/%3E%20%3Cpath%20d%3D%22M140%20116%20H86%20L74%20104%20V88%22/%3E%20%3Cpath%20d%3D%22M20%20140%20V120%20L34%20106%22/%3E%20%3Cpath%20d%3D%22M112%20140%20V96%20L124%2084%20V44%22/%3E%20%3Cpath%20d%3D%22M52%200%20V16%20L64%2028%22/%3E%20%3C/g%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.55%22%3E%20%3Cpath%20d%3D%22M0%2062%20H18%20L28%2052%20V20%22/%3E%20%3Cpath%20d%3D%22M140%2074%20H118%20L106%2062%20V36%22/%3E%20%3Cpath%20d%3D%22M62%20140%20V112%20L50%20100%22/%3E%20%3C/g%3E%20%3Cg%20fill%3D%22%2300e5ff%22%20opacity%3D%220.9%22%3E%20%3Ccircle%20cx%3D%2252%22%20cy%3D%2240%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2272%22%20r%3D%223%22/%3E%20%3Ccircle%20cx%3D%2292%22%20cy%3D%2258%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2262%22%20r%3D%222.6%22/%3E%20%3Ccircle%20cx%3D%2274%22%20cy%3D%2288%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%22124%22%20cy%3D%2244%22%20r%3D%222.6%22/%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%2228%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22106%22%20r%3D%222.2%22/%3E%20%3C/g%3E%20%3Cg%20fill%3D%22%2339ff14%22%20opacity%3D%220.7%22%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2220%22%20r%3D%222.4%22/%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%2236%22%20r%3D%222.4%22/%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%22100%22%20r%3D%222.4%22/%3E%20%3C/g%3E%20%3C/svg%3E"); background-repeat: repeat; background-size: 140px 140px; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.55)); /* Fondu sur les bords pour que le motif se dissolve au lieu d'être coupé net */ -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%); } /* ================= DÉVOILEMENT COLONNE PAR COLONNE ================= */ /* Retournement de la carte cachée */ @keyframes flipReveal { 0% { transform: rotateY(90deg) scale(0.94); opacity: 0.35; } 60% { transform: rotateY(0deg) scale(1.06); opacity: 1; } 100% { transform: rotateY(0deg) scale(1); } } .card.flip-reveal { animation: flipReveal 0.5s ease-out; } /* Colonne en cours d'examen : on la fait ressortir, les autres restent neutres */ @keyframes colScan { 0%,100% { box-shadow: 0 0 12px rgba(255,255,255,0.35); } 50% { box-shadow: 0 0 26px rgba(255,255,255,0.75); } } .card.col-active { animation: colScan 0.9s ease-in-out infinite; z-index: 15; } /* Verdict de colonne : vert = acquise, rouge = perdue, gris = égalité */ .card.col-win { box-shadow: 0 0 16px var(--w-highlight), inset 0 0 12px rgba(0,229,255,0.25) !important; border-color: var(--w-highlight) !important; } .card.col-lose { box-shadow: 0 0 14px var(--w-red), inset 0 0 12px rgba(255,0,85,0.2) !important; border-color: var(--w-red) !important; opacity: 0.72; } .card.col-tie { box-shadow: 0 0 12px var(--w-text-muted) !important; border-color: var(--w-text-muted) !important; } /* Bandeau d'annonce, posé sur la ligne VS pour rester au centre du regard */ .reveal-banner { position: relative; z-index: 40; margin: 0.4vh auto; padding: 0 1.5vw; max-width: 92vw; text-align: center; font-size: 1.7vh; line-height: 1.35; border-radius: 6px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease; background: var(--w-bg-darker); border: 1px solid var(--w-border); } .reveal-banner.show { opacity: 1; max-height: 12vh; padding: 1vh 1.5vw; } .reveal-banner span { font-size: 1.35vh; color: var(--w-text-muted); } .reveal-banner.win { border-color: var(--w-highlight); box-shadow: 0 0 18px rgba(0,229,255,0.35); color: var(--w-highlight); } .reveal-banner.lose { border-color: var(--w-red); box-shadow: 0 0 18px rgba(255,0,85,0.35); color: var(--w-red); } .reveal-banner.tie { border-color: var(--w-border); color: var(--w-text-muted); } /* ================= MODE DJINKI TOKEN — HABILLAGE DÉDIÉ ================= */ /* --- LISERÉ BICOLORE --- Astuce padding-box/border-box : permet un dégradé sur la bordure tout en conservant les coins arrondis (impossible avec border-image). */ body.token-theme #board-player, body.token-theme #board-opponent { border: 2px solid transparent !important; background: linear-gradient(var(--w-bg-panel), var(--w-bg-panel)) padding-box, linear-gradient(135deg, var(--board-glow, var(--neon-cyan)) 0%, var(--board-glow, var(--neon-cyan)) 38%, var(--board-glow-2, var(--neon-vert)) 62%, var(--board-glow-2, var(--neon-vert)) 100%) border-box !important; box-shadow: -10px 0 26px -6px var(--board-glow, var(--neon-cyan)), 10px 0 26px -6px var(--board-glow-2, var(--neon-vert)) !important; } body.token-theme #board-player.active-board, body.token-theme #board-opponent.active-board { box-shadow: -14px 0 40px -4px var(--board-glow, var(--neon-cyan)), 14px 0 40px -4px var(--board-glow-2, var(--neon-vert)) !important; } /* --- FOND DE SCÈNE : grandes zones noires au-dessus et au-dessous --- Purement décoratif, posé derrière tout le reste, sans jamais recouvrir les cartes. */ body.token-theme::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 8%, color-mix(in srgb, var(--tk-a, var(--neon-cyan)) 16%, transparent), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 92%, color-mix(in srgb, var(--tk-b, var(--neon-rose)) 16%, transparent), transparent 70%); } /* Trame technique en fond, très discrète */ body.token-theme::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.16; background-image: linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 26%, transparent 74%, #000 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 26%, transparent 74%, #000 100%); } /* Le halo respire doucement : assez lent pour ne pas distraire pendant la réflexion. */ @keyframes tokenBreathe { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } } body.token-theme .token-chip.owned { animation: tokenBreathe 3.4s ease-in-out infinite; } /* Bandeau des enseignes : d'un coup d'oeil, ce que chaque camp détient encore. */ .token-hud { display: flex; gap: 0.5vh; margin-top: 0.6vh; justify-content: center; flex-wrap: wrap; } .token-chip { font-size: 1.9vh; line-height: 1; padding: 0.45vh 0.7vh; border-radius: 4px; border: 1px solid var(--chip); color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, transparent); box-shadow: 0 0 7px var(--chip); transition: all 0.25s ease; } /* Token perdu ou jamais possédé : éteint, sans halo — le contraste fait tout le message. */ .token-chip.lost { color: #4a4a55; border-color: #2a2a33; background: transparent; box-shadow: none; opacity: 0.45; text-decoration: line-through; } /* Choix de la défausse : deux grandes cartes cliquables. */ .discard-opt { border: 2px solid var(--w-border); border-radius: 8px; padding: 1.8vh 1.5vh; margin-bottom: 1.2vh; cursor: pointer; background: var(--w-bg-darker); transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .discard-opt:hover { border-color: var(--w-highlight); box-shadow: 0 0 16px rgba(0,229,255,0.35); transform: translateY(-2px); } .discard-opt.disabled { opacity: 0.35; cursor: not-allowed; } .discard-opt.disabled:hover { border-color: var(--w-border); box-shadow: none; transform: none; } .discard-opt-icon { font-size: 3.4vh; margin-bottom: 0.6vh; } .discard-opt-title { font-size: 1.9vh; font-weight: 800; text-transform: uppercase; margin-bottom: 0.5vh; } .discard-opt-desc { font-size: 1.35vh; color: var(--w-text-muted); } /* Circuit imprimé teinté aux couleurs des tokens du camp. Réservé au mode Token : les autres modes gardent le circuit cyan standard. */ body.token-theme .action-slot-wrapper::before { opacity: 0.5; filter: drop-shadow(0 0 5px var(--board-glow, var(--neon-cyan))); } body.token-theme #board-player .action-slot-wrapper::before, body.token-theme #board-opponent .action-slot-wrapper::before { background-blend-mode: screen; } /* Voile coloré posé sur le circuit, aux 2 teintes des tokens détenus */ body.token-theme .action-slot-wrapper::after { content: ""; position: absolute; inset: -2vh -1vw; z-index: -1; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--board-glow, var(--neon-cyan)) 30%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--board-glow-2, var(--neon-vert)) 30%, transparent) 100%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } body.token-theme .action-slot-wrapper { position: relative; } .action-label { font-size: 1.2vh; color: var(--w-text-muted); text-transform: uppercase; font-weight: 800;} /* --- ADAPTATION ÉCRANS ÉTROITS (téléphones en portrait) --- Sur mobile, la largeur totale (2 panneaux latéraux + grille 5 colonnes) dépassait la largeur de l'écran : le plateau était rogné à gauche et à droite. On réduit ici la carte et les panneaux latéraux pour que tout tienne. */ @media (max-width: 1023px), (orientation: portrait) { body.game-active { /* Cartes agrandies (12vw) : on récupère la place en resserrant les panneaux latéraux. Le chevauchement vertical est volontairement plus lâche (8.2vw) afin d'exploiter l'espace noir disponible sous chaque plateau sur les téléphones allongés. */ --c-w: min(9vh, 12vw); --c-h: min(12.6vh, 16.8vw); --c-overlap: min(6.3vh, 10vw); --grid-h: min(37.8vh, 56.8vw); } .action-slot-wrapper { width: 12.5vw; min-width: 42px; } .player-board { padding: 0.8vh 0.8vw; } .board-layout { gap: 0.8vw; } .action-label { font-size: 1.15vh; } /* Étoile favori + bouton info des modes de jeu : sur téléphone (ex. Samsung S25), ces deux repères ne faisaient que 2.4vh de large (~19px sur un écran courant) collés l'un à l'autre dans le coin du bouton — bien en dessous de la taille tactile fiable, d'où les mis-clics. On agrandit avec un plancher en pixels (max()) pour garantir une taille correcte même sur les petits écrans, sans rien changer côté ordinateur/grand écran (hors de ce media query). */ .lobby-mode-tools { gap: max(0.9vh, 8px); top: 0.6vh; right: 0.6vh; } .mode-star, .mode-info { width: max(3.4vh, 36px); height: max(3.4vh, 36px); font-size: max(1.8vh, 16px); } /* Tuiles de mode sur téléphone : une par ligne, pleine largeur utile. Empiler plutôt que serrer deux colonnes évite les tuiles trop étroites où le sous-titre déborde, et donne des cibles tactiles larges. Les codes graphiques (dégradé, halo, liseré) restent strictement identiques au bureau — seules les dimensions changent. */ .lobby-mode-btn { width: 86vw; max-width: 420px; min-width: 0; height: auto; min-height: 96px; padding: 1.6vh 3vw; gap: 0.4vh; } .lobby-mode-btn--hero { width: 86vw; max-width: 420px; min-width: 0; height: auto; min-height: 110px; } .lobby-mode-btn .lobby-icon { font-size: max(3vh, 30px); } .lobby-mode-btn--hero .lobby-icon { font-size: max(3.4vh, 34px); } .lobby-mode-title { font-size: max(1.7vh, 15px); } .lobby-mode-btn--hero .lobby-mode-title { font-size: max(1.9vh, 17px); } .lobby-mode-sub { font-size: max(1.25vh, 11px); max-width: 100%; } .lobby-mode-btn--hero .lobby-mode-sub { font-size: max(1.3vh, 11.5px); } /* Les tuiles étant désormais empilées, l'étoile et le ⓘ ont de la place : on les décale vers l'intérieur pour qu'ils ne frôlent plus le bord arrondi. */ .lobby-mode-wrap { width: 86vw; max-width: 420px; } /* Carrousel sur téléphone : flèches ramenées à une taille tactile confortable, tuile un peu moins haute pour laisser respirer le logo et la barre de favoris, et texte redimensionné en pixels pour rester lisible sur petit écran. */ .mode-carousel { gap: 1.5vw; max-width: 100%; } /* Flèches plus étroites sur téléphone (l'espace horizontal est compté) mais toujours pleine hauteur : la cible tactile reste très large verticalement. */ .carousel-arrow { width: 34px; min-width: 34px; height: auto; min-height: 200px; align-self: stretch; } .carousel-arrow::after { min-width: 11px; min-height: 11px; border-width: 2px; } .carousel-slide { padding: 2vh 1.5vw; } .carousel-slide .lobby-mode-btn { height: auto; min-height: 200px; padding: 2.6vh 4vw; gap: 0.8vh; } .carousel-slide .lobby-icon { font-size: max(6vh, 52px); } .carousel-slide .lobby-mode-title { font-size: max(2.4vh, 21px); } .carousel-slide .lobby-mode-sub { font-size: max(1.5vh, 13px); max-width: 30ch; } .lobby-mode-cta { font-size: max(1.4vh, 12px); padding: 8px 20px; } .carousel-dot { width: 10px; height: 10px; min-width: 10px; min-height: 10px; } .carousel-dots { gap: 12px; } /* Pastilles favoris (barre sous le logo) : mêmes plafonds trop petits sur téléphone, élargies pour éviter de toucher la pastille voisine par erreur. */ #lobby-favorites-bar { gap: max(1.2vh, 10px); } .lobby-fav-btn { padding: max(1.1vh, 11px) max(1.8vh, 15px); min-height: 42px; font-size: max(1.5vh, 13px); } } @media (max-width: 380px) { body.game-active { --c-w: min(9vh, 11.4vw); --c-h: min(12.6vh, 16vw); --c-overlap: min(6.3vh, 9.5vw); --grid-h: min(37.8vh, 54vw); } .action-slot-wrapper { width: 12vw; min-width: 40px; } } .card-slot { width: var(--c-w) !important; height: var(--c-h) !important; display: flex; justify-content: center; align-items: center; } .battle-line { width: 75%; height: 1px; border-radius: 1px; background: var(--w-border); margin: 0.5vh 0; position: relative; } .battle-line::after { content: "VS"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--w-bg-app); color: var(--w-text-muted); font-size: 1.4vh; font-weight: 900; padding: 0 1vw; } #draw-cards-display { display: flex; justify-content: center; align-items: flex-end; gap: 6vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--w-bg-panel); padding: 3vh 5vw 4vh 5vw; border-radius: 8px; border: 2px solid var(--w-red); z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,0.8); } .draw-col { display: flex; flex-direction: column; align-items: center; width: 14vh; } .draw-col-title { margin-bottom: 0.5vh; font-size: 2.8vh !important; font-size: 1.6vh; font-weight: 900; color: #000000 !important; background: #ffffff !important; padding: 0.4vh 1vw; border-radius: 4px; text-transform: uppercase; text-align: center; min-height: 4vh; display: flex; align-items: flex-end; justify-content: center; line-height: 1.3; } /* GRILLES ET CARTES */ .grid-5x5 { display: grid; grid-template-columns: repeat(5, var(--c-w)); grid-template-rows: repeat(4, var(--c-overlap)) var(--c-h); gap: 0 0.8vw; height: var(--grid-h); /* Calculé en dur pour éviter l'effondrement */ flex-shrink: 0; } .opponent-grid { transform: rotate(180deg); } .card { background-color: var(--card-bg) !important; border-radius: 4px; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.8), 0 0 2px rgba(255,255,255,0.2); border: var(--card-border) !important; display: flex; justify-content: center; align-items: center; font-weight: bold; font-family: 'Arial Narrow', 'Helvetica Condensed', Arial, sans-serif; width: var(--c-w) !important; height: var(--c-h) !important; box-sizing: border-box; flex-shrink: 0; transition: transform 0.1s, z-index 0s; cursor: pointer; z-index: 10; } .card:hover { transform: translateY(-2px); box-shadow: 0px 8px 20px rgba(0,0,0,0.9), 0 0 8px var(--w-highlight); } .card.suit-red { color: var(--suit-red) !important; } .card.suit-blue { color: var(--suit-blue) !important; } .card.suit-orange { color: var(--suit-orange) !important; } .card.suit-green { color: var(--suit-green) !important; } .card-tl, .card-tr, .card-bl, .card-br { position: absolute; font-size: var(--font-sm); line-height: 0.85; font-weight: 800; display: flex; flex-direction: column; align-items: center; } .card-tl { top: 4px; left: 4px; } .card-tr { top: 4px; right: 4px; } .card-bl { bottom: 4px; left: 4px; transform: rotate(180deg); } .card-br { bottom: 4px; right: 4px; transform: rotate(180deg); } .suit-mini { font-size: 0.8em; margin-top: 2px; } .card-center { position: absolute; top: 24%; bottom: 24%; left: 18%; right: 18%; background-color: var(--card-inner-bg); border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: var(--font-lg); border: 1px solid rgba(0,0,0,0.08); } /* V224 : le dos classique passe en CALQUES (voir ::before/::after plus bas). Le !important sur background-size a ete retire : une declaration !important l'emporte sur une animation, et aurait donc bloque net la respiration du noyau. Sans risque : les themes Token, Mystery et Flash surchargent ce dos avec leurs propres regles, en !important et de specificite superieure. */ .card.face-down { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C200%29%22%3E%3Ccircle%20r%3D%2226%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.2%22%2F%3E%3Ccircle%20r%3D%229%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.9%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22c4%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.85%22%20stroke-width%3D%223%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C64%20M%2034%2C34%20L%2064%2C34%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C64%20M%20366%2C34%20L%20336%2C34%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C496%20M%2034%2C526%20L%2064%2C526%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C496%20M%20366%2C526%20L%20336%2C526%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(78% 78% at 50% 42%, #0b2537 0%, #061320 55%, #02040a 100%); background-repeat: no-repeat; background-position: center, center, center; background-size: 26% auto, 100% 100%, 100% 100%; background-color: #050505 !important; border: 1px solid var(--w-border) !important; color: transparent !important; position: relative; overflow: hidden; } /* V182 : Sombre et Neon pointaient vers '1000011513.png', un fichier EXTERNE qui devait exister a cote d'index.html sur le serveur. S'il manquait, le dos etait simplement vide — le meme piege que le dossier sons/. Le dos est desormais unique, vectoriel et embarque : plus aucune dependance a un fichier. */ /* --- DOS DE CARTE MYSTERY : signe "?" lumineux blanc-violet, discret --- */ /* ================================================================== V240 — REGLAGES DU DOS MYSTERY Valeurs retenues par l'utilisateur dans l'atelier interactif (Atelier_dos_mystery.html) : halo 220 %, vitesse 113 %, anneaux 137 %. Elles sont ici en variables : pour retoucher l'ensemble du rendu, il suffit de changer ces trois nombres, rien d'autre. ================================================================== */ :root { --myst-glow: 220; /* intensite du halo respirant, en % (100 = reference atelier) */ --myst-vitesse: 113; /* vitesse des animations, en % (100 = reference atelier) */ --myst-anneau: 137; /* presence des anneaux/traits, en % (100 = reference atelier) */ } /* --- DOS DE CARTE MYSTERY : "Sceau rituel" --- Sigil geometrique frontal facon tarot : cercles concentriques, croix cardinale, losange et "?" au centre. C'est le dos le plus affirme des quatre proposes, et le seul qui reste lisible autour de 70 px, la taille reelle d'une carte a l'ecran. L'art est embarque en data URI base64 : aucune dependance a un fichier externe (le piege de 1000011513.png et du dossier sons/). */ body.mystery-theme .card.face-down { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNTYwIj4KPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9ImJnMyIgY3g9IjUwJSIgY3k9IjM4JSIgcj0iNzUlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMTA1MCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iIzEzMDgyNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNTAyMDgiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8ZmlsdGVyIGlkPSJnMyIgeD0iLTYwJSIgeT0iLTYwJSIgd2lkdGg9IjIyMCUiIGhlaWdodD0iMjIwJSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjYiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjU2MCIgcng9IjI2IiBmaWxsPSJ1cmwoI2JnMykiLz4KICA8ZyBmaWx0ZXI9InVybCgjZzMpIiBvcGFjaXR5PSIwLjciPgogIDxjaXJjbGUgY3g9IjIwMC4wIiBjeT0iMjY1LjAiIHI9IjE0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWRhc2hhcnJheT0iIiBvcGFjaXR5PSIwLjU1Ii8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSIyNjUuMCIgcj0iMTIyIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iMyA1IiBvcGFjaXR5PSIwLjQiLz4KICA8Y2lyY2xlIGN4PSIyMDAuMCIgY3k9IjI2NS4wIiByPSIxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1kYXNoYXJyYXk9IiIgb3BhY2l0eT0iMC42Ii8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSIyNjUuMCIgcj0iNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtZGFzaGFycmF5PSIiIG9wYWNpdHk9IjAuNCIvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSIyMDAuMCIgY3k9IjI2NS4wIiByPSIxNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1kYXNoYXJyYXk9IiIgb3BhY2l0eT0iMC41NSIvPgogIDxjaXJjbGUgY3g9IjIwMC4wIiBjeT0iMjY1LjAiIHI9IjEyMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IjMgNSIgb3BhY2l0eT0iMC40Ii8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSIyNjUuMCIgcj0iMTAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtZGFzaGFycmF5PSIiIG9wYWNpdHk9IjAuNiIvPgogIDxjaXJjbGUgY3g9IjIwMC4wIiBjeT0iMjY1LjAiIHI9IjYwIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iIiBvcGFjaXR5PSIwLjQiLz4KICA8bGluZSB4MT0iMjAwLjAiIHkxPSIxNjUuMCIgeDI9IjIwMC4wIiB5Mj0iMTI1LjAiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxLjYiIG9wYWNpdHk9IjAuNSIvPgogIDxsaW5lIHgxPSIyNzAuNyIgeTE9IjE5NC4zIiB4Mj0iMjg2LjMiIHkyPSIxNzguNyIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuNSIvPgogIDxsaW5lIHgxPSIzMDAuMCIgeTE9IjI2NS4wIiB4Mj0iMzQwLjAiIHkyPSIyNjUuMCIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iMC41Ii8+CiAgPGxpbmUgeDE9IjI3MC43IiB5MT0iMzM1LjciIHgyPSIyODYuMyIgeTI9IjM1MS4zIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC41Ii8+CiAgPGxpbmUgeDE9IjIwMC4wIiB5MT0iMzY1LjAiIHgyPSIyMDAuMCIgeTI9IjQwNS4wIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMS42IiBvcGFjaXR5PSIwLjUiLz4KICA8bGluZSB4MT0iMTI5LjMiIHkxPSIzMzUuNyIgeDI9IjExMy43IiB5Mj0iMzUxLjMiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjUiLz4KICA8bGluZSB4MT0iMTAwLjAiIHkxPSIyNjUuMCIgeDI9IjYwLjAiIHkyPSIyNjUuMCIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iMC41Ii8+CiAgPGxpbmUgeDE9IjEyOS4zIiB5MT0iMTk0LjMiIHgyPSIxMTMuNyIgeTI9IjE3OC43IiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC41Ii8+CiAgPHBhdGggZD0iTSAyMDAuMCwyMDUuMCBMIDI2MC4wLDI2NS4wIEwgMjAwLjAsMzI1LjAgTCAxNDAuMCwyNjUuMCBaIiBmaWxsPSJub25lIiBzdHJva2U9IiNkNzliZmYiIHN0cm9rZS13aWR0aD0iMS4yIiBvcGFjaXR5PSIwLjQ1Ii8+CiAgPGNpcmNsZSBjeD0iMjAwIiBjeT0iMTI1IiByPSIyLjQiIGZpbGw9IiNlNmM4ZmYiIG9wYWNpdHk9IjAuOSIvPgogIDxjaXJjbGUgY3g9IjM0MCIgY3k9IjI2NSIgcj0iMi40IiBmaWxsPSIjZTZjOGZmIiBvcGFjaXR5PSIwLjkiLz4KICA8Y2lyY2xlIGN4PSIyMDAiIGN5PSI0MDUiIHI9IjIuNCIgZmlsbD0iI2U2YzhmZiIgb3BhY2l0eT0iMC45Ii8+CiAgPGNpcmNsZSBjeD0iNjAiIGN5PSIyNjUiIHI9IjIuNCIgZmlsbD0iI2U2YzhmZiIgb3BhY2l0eT0iMC45Ii8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSIxMTMuMCIgcj0iMS40IiBmaWxsPSIjYzk4YmZmIiBvcGFjaXR5PSIwLjUiLz4KICA8Y2lyY2xlIGN4PSIyNzYuMCIgY3k9IjEzMy40IiByPSIxLjQiIGZpbGw9IiNjOThiZmYiIG9wYWNpdHk9IjAuNSIvPgogIDxjaXJjbGUgY3g9IjMzMS42IiBjeT0iMTg5LjAiIHI9IjEuNCIgZmlsbD0iI2M5OGJmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPGNpcmNsZSBjeD0iMzUyLjAiIGN5PSIyNjUuMCIgcj0iMS40IiBmaWxsPSIjYzk4YmZmIiBvcGFjaXR5PSIwLjUiLz4KICA8Y2lyY2xlIGN4PSIzMzEuNiIgY3k9IjM0MS4wIiByPSIxLjQiIGZpbGw9IiNjOThiZmYiIG9wYWNpdHk9IjAuNSIvPgogIDxjaXJjbGUgY3g9IjI3Ni4wIiBjeT0iMzk2LjYiIHI9IjEuNCIgZmlsbD0iI2M5OGJmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSI0MTcuMCIgcj0iMS40IiBmaWxsPSIjYzk4YmZmIiBvcGFjaXR5PSIwLjUiLz4KICA8Y2lyY2xlIGN4PSIxMjQuMCIgY3k9IjM5Ni42IiByPSIxLjQiIGZpbGw9IiNjOThiZmYiIG9wYWNpdHk9IjAuNSIvPgogIDxjaXJjbGUgY3g9IjY4LjQiIGN5PSIzNDEuMCIgcj0iMS40IiBmaWxsPSIjYzk4YmZmIiBvcGFjaXR5PSIwLjUiLz4KICA8Y2lyY2xlIGN4PSI0OC4wIiBjeT0iMjY1LjAiIHI9IjEuNCIgZmlsbD0iI2M5OGJmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPGNpcmNsZSBjeD0iNjguNCIgY3k9IjE4OS4wIiByPSIxLjQiIGZpbGw9IiNjOThiZmYiIG9wYWNpdHk9IjAuNSIvPgogIDxjaXJjbGUgY3g9IjEyNC4wIiBjeT0iMTMzLjQiIHI9IjEuNCIgZmlsbD0iI2M5OGJmZiIgb3BhY2l0eT0iMC41Ii8+CiAgPHRleHQgeD0iMjAwLjAiIHk9IjI4MS4wIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iR2VvcmdpYSwgJ1RpbWVzIE5ldyBSb21hbicsIHNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjU0IiBmaWxsPSIjZTZjOGZmIiBvcGFjaXR5PSIwLjg1Ij4/PC90ZXh0PgogIAogIDxyZWN0IHg9IjE0IiB5PSIxNCIgd2lkdGg9IjM3MiIgaGVpZ2h0PSI1MzIiIHJ4PSIxOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utb3BhY2l0eT0iMC40NSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHJlY3QgeD0iMjQiIHk9IjI0IiB3aWR0aD0iMzUyIiBoZWlnaHQ9IjUxMiIgcng9IjEyIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4=") !important; background-color: #050208 !important; background-size: cover !important; background-position: center !important; } /* La partie mobile du sceau : un anneau net qui tourne lentement. ::before est libre en mode Mystery (::after porte le "?" des cartes masquees par un credit, on ne le touche pas). */ body.mystery-theme .card.face-down::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; z-index: 1; border: 1.5px solid rgba(177, 74, 255, calc(0.5 * var(--myst-anneau) / 100)); border-top-color: rgba(230, 200, 255, calc(0.9 * var(--myst-anneau) / 100)); border-right-color: rgba(230, 200, 255, calc(0.9 * var(--myst-anneau) / 100)); animation: mysteryDosTourne calc(18s * 100 / var(--myst-vitesse)) linear infinite; } @keyframes mysteryDosTourne { to { transform: rotate(360deg); } } /* Halo respirant, sur ::after et non sur l'element : .deal-animation pose "animation: dropIn" sur l'element lui-meme, et une regle plus specifique l'aurait ecrasee — les cartes Mystery n'auraient plus ete distribuees avec leur animation de chute. Exclu des cartes .mystery-hidden : celles-ci ont deja leur propre respiration ET leur "?" sur ::after. C'est ce qui permet au joueur de distinguer d'un coup d'oeil un dos ordinaire d'une carte masquee par un credit adverse ; les confondre supprimerait cette lecture. */ @keyframes mysteryDosRespire { 0%,100% { box-shadow: 0 0 calc(10px * var(--myst-glow) / 100) rgba(177,74,255,0.55), inset 0 0 calc(8px * var(--myst-glow) / 100) rgba(177,74,255,0.18); } 50% { box-shadow: 0 0 calc(22px * var(--myst-glow) / 100) rgba(177,74,255,0.95), inset 0 0 calc(14px * var(--myst-glow) / 100) rgba(177,74,255,0.30); } } body.mystery-theme .card.face-down:not(.mystery-hidden)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: mysteryDosRespire calc(2.2s * 100 / var(--myst-vitesse)) ease-in-out infinite; } /* Survol d'une carte que l'on a le droit de verifier : les deux couches animees s'effacent pour laisser voir la carte, exactement comme le fait deja le mode Token. Regle explicite car les selecteurs ci-dessus sont plus specifiques que la regle generique .card.face-down.secret-peek. */ body.mystery-theme .card.face-down.secret-peek:hover::before, body.mystery-theme .card.face-down.secret-peek:hover::after { display: none; } @media (prefers-reduced-motion: reduce) { body.mystery-theme .card.face-down::before, body.mystery-theme .card.face-down:not(.mystery-hidden)::after { animation: none !important; } } /* --- DOS DE CARTE TOKEN : circuit imprime --- Restauration du motif de circuit qui habillait les cartes avant la V182 : il venait du fichier externe 1000011513.png, qui n'existait que sur le serveur. Il est ici redessine en vectoriel et embarque, dans le vocabulaire graphique deja utilise par les zones laterales du plateau en mode Token : pistes orthogonales a angles coupes, pastilles de soudure, cyan et vert, avec le jeton turquoise du mode au centre. */ body.token-theme .card.face-down { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22tf%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2307322c%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%2303191a%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2302070a%22/%3E%3C/radialGradient%3E%3Cfilter%20id%3D%22tg%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22/%3E%3C/filter%3E%3ClinearGradient%20id%3D%22cadre%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22/%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22/%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23tf%29%22/%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23tg%29%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M%20150.0%2C128.0%20L%20150.0%2C113.0%20L%20157.0%2C106.0%20L%20216.0%2C106.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20348.0%2C392.0%20L%20333.0%2C392.0%20L%20326.0%2C385.0%20L%20326.0%2C304.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20106.0%2C84.0%20L%20106.0%2C69.0%20L%20113.0%2C62.0%20L%20128.0%2C62.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2040.0%2C194.0%20L%2099.0%2C194.0%20L%20106.0%2C187.0%20L%20106.0%2C157.0%20L%20113.0%2C150.0%20L%20172.0%2C150.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2062.0%2C436.0%20L%2047.0%2C436.0%20L%2040.0%2C443.0%20L%2040.0%2C451.0%20L%2047.0%2C458.0%20L%20121.0%2C458.0%20L%20128.0%2C451.0%20L%20128.0%2C392.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20106.0%2C150.0%20L%2047.0%2C150.0%20L%2040.0%2C143.0%20L%2040.0%2C84.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20128.0%2C458.0%20L%20216.0%2C458.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2084.0%2C370.0%20L%2084.0%2C348.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20128.0%2C370.0%20L%20194.0%2C370.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20150.0%2C150.0%20L%20172.0%2C150.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2084.0%2C194.0%20L%2084.0%2C113.0%20L%2091.0%2C106.0%20L%20128.0%2C106.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20348.0%2C128.0%20L%20348.0%2C47.0%20L%20341.0%2C40.0%20L%20267.0%2C40.0%20L%20260.0%2C47.0%20L%20260.0%2C77.0%20L%20267.0%2C84.0%20L%20304.0%2C84.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20326.0%2C436.0%20L%20267.0%2C436.0%20L%20260.0%2C443.0%20L%20260.0%2C473.0%20L%20253.0%2C480.0%20L%20201.0%2C480.0%20L%20194.0%2C473.0%20L%20194.0%2C436.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20194.0%2C502.0%20L%20194.0%2C421.0%20L%20187.0%2C414.0%20L%20172.0%2C414.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2040.0%2C172.0%20L%20121.0%2C172.0%20L%20128.0%2C179.0%20L%20128.0%2C187.0%20L%20121.0%2C194.0%20L%20106.0%2C194.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20238.0%2C40.0%20L%20319.0%2C40.0%20L%20326.0%2C47.0%20L%20326.0%2C99.0%20L%20319.0%2C106.0%20L%20260.0%2C106.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2062.0%2C128.0%20L%20121.0%2C128.0%20L%20128.0%2C121.0%20L%20128.0%2C91.0%20L%20135.0%2C84.0%20L%20165.0%2C84.0%20L%20172.0%2C77.0%20L%20172.0%2C40.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20304.0%2C392.0%20L%20304.0%2C451.0%20L%20297.0%2C458.0%20L%20260.0%2C458.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20304.0%2C194.0%20L%20304.0%2C238.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20282.0%2C194.0%20L%20216.0%2C194.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20304.0%2C216.0%20L%20304.0%2C179.0%20L%20297.0%2C172.0%20L%20223.0%2C172.0%20L%20216.0%2C165.0%20L%20216.0%2C113.0%20L%20223.0%2C106.0%20L%20260.0%2C106.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20106.0%2C370.0%20L%2069.0%2C370.0%20L%2062.0%2C363.0%20L%2062.0%2C348.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20304.0%2C172.0%20L%20304.0%2C91.0%20L%20297.0%2C84.0%20L%20282.0%2C84.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20172.0%2C84.0%20L%20135.0%2C84.0%20L%20128.0%2C91.0%20L%20128.0%2C121.0%20L%20121.0%2C128.0%20L%2084.0%2C128.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%2084.0%2C414.0%20L%2069.0%2C414.0%20L%2062.0%2C421.0%20L%2062.0%2C458.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22/%3E%3Cpath%20d%3D%22M%20326.0%2C172.0%20L%20260.0%2C172.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22/%3E%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.92%22%3E%3Cpath%20d%3D%22M%20150.0%2C128.0%20L%20150.0%2C113.0%20L%20157.0%2C106.0%20L%20216.0%2C106.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20348.0%2C392.0%20L%20333.0%2C392.0%20L%20326.0%2C385.0%20L%20326.0%2C304.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20106.0%2C84.0%20L%20106.0%2C69.0%20L%20113.0%2C62.0%20L%20128.0%2C62.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2040.0%2C194.0%20L%2099.0%2C194.0%20L%20106.0%2C187.0%20L%20106.0%2C157.0%20L%20113.0%2C150.0%20L%20172.0%2C150.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2062.0%2C436.0%20L%2047.0%2C436.0%20L%2040.0%2C443.0%20L%2040.0%2C451.0%20L%2047.0%2C458.0%20L%20121.0%2C458.0%20L%20128.0%2C451.0%20L%20128.0%2C392.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20106.0%2C150.0%20L%2047.0%2C150.0%20L%2040.0%2C143.0%20L%2040.0%2C84.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20128.0%2C458.0%20L%20216.0%2C458.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2084.0%2C370.0%20L%2084.0%2C348.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20128.0%2C370.0%20L%20194.0%2C370.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20150.0%2C150.0%20L%20172.0%2C150.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2084.0%2C194.0%20L%2084.0%2C113.0%20L%2091.0%2C106.0%20L%20128.0%2C106.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20348.0%2C128.0%20L%20348.0%2C47.0%20L%20341.0%2C40.0%20L%20267.0%2C40.0%20L%20260.0%2C47.0%20L%20260.0%2C77.0%20L%20267.0%2C84.0%20L%20304.0%2C84.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20326.0%2C436.0%20L%20267.0%2C436.0%20L%20260.0%2C443.0%20L%20260.0%2C473.0%20L%20253.0%2C480.0%20L%20201.0%2C480.0%20L%20194.0%2C473.0%20L%20194.0%2C436.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20194.0%2C502.0%20L%20194.0%2C421.0%20L%20187.0%2C414.0%20L%20172.0%2C414.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2040.0%2C172.0%20L%20121.0%2C172.0%20L%20128.0%2C179.0%20L%20128.0%2C187.0%20L%20121.0%2C194.0%20L%20106.0%2C194.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20238.0%2C40.0%20L%20319.0%2C40.0%20L%20326.0%2C47.0%20L%20326.0%2C99.0%20L%20319.0%2C106.0%20L%20260.0%2C106.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2062.0%2C128.0%20L%20121.0%2C128.0%20L%20128.0%2C121.0%20L%20128.0%2C91.0%20L%20135.0%2C84.0%20L%20165.0%2C84.0%20L%20172.0%2C77.0%20L%20172.0%2C40.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20304.0%2C392.0%20L%20304.0%2C451.0%20L%20297.0%2C458.0%20L%20260.0%2C458.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20304.0%2C194.0%20L%20304.0%2C238.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20282.0%2C194.0%20L%20216.0%2C194.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20304.0%2C216.0%20L%20304.0%2C179.0%20L%20297.0%2C172.0%20L%20223.0%2C172.0%20L%20216.0%2C165.0%20L%20216.0%2C113.0%20L%20223.0%2C106.0%20L%20260.0%2C106.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20106.0%2C370.0%20L%2069.0%2C370.0%20L%2062.0%2C363.0%20L%2062.0%2C348.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20304.0%2C172.0%20L%20304.0%2C91.0%20L%20297.0%2C84.0%20L%20282.0%2C84.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20172.0%2C84.0%20L%20135.0%2C84.0%20L%20128.0%2C91.0%20L%20128.0%2C121.0%20L%20121.0%2C128.0%20L%2084.0%2C128.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%2084.0%2C414.0%20L%2069.0%2C414.0%20L%2062.0%2C421.0%20L%2062.0%2C458.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M%20326.0%2C172.0%20L%20260.0%2C172.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.6%22/%3E%3C/g%3E%3Cg%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22128.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22128.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22106.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22106.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22392.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22392.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22304.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22304.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%2284.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%2284.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%2262.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%2262.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22436.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22436.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22392.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22392.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22150.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22150.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%2284.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%2284.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22458.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22458.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22458.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22458.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22370.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22370.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22348.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22348.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22370.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22370.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22370.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22370.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22150.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22150.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22106.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22106.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22128.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22128.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%2284.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%2284.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22436.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22436.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22436.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22436.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22502.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22502.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22414.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22414.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22172.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22172.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22238.0%22%20cy%3D%2240.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22238.0%22%20cy%3D%2240.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22128.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22128.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2240.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2240.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22392.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22392.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22458.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22458.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22238.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22238.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22194.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22194.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22216.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22216.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22370.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22370.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22348.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22348.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22172.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22172.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%2284.0%22%20r%3D%223.6%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%2284.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2284.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2284.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22128.0%22%20r%3D%223.6%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22128.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22414.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22414.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22458.0%22%20r%3D%223.6%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22458.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22172.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22172.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22172.0%22%20r%3D%223.6%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22172.0%22%20r%3D%226.4%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22/%3E%3C/g%3E%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.85%22%20stroke-width%3D%223%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C64%20M%2034%2C34%20L%2064%2C34%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C64%20M%20366%2C34%20L%20336%2C34%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C496%20M%2034%2C526%20L%2064%2C526%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C496%20M%20366%2C526%20L%20336%2C526%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.5%22%20stroke-opacity%3D%220.95%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important; background-color: #02070a !important; background-size: cover !important; background-position: center !important; overflow: hidden; } /* ---- DOS TOKEN ANIME ---- Une SVG posee en background-image n'anime pas : le navigateur la traite comme une image figee. Le dos est donc decoupe en trois calques : le circuit reste en fond, le jeton passe sur ::before ou une rotation CSS peut le faire tourner, et un balayage lumineux sur ::after est masque par les pistes seules — la lumiere ne court ainsi que le long du circuit, jamais sur le fond. */ body.token-theme .card.face-down::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1 / 1; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22cadre%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22/%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22/%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform%3D%22translate%2880%2C80%29%22%3E%3Ccircle%20r%3D%2254%22%20fill%3D%22%2302100f%22%20fill-opacity%3D%220.92%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-width%3D%222.8%22/%3E%3Ccircle%20r%3D%2264%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6%22/%3E%3Ccircle%20r%3D%2241%22%20fill%3D%22none%22%20stroke%3D%22url%28%23cadre%29%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%224%206%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%2219.1%22%20cy%3D%2219.1%22%20r%3D%227.5%22%20fill%3D%22%23ff0055%22/%3E%3Ccircle%20cx%3D%2219.1%22%20cy%3D%2219.1%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%22-19.1%22%20cy%3D%2219.1%22%20r%3D%227.5%22%20fill%3D%22%23ffaa00%22/%3E%3Ccircle%20cx%3D%22-19.1%22%20cy%3D%2219.1%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%22-19.1%22%20cy%3D%22-19.1%22%20r%3D%227.5%22%20fill%3D%22%2300e5ff%22/%3E%3Ccircle%20cx%3D%22-19.1%22%20cy%3D%22-19.1%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%2219.1%22%20cy%3D%22-19.1%22%20r%3D%227.5%22%20fill%3D%22%2339ff14%22/%3E%3Ccircle%20cx%3D%2219.1%22%20cy%3D%22-19.1%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221%22%20opacity%3D%220.5%22/%3E%3Ccircle%20r%3D%225%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.9%22/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; animation: dosJetonTourne 16s linear infinite; } @keyframes dosJetonTourne { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } body.token-theme .card.face-down::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Les quatre enseignes se suivent dans la vague de lumiere. */ background: linear-gradient(115deg, transparent 30%, var(--neon-rose) 39%, var(--neon-or) 45%, var(--neon-cyan) 51%, var(--neon-vert) 57%, transparent 66%); background-size: 300% 100%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M%20150.0%2C128.0%20L%20150.0%2C113.0%20L%20157.0%2C106.0%20L%20216.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20348.0%2C392.0%20L%20333.0%2C392.0%20L%20326.0%2C385.0%20L%20326.0%2C304.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C84.0%20L%20106.0%2C69.0%20L%20113.0%2C62.0%20L%20128.0%2C62.0%22/%3E%3Cpath%20d%3D%22M%2040.0%2C194.0%20L%2099.0%2C194.0%20L%20106.0%2C187.0%20L%20106.0%2C157.0%20L%20113.0%2C150.0%20L%20172.0%2C150.0%22/%3E%3Cpath%20d%3D%22M%2062.0%2C436.0%20L%2047.0%2C436.0%20L%2040.0%2C443.0%20L%2040.0%2C451.0%20L%2047.0%2C458.0%20L%20121.0%2C458.0%20L%20128.0%2C451.0%20L%20128.0%2C392.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C150.0%20L%2047.0%2C150.0%20L%2040.0%2C143.0%20L%2040.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20128.0%2C458.0%20L%20216.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C370.0%20L%2084.0%2C348.0%22/%3E%3Cpath%20d%3D%22M%20128.0%2C370.0%20L%20194.0%2C370.0%22/%3E%3Cpath%20d%3D%22M%20150.0%2C150.0%20L%20172.0%2C150.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C194.0%20L%2084.0%2C113.0%20L%2091.0%2C106.0%20L%20128.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20348.0%2C128.0%20L%20348.0%2C47.0%20L%20341.0%2C40.0%20L%20267.0%2C40.0%20L%20260.0%2C47.0%20L%20260.0%2C77.0%20L%20267.0%2C84.0%20L%20304.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20326.0%2C436.0%20L%20267.0%2C436.0%20L%20260.0%2C443.0%20L%20260.0%2C473.0%20L%20253.0%2C480.0%20L%20201.0%2C480.0%20L%20194.0%2C473.0%20L%20194.0%2C436.0%22/%3E%3Cpath%20d%3D%22M%20194.0%2C502.0%20L%20194.0%2C421.0%20L%20187.0%2C414.0%20L%20172.0%2C414.0%22/%3E%3Cpath%20d%3D%22M%2040.0%2C172.0%20L%20121.0%2C172.0%20L%20128.0%2C179.0%20L%20128.0%2C187.0%20L%20121.0%2C194.0%20L%20106.0%2C194.0%22/%3E%3Cpath%20d%3D%22M%20238.0%2C40.0%20L%20319.0%2C40.0%20L%20326.0%2C47.0%20L%20326.0%2C99.0%20L%20319.0%2C106.0%20L%20260.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%2062.0%2C128.0%20L%20121.0%2C128.0%20L%20128.0%2C121.0%20L%20128.0%2C91.0%20L%20135.0%2C84.0%20L%20165.0%2C84.0%20L%20172.0%2C77.0%20L%20172.0%2C40.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C392.0%20L%20304.0%2C451.0%20L%20297.0%2C458.0%20L%20260.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C194.0%20L%20304.0%2C238.0%22/%3E%3Cpath%20d%3D%22M%20282.0%2C194.0%20L%20216.0%2C194.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C216.0%20L%20304.0%2C179.0%20L%20297.0%2C172.0%20L%20223.0%2C172.0%20L%20216.0%2C165.0%20L%20216.0%2C113.0%20L%20223.0%2C106.0%20L%20260.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C370.0%20L%2069.0%2C370.0%20L%2062.0%2C363.0%20L%2062.0%2C348.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C172.0%20L%20304.0%2C91.0%20L%20297.0%2C84.0%20L%20282.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20172.0%2C84.0%20L%20135.0%2C84.0%20L%20128.0%2C91.0%20L%20128.0%2C121.0%20L%20121.0%2C128.0%20L%2084.0%2C128.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C414.0%20L%2069.0%2C414.0%20L%2062.0%2C421.0%20L%2062.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%20326.0%2C172.0%20L%20260.0%2C172.0%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22304.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%2262.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22348.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22502.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22414.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22238.0%22%20cy%3D%2240.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2240.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22238.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22216.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22348.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22414.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M%20150.0%2C128.0%20L%20150.0%2C113.0%20L%20157.0%2C106.0%20L%20216.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20348.0%2C392.0%20L%20333.0%2C392.0%20L%20326.0%2C385.0%20L%20326.0%2C304.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C84.0%20L%20106.0%2C69.0%20L%20113.0%2C62.0%20L%20128.0%2C62.0%22/%3E%3Cpath%20d%3D%22M%2040.0%2C194.0%20L%2099.0%2C194.0%20L%20106.0%2C187.0%20L%20106.0%2C157.0%20L%20113.0%2C150.0%20L%20172.0%2C150.0%22/%3E%3Cpath%20d%3D%22M%2062.0%2C436.0%20L%2047.0%2C436.0%20L%2040.0%2C443.0%20L%2040.0%2C451.0%20L%2047.0%2C458.0%20L%20121.0%2C458.0%20L%20128.0%2C451.0%20L%20128.0%2C392.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C150.0%20L%2047.0%2C150.0%20L%2040.0%2C143.0%20L%2040.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20128.0%2C458.0%20L%20216.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C370.0%20L%2084.0%2C348.0%22/%3E%3Cpath%20d%3D%22M%20128.0%2C370.0%20L%20194.0%2C370.0%22/%3E%3Cpath%20d%3D%22M%20150.0%2C150.0%20L%20172.0%2C150.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C194.0%20L%2084.0%2C113.0%20L%2091.0%2C106.0%20L%20128.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20348.0%2C128.0%20L%20348.0%2C47.0%20L%20341.0%2C40.0%20L%20267.0%2C40.0%20L%20260.0%2C47.0%20L%20260.0%2C77.0%20L%20267.0%2C84.0%20L%20304.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20326.0%2C436.0%20L%20267.0%2C436.0%20L%20260.0%2C443.0%20L%20260.0%2C473.0%20L%20253.0%2C480.0%20L%20201.0%2C480.0%20L%20194.0%2C473.0%20L%20194.0%2C436.0%22/%3E%3Cpath%20d%3D%22M%20194.0%2C502.0%20L%20194.0%2C421.0%20L%20187.0%2C414.0%20L%20172.0%2C414.0%22/%3E%3Cpath%20d%3D%22M%2040.0%2C172.0%20L%20121.0%2C172.0%20L%20128.0%2C179.0%20L%20128.0%2C187.0%20L%20121.0%2C194.0%20L%20106.0%2C194.0%22/%3E%3Cpath%20d%3D%22M%20238.0%2C40.0%20L%20319.0%2C40.0%20L%20326.0%2C47.0%20L%20326.0%2C99.0%20L%20319.0%2C106.0%20L%20260.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%2062.0%2C128.0%20L%20121.0%2C128.0%20L%20128.0%2C121.0%20L%20128.0%2C91.0%20L%20135.0%2C84.0%20L%20165.0%2C84.0%20L%20172.0%2C77.0%20L%20172.0%2C40.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C392.0%20L%20304.0%2C451.0%20L%20297.0%2C458.0%20L%20260.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C194.0%20L%20304.0%2C238.0%22/%3E%3Cpath%20d%3D%22M%20282.0%2C194.0%20L%20216.0%2C194.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C216.0%20L%20304.0%2C179.0%20L%20297.0%2C172.0%20L%20223.0%2C172.0%20L%20216.0%2C165.0%20L%20216.0%2C113.0%20L%20223.0%2C106.0%20L%20260.0%2C106.0%22/%3E%3Cpath%20d%3D%22M%20106.0%2C370.0%20L%2069.0%2C370.0%20L%2062.0%2C363.0%20L%2062.0%2C348.0%22/%3E%3Cpath%20d%3D%22M%20304.0%2C172.0%20L%20304.0%2C91.0%20L%20297.0%2C84.0%20L%20282.0%2C84.0%22/%3E%3Cpath%20d%3D%22M%20172.0%2C84.0%20L%20135.0%2C84.0%20L%20128.0%2C91.0%20L%20128.0%2C121.0%20L%20121.0%2C128.0%20L%2084.0%2C128.0%22/%3E%3Cpath%20d%3D%22M%2084.0%2C414.0%20L%2069.0%2C414.0%20L%2062.0%2C421.0%20L%2062.0%2C458.0%22/%3E%3Cpath%20d%3D%22M%20326.0%2C172.0%20L%20260.0%2C172.0%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22304.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%2262.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22348.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22150.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22150.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22128.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22436.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22194.0%22%20cy%3D%22502.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%22414.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2240.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22238.0%22%20cy%3D%2240.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2240.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22392.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22238.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22216.0%22%20cy%3D%22194.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22216.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22106.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22106.0%22%20cy%3D%22370.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22348.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22304.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22282.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22172.0%22%20cy%3D%2284.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22128.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2284.0%22%20cy%3D%22414.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%2262.0%22%20cy%3D%22458.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22326.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3Ccircle%20cx%3D%22260.0%22%20cy%3D%22172.0%22%20r%3D%224.4%22/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: screen; animation: dosCourant 3.8s linear infinite; } @keyframes dosCourant { from { background-position: 190% 0; } to { background-position: -90% 0; } } /* Une carte que l'on survole pour la lire doit montrer sa face, pas ses calques. */ .card.face-down.secret-peek:hover::before, .card.face-down.secret-peek:hover::after { display: none; } @media (prefers-reduced-motion: reduce) { body.token-theme .card.face-down::before, body.token-theme .card.face-down::after { animation: none !important; } } /* ====================================================================== DOS DE CARTE INTERACTIF (V224) — mode classique uniquement. Valeurs issues de l'atelier valide par Angelos, regroupees ici en variables : reajuster ne demande de toucher qu'a une ligne. ====================================================================== */ :root { --dc-rotation: 60s; /* un tour de rosace */ --dc-respire: 1.9s; /* respiration du noyau */ --dc-courant: 9s; /* passage du courant lumineux */ --dc-neon: 11px; /* lueur au repos (22px de reglage = rayon 11) */ --dc-lift: 13px; /* soulevement au survol */ --dc-accel: 7; /* acceleration de la rosace au survol */ --dc-halo: 0.54; /* intensite du halo au survol (87%) */ } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down { box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 var(--dc-neon) rgba(0,229,255,0.35) !important; transition: transform .22s ease, box-shadow .22s ease; /* Respiration : on anime la taille de la PREMIERE couche de fond (le noyau), les deux autres restant fixes. C'est ce qui permet de faire respirer un seul element d'une image composee. */ animation: dcRespire var(--dc-respire) ease-in-out infinite; } @keyframes dcRespire { 0%, 100% { background-size: 26% auto, 100% 100%, 100% 100%; } 50% { background-size: 29.4% auto, 100% 100%, 100% 100%; } } /* La rosace tourne. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22c4%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%20stroke-opacity%3D%220.55%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C200%29%22%3E%3Ccircle%20r%3D%22152%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20r%3D%22166%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; animation: dcTourne var(--dc-rotation) linear infinite; } @keyframes dcTourne { to { transform: rotate(360deg); } } /* Le courant lumineux, MASQUE par le trace de la rosace : la lumiere ne court que le long des lignes du motif, jamais sur le fond. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, var(--neon-rose) 39%, var(--neon-or) 45%, var(--neon-cyan) 51%, var(--neon-vert) 57%, transparent 66%); background-size: 300% 100%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22c4%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%20stroke-opacity%3D%220.55%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C200%29%22%3E%3Ccircle%20r%3D%22152%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20r%3D%22166%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22c4%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%20stroke-opacity%3D%220.55%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C200%29%22%3E%3Ccircle%20r%3D%22152%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20r%3D%22166%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; mix-blend-mode: screen; opacity: 0.9; animation: dcCourant var(--dc-courant) linear infinite; } @keyframes dcCourant { from { background-position: 190% 0; } to { background-position: -90% 0; } } /* ---- L'interactivite : au survol ---- */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down:hover { transform: translateY(calc(var(--dc-lift) * -1)); box-shadow: 0 8px 22px rgba(0,0,0,0.7), 0 0 calc(var(--dc-neon) * 2.2) rgba(0,229,255,var(--dc-halo)) !important; /* Sans ce cran, une carte soulevee resterait glissee sous sa voisine : les rangees se chevauchent volontairement. */ z-index: 12; } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down:hover::before { animation-duration: calc(var(--dc-rotation) / var(--dc-accel)); } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down:active { transform: translateY(calc(var(--dc-lift) * -0.4)) scale(0.97); } @media (prefers-reduced-motion: reduce) { body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down, body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down::before, body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .card.face-down::after { animation: none !important; } } /* --- DOS DE CARTE FLASH : éclair bleu électrique --- */ body.flash-theme .card.face-down { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20560%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22bg%22%20cx%3D%2250%25%22%20cy%3D%2238%25%22%20r%3D%2275%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230a2c58%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23061631%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23020208%22/%3E%3C/radialGradient%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-60%25%22%20y%3D%22-60%25%22%20width%3D%22220%25%22%20height%3D%22220%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%229%22/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23bg%29%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22380%22%20height%3D%22540%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-opacity%3D%220.8%22%20stroke-width%3D%223%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%22360%22%20height%3D%22520%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22/%3E%3Cg%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22%20opacity%3D%220.85%22%3E%3Cpath%20d%3D%22M30%2C30%20L30%2C56%20M30%2C30%20L56%2C30%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M370%2C30%20L370%2C56%20M370%2C30%20L344%2C30%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M30%2C530%20L30%2C504%20M30%2C530%20L56%2C530%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M370%2C530%20L370%2C504%20M370%2C530%20L344%2C530%22%20fill%3D%22none%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%237fe7ff%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%20opacity%3D%220.4%22%3E%3Cpolyline%20points%3D%2290%2C140%20130%2C190%20110%2C205%20160%2C260%22/%3E%3Cpolyline%20points%3D%22300%2C420%20260%2C370%20280%2C355%20230%2C300%22/%3E%3C/g%3E%3Cpath%20d%3D%22M225%2C95%20L150%2C320%20L190%2C320%20L165%2C500%20L270%2C260%20L215%2C260%20Z%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.9%22%20filter%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M225%2C95%20L150%2C320%20L190%2C320%20L165%2C500%20L270%2C260%20L215%2C260%20Z%22%20fill%3D%22%23eafcff%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22/%3E%3Cg%20fill%3D%22%23bff3ff%22%20opacity%3D%220.9%22%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%22150%22%20r%3D%222.4%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22380%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22450%22%20r%3D%222.2%22/%3E%3C/g%3E%3C/svg%3E") !important; background-color: #020208 !important; background-size: cover !important; background-position: center !important; } .card.face-down .card-tl, .card.face-down .card-tr, .card.face-down .card-bl, .card.face-down .card-br, .card.face-down .card-center { display: none !important; } .card.empty { background-color: var(--w-bg-darker) !important; border: 1px dashed var(--w-border) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important; z-index: 1 !important; } .card.empty:hover { background-color: var(--w-border) !important; border-style: solid !important; } .secret-peek { cursor: pointer; transition: all 0.2s; } .secret-peek:hover { background: var(--card-bg) !important; border: var(--card-border) !important; } .secret-peek.suit-red:hover { color: var(--suit-red) !important; } .secret-peek.suit-blue:hover { color: var(--suit-blue) !important; } .secret-peek.suit-orange:hover { color: var(--suit-orange) !important; } .secret-peek.suit-green:hover { color: var(--suit-green) !important; } .secret-peek:hover .card-tl, .secret-peek:hover .card-tr, .secret-peek:hover .card-bl, .secret-peek:hover .card-br, .secret-peek:hover .card-center { display: flex !important; } .deal-animation { animation: dropIn 0.2s ease-out forwards; } /* V246 — brique 2b-ii : pulsation légère pendant l'attente de confirmation serveur, sans révéler aucune identité de carte. Volontairement discrète — c'est un accusé de réception du clic, pas une préfiguration du résultat. */ .en-attente-serveur { animation: pulseAttente 0.6s ease-in-out infinite; opacity: 0.55; } @keyframes pulseAttente { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes dropIn { 0% { transform: translateY(-10px) scale(1.02); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .btn { background: var(--w-red); color: #fff; border: none; padding: 1.2vh 2.5vw; font-size: 1.8vh; font-weight: 800; border-radius: 4px; cursor: pointer; transition: background 0.2s; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .btn:hover { background: var(--w-red-hover); } .lobby-mode-btn { /* Tuile modulaire : fond sombre + halo néon de la couleur du mode (--accent). Chaque mode pose son propre --accent ; tout le reste (dégradé, bordure, lueur, survol) en découle automatiquement, ce qui garantit une cohérence graphique entre les modes sans avoir à styler chacun à la main. */ position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vh; width: 20vw; min-width: 170px; max-width: 260px; height: 15.5vh; min-height: 130px; padding: 1.4vh 1.2vh; border-radius: 14px; /* Repli pour les navigateurs sans color-mix() : carte sombre + bordure discrète. Les déclarations suivantes l'écrasent dès que color-mix() est reconnu. */ background: #0b0d14; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 6px 18px rgba(0,0,0,0.55); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent, var(--neon-rose)) 34%, transparent) 0%, transparent 62%), linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 45%), #0b0d14; border: 1px solid color-mix(in srgb, var(--accent, var(--neon-rose)) 55%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset, 0 6px 18px rgba(0,0,0,0.55), 0 0 20px color-mix(in srgb, var(--accent, var(--neon-rose)) 28%, transparent); transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Liseré lumineux en haut de la tuile : rappelle l'enseigne néon sans surcharger */ .lobby-mode-btn::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, var(--neon-rose)), transparent); opacity: 0.85; } .lobby-mode-btn:hover, .lobby-mode-btn:focus-visible { /* Le mode survolé est grossi et passe au-dessus de ses voisins : c'est lui qui capte le regard, les autres reculent (voir la règle de recul plus bas). */ transform: translateY(-8px) scale(1.07); z-index: 6; /* La tuile porte aussi la classe .btn, dont la règle `.btn:hover` impose le rouge de la charte. Sans redéclarer le fond ici, tous les modes viraient au rouge au survol et perdaient leur teinte. On le repose donc, un cran plus lumineux que l'état de repos, pour que le survol reste dans la couleur du mode. */ background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent, var(--neon-rose)) 50%, transparent) 0%, transparent 66%), linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 45%), #0b0d14; border-color: color-mix(in srgb, var(--accent, var(--neon-rose)) 100%, transparent); box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset, 0 18px 34px rgba(0,0,0,0.65), 0 0 46px color-mix(in srgb, var(--accent, var(--neon-rose)) 70%, transparent); } .lobby-mode-btn:hover .lobby-icon { transform: scale(1.06); } .lobby-mode-btn:active { transform: translateY(-3px) scale(1.03); } /* La tuile agrandie doit pouvoir déborder par-dessus ses voisines : sans ça, l'ordre du DOM ferait passer les tuiles suivantes au-dessus d'elle. */ .lobby-mode-wrap { transition: z-index 0s; } .lobby-mode-wrap:hover { z-index: 6; } /* Recul des tuiles non survolées : renforce la mise en avant sans rien masquer. Via :has(), donc sans effet sur les navigateurs qui ne le connaissent pas. */ #lobby-home:has(.lobby-mode-btn:hover) .lobby-mode-btn:not(:hover), #lobby-main-buttons:has(.lobby-mode-btn:hover) .lobby-mode-wrap:not(:hover) .lobby-mode-btn { opacity: 0.55; filter: saturate(0.55); transform: scale(0.97); } .lobby-mode-title { font-size: 1.6vh; font-weight: 800; letter-spacing: 0.6px; line-height: 1.15; text-shadow: 0 0 10px color-mix(in srgb, var(--accent, var(--neon-rose)) 70%, transparent); } .lobby-mode-sub { font-size: 1.15vh; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,0.62); text-transform: none; letter-spacing: 0.2px; text-shadow: none; max-width: 92%; } /* Fenêtres basses (portables 13-14", navigateur avec barres d'outils) : l'empilement logo + favoris + carrousel + points + retour ne tient plus dans la hauteur utile. On resserre l'ensemble plutôt que de compter sur le défilement, pour que le bouton « Retour » reste toujours visible sans avoir à faire défiler. */ @media (max-height: 780px) { #menu-logo-img { width: min(52vw, 560px) !important; height: auto !important; margin-bottom: 2.2vh !important; } body:not(.game-active) .game-wrapper { padding-top: 2.2vh !important; } #lobby-favorites-bar { margin-bottom: 0.8vh; } .carousel-slide { padding: 1.2vh 1.4vw; } .carousel-slide .lobby-mode-btn { height: clamp(150px, 24vh, 210px); padding: 1.8vh 3vw; } .carousel-arrow { height: clamp(150px, 24vh, 210px); } .carousel-slide .lobby-icon { font-size: 5.4vh; } .carousel-slide .lobby-mode-title { font-size: 2.4vh; } .carousel-slide .lobby-mode-sub { font-size: 1.45vh; } .mode-carousel { margin-bottom: 1vh; } .carousel-dots { margin-bottom: 1vh; } } /* ---- CARROUSEL DES MODES ---- Un seul mode à l'écran, en grand, avec deux flèches latérales et un glissement horizontal. La piste contient les 6 diapositives côte à côte ; on la décale de -100% par cran. Le débordement est masqué par la fenêtre, donc une seule diapositive est visible à la fois. */ .mode-carousel { display: flex; align-items: center; justify-content: center; gap: 1.2vw; width: 100%; max-width: 900px; margin: 0 auto 1.6vh; } /* Sans box-sizing:border-box, la marge intérieure des diapositives s'ajoute à leur largeur de 100% : chaque diapositive devient plus large que la fenêtre, le décalage de -100% par cran devient insuffisant et l'erreur s'accumule — le mode finit visiblement décentré. La feuille de style n'a pas de box-sizing global, on le pose donc explicitement sur tout le carrousel. */ .mode-carousel, .mode-carousel *, .carousel-viewport, .carousel-track, .carousel-slide, .carousel-slide .lobby-mode-wrap, .carousel-slide .lobby-mode-btn { box-sizing: border-box; } .carousel-viewport { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; border-radius: 16px; } .carousel-track { display: flex; transition: transform 0.42s cubic-bezier(.22,.68,.28,1); will-change: transform; } .carousel-slide { flex: 0 0 100%; width: 100%; display: flex; align-items: center; justify-content: center; /* Marge intérieure : la fenêtre masque le débordement, sans cet espace le halo et le bord droit de la tuile étaient rognés. Comptée dans les 100% grâce au box-sizing posé plus haut, sinon les diapositives dérivent. */ padding: 1.8vh 1.6vw; } /* Les diapositives voisines s'effacent : le regard reste sur le mode courant, et le glissement reste lisible pendant la transition. */ .carousel-slide:not(.is-active) { opacity: 0.25; } .carousel-slide { transition: opacity 0.42s ease; } /* La tuile occupe toute la largeur disponible : c'est là qu'on gagne en visibilité. */ .carousel-slide .lobby-mode-wrap { width: 100%; } .carousel-slide .lobby-mode-btn { width: 100%; max-width: none; min-width: 0; height: clamp(165px, 25vh, 250px); gap: 0.8vh; padding: 2.2vh 3.5vw; border-radius: 16px; } .carousel-slide .lobby-icon { font-size: 6.6vh; } .carousel-slide .lobby-mode-title { font-size: 2.8vh; letter-spacing: 1.2px; } .carousel-slide .lobby-mode-sub { font-size: 1.6vh; max-width: 34ch; color: rgba(255,255,255,0.72); } /* Au survol la tuile grossit déjà ; dans le carrousel elle est seule, donc on retire le décalage vertical qui la ferait sortir de la fenêtre. */ .carousel-slide .lobby-mode-btn:hover, .carousel-slide .lobby-mode-btn:focus-visible { transform: scale(1.02); } .carousel-slide .lobby-mode-btn:active { transform: scale(0.99); } /* Invitation à cliquer, visible seulement sur la diapositive active */ .lobby-mode-cta { margin-top: 0.6vh; padding: 0.7vh 2.4vh; border-radius: 999px; font-size: 1.4vh; font-weight: 800; letter-spacing: 1.4px; border: 1px solid color-mix(in srgb, var(--accent, var(--neon-rose)) 75%, transparent); background: color-mix(in srgb, var(--accent, var(--neon-rose)) 18%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent, var(--neon-rose)) 35%, transparent); } /* Flèches : hauts panneaux biseautés à la hauteur de la tuile, dans la teinte du mode courant (--carousel-accent, posée par le JS à chaque changement). Le biseau est obtenu par clip-path, ce qui donne l'angle coupé sans image ni bordure. */ .carousel-arrow { flex: 0 0 auto; position: relative; width: 5vh; min-width: 44px; height: clamp(165px, 25vh, 250px); display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; font-size: 0; line-height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--carousel-accent, #8b93a5) 26%, transparent) 0%, color-mix(in srgb, var(--carousel-accent, #8b93a5) 9%, transparent) 50%, color-mix(in srgb, var(--carousel-accent, #8b93a5) 26%, transparent) 100%); cursor: pointer; text-shadow: none; transition: transform 0.2s ease, filter 0.25s ease, background 0.45s ease; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--carousel-accent, #8b93a5) 40%, transparent)); } .carousel-arrow--prev { clip-path: polygon(0 50%, 62% 0, 100% 0, 100% 100%, 62% 100%); } .carousel-arrow--next { clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%); } /* Le chevron est dessiné en CSS (deux traits) plutôt qu'avec un caractère : il reste net à toutes les tailles et prend la couleur du mode. */ .carousel-arrow::after { content: ""; width: 1.5vh; height: 1.5vh; min-width: 13px; min-height: 13px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transition: transform 0.2s ease; } .carousel-arrow--prev::after { transform: rotate(-135deg); margin-left: 0.7vh; } .carousel-arrow--next::after { transform: rotate(45deg); margin-right: 0.7vh; } /* Liseré lumineux sur le bord long, côté tuile : rappelle le liseré des tuiles. */ .carousel-arrow::before { content: ""; position: absolute; top: 12%; bottom: 12%; width: 2px; background: linear-gradient(180deg, transparent, var(--carousel-accent, #8b93a5), transparent); opacity: 0.9; } .carousel-arrow--prev::before { right: 0; } .carousel-arrow--next::before { left: 0; } .carousel-arrow:hover, .carousel-arrow:focus-visible { transform: scale(1.04); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--carousel-accent, #8b93a5) 85%, transparent)); background: linear-gradient(180deg, color-mix(in srgb, var(--carousel-accent, #8b93a5) 48%, transparent) 0%, color-mix(in srgb, var(--carousel-accent, #8b93a5) 20%, transparent) 50%, color-mix(in srgb, var(--carousel-accent, #8b93a5) 48%, transparent) 100%); } .carousel-arrow--prev:hover::after { transform: rotate(-135deg) translate(2px, -2px); } .carousel-arrow--next:hover::after { transform: rotate(45deg) translate(2px, -2px); } .carousel-arrow:active { transform: scale(0.99); } .carousel-dots { display: flex; gap: 1vh; justify-content: center; margin-bottom: 1.4vh; } .carousel-dot { width: 1.1vh; height: 1.1vh; min-width: 9px; min-height: 9px; padding: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.22); border: none; transition: all 0.25s ease; } .carousel-dot.is-active { background: var(--carousel-accent, #fff); box-shadow: 0 0 14px var(--carousel-accent, rgba(255,255,255,0.85)); transform: scale(1.35); } .carousel-dots, .mode-carousel, #lobby-online-buttons { transition: --carousel-accent 0.5s ease; } /* Modes en ligne : boutons compacts de la modale, désormais sur deux lignes (intitulé + explication) puisque le ⓘ a été retiré. */ .online-variant-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3vh; line-height: 1.2; text-align: center; } .online-variant-title { font-weight: 800; } .online-variant-sub { font-size: 1.1vh; font-weight: 600; text-transform: none; letter-spacing: 0.2px; color: rgba(255,255,255,0.66); text-shadow: none; } .lobby-mode-btn .lobby-icon { font-size: 3.4vh; line-height: 1; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent, var(--neon-rose)) 75%, transparent)); transition: transform 0.18s ease; } /* Les deux portes d'entrée (Local / En ligne) : mêmes codes graphiques, format plus large pour marquer la hiérarchie — ce sont les premiers choix de l'écran d'accueil. */ .lobby-mode-btn--hero { width: 34vw; max-width: 420px; min-width: 240px; height: 17vh; min-height: 145px; } .lobby-mode-btn--hero .lobby-icon { font-size: 4.2vh; } .lobby-mode-btn--hero .lobby-mode-title { font-size: 2vh; } .lobby-mode-btn--hero .lobby-mode-sub { font-size: 1.25vh; } .lobby-diff-btn { font-size: 1.4vh; padding: 1vh 2vw; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 3000; } .modal-content { background: var(--w-bg-app); border: 1px solid var(--w-border); border-radius: 8px; padding: 2vh 3vw; text-align: center; max-width: 650px; width: 90%; color: var(--w-text-main); max-height: 80vh; box-shadow: 0 10px 30px rgba(0,0,0,0.8); display: flex; flex-direction: column; } .modal-content h2 { flex-shrink: 0; color: #fff; margin-top: 0; font-size: 3vh; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; border-bottom: 1px solid var(--w-gold); box-shadow: 0 4px 20px rgba(255, 170, 0, 0.2); padding-bottom: 1vh; margin-bottom: 2vh;} .modal-results { flex-grow: 1; overflow-y: auto; text-align: left; background: var(--w-bg-panel); border: 1px solid var(--w-border); padding: 2vh; border-radius: 4px; margin-bottom: 2vh; font-size: 1.8vh; line-height: 1.6; } #end-modal-buttons { flex-shrink: 0; } .col-winner { color: var(--w-highlight); font-weight: 800; } .col-tie { color: var(--w-text-muted); font-weight: 800; } .col-loser { color: var(--w-red); font-weight: 800; } .bonus-text { color: #9c27b0; font-weight: 800; text-align: center; font-size: 2vh; } .card-mini { font-weight: bold; margin: 0 2px; background: #fff; color:#000; padding: 2px 6px; border-radius: 3px; display: inline-block; min-width: 20px; text-align: center; font-size: 1.6vh; border: 1px solid #ccc;} .card-mini.suit-red { color: var(--suit-red); } .card-mini.suit-blue { color: var(--suit-blue); } .card-mini.suit-orange { color: var(--suit-orange); } .card-mini.suit-green { color: var(--suit-green); } .combo-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--w-border); padding: 1.2vh 0; font-size: 1.6vh; } .combo-row:last-child { border-bottom: none; } .color-btn { width: 6vh; height: 6vh; border-radius: 4px; border: 2px solid var(--w-border); cursor: pointer; transition: all 0.2s; } .color-btn:hover { border-color: #fff; transform: translateY(-2px);} ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--w-bg-app); } ::-webkit-scrollbar-thumb { background: var(--w-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--w-text-muted); } /* ================= MODE DJINKI MYSTERY — HABILLAGE DÉDIÉ ================= */ /* Ambiance sombre et mystique : les cartes Néon restent le socle lisible, seuls le fond, les halos et le HUD changent. */ /* Fond de scène : nappes violettes profondes, plus sourdes que le mode Token pour installer le doute plutôt que la tension. */ body.mystery-theme::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 50% 4%, rgba(112, 20, 190, 0.30), transparent 72%), radial-gradient(ellipse 70% 45% at 50% 96%, rgba(60, 10, 130, 0.32), transparent 72%), radial-gradient(ellipse 90% 60% at 50% 50%, rgba(20, 0, 40, 0.55), transparent 80%); } /* Points d'interrogation néon en arrière-plan, dérive très lente. Masqués au centre pour ne JAMAIS gêner la lecture des plateaux. */ body.mystery-theme::after { content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: 0.15; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20font-family%3D%22Georgia%2C%27Times%20New%20Roman%27%2Cserif%22%20font-weight%3D%22bold%22%20fill%3D%22%23b14aff%22%3E%3Ctext%20x%3D%2218%22%20y%3D%2258%22%20font-size%3D%2252%22%20opacity%3D%220.85%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2242%22%20font-size%3D%2230%22%20opacity%3D%220.55%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%2296%22%20y%3D%22118%22%20font-size%3D%2240%22%20opacity%3D%220.7%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%22196%22%20y%3D%22150%22%20font-size%3D%2246%22%20opacity%3D%220.6%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22182%22%20font-size%3D%2234%22%20opacity%3D%220.5%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%22128%22%20y%3D%22222%22%20font-size%3D%2256%22%20opacity%3D%220.75%22%3E%3F%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20font-family%3D%22Georgia%2C%27Times%20New%20Roman%27%2Cserif%22%20font-weight%3D%22bold%22%20fill%3D%22%2300e5ff%22%3E%3Ctext%20x%3D%22206%22%20y%3D%2286%22%20font-size%3D%2226%22%20opacity%3D%220.45%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%2266%22%20y%3D%2296%22%20font-size%3D%2222%22%20opacity%3D%220.4%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%228%22%20y%3D%22132%22%20font-size%3D%2228%22%20opacity%3D%220.4%22%3E%3F%3C%2Ftext%3E%3Ctext%20x%3D%22164%22%20y%3D%22196%22%20font-size%3D%2224%22%20opacity%3D%220.35%22%3E%3F%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: repeat; background-size: 330px 330px; filter: drop-shadow(0 0 6px rgba(177, 74, 255, 0.7)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%); animation: mysteryDrift 90s linear infinite; } @keyframes mysteryDrift { 0% { background-position: 0 0; } 100% { background-position: 240px 480px; } } /* Liseré violet des plateaux : discret, il signale simplement le mode. */ body.mystery-theme #board-player, body.mystery-theme #board-opponent { border: 2px solid rgba(177, 74, 255, 0.55) !important; box-shadow: 0 0 26px -6px rgba(177, 74, 255, 0.55) !important; } body.mystery-theme #board-player.active-board, body.mystery-theme #board-opponent.active-board { box-shadow: 0 0 40px -4px rgba(177, 74, 255, 0.85) !important; } /* --- CARTE MASQUÉE PAR UN CRÉDIT MYSTERY --- Aura qui respire : la carte "retient son souffle" avant d'être révélée. */ @keyframes mysteryBreathe { 0%,100% { box-shadow: 0 0 10px rgba(177,74,255,0.55), inset 0 0 8px rgba(177,74,255,0.18); } 50% { box-shadow: 0 0 22px rgba(177,74,255,0.95), inset 0 0 14px rgba(177,74,255,0.30); } } .card.mystery-hidden { border-color: #b14aff !important; animation: mysteryBreathe 2.2s ease-in-out infinite; position: relative; } /* Le "?" flottant posé sur la carte masquée : signe distinctif du crédit Mystery. */ .card.mystery-hidden::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', serif; font-weight: 900; font-size: 3.2vh; color: #d79bff; text-shadow: 0 0 10px #b14aff, 0 0 20px #b14aff; pointer-events: none; opacity: 0.9; } /* Au survol d'une carte que l'on a le droit de vérifier, le "?" s'efface. */ .card.mystery-hidden.secret-peek:hover::after { opacity: 0; } /* --- ANIMATION DE RÉVÉLATION --- L'aura se contracte, la carte pivote, un éclat confirme le dévoilement. */ @keyframes mysteryReveal { 0% { transform: rotateY(90deg) scale(0.90); opacity: 0.30; box-shadow: 0 0 34px rgba(177,74,255,1); filter: brightness(1.5); } 45% { transform: rotateY(20deg) scale(1.10); opacity: 1; box-shadow: 0 0 26px rgba(215,155,255,0.95); filter: brightness(1.7); } 70% { transform: rotateY(0deg) scale(1.06); box-shadow: 0 0 16px rgba(177,74,255,0.6); filter: brightness(1.2); } 100% { transform: rotateY(0deg) scale(1); box-shadow: none; filter: brightness(1); } } .card.mystery-reveal { animation: mysteryReveal 0.75s cubic-bezier(0.2, 0.8, 0.3, 1); z-index: 20; } /* Particules "?" projetées au moment du flip : le mystère se dissout. */ .mystery-particle { position: fixed; z-index: 4500; pointer-events: none; font-family: Georgia, 'Times New Roman', serif; font-weight: 900; color: #d79bff; text-shadow: 0 0 8px #b14aff, 0 0 16px #b14aff; animation: mysteryParticle 0.9s ease-out forwards; } @keyframes mysteryParticle { 0% { transform: translate(0,0) scale(0.6) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--mx), var(--my)) scale(1.5) rotate(var(--mr)); opacity: 0; } } /* --- HUD DES CRÉDITS --- Trois orbes par camp : plein = disponible, éteint = consommé. */ .mystery-hud { display: flex; flex-direction: column; align-items: center; gap: 0.35vh; margin-top: 0.6vh; } .mystery-orbs { display: flex; gap: 0.6vh; justify-content: center; } /* Libellé d'état sous les orbes : la seule consigne à l'écran, au plus près de l'élément que l'on manipule. */ .mystery-note { font-size: 1.05vh; line-height: 1.25; text-align: center; max-width: 12vw; min-height: 1.3vh; color: #a98cc4; text-transform: none; letter-spacing: 0; } .mystery-note.on { color: #e6c8ff; text-shadow: 0 0 8px rgba(177,74,255,0.9); font-weight: 700; } /* V240 : la pastille ronde devient une mini-carte. Un credit Mystery sert a poser une carte face cachee : donner a la commande la forme exacte de ce qu'elle produit rend le geste lisible sans texte. Les proportions sont celles d'une vraie carte (400 x 560), et l'art est le "Voile d'encre" — un grand "?" qui occupe plus de la moitie de la largeur, donc encore parfaitement lisible a ~30 px de haut. */ .mystery-orb { width: 2.0vh; height: 2.8vh; border-radius: 0.35vh; flex: 0 0 auto; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNTYwIj4KPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9ImJnIiBjeD0iNTAlIiBjeT0iMzglIiByPSI3NSUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmMxMDUwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMTMwODI2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA1MDIwOCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M5OGJmZiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxmaWx0ZXIgaWQ9ImciIHg9Ii02MCUiIHk9Ii02MCUiIHdpZHRoPSIyMjAlIiBoZWlnaHQ9IjIyMCUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMCIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNTYwIiByeD0iMjYiIGZpbGw9InVybCgjYmcpIi8+CiAgPHBhdGggZD0iTSAwLDAgUSA5NSwzMCA0MCw3MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjIyIi8+CiAgPHBhdGggZD0iTSA0MDAsMCBRIDI4NywzMCAzNjAsODQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIyLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4yMCIvPgogIDxwYXRoIGQ9Ik0gMCw1NjAgUSA5NSw1MzAgNDAsNDYyIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMi4wIiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuMTgiLz4KICA8cGF0aCBkPSJNIDQwMCw1NjAgUSAyODcsNTMwIDM2MCw0OTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC4xNiIvPgogIDxjaXJjbGUgY3g9IjIwMC4wIiBjeT0iMjUwLjAiIHI9IjE1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1kYXNoYXJyYXk9IiIgb3BhY2l0eT0iMC4xIi8+CiAgPGNpcmNsZSBjeD0iMjAwLjAiIGN5PSIyNTAuMCIgcj0iMTI4IiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtZGFzaGFycmF5PSI0IDYiIG9wYWNpdHk9IjAuMDgiLz4KICA8Y2lyY2xlIGN4PSIyMDAuMCIgY3k9IjI1MC4wIiByPSIxMDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2IxNGFmZiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtZGFzaGFycmF5PSIiIG9wYWNpdHk9IjAuMDciLz4KICA8dGV4dCB4PSIyMDAuMCIgeT0iMzM1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iR2VvcmdpYSwgJ1RpbWVzIE5ldyBSb21hbicsIHNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjIyMCIgZmlsbD0iI2IxNGFmZiIgb3BhY2l0eT0iMC40NSIgZmlsdGVyPSJ1cmwoI2cpIj4/PC90ZXh0PgogIDx0ZXh0IHg9IjIwMC4wIiB5PSIzMzUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCAnVGltZXMgTmV3IFJvbWFuJywgc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iMjIwIiBmaWxsPSJ1cmwoI3EpIiBvcGFjaXR5PSIwLjYyIj4/PC90ZXh0PgogIAogIDxyZWN0IHg9IjE0IiB5PSIxNCIgd2lkdGg9IjM3MiIgaGVpZ2h0PSI1MzIiIHJ4PSIxOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjE0YWZmIiBzdHJva2Utb3BhY2l0eT0iMC40NSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPHJlY3QgeD0iMjQiIHk9IjI0IiB3aWR0aD0iMzUyIiBoZWlnaHQ9IjUxMiIgcng9IjEyIiBmaWxsPSJub25lIiBzdHJva2U9IiNiMTRhZmYiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4="); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #b14aff; box-shadow: 0 0 8px rgba(177, 74, 255, 0.8); font-size: 0; /* le "?" est dans l'art, plus dans le texte du span */ transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; } body.mystery-theme .mystery-orb.available { animation: mysteryBreathe 3.0s ease-in-out infinite; } /* Orbe cliquable : c'est le geste le plus direct pour dépenser un crédit. */ .mystery-orb.clickable { cursor: pointer; } .mystery-orb.clickable:hover { transform: translateY(-0.25vh) scale(1.18); box-shadow: 0 0 14px #b14aff; } .mystery-orb.armed { border-color: #e6c8ff; filter: brightness(1.45) saturate(1.15); box-shadow: 0 0 16px #b14aff, 0 0 28px rgba(177,74,255,0.7); transform: translateY(-0.3vh) scale(1.14); } .mystery-orb.spent { border-color: #3a2a4a; box-shadow: none; opacity: 0.35; filter: grayscale(1) brightness(0.55); } /* Quand un crédit est armé, les cases jouables se teintent de violet : le joueur voit exactement où la carte va disparaître. */ body.mystery-armed .card.empty { border-color: rgba(177, 74, 255, 0.85) !important; box-shadow: 0 0 12px rgba(177, 74, 255, 0.5) inset; } /* ---- HABILLAGE OCCULTE DES ZONES LATÉRALES ---- En mode Mystery, le circuit imprimé cède la place à une trame ésotérique : astrolabes, croissants, serrures, constellations. Deux couches seulement, toutes deux en z-index négatif et masquées sur les bords : le décor ne doit jamais entrer en concurrence avec la lecture des cartes. */ body.mystery-theme .action-slot-wrapper { position: relative; } /* Couche 1 : la trame répétée. */ body.mystery-theme .action-slot-wrapper::before { content: ""; position: absolute; inset: -2vh -1vw; z-index: -1; pointer-events: none; opacity: 0.34; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b14aff%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2254%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2246%22%20opacity%3D%220.30%22%20stroke-dasharray%3D%223%207%22%2F%3E%3Cpath%20d%3D%22M100%2040%20V32%20M100%20160%20V168%20M40%20100%20H32%20M160%20100%20H168%22%20opacity%3D%220.50%22%2F%3E%3Cpath%20d%3D%22M142%2058%20l6%20-6%20M58%20142%20l-6%206%20M142%20142%20l6%206%20M58%2058%20l-6%20-6%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M18%2024%20L52%2046%20L34%2084%22%20opacity%3D%220.40%22%20stroke-dasharray%3D%222%206%22%2F%3E%3Cpath%20d%3D%22M186%20120%20L162%20152%20L178%20186%22%20opacity%3D%220.35%22%20stroke-dasharray%3D%222%206%22%2F%3E%3Cpath%20d%3D%22M140%20176%20C150%20164%20166%20164%20176%20176%20C166%20188%20150%20188%20140%20176%20Z%22%20stroke-width%3D%221.2%22%20opacity%3D%220.45%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23d79bff%22%3E%3Cpath%20d%3D%22M164%2034%20C164%2042%20168%2046%20176%2046%20C168%2046%20164%2050%20164%2058%20C164%2050%20160%2046%20152%2046%20C160%2046%20164%2042%20164%2034%20Z%22%20opacity%3D%220.75%22%2F%3E%3Cpath%20d%3D%22M30%20156%20C30%20162%2033%20165%2039%20165%20C33%20165%2030%20168%2030%20174%20C30%20168%2027%20165%2021%20165%20C27%20165%2030%20162%2030%20156%20Z%22%20opacity%3D%220.60%22%2F%3E%3Cpath%20d%3D%22M104%2012%20C104%2017%20106%2019%20111%2019%20C106%2019%20104%2021%20104%2026%20C104%2021%20102%2019%2097%2019%20C102%2019%20104%2017%20104%2012%20Z%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2224%22%20r%3D%222%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2246%22%20r%3D%222.4%22%20opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2284%22%20r%3D%221.8%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%22120%22%20r%3D%222%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22162%22%20cy%3D%22152%22%20r%3D%222.4%22%20opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22178%22%20cy%3D%22186%22%20r%3D%221.8%22%20opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22176%22%20r%3D%223.4%22%20opacity%3D%220.55%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M46%20108%20A20%2020%200%201%201%2046%20148%20A16%2016%200%201%200%2046%20108%20Z%22%20fill%3D%22%23b14aff%22%20opacity%3D%220.30%22%2F%3E%3Cg%20fill%3D%22%23d79bff%22%20opacity%3D%220.45%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2294%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M96%20100%20L104%20100%20L107%20116%20L93%20116%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: repeat; background-size: 200px 200px; background-position: center; filter: drop-shadow(0 0 4px rgba(177, 74, 255, 0.65)); -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%); mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%); } /* Couche 2 : le cercle rituel, en rotation très lente. */ body.mystery-theme .action-slot-wrapper::after { content: ""; position: absolute; inset: -2vh -1vw; z-index: -1; pointer-events: none; opacity: 0.30; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b14aff%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%22122%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%22106%22%20stroke-width%3D%220.9%22%20opacity%3D%220.35%22%20stroke-dasharray%3D%222%2010%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2272%22%20stroke-width%3D%221.1%22%20opacity%3D%220.40%22%2F%3E%3Cpath%20d%3D%22M150%2078%20L196%20150%20L150%20222%20L104%20150%20Z%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20d%3D%22M78%20150%20L150%20104%20L222%20150%20L150%20196%20Z%22%20stroke-width%3D%221%22%20opacity%3D%220.35%22%2F%3E%3Cg%20opacity%3D%220.45%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M150%2020%20V38%20M150%20262%20V280%20M20%20150%20H38%20M262%20150%20H280%22%2F%3E%3Cpath%20d%3D%22M62%2062%20l12%2012%20M238%2062%20l-12%2012%20M62%20238%20l12%20-12%20M238%20238%20l-12%20-12%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23d79bff%22%20opacity%3D%220.55%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2220%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22280%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22150%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22150%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b14aff%22%20opacity%3D%220.30%22%3E%3Cpath%20d%3D%22M150%20128%20C150%20140%20156%20146%20168%20146%20C156%20146%20150%20152%20150%20164%20C150%20152%20144%20146%20132%20146%20C144%20146%20150%20140%20150%20128%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 78% auto; filter: drop-shadow(0 0 6px rgba(177, 74, 255, 0.75)); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%); animation: mysteryRing 140s linear infinite; } /* Les deux zones d'un même camp tournent en sens inverse : le décor respire sans jamais donner l'impression d'un défilement. */ body.mystery-theme #board-opponent .action-slot-wrapper::after { animation-direction: reverse; } @keyframes mysteryRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Voile violet au ras des plateaux : assombrit le pourtour, laisse le centre (les cartes) parfaitement net. */ body.mystery-theme #board-player, body.mystery-theme #board-opponent { position: relative; background-image: radial-gradient(ellipse 78% 90% at 50% 50%, transparent 55%, rgba(70, 12, 130, 0.28) 100%); } /* Respect des préférences système : plus aucune rotation si l'utilisateur a demandé à réduire les animations. */ @media (prefers-reduced-motion: reduce) { body.mystery-theme .action-slot-wrapper::after { animation: none; } body.mystery-theme::after { animation: none; } .card.mystery-hidden { animation: none; box-shadow: 0 0 14px rgba(177,74,255,0.7); } } /* ================= MODE DJINKI FLASH — HABILLAGE DÉDIÉ ================= Mort subite en une manche, pendule de 30s + 5s d'incrément. Toute la direction artistique sert un seul objectif : faire ressentir l'urgence AVANT même de regarder l'horloge — sans jamais dégrader la lisibilité des cartes, qui restent le socle Néon commun. */ /* Fond de scène : bleu électrique profond, plus froid que les autres modes. */ body.flash-theme::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 50% 3%, rgba(0, 110, 220, 0.30), transparent 72%), radial-gradient(ellipse 70% 45% at 50% 97%, rgba(0, 80, 200, 0.32), transparent 72%), radial-gradient(ellipse 90% 60% at 50% 50%, rgba(0, 12, 40, 0.55), transparent 80%); } /* Éclairs en arrière-plan : présents en permanence, très discrets au repos. */ body.flash-theme::after { content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: 0.13; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%3Cg%20fill%3D%22%232aa8ff%22%20opacity%3D%220.9%22%3E%3Cpath%20d%3D%22M62%2014%20L34%2096%20L58%2096%20L40%20168%20L96%2074%20L68%2074%20Z%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M196%20108%20L178%20152%20L192%20152%20L182%20196%20L216%20140%20L200%20140%20Z%22%20opacity%3D%220.40%22%2F%3E%3Cpath%20d%3D%22M126%20186%20L112%20224%20L124%20224%20L116%20258%20L146%20212%20L132%20212%20Z%22%20opacity%3D%220.30%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237fe7ff%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.45%22%3E%3Cpath%20d%3D%22M8%2044%20L34%2058%20L14%2074%20L44%2092%22%2F%3E%3Cpath%20d%3D%22M252%2030%20L226%2046%20L246%2060%20L218%2078%22%2F%3E%3Cpath%20d%3D%22M150%2020%20L166%2036%20L150%2048%20L172%2064%22%2F%3E%3Cpath%20d%3D%22M70%20220%20L88%20234%20L72%20246%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237fe7ff%22%20opacity%3D%220.65%22%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2258%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2292%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2246%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22218%22%20cy%3D%2278%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22166%22%20cy%3D%2236%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22234%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: repeat; background-size: 300px 300px; filter: drop-shadow(0 0 6px rgba(42, 168, 255, 0.8)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 30%, transparent 70%, #000 100%); transition: opacity 0.4s ease; } /* Sous les 10 secondes, la trame se réveille et crépite. */ body.flash-theme.flash-urgent::after { opacity: 0.30; animation: flashFlicker 0.55s steps(2) infinite; } @keyframes flashFlicker { 0%,100% { opacity: 0.30; } 50% { opacity: 0.15; } } body.flash-theme #board-player, body.flash-theme #board-opponent { border: 2px solid rgba(42, 168, 255, 0.6) !important; box-shadow: 0 0 26px -6px rgba(42, 168, 255, 0.6) !important; } body.flash-theme #board-player.active-board, body.flash-theme #board-opponent.active-board { box-shadow: 0 0 42px -4px rgba(42, 168, 255, 0.95) !important; } /* Zones latérales : le circuit imprimé passe au bleu électrique et se charge. */ body.flash-theme .action-slot-wrapper { position: relative; } body.flash-theme .action-slot-wrapper::before { content: ""; position: absolute; inset: -2vh -1vw; z-index: -1; pointer-events: none; opacity: 0.38; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%3Cg%20fill%3D%22%232aa8ff%22%20opacity%3D%220.9%22%3E%3Cpath%20d%3D%22M62%2014%20L34%2096%20L58%2096%20L40%20168%20L96%2074%20L68%2074%20Z%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M196%20108%20L178%20152%20L192%20152%20L182%20196%20L216%20140%20L200%20140%20Z%22%20opacity%3D%220.40%22%2F%3E%3Cpath%20d%3D%22M126%20186%20L112%20224%20L124%20224%20L116%20258%20L146%20212%20L132%20212%20Z%22%20opacity%3D%220.30%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237fe7ff%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.45%22%3E%3Cpath%20d%3D%22M8%2044%20L34%2058%20L14%2074%20L44%2092%22%2F%3E%3Cpath%20d%3D%22M252%2030%20L226%2046%20L246%2060%20L218%2078%22%2F%3E%3Cpath%20d%3D%22M150%2020%20L166%2036%20L150%2048%20L172%2064%22%2F%3E%3Cpath%20d%3D%22M70%20220%20L88%20234%20L72%20246%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%237fe7ff%22%20opacity%3D%220.65%22%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%2258%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2292%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2246%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22218%22%20cy%3D%2278%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22166%22%20cy%3D%2236%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22234%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: repeat; background-size: 150px 150px; filter: drop-shadow(0 0 6px rgba(42, 168, 255, 0.9)) saturate(1.4); -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%); } body.flash-theme.flash-urgent .action-slot-wrapper::before { animation: flashFlicker 0.4s steps(2) infinite; } /* ---- LA PENDULE ---- C'est l'élément le plus regardé du mode : on le rend large et net. */ body.flash-theme #timer-p1, body.flash-theme #timer-p2 { font-size: 2.6vh !important; font-weight: 900; letter-spacing: 1px; border-color: rgba(42, 168, 255, 0.7) !important; background: rgba(0, 40, 90, 0.45) !important; color: #cdefff !important; text-shadow: 0 0 8px rgba(42, 168, 255, 0.9); transition: color 0.2s ease, box-shadow 0.2s ease; } /* Battement de coeur : la fréquence s'accélère à mesure que le temps fond. */ @keyframes flashBeat { 0%,100% { transform: scale(1); box-shadow: 0 0 10px rgba(42,168,255,0.55); } 50% { transform: scale(1.14); box-shadow: 0 0 26px rgba(120,220,255,0.95); } } #timer-p1.flash-low, #timer-p2.flash-low { color: #7fe7ff !important; animation: flashBeat 1s ease-in-out infinite; } #timer-p1.flash-crit, #timer-p2.flash-crit { color: #ffffff !important; background: rgba(0, 90, 180, 0.75) !important; border-color: #7fe7ff !important; animation: flashBeat 0.42s ease-in-out infinite; } /* ---- COUCHE D'EFFETS PLEIN ÉCRAN ---- Un seul conteneur, sous les modales (z-index 3000) et sans capture de clic. */ #flash-fx { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 2000; } body.flash-theme #flash-fx { display: block; } #flash-fx > div { position: absolute; inset: 0; } /* Vignette : le champ de vision se resserre. Volontairement cantonnée aux bords — le centre du plateau reste parfaitement net. */ .flash-vignette { opacity: 0; transition: opacity 0.35s ease; box-shadow: inset 0 0 16vh 5vh rgba(0, 130, 255, 0.42); } body.flash-urgent .flash-vignette { opacity: 1; animation: flashVig 1s ease-in-out infinite; } body.flash-crit .flash-vignette { animation-duration: 0.45s; box-shadow: inset 0 0 20vh 7vh rgba(0, 160, 255, 0.6); } @keyframes flashVig { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } } /* Éclair plein écran : palier des 3 secondes. Deux images, pas davantage : assez pour marquer, trop court pour éblouir. */ .flash-strike { opacity: 0; background: radial-gradient(ellipse at center, rgba(190,235,255,0.55), rgba(0,120,255,0.25) 45%, transparent 72%); } .flash-strike.on { animation: flashStrike 0.24s ease-out; } @keyframes flashStrike { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } } /* Secousse d'écran sous les 3 secondes : amplitude d'un seul pixel, perceptible sans jamais brouiller la lecture des cartes. */ @keyframes flashShake { 0%,100% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, -1px); } } body.flash-crit .game-wrapper { animation: flashShake 0.11s linear infinite; } /* Carte en main survoltée quand le temps presse : incite à jouer. */ body.flash-urgent #p-drawn-zone .card, body.flash-urgent #o-drawn-zone .card { border-color: #7fe7ff !important; box-shadow: 0 0 18px rgba(127, 231, 255, 0.85) !important; animation: flashBeat 1s ease-in-out infinite; } /* ---- "+5s" QUI S'ENVOLE ---- */ .flash-inc { position: fixed; z-index: 2200; pointer-events: none; font-family: monospace; font-weight: 900; font-size: 2.3vh; color: #7fe7ff; text-shadow: 0 0 10px #00a2ff, 0 0 22px #00a2ff; animation: flashInc 1s ease-out forwards; } /* Hors Flash, le "+5 s" ne doit pas emprunter le bleu electrique du mode Flash. */ .flash-inc.inc-neutre { color: #eaf2ff; text-shadow: 0 0 10px rgba(190,215,255,0.85), 0 0 22px rgba(150,185,255,0.55); } @keyframes flashInc { 0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; } 18% { transform: translate(-50%, -1.2vh) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -7.5vh) scale(1); opacity: 0; } } /* ---- ÉTINCELLES ---- Elles s'échappent du chrono comme du sable : le temps qui file, rendu visible. */ .flash-spark { position: fixed; z-index: 2100; pointer-events: none; width: 3px; height: 3px; border-radius: 50%; background: #cdefff; box-shadow: 0 0 6px #2aa8ff, 0 0 12px #2aa8ff; animation: flashSpark 0.85s ease-out forwards; } @keyframes flashSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) scale(0.3); opacity: 0; } } /* Bandeau d'annonce du mode, sous le score. */ .flash-badge { font-size: 1.2vh; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #7fe7ff; text-shadow: 0 0 8px rgba(42,168,255,0.9); margin-top: 0.4vh; } /* Préférences système : on coupe tout ce qui bouge, on garde l'information. */ @media (prefers-reduced-motion: reduce) { body.flash-crit .game-wrapper, body.flash-theme.flash-urgent::after, body.flash-urgent .flash-vignette, body.flash-urgent #p-drawn-zone .card, body.flash-urgent #o-drawn-zone .card, #timer-p1.flash-low, #timer-p2.flash-low, #timer-p1.flash-crit, #timer-p2.flash-crit { animation: none !important; } .flash-strike.on { animation: none !important; } } /* ---- TEINTE GLOBALE DE L'INTERFACE (--ui-accent) ---- Les deux liserés des bandeaux (haut et bas) étaient figés sur l'or de la charte (--w-gold), quelle que soit la couleur du mode affiché : l'écran de sélection virait au cyan ou au violet, les deux traits restaient orange. --ui-accent est posée par le JS sur à chaque changement de mode ; déclarée via @property, elle s'interpole, donc le passage d'une teinte à l'autre est progressif comme pour le logo. Un navigateur sans @property changera la couleur d'un coup, sans rien casser. */ @property --ui-accent { syntax: ''; inherits: true; initial-value: #ffaa00; } html { transition: --ui-accent 0.55s ease, --logo-halo-a 0.55s ease, --logo-halo-b 0.55s ease; } /* Les deux couleurs de l'accueil : celle de « Jouer en local » et celle de « Jouer en ligne ». Elles habillent le logo et les deux liseres tant qu'on est sur l'accueil ; des qu'on entre dans un ecran de modes, la teinte unique du mode reprend la main (regles .top-banner / .bottom-banner ci-dessous). */ :root { --duo-local: #ff2d6f; --duo-online: #22c8ff; } /* Un liseré degrade ne peut pas passer par border-color (une seule couleur) : on passe par border-image, qui accepte un degrade. La tranche vaut 1, soit l'epaisseur exacte du trait. */ body.lobby-accueil .top-banner, body.lobby-accueil .bottom-banner { border-image: linear-gradient(90deg, var(--duo-local) 0%, var(--duo-online) 100%) 1; } .top-banner { border-bottom-color: var(--ui-accent); box-shadow: 0 4px 20px color-mix(in srgb, var(--ui-accent) 26%, transparent), 0 0 15px color-mix(in srgb, var(--ui-accent) 18%, transparent); } .bottom-banner { border-top-color: var(--ui-accent); box-shadow: 0 -4px 20px color-mix(in srgb, var(--ui-accent) 26%, transparent), 0 0 15px color-mix(in srgb, var(--ui-accent) 18%, transparent); } .modal-content h2 { border-bottom-color: var(--ui-accent); box-shadow: 0 4px 20px color-mix(in srgb, var(--ui-accent) 22%, transparent); } /* ---- CARROUSEL DE LA MODALE EN LIGNE ---- Même structure et mêmes classes que le carrousel local : les modes en ligne étaient présentés en tableau de cinq pavés serrés, sans rapport visuel avec l'écran local. On réutilise donc les tuiles telles quelles, en les redimensionnant pour la modale (plus étroite et limitée à 80vh de haut). */ /* V172 : le multijoueur en ligne n'est plus une fenêtre superposée mais un écran de la page, au même titre que l'écran local — même logo au-dessus, même carrousel, même bouton « Retour ». Aucune dimension n'est redéfinie ici : tuile, flèches, icône, titres et points héritent des règles du carrousel local. Un seul jeu de valeurs sert les deux écrans, ils ne peuvent plus diverger. */ #lobby-online-buttons:has(.lobby-mode-btn:hover) .lobby-mode-wrap:not(:hover) .lobby-mode-btn { opacity: 0.55; filter: saturate(0.55); transform: scale(0.97); } /* ---- AMBIANCE DE LA PAGE ---- Les rivieres tracees en V177 ajoutaient des traits ; ce n'etait pas la demande. Ce qu'il fallait, c'est que la lueur du logo se PROLONGE. On pose donc deux nappes lumineuses tres diluees, une par couleur, qui reculent le noir sans rien dessiner. Un degrade radial colore sur du noir donne une couleur sombre et saturee : il ne peut pas devenir laiteux, contrairement a un voile blanchatre. */ #neon-ambiance { position: fixed; inset: 0; pointer-events: none; z-index: 0; /* Repli sans color-mix() : rien plutot qu'une teinte fausse. */ background: none; background: radial-gradient(115% 78% at 20% 24%, color-mix(in srgb, var(--logo-halo-a, #ff2d6f) 15%, transparent) 0%, color-mix(in srgb, var(--logo-halo-a, #ff2d6f) 5%, transparent) 34%, transparent 64%), radial-gradient(115% 78% at 80% 24%, color-mix(in srgb, var(--logo-halo-b, #22c8ff) 15%, transparent) 0%, color-mix(in srgb, var(--logo-halo-b, #22c8ff) 5%, transparent) 34%, transparent 64%), radial-gradient(85% 55% at 28% 106%, color-mix(in srgb, var(--logo-halo-a, #ff2d6f) 8%, transparent) 0%, transparent 70%), radial-gradient(85% 55% at 72% 106%, color-mix(in srgb, var(--logo-halo-b, #22c8ff) 8%, transparent) 0%, transparent 70%); } body.game-active #neon-ambiance { display: none; } /* Le calque est peint avant tout le reste du corps de page, donc derriere ; on remonte le menu d'un cran pour qu'aucun de ses elements ne passe dessous. */ #start-container { position: relative; z-index: 1; } /* ---- BOUTON « CHERCHER UN ADVERSAIRE » ---- Il heritait du rouge de la charte (.btn), sans rapport avec le mode affiche juste au-dessus. Il prend desormais sa teinte. Le selecteur par identifiant l'emporte sur `.btn:hover`, qui aurait sinon repose le rouge au survol — c'est le meme piege que celui rencontre sur les tuiles de mode en V170. */ #btn-matchmaking { /* Un aplat de la couleur du mode aurait ete illisible : le texte sombre tombe a 3,1 de contraste sur le violet de Mystery, le texte clair a 2,6 sur l'or du Championnat. Aucune couleur de texte unique ne convient aux cinq teintes. On garde donc un fond sombre teinte et un texte quasi blanc legerement teinte : le contraste reste entre 7,7 et 10,0 sur les cinq modes, et le bouton reprend les codes des tuiles (bord neon + halo) au lieu de jurer avec elles. */ /* Repli sans color-mix() */ background: #12141c; color: #ffffff; background: linear-gradient(135deg, color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 34%, #06080f) 0%, color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 16%, #06080f) 100%); color: color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 22%, #ffffff); border: 1.5px solid color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 85%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 34%, transparent), inset 0 0 24px color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 14%, transparent), 0 2px 6px rgba(0,0,0,0.5); text-shadow: 0 0 10px color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 55%, transparent); transition: background 0.45s ease, box-shadow 0.3s ease, transform 0.15s ease, color 0.45s ease; } #btn-matchmaking:hover:not(:disabled), #btn-matchmaking:focus-visible:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 50%, #06080f) 0%, color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 26%, #06080f) 100%); border-color: color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 100%, transparent); box-shadow: 0 0 38px color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 58%, transparent), inset 0 0 30px color-mix(in srgb, var(--carousel-accent, var(--neon-rose)) 20%, transparent), 0 4px 10px rgba(0,0,0,0.55); transform: translateY(-1px); } #btn-matchmaking:active:not(:disabled) { transform: translateY(0); } #btn-matchmaking:disabled { cursor: default; opacity: 0.9; } /* ---- RAIL DES ENSEIGNES (mode Token) ---- Les enseignes quittent le bas des plateaux pour venir au centre, sur la ligne de front : deux de chaque cote du VS. Celui qui possede une enseigne se lit d'un coup d'oeil au conducteur qui monte ou descend vers son plateau. */ .battle-line { overflow: visible; } /* Le VS d'origine est dessine par la ligne elle-meme ; quand le rail est la, c'est lui qui le porte, sinon les deux se superposeraient. */ body.token-theme.game-active .battle-line::after { content: none; } .token-rail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1.6vw; z-index: 60; pointer-events: none; } .token-rail-cote { display: flex; align-items: center; gap: 1.2vw; } .token-rail-vs { background: var(--w-bg-app); color: var(--w-text-muted); font-size: 1.4vh; font-weight: 900; padding: 0 0.8vw; } .token-node { position: relative; pointer-events: auto; width: 4.2vh; height: 4.2vh; min-width: 34px; min-height: 34px; display: flex; align-items: center; justify-content: center; font-size: 2.2vh; line-height: 1; border-radius: 50%; border: 2px solid var(--chip, #888); background: var(--w-bg-app); color: var(--chip, #888); box-shadow: 0 0 10px color-mix(in srgb, var(--chip, #888) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--chip, #888) 18%, transparent); transition: transform 0.18s ease, box-shadow 0.25s ease, opacity 0.35s ease, border-color 0.35s ease, color 0.35s ease; } /* Le conducteur : un trait qui part du jeton vers le plateau de son proprietaire. Il n'existe que si l'enseigne est detenue — d'ou son absence sur un jeton eteint. */ .token-node::after { content: ""; position: absolute; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--sens, to top), color-mix(in srgb, var(--chip, #888) 95%, transparent), color-mix(in srgb, var(--chip, #888) 10%, transparent)); box-shadow: 0 0 8px color-mix(in srgb, var(--chip, #888) 70%, transparent); opacity: 0; height: 0; transition: height 0.5s ease, opacity 0.4s ease; } .token-node.vers-haut::after { bottom: 100%; --sens: to top; opacity: 0.95; height: 3.2vh; } .token-node.vers-bas::after { top: 100%; --sens: to bottom; opacity: 0.95; height: 3.2vh; } /* Enseigne grillee : plus de halo, plus de conducteur, le contraste dit tout. */ .token-node.eteint { border-color: #2a2a33; color: #4a4a55; background: transparent; box-shadow: none; opacity: 0.4; text-decoration: line-through; } .token-node.eteint::after { opacity: 0; height: 0; } /* Enseigne adverse que l'on peut griller : elle s'annonce comme cliquable. */ .token-node.grillable { cursor: pointer; } .token-node.grillable:hover { transform: scale(1.15); box-shadow: 0 0 22px color-mix(in srgb, var(--chip, #888) 90%, transparent), inset 0 0 14px color-mix(in srgb, var(--chip, #888) 30%, transparent); } .token-node.grillable::before { content: "⛔"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.2vh; opacity: 0; transition: opacity 0.18s ease; } .token-node.grillable:hover::before { opacity: 0.95; } /* ---- PENDANT LE CHOIX DES ENSEIGNES ---- Le reste du plateau s'efface pour que le rail soit le seul point lumineux, et la fenetre de choix descend en bas de l'ecran pour ne pas le masquer. */ body.token-selection .player-board, body.token-selection .grid-5x5 { filter: brightness(0.28) saturate(0.4); transition: filter 0.4s ease; } body.token-selection .token-rail { z-index: 3100; } body.token-selection #token-pick-modal { background: rgba(0,0,0,0.55); align-items: flex-end; } body.token-selection #token-pick-modal .modal-content { margin-bottom: 3vh; } body.token-selection .token-node { transform: scale(1.12); } @keyframes tokenPrisPulse { 0% { transform: scale(1.12); } 45% { transform: scale(1.55); } 100% { transform: scale(1.12); } } .token-node.vient-d-etre-pris { animation: tokenPrisPulse 0.7s ease-out; } /* --- RETOUR DANS LE TEMPS (outil de QA, V192) --- */ #time-travel-bar { display: none; position: fixed; bottom: 8vh; left: 50%; transform: translateX(-50%); z-index: 3500; gap: 1vh; align-items: center; background: rgba(10,10,14,0.94); border: 1px solid var(--w-border); border-radius: 30px; padding: 0.7vh 1.4vh; box-shadow: 0 0 20px rgba(0,0,0,0.6); } #time-travel-bar button.menu-btn { padding: 0.6vh 1.2vh; font-size: 1.5vh; } #time-travel-bar button.menu-btn:disabled { opacity: 0.35; cursor: default; } #time-travel-label { font-size: 1.2vh; color: var(--w-text-muted); min-width: 9vh; text-align: center; } #tt-resume-btn { color: var(--w-red, var(--neon-rose)) !important; border-color: var(--w-red, var(--neon-rose)) !important; } /* Pendant la consultation : le plateau est fige, tout clic de jeu est neutralise. */ body.time-travel-viewing #board-player, body.time-travel-viewing #board-opponent, body.time-travel-viewing .grid-5x5, body.time-travel-viewing .action-slot-wrapper, body.time-travel-viewing #token-rail, body.time-travel-viewing .banner-deck { pointer-events: none; } /* V218 : la pastille "MODE RETOUR" est un vrai element, plus un pseudo-element. Elle utilisait "body.time-travel-viewing::after" (V192), alors que "body::after" sert deja au degrade de fond de la page (avec right:0/bottom:0). Un element n'ayant qu'UN seul ::after, les deux regles se cumulaient : la pastille heritait de right:0 et bottom:0 et s'etalait sur un demi-ecran de large et toute la hauteur. */ #tt-mode-banner { display: none; position: fixed; top: 1vh; left: 50%; transform: translateX(-50%); right: auto; bottom: auto; width: auto; height: auto; background: var(--w-red, var(--neon-rose)); color: #fff; padding: 0.8vh 2vh; border-radius: 20px; font-weight: 800; font-size: 1.6vh; z-index: 4000; pointer-events: none; white-space: nowrap; box-shadow: 0 0 20px rgba(255,0,85,0.6); } /* --- ENSEIGNE GRILLEE : 4 dos de carte neon, un par enseigne --- Poses sur la defausse quand on grille le token adverse (V190). Meme grammaire graphique que le dos Token (V184) : circuit fixe en fond, anneau qui tourne sur ::before, glyphe qui pulse en CSS (texte reel, jamais raster : net a toute taille). Chaque dos ne repond qu'a UNE couleur, celle de son enseigne — pas de degrade multicolore ici, c'est la marque du dos Token qui ne doit pas se confondre avec celle d'une enseigne grillee. */ .discard-brule { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: 4.2vh; line-height: 1; color: var(--chip, #888); text-shadow: 0 0 10px var(--chip, #888), 0 0 26px color-mix(in srgb, var(--chip, #888) 60%, transparent); background-color: #050505 !important; background-size: cover !important; background-position: center !important; } .discard-brule[data-suit="coeur"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20560%22%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%22f%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2278%25%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2337021a%22%2F%3E%0A%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23170310%22%2F%3E%0A%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23020204%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3Cfilter%20id%3D%22g%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23f%29%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.45%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.4%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.9%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%23ff0055%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.6%22%2F%3E%0A%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C62%20M%2034%2C34%20L%2062%2C34%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C62%20M%20366%2C34%20L%20338%2C34%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C498%20M%2034%2C526%20L%2062%2C526%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C498%20M%20366%2C526%20L%20338%2C526%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") !important; } .discard-brule[data-suit="trefle"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20560%22%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%22f%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2278%25%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230a2f0a%22%2F%3E%0A%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23051505%22%2F%3E%0A%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23020204%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3Cfilter%20id%3D%22g%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23f%29%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.45%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.4%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.9%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%2339ff14%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.6%22%2F%3E%0A%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C62%20M%2034%2C34%20L%2062%2C34%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C62%20M%20366%2C34%20L%20338%2C34%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C498%20M%2034%2C526%20L%2062%2C526%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C498%20M%20366%2C526%20L%20338%2C526%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") !important; } .discard-brule[data-suit="pique"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20560%22%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%22f%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2278%25%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2307322c%22%2F%3E%0A%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%2303191a%22%2F%3E%0A%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23020204%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3Cfilter%20id%3D%22g%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23f%29%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.45%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.4%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.9%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%2300e5ff%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.6%22%2F%3E%0A%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C62%20M%2034%2C34%20L%2062%2C34%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C62%20M%20366%2C34%20L%20338%2C34%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C498%20M%2034%2C526%20L%2062%2C526%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C498%20M%20366%2C526%20L%20338%2C526%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") !important; } .discard-brule[data-suit="carreau"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20560%22%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%22f%22%20cx%3D%2250%25%22%20cy%3D%2242%25%22%20r%3D%2278%25%22%3E%0A%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%233a2400%22%2F%3E%0A%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%231a1000%22%2F%3E%0A%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23020204%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3Cfilter%20id%3D%22g%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22400%22%20height%3D%22560%22%20rx%3D%2226%22%20fill%3D%22url%28%23f%29%22%2F%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.45%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.4%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.9%22%3E%0A%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C29.0%20L%2088.0%2C59.0%20L%2081.0%2C66.0%20L%2066.0%2C66.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C37.0%20L%20367.0%2C44.0%20L%20359.0%2C44.0%20L%20352.0%2C37.0%20L%20352.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%20103.0%2C528.0%20L%20110.0%2C535.0%20L%20110.0%2C531.0%20L%20117.0%2C538.0%20L%20176.0%2C538.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20337.0%2C462.0%20L%20330.0%2C455.0%20L%20330.0%2C403.0%20L%20323.0%2C396.0%20L%20308.0%2C396.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2022.0%2C22.0%20L%2029.0%2C22.0%20L%2081.0%2C22.0%20L%2088.0%2C22.0%20L%2088.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20374.0%2C22.0%20L%20381.0%2C22.0%20L%20371.0%2C22.0%20L%20378.0%2C22.0%20L%20378.0%2C22.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C528.0%20L%2022.0%2C521.0%20L%2022.0%2C491.0%20L%2029.0%2C484.0%20L%2037.0%2C484.0%20L%2044.0%2C477.0%20L%2044.0%2C462.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C528.0%20L%20374.0%2C469.0%20L%20367.0%2C462.0%20L%20315.0%2C462.0%20L%20308.0%2C469.0%20L%20308.0%2C499.0%20L%20315.0%2C506.0%20L%20367.0%2C506.0%20L%20374.0%2C513.0%20L%20374.0%2C528.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C22.0%20L%2059.0%2C22.0%20L%2066.0%2C29.0%20L%2066.0%2C103.0%20L%2059.0%2C110.0%20L%2029.0%2C110.0%20L%2022.0%2C117.0%20L%2022.0%2C176.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%20374.0%2C22.0%20L%20315.0%2C22.0%20L%20308.0%2C29.0%20L%20308.0%2C81.0%20L%20315.0%2C88.0%20L%20345.0%2C88.0%20L%20352.0%2C95.0%20L%20352.0%2C154.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2022.0%2C528.0%20L%2022.0%2C447.0%20L%2029.0%2C440.0%20L%2081.0%2C440.0%20L%2088.0%2C447.0%20L%2088.0%2C477.0%20L%2081.0%2C484.0%20L%2029.0%2C484.0%20L%2022.0%2C491.0%20L%2022.0%2C531.0%20L%2029.0%2C538.0%20L%20110.0%2C538.0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2266.0%22%20cy%3D%2266.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22176.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22308.0%22%20cy%3D%22396.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2288.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22378.0%22%20cy%3D%2222.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2244.0%22%20cy%3D%22462.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22374.0%22%20cy%3D%22528.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%22176.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22352.0%22%20cy%3D%22154.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%223.2%22%20fill%3D%22%23ffaa00%22%20opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22110.0%22%20cy%3D%22538.0%22%20r%3D%225.8%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.9%22%20opacity%3D%220.45%22%2F%3E%3C%2Fg%3E%0A%3Crect%20x%3D%2211%22%20y%3D%2211%22%20width%3D%22378%22%20height%3D%22538%22%20rx%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.6%22%2F%3E%0A%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%22356%22%20height%3D%22516%22%20rx%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%221%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C34%20L%2034%2C62%20M%2034%2C34%20L%2062%2C34%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C34%20L%20366%2C62%20M%20366%2C34%20L%20338%2C34%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2034%2C526%20L%2034%2C498%20M%2034%2C526%20L%2062%2C526%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%20366%2C526%20L%20366%2C498%20M%20366%2C526%20L%20338%2C526%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") !important; } .discard-brule::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1 / 1; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; animation: dosEnseigneTourne 9s linear infinite; } .discard-brule[data-suit="coeur"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%3Cg%20transform%3D%22translate%2880%2C80%29%22%3E%0A%3Ccircle%20r%3D%2258%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22%2F%3E%0A%3Ccircle%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%225%207%22%20opacity%3D%220.75%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22-58%22%20r%3D%223.4%22%20fill%3D%22%23ff0055%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%2258%22%20r%3D%223.4%22%20fill%3D%22%23ff0055%22%2F%3E%0A%3Ccircle%20cx%3D%22-58%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%23ff0055%22%2F%3E%0A%3Ccircle%20cx%3D%2258%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%23ff0055%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); } .discard-brule[data-suit="trefle"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%3Cg%20transform%3D%22translate%2880%2C80%29%22%3E%0A%3Ccircle%20r%3D%2258%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22%2F%3E%0A%3Ccircle%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%225%207%22%20opacity%3D%220.75%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22-58%22%20r%3D%223.4%22%20fill%3D%22%2339ff14%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%2258%22%20r%3D%223.4%22%20fill%3D%22%2339ff14%22%2F%3E%0A%3Ccircle%20cx%3D%22-58%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%2339ff14%22%2F%3E%0A%3Ccircle%20cx%3D%2258%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%2339ff14%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); } .discard-brule[data-suit="pique"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%3Cg%20transform%3D%22translate%2880%2C80%29%22%3E%0A%3Ccircle%20r%3D%2258%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22%2F%3E%0A%3Ccircle%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%225%207%22%20opacity%3D%220.75%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22-58%22%20r%3D%223.4%22%20fill%3D%22%2300e5ff%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%2258%22%20r%3D%223.4%22%20fill%3D%22%2300e5ff%22%2F%3E%0A%3Ccircle%20cx%3D%22-58%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%2300e5ff%22%2F%3E%0A%3Ccircle%20cx%3D%2258%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%2300e5ff%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); } .discard-brule[data-suit="carreau"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%3Cg%20transform%3D%22translate%2880%2C80%29%22%3E%0A%3Ccircle%20r%3D%2258%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.4%22%20opacity%3D%220.55%22%2F%3E%0A%3Ccircle%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%225%207%22%20opacity%3D%220.75%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%22-58%22%20r%3D%223.4%22%20fill%3D%22%23ffaa00%22%2F%3E%0A%3Ccircle%20cx%3D%220%22%20cy%3D%2258%22%20r%3D%223.4%22%20fill%3D%22%23ffaa00%22%2F%3E%0A%3Ccircle%20cx%3D%22-58%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%23ffaa00%22%2F%3E%0A%3Ccircle%20cx%3D%2258%22%20cy%3D%220%22%20r%3D%223.4%22%20fill%3D%22%23ffaa00%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); } @keyframes dosEnseigneTourne { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Le glyphe reste au-dessus de l'anneau et respire doucement. */ .discard-brule { z-index: 1; } .discard-brule::after { content: ""; position: absolute; inset: 0; pointer-events: none; } @keyframes dosEnseignePulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .discard-brule { animation: dosEnseignePulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .discard-brule, .discard-brule::before { animation: none !important; } } /* ====================================================================== TAPIS DJINKI RIVERS (V221) — mode classique uniquement. Valeurs issues de l'atelier de reglage valide par Angelos. Elles sont toutes regroupees ici en variables : reajuster le rendu ne demande de toucher qu'a une seule ligne, jamais au dessin lui-meme. ====================================================================== */ :root { --dr-motif-echelle: 127%; /* taille du motif, en % de la largeur du tapis */ --dr-motif-opacite: 0.31; /* presence du motif sur le tapis */ --dr-aire-opacite: 0.17; /* presence du motif derriere l'aire de cartes */ --dr-neon: 18px; /* rayon de la lueur des equerres d'angle */ --dr-rotation: 61s; /* duree d'un tour complet du motif */ --dr-voile: 0; /* voile sombre sous les cartes (0 = aucun) */ --dr-cadre: 1; /* opacite du cadre aux 4 enseignes */ --dr-fond: 0.86; /* densite du fond du tapis */ } /* Le decor n'existe QUE dans le mode classique : Token, Mystery et Flash ont deja chacun leur propre habillage, il ne faut surtout pas le superposer au leur. */ .dr-decor { display: none; } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .dr-decor { display: block; /* overflow:hidden est pose ICI, sur le calque de decor, et non sur .player-board : le motif deborde donc sans jamais rogner les cartes, leurs ombres ni leurs animations de survol. */ position: absolute; inset: 0; overflow: hidden; border-radius: 6px; pointer-events: none; z-index: 0; } /* Fond du tapis, plus dense que le panneau standard (reglage "fond 86%"). */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .dr-decor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 50% 42%, rgba(11,37,55,calc(var(--dr-fond) * 0.85)) 0%, rgba(6,19,32,calc(var(--dr-fond) * 0.92)) 55%, rgba(2,4,10,calc(var(--dr-fond) * 0.97)) 100%); } .dr-motif, .dr-noyau { position: absolute; left: 50%; top: 50%; width: var(--dr-motif-echelle); aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center; background-size: contain; transform: translate(-50%, -50%); pointer-events: none; } .dr-motif { opacity: var(--dr-motif-opacite); animation: drTourne var(--dr-rotation) linear infinite; } /* Le noyau reste fixe pendant que la rosace tourne autour de lui. */ .dr-noyau { opacity: calc(var(--dr-motif-opacite) * 1.15); } @keyframes drTourne { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Cadre aux 4 enseignes : meme lisere degrade que le dos de carte. La technique du masque compose dessine un contour degrade, ce qu'une bordure CSS ordinaire ne sait pas faire. */ .dr-cadre { position: absolute; inset: 5px; border-radius: 7px; border: 1.5px solid transparent; background: linear-gradient(120deg, var(--neon-rose), var(--neon-or), var(--neon-cyan), var(--neon-vert)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: var(--dr-cadre); pointer-events: none; } /* Equerres d'angle : une enseigne par coin, exactement comme sur le dos. */ .dr-eq { position: absolute; width: 22px; height: 22px; pointer-events: none; } .dr-eq i { position: absolute; background: currentColor; border-radius: 2px; box-shadow: 0 0 var(--dr-neon) currentColor; } .dr-eq i.h { height: 2.5px; width: 100%; } .dr-eq i.v { width: 2.5px; height: 100%; } .dr-eq-tl { top: 12px; left: 12px; color: var(--neon-rose); } .dr-eq-tr { top: 12px; right: 12px; color: var(--neon-or); } .dr-eq-bl { bottom: 12px; left: 12px; color: var(--neon-cyan); } .dr-eq-br { bottom: 12px; right: 12px; color: var(--neon-vert); } .dr-eq-tl i.h, .dr-eq-tr i.h { top: 0; } .dr-eq-bl i.h, .dr-eq-br i.h { bottom: 0; } .dr-eq-tl i.v, .dr-eq-bl i.v { left: 0; } .dr-eq-tr i.v, .dr-eq-br i.v { right: 0; } /* Aire de cartes ("pose : les deux") : le meme motif, plus discret, pose derriere la grille. position:relative sur la grille pour ancrer les calques ; ils sont en position:absolute donc ils ne deviennent PAS des cases de la grille et ne derangent pas la disposition des cartes. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5 { position: relative; } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5::before { content: ""; position: absolute; inset: -6%; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22g%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22c4%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0055%22%2F%3E%3Cstop%20offset%3D%2233%25%22%20stop-color%3D%22%23ffaa00%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%2300e5ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2339ff14%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20filter%3D%22url%28%23g%29%22%20stroke-opacity%3D%220.55%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%223%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28200%2C200%29%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22rotate%280%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ff0055%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2890%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28180%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2300e5ff%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28270%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2028%2C-84%20112%2C-84%20140%2C0%20C%20112%2C84%2028%2C84%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%222.2%22%20stroke-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%200%2C0%20C%2017%2C-52%2052%2C-52%2070%2C0%20C%2052%2C52%2017%2C52%200%2C0%22%20stroke%3D%22%2339ff14%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.66%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20transform%3D%22translate%28200%2C200%29%22%3E%3Ccircle%20r%3D%22152%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221.2%22%2F%3E%3Ccircle%20r%3D%22166%22%20stroke%3D%22url%28%23c4%29%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: var(--dr-aire-opacite); } /* Voile sombre sous les cartes : a 0 il ne peint rien. Conserve pour pouvoir regagner de la lisibilite en une seule valeur si le motif s'averait trop present en partie reelle. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(2,4,10,var(--dr-voile)); } /* Les cartes passent devant les deux calques ci-dessus. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5 > * { position: relative; z-index: 1; } /* PIEGE D'EMPILEMENT, corrige ici : un element positionne (le decor) se peint AU-DESSUS du contenu reste en flux normal, quel que soit l'ordre dans le document. Sans cette regle, le decor recouvrirait les colonnes laterales - chrono, defausse, carte piochee. On remonte donc tout le contenu du plateau d'un cran ; l'empilement est ainsi decide explicitement, et non subi. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .player-board > .board-layout { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .dr-motif { animation: none !important; } } /* ---------------------------------------------------------------------- V222 : cases vides en CONTOUR, plus en aplat noir. Reglable par une seule variable, comme le reste du tapis. ---------------------------------------------------------------------- */ :root { --dr-case-contour: rgba(0,0,0,0.55); /* trait des cases vides */ --dr-case-survol: rgba(0,0,0,0.34); /* remplissage au survol seulement */ } body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5 .card.empty { background-color: transparent !important; border: 1px solid var(--dr-case-contour) !important; box-shadow: none !important; /* Niveau 0 : une case vide ne doit JAMAIS repasser devant une carte posee. C'est ce qui tranchait le bas des cartes de la ligne 1, les rangees se chevauchant de 65%. */ z-index: 0 !important; } /* Le survol reste franchement lisible : c'est la cible d'un clic. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5 .card.empty:hover { background-color: var(--dr-case-survol) !important; border-color: var(--w-highlight) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--w-highlight) 45%, transparent) !important; } /* Les cartes posees repassent devant les cases vides. */ body:not(.token-theme):not(.mystery-theme):not(.flash-theme) .grid-5x5 .card:not(.empty) { z-index: 1; } /* ====================================================================== TCHAT PUBLIC DU LOBBY (V226) — 3e colonne de l'onglet Parties. Valeurs issues de l'atelier valide par Angelos. ====================================================================== */ :root { --tc-larg: 15%; /* largeur ouverte, en % de la rangee */ --tc-rail: 34px; /* largeur une fois ferme */ --tc-police: 1.05; /* facteur de taille du texte */ --tc-fond: 0.43; /* densite du fond */ --tc-neon: 60px; /* lueur */ --tc-vitesse: 0.8s; /* duree de l'ouverture/fermeture */ } #lobby-tchat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 0 0 var(--tc-larg); background: rgba(4,6,14, var(--tc-fond)); border: 1px solid color-mix(in srgb, var(--w-highlight) 45%, transparent); border-radius: 10px; box-shadow: 0 0 var(--tc-neon) color-mix(in srgb, var(--w-highlight) 30%, transparent); /* La transition porte sur flex-basis : c'est elle qui fait glisser la liste des tables au lieu de la faire sauter. */ transition: flex-basis var(--tc-vitesse) ease; } /* Ferme : il ne reste qu'un rail vertical cliquable. */ #lobby-tchat.est-ferme { flex: 0 0 var(--tc-rail); } .tc-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.4vw; padding: 0.5vh 0.5vw; border-bottom: 1px solid var(--w-border); flex: 0 0 auto; } .tc-nom { font-size: 1.15vh; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--w-highlight); text-shadow: 0 0 8px var(--w-highlight); white-space: nowrap; } .tc-bascule { font: inherit; font-size: 1.3vh; line-height: 1; cursor: pointer; padding: 0.3vh 0.5vw; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--w-highlight); border: 1px solid color-mix(in srgb, var(--w-highlight) 40%, transparent); } .tc-bascule:hover { background: rgba(0,229,255,0.16); } .tc-msgs { flex: 1 1 auto; overflow-y: auto; padding: 0.5vh 0.5vw; display: flex; flex-direction: column; gap: 0.3vh; font-size: calc(var(--tc-police) * 1.15vh); line-height: 1.45; /* Sans ceci, un pseudo ou un mot tres long elargirait la colonne et casserait la mise en page de tout le lobby. */ overflow-wrap: anywhere; } .tc-msg .tc-qui { font-weight: 800; color: var(--w-highlight); } .tc-msg .tc-h { color: #5c6273; font-size: 0.85em; margin-right: 0.2vw; } .tc-msg.tc-sys { color: var(--w-gold); font-style: italic; } .tc-msg.tc-moi .tc-qui { color: #7CFC9E; } .tc-saisie { display: flex; gap: 0.3vw; padding: 0.5vh; border-top: 1px solid var(--w-border); flex: 0 0 auto; } .tc-saisie input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.15vh; background: rgba(255,255,255,0.04); border: 1px solid var(--w-border); border-radius: 8px; color: var(--w-text-main); padding: 0.4vh 0.5vw; } .tc-saisie input:focus { outline: none; border-color: var(--w-highlight); } .tc-saisie button { font: inherit; font-size: 1.1vh; font-weight: 800; padding: 0.4vh 0.7vw; border-radius: 8px; border: 1px solid var(--w-highlight); background: rgba(0,229,255,0.12); color: var(--w-highlight); cursor: pointer; } /* Une fois ferme : le contenu disparait, le titre bascule a la verticale. */ #lobby-tchat.est-ferme .tc-msgs, #lobby-tchat.est-ferme .tc-saisie, #lobby-tchat.est-ferme .tc-nom { display: none; } #lobby-tchat.est-ferme .tc-tete { flex-direction: column; height: 100%; justify-content: flex-start; padding: 0.6vh 0.2vw; border-bottom: none; } .tc-rail-txt { display: none; } #lobby-tchat.est-ferme .tc-rail-txt { display: block; writing-mode: vertical-rl; margin-top: 0.8vh; font-size: 1.05vh; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--w-highlight); white-space: nowrap; } /* Pastille de messages non lus : sans elle, replier le tchat reviendrait a rater les conversations. */ .tc-pastille { display: none; margin-top: 0.5vh; font-size: 0.95vh; font-weight: 800; background: var(--w-red); color: #fff; border-radius: 10px; padding: 0.1vh 0.4vw; } #lobby-tchat.est-ferme .tc-pastille.a-lire { display: block; } .tc-refus { font-size: 1vh; color: var(--w-red); padding: 0 0.5vw 0.4vh; } /* Outil de moderation : n'apparait que si le serveur nous a reconnu administrateur. */ .tc-muter { display: none; margin-left: 0.3vw; cursor: pointer; opacity: 0.55; font-size: 0.9em; } body.tc-admin .tc-muter { display: inline; } .tc-muter:hover { opacity: 1; } /* Sur petit ecran, le lobby passe en colonne : le tchat prend toute la largeur et une hauteur fixe, sinon il serait illisible. */ @media (max-width: 1023px), (orientation: portrait) { #lobby-tchat { flex: 0 0 30vh; } #lobby-tchat.est-ferme { flex: 0 0 3.4vh; } #lobby-tchat.est-ferme .tc-tete { flex-direction: row; height: auto; } #lobby-tchat.est-ferme .tc-rail-txt { writing-mode: horizontal-tb; margin-top: 0; } } /* ========================================================================== LOBBY MULTIJOUEUR (panneau latéral) + COMPTE À REBOURS Ajouté pour le nouveau système de salons/tables. Le panneau se place à droite (la zone libre de l'écran d'accueil en ligne) sans rien pousser verticalement : il est en position fixed. Sur petit écran il repasse dans le flux (media query). ========================================================================== */ /* Le panneau n'existe visuellement que sur l'écran "Jouer en ligne". */ #online-lobby-panel { display: none; } /* V195 : le panneau prend la place du carrousel de modes (masqué juste en dessous) au lieu d'être une colonne fixe à droite. Bloc normal du flux, centré, même largeur max que .mode-carousel (900px) pour occuper visuellement exactement la zone que prenait le carrousel. box-sizing:border-box explicite car le projet n'a pas de box-sizing global — sans ça le padding ferait déborder le bloc de sa largeur en % / max-width. */ body.online-hub-active #online-lobby-panel { display: flex; flex-direction: column; box-sizing: border-box; position: static; /* V197 : le panneau touche desormais les deux bords de l'ecran (au lieu des 96vw herites de son conteneur #lobby-online-buttons). Technique du "full-bleed breakout" : width:100vw + marges negatives qui annulent la largeur de la fenetre, quel que soit le nombre d'ancetres centres/ plafonnes entre le panneau et le bord de l'ecran — pas besoin de les modifier un par un. Sans danger ici : aucun ancetre n'est en overflow:hidden qui couperait le debordement necessaire au calcul. */ width: 100vw; max-width: 100vw; /* V214 : marge basse ramenee de 1.4vh a 8px (~2mm) - le panneau descend jusqu'a ras du lisere du bas, la hauteur gagnee revient a la grille de tuiles. Valeur en px (et non en vh) volontairement : c'est une marge de securite visuelle constante, elle ne doit pas fondre sur une fenetre courte ni gonfler sur un grand ecran. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 8px; border-radius: 0; /* Raccourci pour que tout tienne dans une page sans defilement (etait 68vh en V196, qui debordait sur les petits ecrans avec le reste de l'interface autour). */ height: 44vh; min-height: 320px; max-height: 480px; background: linear-gradient(180deg, rgba(10,12,20,0.92), rgba(4,4,8,0.96)); border: 1px solid var(--w-border); border-radius: 12px; box-shadow: 0 0 34px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03); padding: 1.4vh 1.2vw; z-index: 40; overflow: hidden; } /* Le carrousel de mode disparaît : le panneau lobby prend le relais pour choisir le type de partie (chips Djinki Rivers / Token / Mystery / Flash déjà dans l'onglet "Parties" du panneau). Ciblé par id, jamais par la classe .mode-carousel partagée : ne touche aucun autre carrousel du jeu. */ body.online-hub-active #online-variant-picker { display: none; } /* V196 : le reste du bandeau du carrousel (barre de favoris, texte d'intro, points de pagination) restait visible au-dessus du panneau — ce sont des freres de #online-variant-picker, pas des enfants, donc pas couverts par la regle ci-dessus. #lobby-favorites-bar est partage avec les ecrans Accueil/Local : le masquage est scope a l'ecran en ligne uniquement. */ body.online-hub-active #lobby-favorites-bar, body.online-hub-active #online-intro-heading, body.online-hub-active #online-intro-desc, body.online-hub-active #online-carousel-dots { display: none; } /* En-tête : titre + compteur de joueurs en ligne */ .lobby-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1vh; margin-bottom: 1vh; border-bottom: 1px solid var(--w-border); flex: 0 0 auto; } .lobby-panel-title { font-family: 'Cinzel', Georgia, serif; font-weight: 800; font-size: 1.9vh; letter-spacing: 0.5px; color: var(--w-text-main); text-shadow: 0 0 8px var(--w-highlight); } /* V210 : groupe de droite de l'en-tete (bouton mesures + compteur), pour que le bouton s'insere SANS casser le justify-content:space-between a 2 elements deja en place (titre a gauche, groupe a droite). */ .lobby-panel-head-right { display: flex; align-items: center; gap: 0.6vw; } /* V210 : mode "Mesures" - affiche les dimensions reelles (px) de la grille de tuiles, pour qu'Angelos puisse me donner des chiffres exacts au lieu d'une description visuelle. Bouton discret par defaut, s'allume (jaune) une fois active. */ .lobby-measure-btn { font-size: 1.15vh; font-weight: 700; white-space: nowrap; padding: 0.4vh 0.8vw; border-radius: 20px; border: 1px solid var(--w-border); background: rgba(255,255,255,0.02); color: var(--w-text-muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .lobby-measure-btn:hover { border-color: #ffcc55; color: #ffcc55; } .lobby-measure-btn.is-active { border-color: #ffcc55; color: #ffcc55; background: rgba(255,204,85,0.12); } /* Encart flottant : les chiffres a copier-coller. En bas a droite pour ne jamais recouvrir les tuiles elles-memes ni la liste des tables. */ #lobby-measure-panel { /* V220 : remonte a 14vh du bas pour ne pas recouvrir le bandeau "retour dans le temps" (bottom:8vh), les deux outils de QA etant souvent utilises ensemble. z-index maximal : le panneau doit rester lisible par-dessus le plateau, les modales et le compte a rebours. */ position: fixed; bottom: 14vh; right: 1.2vw; z-index: 2147483000; max-width: 320px; background: rgba(6,6,12,0.95); border: 1px solid #ffcc55; border-radius: 8px; padding: 1.1vh 1.3vw; box-shadow: 0 0 24px rgba(0,0,0,0.65); font-family: 'Courier New', Consolas, monospace; font-size: 1.35vh; line-height: 1.65; color: #f0f0f0; } .lobby-measure-title { font-weight: 800; color: #ffcc55; margin-bottom: 0.5vh; } /* V216 : le panneau peut devenir long (inspecteur + grille) - il defile au lieu de deborder de l'ecran. */ #lobby-measure-panel { max-height: 62vh; overflow-y: auto; } .lobby-measure-sub { margin-top: 0.8vh; padding-top: 0.5vh; border-top: 1px solid rgba(255,204,85,0.3); font-weight: 800; color: #ffcc55; } .lobby-measure-el { color: #22c8ff; word-break: break-all; margin-bottom: 0.3vh; } .lobby-measure-tools { display: flex; gap: 0.5vw; margin-bottom: 0.5vh; } .lobby-measure-tool { font-family: inherit; font-size: 1.15vh; font-weight: 700; cursor: pointer; padding: 0.3vh 0.6vw; border-radius: 6px; background: rgba(255,255,255,0.04); color: #f0f0f0; border: 1px solid rgba(255,255,255,0.2); } .lobby-measure-tool:hover { border-color: #ffcc55; color: #ffcc55; } .lobby-measure-tool.is-on { border-color: #ffcc55; color: #ffcc55; background: rgba(255,204,85,0.14); } /* Surlignage de l'element survole. En position:fixed avec pointer-events:none : il ne gene aucun clic et ne deplace rien dans la page (contrairement a une bordure posee sur l'element lui-meme). */ #lobby-measure-overlay { /* V220 : juste sous le panneau, mais au-dessus de tout le reste. */ position: fixed; z-index: 2147482999; pointer-events: none; border: 1px solid #22c8ff; background: rgba(34,200,255,0.12); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); } .lobby-measure-hint { margin-top: 0.7vh; font-size: 1.1vh; color: #999; font-style: italic; } /* Contours pointilles : montrent OU chaque mesure s'applique, sans jamais modifier la mise en page (outline, contrairement a border, ne prend pas de place et ne pousse rien). */ .lobby-type-grid.is-measuring { outline: 2px dashed #ffcc55; outline-offset: -1px; } /* V212 : contour rose sur les onglets (Parties/Salon prive/Tournois), pour reperer la zone servant de repere a la mesure "onglet <-> tuiles". */ .lobby-tabs.is-measuring { outline: 1px dashed #ff5fd1; outline-offset: -2px; } /* V211 : contour legerement reduit (-3px au lieu de -1px) - a -1px, l'arrondi du navigateur sur les 2 rangees (grid-template-rows: 1fr 1fr) rendait le contour tres legerement plus proche du bord en haut qu'en bas. Un insert plus genereux absorbe cet ecart de sous-pixel. Outil de mesure uniquement - ne change aucune tuile reelle du jeu. */ .lobby-type-grid.is-measuring .lobby-type-chip { outline: 1px dashed #22c8ff; outline-offset: -3px; } .lobby-online-count { display: flex; align-items: center; gap: 0.5vw; font-size: 1.4vh; font-weight: 700; color: #7CFC9E; background: rgba(30,220,120,0.08); border: 1px solid rgba(60,220,130,0.35); border-radius: 20px; padding: 0.4vh 0.9vw; } .lobby-online-dot { width: 0.9vh; height: 0.9vh; border-radius: 50%; background: #35e07a; box-shadow: 0 0 8px #35e07a; animation: lobbyPulseDot 1.6s ease-in-out infinite; } @keyframes lobbyPulseDot { 0%,100%{opacity:1;} 50%{opacity:0.35;} } /* Onglets : Parties publiques / Salon privé / Tournois */ .lobby-tabs { display: flex; gap: 0.4vw; margin-bottom: 1vh; flex: 0 0 auto; } .lobby-tab { flex: 1; text-align: center; cursor: pointer; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.35vh; letter-spacing: 0.4px; padding: 0.9vh 0.3vw; color: var(--w-text-muted); background: rgba(255,255,255,0.02); border: 1px solid var(--w-border); border-radius: 8px; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .lobby-tab.is-active { color: var(--w-text-main); background: rgba(0,229,255,0.10); border-color: var(--w-highlight); text-shadow: 0 0 8px var(--w-highlight); } /* Sélecteur de type de jeu (pour l'onglet Parties publiques) */ /* V201 : grille 2x2 des tuiles (remplace la colonne verticale V198-V200) + une SEULE liste de tables a droite, filtree par la tuile choisie — retour en arriere assume sur le "tiroir par tuile" de la V200 (les 4 listes simultanees), apres validation d'Angelos sur l'aperçu "Option 1". Cliquer une tuile change quelle liste est affichee : renderPublicList() (laissee inerte en V200, sa cible HTML avait disparu) redevient active TELLE QUELLE, aucune modification necessaire cote JS pour ce point — seule la structure HTML autour change (voir plus haut). */ .lobby-type-grid { /* V202 : la grille doit occuper TOUTE la hauteur disponible sous les onglets (comme la liste des tables a droite, .lobby-list, qui utilise deja flex:1 1 auto) - flex:0 0 auto empechait ca en V201 (largeur ET hauteur figees). On garde la largeur geree par flex (elle ne pousse plus le reste), mais on laisse l'axe transversal (hauteur, dans un parent flex-direction:row) s'etirer via l'align-items:stretch deja present sur #lobby-view-public. */ flex: 0 0 auto; /* V213 : la grille est etiree par le parent flex (#lobby-view-public, align-items:stretch) - sans min-height/min-width:0 explicite ici, sa propre taille "automatique" reste basee sur son CONTENU (les 2 rangees de tuiles), qui peut deborder de la taille donnee par le stretch. Meme piege que .lobby-type-chip avait deja corrige (V202) pour lui-meme, mais qui manquait ici, un niveau au-dessus. */ min-height: 0; min-width: 0; display: grid; /* V213 : minmax(0, 1fr) au lieu de 1fr seul - un "1fr" seul garantit un partage EQUITABLE de l'espace RESTANT, mais n'empeche pas une piste de grandir au-dela de sa part si son contenu l'exige (base size = min-content par defaut). minmax(0, 1fr) force la piste a accepter de descendre a 0 si besoin, donc le partage 1fr/1fr redevient vraiment garanti a parts EGALES entre les 2 rangees et les 2 colonnes, quel que soit le contenu des tuiles. C'est ce qui causait l'ecart mesure par Angelos (tuile a 166px au lieu des 150px attendus par le calcul gap/padding). */ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); /* V209 : gap agrandi avec un plancher en px (max()) - a 0.8vh, l'espace entre 2 tuiles pouvait descendre sous les 10px sur petit ecran, plus petit que le rayon des coins (12px) et bien plus petit que le halo neon au survol : les tuiles semblaient se toucher/se chevaucher. Demande explicite d'Angelos : "les bordures ne soient pas mordues, qu'elles ne se chevauchent pas". */ gap: max(14px, 1.6vh); /* V209 : meme espacement applique en padding tout autour de la grille, pour que "l'espace noir avant bordure" (mot d'Angelos) soit identique entre 2 tuiles ET entre le bloc de tuiles et le bord du panneau. box-sizing:border-box explicite (le projet n'a pas de box-sizing global - voir gotcha connu) pour que ce padding ne fasse pas deborder la largeur calc() ci-dessous, qui doit rester alignee sur la tuile "PARTIES" (repere V203). */ box-sizing: border-box; padding: max(14px, 1.6vh); /* V203 : largeur fixe (360px) remplacee par la MEME formule que celle utilisee par un onglet de .lobby-tabs (flex:1 sur 3 onglets, gap:0.4vw) - .lobby-tabs et #lobby-view-public sont tous deux enfants directs de #online-lobby-panel, donc "100%" ici designe la meme largeur de base que pour les onglets. Le bloc de tuiles fait maintenant exactement la largeur de la tuile "PARTIES", le repere demande par Angelos. Cette largeur externe est inchangee en V209 : box-sizing:border-box fait que le nouveau padding se prend SUR cette largeur, pas en plus. */ width: calc((100% - 0.8vw) / 3); } /* V201 : la tuile ne se remplit plus JAMAIS d'une couleur pleine au survol ou a la selection (ancien style .is-active V198-V200) — seulement un leger agrandissement (scale) et un halo lumineux (box-shadow) autour, le fond sombre reste identique dans tous les etats. Demande explicite d'Angelos. */ .lobby-type-chip { position: relative; /* V214 : LE correctif du debordement. Sans box-sizing:border-box, le "height:100%" ci-dessous designe la boite de CONTENU : le padding (1vh en haut + 1vh en bas) et la bordure (1px x2) s'AJOUTENT par dessus. Sur l'ecran d'Angelos (1vh = 7px), ca faisait 150px de cellule rendus en 166px de tuile -> 16px de trop par rangee, donc 32px de debordement vers le bas pour les 2 rangees. Avec border-box, "height:100%" inclut padding et bordure : la tuile occupe EXACTEMENT sa cellule, ni plus ni moins. Le projet n'ayant pas de box-sizing global, il doit etre pose explicitement ici. */ box-sizing: border-box; /* V202 : hauteur fixe (108px) remplacee par 100% pour que chaque tuile remplisse entierement sa cellule de grille (elle-meme etiree sur toute la hauteur du panneau via grid-template-rows:1fr 1fr ci-dessus) au lieu de rester petite avec du vide en dessous. */ height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5vh; text-align: center; cursor: pointer; font-weight: 800; letter-spacing: 0.3px; padding: 1vh 0.6vw; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--chip, var(--w-border)) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--chip, #444) 24%, #0a0a0e) 0%, #0a0a0e 80%); color: var(--chip, var(--w-text-muted)); text-shadow: 0 0 8px color-mix(in srgb, var(--chip, transparent) 55%, transparent); transition: box-shadow 0.15s ease, border-color 0.15s ease; overflow: hidden; /* V205 : z-index de base, pour que la tuile survolee/active (ci-dessous) puisse passer au-dessus de ses voisines sans rien changer d'autre. */ z-index: 1; } .lobby-type-chip-icon { font-size: 3.4vh; line-height: 1; } .lobby-type-chip-label { font-size: 1.6vh; line-height: 1.15; } /* V204 : plus d'agrandissement (transform:scale) au survol/selection - sur des tuiles grandes et collees (gap:0.8vh), ca les faisait deborder visuellement sur les tuiles voisines. Seul le halo (box-shadow) + bordure coloree signalent maintenant le survol/la selection, sans jamais empieter sur les cases d'a cote. Demande explicite d'Angelos. */ .lobby-type-chip:hover { border-color: var(--chip, var(--w-highlight)); /* V209 : halo a 2 couches (coeur serre + voile large) au lieu d'une seule ombre - rendu plus eclaire/vif qu'un simple flou unique, sans toucher au gap (V209 ci-dessus) qui empeche deja le halo d'empieter sur la tuile voisine. */ box-shadow: 0 0 10px color-mix(in srgb, var(--chip, var(--w-highlight)) 75%, transparent), 0 0 32px color-mix(in srgb, var(--chip, var(--w-highlight)) 50%, transparent); /* V205 : passe au-dessus de ses voisines le temps du survol, pour que le halo ne soit plus recouvert (coupe net) par la tuile d'a cote. */ z-index: 2; } .lobby-type-chip.is-active { border-color: var(--chip, var(--w-highlight)); box-shadow: 0 0 12px color-mix(in srgb, var(--chip, var(--w-highlight)) 80%, transparent), 0 0 38px color-mix(in srgb, var(--chip, var(--w-highlight)) 58%, transparent), inset 0 0 18px color-mix(in srgb, var(--chip, var(--w-highlight)) 28%, transparent); z-index: 2; } .lobby-type-chip.is-active:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--chip, var(--w-highlight)) 85%, transparent), 0 0 46px color-mix(in srgb, var(--chip, var(--w-highlight)) 64%, transparent), inset 0 0 20px color-mix(in srgb, var(--chip, var(--w-highlight)) 32%, transparent); z-index: 2; } /* Etoile favori en coin de tuile. Reprend TEL QUEL le systeme de favoris deja existant sur les cartes du carrousel (toggleFavorite / isFavorite, meme identifiant 'online-') : favorite ici = favorite la aussi. Ne brille (halo dore) que si selectionnee comme favorite (classe is-fav), pas au simple survol. */ .lobby-star { position: absolute; top: 0.5vh; right: 0.5vh; z-index: 5; width: 2.1vh; height: 2.1vh; min-width: 18px; min-height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; user-select: none; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.25); color: #cfd3dc; font-size: 1.2vh; transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lobby-star:hover { transform: scale(1.15); border-color: var(--w-gold, #ffcc55); } .lobby-star.is-fav { color: var(--w-gold, #ffcc55); border-color: var(--w-gold, #ffcc55); text-shadow: 0 0 6px var(--w-gold, #ffcc55); box-shadow: 0 0 10px var(--w-gold, #ffcc55), 0 0 3px var(--w-gold, #ffcc55) inset; } /* V200 : les boutons "Partie rapide"/"Retour" vivent maintenant dans le bandeau du bas — caches par defaut (display:none inline sur l'element), affiches uniquement sur cet ecran. */ body.online-hub-active #lobby-footer-actions { display: flex !important; } /* Liste défilante des tables */ .lobby-list { flex: 1 1 auto; overflow-y: auto; padding-right: 0.4vw; display: flex; flex-direction: column; gap: 0.8vh; } .lobby-list::-webkit-scrollbar { width: 6px; } .lobby-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } .lobby-table-card { display: flex; align-items: center; gap: 0.8vw; background: rgba(255,255,255,0.03); border: 1px solid var(--w-border); border-radius: 10px; padding: 1vh 1vw; transition: border-color 0.15s ease, background 0.15s ease; } .lobby-table-card.is-joinable { cursor: pointer; } .lobby-table-card.is-joinable:hover { border-color: var(--w-highlight); background: rgba(0,229,255,0.06); } .lobby-table-card.is-full { opacity: 0.85; } .lobby-table-card.is-playing { opacity: 0.55; } .lobby-table-num { flex: 0 0 auto; width: 3.4vh; height: 3.4vh; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', Georgia, serif; font-weight: 800; font-size: 1.7vh; color: #05121a; background: var(--chip, var(--w-highlight)); box-shadow: 0 0 12px color-mix(in srgb, var(--chip, var(--w-highlight)) 60%, transparent); } .lobby-table-mid { flex: 1 1 auto; min-width: 0; } .lobby-table-type { font-size: 1.15vh; font-weight: 700; color: var(--chip, var(--w-highlight)); text-transform: uppercase; letter-spacing: 0.5px; } .lobby-table-players { font-size: 1.35vh; color: var(--w-text-main); margin-top: 0.2vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lobby-seat-empty { color: var(--w-text-muted); font-style: italic; } /* V201 : tables en tuiles + texte neon, uniquement pour #lobby-public-list (l'onglet Parties). #lobby-tour-list (tournois) partage les memes classes .lobby-table-card/.lobby-list mais n'est pas scope ici : il garde son affichage en lignes d'origine. Demande d'Angelos : le texte de chaque table doit briller dans la couleur neon du mode selectionne (violet pour Mystery, bleu pour Flash, etc.), pas juste --chip a plat. */ /* V215 : retour a une LISTE DE LIGNES (la grille de "bulles" de la V201 est abandonnee - demande d'Angelos : "un rendu type bulles plutot que ligne lisible mais fine"). Une table = une ligne pleine largeur, tout aligne sur un seul niveau : n° + mode + joueurs + bouton. */ #lobby-public-list { display: flex; flex-direction: column; gap: 0.45vh; align-content: flex-start; } #lobby-public-list .lobby-table-card { flex-direction: row; align-items: center; text-align: left; gap: 0.7vw; padding: 0.55vh 0.8vw; box-sizing: border-box; /* meme precaution qu'en V214 : pas de box-sizing global dans ce projet */ } /* Ligne fine : le libelle du mode garde une largeur stable pour que les colonnes s'alignent visuellement d'une ligne a l'autre, et les joueurs occupent tout le reste. */ #lobby-public-list .lobby-table-type { flex: 0 0 auto; min-width: 11ch; margin: 0; } #lobby-public-list .lobby-table-players { flex: 1 1 auto; min-width: 0; margin: 0; } #lobby-public-list .lobby-table-cta { flex: 0 0 auto; width: auto; } /* Le numero de table retrecit un peu : sur une ligne fine, le pastille d'origine (3.4vh) dictait a elle seule la hauteur de la ligne. */ #lobby-public-list .lobby-table-num { width: 2.5vh; height: 2.5vh; min-width: 20px; min-height: 20px; font-size: 1.3vh; } /* Saisie du code d'une table privee : sur une ligne, l'input et le bouton se placent cote a cote (ils etaient empiles pour le format "bulle"). */ #lobby-public-list .lobby-table-join-code { flex-direction: row; align-items: center; width: auto; gap: 0.4vw; } #lobby-public-list .lobby-table-code-input { width: 7ch; } /* Colonne de droite : barre d'outils (filtre) au-dessus, liste en dessous. Bloc autonome, distinct de la grille des 4 tuiles - c'est le "fonctionne differemment et separement" demande par Angelos. Prevu pour accueillir les futurs boutons de filtre ("masquer tables vides", "tables amis") a cote du menu deroulant, sans retoucher la structure. */ .lobby-public-col { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.6vh; } .lobby-list-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6vw; } /* V216 : menu deroulant maison. Un