/* ===================== CONNEXION — DA "jeu de société de soirée" =====================
   Références : Just One, So Clover!, Codenames — cartes cartonnées à gros contour encre, couleurs franches.
   Idée centrale = un diagramme de Venn : chaque joueur a SON cercle (siège 0 corail à gauche, siège 1 bleu à
   droite) et le mot à trouver est dans l'intersection jaune. Gagner = les 2 cercles fusionnent (.merged).
   Tout en CSS/SVG (CX_VENN dans play.js). Polices : Lilita One (titres, mots), Nunito (texte). */
:root{ --cx-ink:#22203a; --cx-paper:#fbf1de; --cx-a:#ff6b57; --cx-b:#3d7dff; --cx-y:#ffd23f; --cx-green:#19b37a; --cx-muted:#6d6886; }

/* ---------- décor : table crème à pois + 2 grands cercles (les 2 joueurs) ---------- */
body.cx-bg #app-bg{ background:
  radial-gradient(circle at 6% 14%, rgba(255,107,87,.22) 0 24vmax, transparent 24.2vmax),
  radial-gradient(circle at 96% 92%, rgba(61,125,255,.2) 0 27vmax, transparent 27.2vmax),
  var(--cx-paper); }
body.cx-bg #app-bg::after{ display:block; opacity:1; background:radial-gradient(rgba(34,32,58,.13) 1.3px, transparent 1.8px) 0 0/24px 24px; }

.cxn{ font-family:Nunito,sans-serif; color:var(--cx-ink); }
.cxn [hidden]{ display:none !important; }

/* ---------- le Venn (logo, règles, plateau) ---------- */
[data-cx-venn] svg{ display:block; width:100%; height:100%; overflow:visible; }
[data-cx-venn] .a{ fill:var(--cx-a); }
[data-cx-venn] .b{ fill:var(--cx-b); }
[data-cx-venn] .lens{ fill:var(--cx-y); transition:opacity .3s; }
[data-cx-venn] .rim{ fill:none; stroke:var(--cx-ink); stroke-width:3; }
[data-cx-venn] .sa, [data-cx-venn] .sb{ transition:transform .8s cubic-bezier(.5,1.6,.5,1), fill .4s; }
/* (dans un SVG, les px d'un transform CSS = unités du viewBox : 18 = la moitié de l'écart entre les centres) */
.merged .sa{ transform:translateX(18px); }
.merged .sb{ transform:translateX(-18px); }
.merged .a, .merged .b{ fill:var(--cx-y); }
.merged .lens, .merged .cxn-wa, .merged .cxn-wb{ opacity:0; }
.apart .sa{ transform:translateX(-13px); }
.apart .sb{ transform:translateX(13px); }
.apart .lens, .apart .cxn-wm{ opacity:0; }

/* ---------- logo ---------- */
.cxn-logo{ display:inline-flex; align-items:center; gap:.18em; margin:0; font:400 1em/1 'Lilita One',sans-serif; color:var(--cx-ink); }
.cxn-logo [data-cx-venn]{ width:1.5em; height:1em; flex:none; }
.cxn-logo .cxn-word{ letter-spacing:.01em; }
.cxn-logo .cxn-word b{ font-weight:400; color:var(--cx-y); -webkit-text-stroke:.06em var(--cx-ink); paint-order:stroke fill; }
.cxn-logo-big{ font-size:clamp(48px,10vw,88px); filter:drop-shadow(0 .06em 0 rgba(34,32,58,.18)); }
.cxn-logo-mini{ font-size:26px; }

/* ---------- boutons : "pions" jaunes à grosse lèvre encre ---------- */
.cxn-btn{ font:400 22px/1 'Lilita One',sans-serif; letter-spacing:.02em; color:var(--cx-ink); cursor:pointer;
  background:var(--cx-y); border:3px solid var(--cx-ink); border-radius:16px; padding:15px 30px;
  box-shadow:0 6px 0 var(--cx-ink), inset 0 -4px 0 rgba(0,0,0,.08), inset 0 3px 0 rgba(255,255,255,.6); transition:transform .1s, box-shadow .1s, filter .15s; }
.cxn-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 7px 0 var(--cx-ink), inset 0 -4px 0 rgba(0,0,0,.08), inset 0 3px 0 rgba(255,255,255,.6); }
.cxn-btn:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--cx-ink), inset 0 -2px 0 rgba(0,0,0,.08); }
.cxn-btn:focus-visible{ outline:3px solid var(--cx-b); outline-offset:4px; }
.cxn-btn.ghost{ background:#fff; }
.cxn-btn.small{ font-size:16px; padding:9px 18px; border-radius:12px; box-shadow:0 4px 0 var(--cx-ink); }
.cxn-btn.small:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--cx-ink); }
.cxn-back{ background:none; border:none; font:700 15px Nunito,sans-serif; color:var(--cx-muted); cursor:pointer; padding:6px 10px; }
.cxn-back:hover{ color:var(--cx-ink); text-decoration:underline; }
.cxn-card{ background:#fff; border:3px solid var(--cx-ink); border-radius:22px; box-shadow:0 6px 0 var(--cx-ink); }

/* ---------- écran pseudo (landing partagé) ---------- */
body.cx-bg #landing .tagline{ color:var(--cx-ink); font-family:Nunito,sans-serif; font-weight:800; }
body.cx-bg #landing .field{ color:var(--cx-muted); }
body.cx-bg #landing .field input{ color:var(--cx-ink); background:#fff; border:3px solid var(--cx-ink); border-radius:14px; text-align:center; font-size:20px; }
body.cx-bg #landing .field input:focus{ border-color:var(--cx-b); box-shadow:0 0 0 4px rgba(61,125,255,.25); }
body.cx-bg #land-back{ color:var(--cx-muted); }
body.cx-bg #logo{ animation:none; }
body.cx-bg #logo-text{ text-shadow:none; }
body.cx-bg #logo-text{ font-size:16px; line-height:1; }
body.cx-bg #logo-text .cxn-logo-big{ font-size:clamp(52px,11vw,96px); }
/* .logo-text b (play.css) = ligne dorée en dégradé du logo poker : neutralisé pour le "x" du logo Connexion */
body.cx-bg #logo-text .cxn-word b{ display:inline; background:none; color:var(--cx-y); }
#btn-play.cxn-btn{ font-size:34px; padding:16px 64px; border-radius:20px; }

/* ---------- accueil ---------- */
.cxn-home{ display:flex; flex-direction:column; align-items:center; gap:18px; width:min(920px,100%); text-align:center; padding:8px 0 20px; }
.cxn-home .cxn-logo-big{ animation:cxn-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes cxn-pop{ from{ transform:scale(.4); opacity:0; } }
.cxn-tagline{ margin:-10px 0 0; font-size:clamp(17px,2.6vw,21px); font-weight:800; color:var(--cx-muted); }
.cxn-steps{ list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; width:100%; }
.cxn-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px 16px; }
.cxn-steps li > b{ position:absolute; top:-16px; left:-12px; width:38px; height:38px; display:grid; place-items:center;
  font:400 22px/1 'Lilita One',sans-serif; color:var(--cx-ink); background:var(--cx-y); border:3px solid var(--cx-ink); border-radius:50%; transform:rotate(-8deg); }
.cxn-steps p{ margin:0; font-size:16px; font-weight:700; line-height:1.3; }
.cxn-steps em{ font-style:normal; font-weight:800; background:linear-gradient(transparent 58%, rgba(255,210,63,.75) 58%); }
.cxn-rules{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; }
.cxn-rules span{ font-size:14px; font-weight:800; padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.7); border:2px solid rgba(34,32,58,.18); }
.cxn-searching{ display:flex; align-items:center; gap:14px; font-size:18px; font-weight:800; }
.cxn-pulse{ width:84px !important; height:56px !important; }
.cxn-pulse .sa{ animation:cxn-near 1.4s ease-in-out infinite; }
.cxn-pulse .sb{ animation:cxn-near 1.4s ease-in-out infinite reverse; }
@keyframes cxn-near{ 0%,100%{ transform:translateX(-7px); } 50%{ transform:translateX(7px); } }
.cxn-live{ width:min(560px,100%); }
.cxn-live h2{ margin:4px 0 8px; font:400 22px 'Lilita One',sans-serif; }
.cxn-live h2 small{ font:700 14px Nunito,sans-serif; color:var(--cx-muted); margin-left:6px; }
.cxn-live-list{ display:flex; flex-direction:column; gap:8px; max-height:30vh; overflow-y:auto; padding:2px 2px 8px; }
.cxn-live-item{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; font:inherit; color:var(--cx-ink); cursor:pointer; text-align:left;
  background:#fff; border:3px solid var(--cx-ink); border-radius:14px; padding:10px 14px; box-shadow:0 4px 0 var(--cx-ink); transition:transform .1s; }
.cxn-live-item:hover{ transform:translateY(-2px); }
.cxn-live-item b{ font:400 17px 'Lilita One',sans-serif; color:#fff; padding:3px 10px; border-radius:99px; border:2px solid var(--cx-ink); }
.cxn-live-item b.a{ background:var(--cx-a); } .cxn-live-item b.b{ background:var(--cx-b); }
.cxn-live-item span{ margin-left:auto; font-size:14px; font-weight:800; color:var(--cx-muted); }

/* mini-Venn des règles */
/* taille des mots = f(largeur du Venn, longueur du mot) : --len posé par cxRenderGame (6 par défaut = mots des règles) */
.cxn-venn{ position:relative; display:block; aspect-ratio:3/2; container-type:inline-size; }
.cxn-venn.mini{ width:min(210px,100%); }
.cxn-venn > svg{ position:absolute; inset:0; }
.cxn-w{ position:absolute; top:50%; transform:translate(-50%,-50%); transition:opacity .3s, left .8s cubic-bezier(.5,1.6,.5,1); width:28%; text-align:center; overflow-wrap:anywhere; hyphens:auto;
  font:400 max(3cqw, min(7.5cqw, calc(46cqw / var(--len, 6))))/1.05 'Lilita One',sans-serif; color:#fff; text-shadow:0 2px 0 rgba(34,32,58,.35); }
.cxn-wa{ left:22%; } .cxn-wb{ left:78%; }
.cxn-wm{ left:50%; width:24%; color:var(--cx-ink); text-shadow:none; font-size:12cqw; }
.cxn-venn.apart .cxn-wa{ left:24.2%; } .cxn-venn.apart .cxn-wb{ left:75.8%; }
.cxn-venn.merged .cxn-wm{ width:56%; font-size:max(4cqw, min(12cqw, calc(90cqw / var(--len, 6)))); animation:cxn-pop .6s .35s cubic-bezier(.2,1.6,.4,1) both; }

/* ---------- partie ---------- */
.cxn-game{ display:flex; flex-direction:column; align-items:center; gap:10px; width:min(820px,100%); margin:auto 0; }
.cxn-top{ display:flex; align-items:center; gap:14px; width:100%; flex-wrap:wrap; justify-content:center; }
.cxn-top .cxn-logo-mini{ margin-right:auto; }
.cxn-lives{ display:flex; gap:4px; padding:6px 10px; background:#fff; border:3px solid var(--cx-ink); border-radius:99px; }
.cxn-heart{ width:26px; height:24px; overflow:visible; }
.cxn-heart path{ fill:var(--cx-a); stroke:var(--cx-ink); stroke-width:2; stroke-linejoin:round; transition:fill .3s; }
.cxn-heart.off path{ fill:#e7e1d4; stroke:#b9b2a3; }
.cxn-heart.lost{ animation:cxn-heart-break .6s ease; }
@keyframes cxn-heart-break{ 0%{ transform:scale(1); } 30%{ transform:scale(1.5) rotate(-12deg); } 60%{ transform:scale(.8) rotate(8deg); } 100%{ transform:scale(1); } }
/* chrono : la pastille se vide comme une horloge (--p = part du temps restant, posé par cxTickTimer) */
.cxn-timer{ --p:1; display:flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; background:#fff; border:3px solid var(--cx-ink); border-radius:99px; }
.cxn-timer i{ width:24px; height:24px; border-radius:50%; border:2.5px solid var(--cx-ink);
  background:conic-gradient(var(--cx-b) calc(var(--p) * 360deg), #fff 0); }
.cxn-timer b{ font:400 20px/1 'Lilita One',sans-serif; min-width:44px; font-variant-numeric:tabular-nums; }
.cxn-timer.low i{ background:conic-gradient(var(--cx-a) calc(var(--p) * 360deg), #fff 0); }
.cxn-timer.low{ animation:cxn-tick 1s steps(2) infinite; }
.cxn-timer.low b{ color:#e0402c; }
@keyframes cxn-tick{ 50%{ transform:scale(1.06); } }
.cxn-spec-count{ font-weight:800; padding:7px 12px; background:#fff; border:3px solid var(--cx-ink); border-radius:99px; }
.cxn-round{ font:400 20px/1 'Lilita One',sans-serif; color:var(--cx-ink); background:var(--cx-y); border:3px solid var(--cx-ink);
  padding:7px 18px; border-radius:12px; transform:rotate(-2deg); box-shadow:0 3px 0 var(--cx-ink); }

.cxn-venn.big{ width:min(600px,94vw,calc((100vh - 440px) * 1.5)); min-width:280px; margin-top:4px; }
.cxn-venn.apart .cxn-wa, .cxn-venn.apart .cxn-wb{ font-size:13cqw; opacity:.7; }
.cxn-venn.lost svg{ filter:grayscale(.8) brightness(1.05); transition:filter .6s; }
.cxn-venn.lost .cxn-wm{ opacity:.4; }
/* ✓ sur le cercle de celui qui a déjà envoyé son mot (QUI a écrit, jamais QUOI) */
.cxn-ok{ position:absolute; top:3%; width:44px; height:44px; display:grid; place-items:center; font:900 22px/1 Nunito,sans-serif; color:#fff;
  background:var(--cx-green); border:3px solid var(--cx-ink); border-radius:50%; animation:cxn-pop .4s cubic-bezier(.2,1.6,.4,1) both; }
.cxn-oka{ left:16%; } .cxn-okb{ right:16%; }
.cxn-names{ display:flex; justify-content:space-between; gap:12px; width:min(600px,94vw); margin-top:-6px; }
.cxn-name{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; flex:0 1 44%; padding:6px 14px;
  background:#fff; border:3px solid var(--cx-ink); border-radius:14px; box-shadow:0 4px 0 var(--cx-ink); }
.cxn-name.a{ border-top:8px solid var(--cx-a); } .cxn-name.b{ border-top:8px solid var(--cx-b); }
.cxn-name b{ font:400 19px/1.1 'Lilita One',sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cxn-name small{ font-size:13px; font-weight:800; color:var(--cx-muted); min-height:1.2em; }
.cxn-name small.done{ color:var(--cx-green); }
.cxn-instr{ margin:4px 0 0; font-size:clamp(16px,2.4vw,19px); font-weight:800; text-align:center; min-height:1.3em; }
.cxn-form{ display:flex; gap:10px; width:min(560px,94vw); }
.cxn-form input{ flex:1; min-width:0; font:400 24px/1 'Lilita One',sans-serif; color:var(--cx-ink); text-align:center;
  background:#fff; border:3px solid var(--cx-ink); border-radius:16px; padding:12px 14px; outline:none; box-shadow:inset 0 4px 0 rgba(34,32,58,.08); }
.cxn-form input::placeholder{ color:#b9b2a3; }
.cxn-form input:focus{ border-color:var(--cx-b); box-shadow:inset 0 4px 0 rgba(34,32,58,.08), 0 0 0 4px rgba(61,125,255,.25); }
/* mot refusé (déjà utilisé...) : secousse + rouge, puis le JS le vide (cxRejectWord) */
.cxn-form input.cx-rejected{ border-color:#e0402c; color:#e0402c; animation:cxn-shake .5s ease; }
@keyframes cxn-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(5px); } }

.cxn-result{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.cxn-result-title{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.cxn-result-title b{ font:400 clamp(32px,6vw,46px)/1 'Lilita One',sans-serif; }
.cxn-result.win .cxn-result-title b{ color:var(--cx-y); -webkit-text-stroke:.07em var(--cx-ink); paint-order:stroke fill; animation:cxn-pop .6s .5s cubic-bezier(.2,1.6,.4,1) both; }
.cxn-result-title span{ font-size:17px; font-weight:800; color:var(--cx-muted); }
.cxn-row{ display:flex; gap:12px; }
.cxn-wait{ font-weight:800; color:var(--cx-muted); }

/* le chemin : toutes les paires révélées, de gauche (manche 1) à droite (maintenant) */
.cxn-trail{ display:flex; align-items:center; gap:10px; width:100%; margin-top:6px; }
.cxn-trail-t{ flex:none; font:400 16px 'Lilita One',sans-serif; color:var(--cx-muted); }
.cxn-trail ol{ list-style:none; margin:0; padding:4px 2px 8px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; }
.cxn-trail li{ position:relative; flex:none; display:flex; flex-direction:column; gap:3px; padding:6px 10px 6px 26px; background:#fff;
  border:2px solid var(--cx-ink); border-radius:12px; box-shadow:0 3px 0 var(--cx-ink); }
.cxn-trail li i{ position:absolute; left:6px; top:50%; transform:translateY(-50%); font:400 13px 'Lilita One',sans-serif; font-style:normal; color:var(--cx-muted); }
.cxn-trail li span{ font:400 15px/1.1 'Lilita One',sans-serif; white-space:nowrap; }
.cxn-trail li span.a{ color:var(--cx-a); } .cxn-trail li span.b{ color:var(--cx-b); }
.cxn-trail li.match{ background:var(--cx-y); }
.cxn-trail li.match span{ color:var(--cx-ink); }

/* spectateur : réactions */
.cxn-spec-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.cxn-spec-emojis{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.cxn-emoji-btn{ font-size:24px; line-height:1; width:46px; height:46px; background:#fff; border:3px solid var(--cx-ink); border-radius:50%; cursor:pointer;
  box-shadow:0 3px 0 var(--cx-ink); transition:transform .1s; }
.cxn-emoji-btn:hover{ transform:scale(1.12); }
.cxn-emoji-btn:active{ transform:translateY(2px) scale(.95); box-shadow:0 1px 0 var(--cx-ink); }
.cx-emoji-layer{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.cx-emoji-float{ position:absolute; bottom:-40px; font-size:36px; animation:cx-emoji-rise 2.2s ease-out forwards; }
@keyframes cx-emoji-rise{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 15%{ opacity:1; transform:translateY(-8vh) scale(1.1); } 100%{ transform:translateY(-60vh) scale(1); opacity:0; } }

@media (max-width:700px){
  .cxn-steps{ grid-template-columns:minmax(0,1fr); gap:20px; width:min(380px,100%); }
  .cxn-steps li{ flex-direction:row; text-align:left; padding:12px 14px; }
  .cxn-venn.mini{ width:120px; flex:none; }
  .cxn-top .cxn-logo-mini{ display:none; }
  .cxn-trail{ flex-direction:column; align-items:stretch; gap:2px; }
  .cxn-trail-t{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .cxn [data-cx-venn] *, .cxn-timer, .cxn-heart, .cxn-logo-big{ animation:none !important; transition:none !important; }
}
.cxn-instr:empty, .cxn-name small:empty{ display:none; }