/* Farfelu Games · les jeux à essayer (jeux.html, en/games.html). Les encres du site : sable et cobalt.
   La table est un objet en 3D : un plateau cobalt penché (perspective CSS), une tranche, des cartes qui se retournent. */

.jx { --gap: clamp(6px, 0.8vw, 12px); --pad: clamp(12px, 1.8vw, 26px); --deep: #03184d; }
.jx p { margin-top: 0; }

/* ---------- l'en-tête ---------- */
.jx-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem var(--gutter); align-items: end; }
.jx-intro-text { display: grid; gap: 0.9rem; }
.jx-intro .lead { max-width: 36ch; margin-top: 0; }
.jx-intro-text p:last-child { max-width: 46ch; color: var(--muted); }

/* ---------- le choix du jeu : neuf tuiles ---------- */
.jx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2.25rem; }
.jx-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fan" "pitch fan" "meta meta"; align-content: start; gap: 0.35rem 1rem; width: 100%; height: 100%; min-height: 8.75rem; padding: 1rem 1.15rem 0.95rem; background: var(--surface); border-radius: var(--radius); text-align: left; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.jx-tile:active { transform: scale(0.98); }
.jx-tile-name { grid-area: name; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.55rem); line-height: 1.1; }
.jx-tile-pitch { grid-area: pitch; max-width: 34ch; font-size: 0.975rem; line-height: 1.35; }
.jx-tile-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; margin-top: 0.3rem; font-size: var(--step-small); font-weight: 500; color: var(--ink); }
.jx-tile[aria-pressed="true"] { background: var(--ink); color: var(--accent-ink); }
.jx-tile[aria-pressed="true"] .jx-tile-meta { color: var(--accent-ink); }
.jx-tag { padding: 0 0.45rem; background: var(--ink); color: var(--accent-ink); font-weight: 700; }
.jx-tag.is-extra { background: var(--bg); color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }
.jx-tile[aria-pressed="true"] .jx-tag { background: var(--bg); color: var(--ink); outline: 0; }
.jx-fan { grid-area: fan; position: relative; width: 4.6rem; height: 5rem; }
.jx-fan > * { position: absolute; left: 1rem; top: 0.55rem; width: 2.6rem; height: 3.9rem; object-fit: cover; border: 3px solid var(--bg); border-radius: 6px; transform-origin: 50% 115%; transition: transform 420ms var(--ease-out); }
.jx-fan > :nth-child(1) { transform: rotate(-15deg) translateX(-5px); }
.jx-fan > :nth-child(2) { transform: translateY(-4px); }
.jx-fan > :nth-child(3) { transform: rotate(15deg) translateX(5px); }
.jx-fan .is-back { background: var(--stripe-ink) 0 0 / 10px 100% repeat-x, var(--bg); }
/* grand écran : deux rangées de cinq tuiles, debout comme des cartes */
@media (min-width: 75.01rem) {
  .jx-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jx-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fan" "name" "pitch" "meta"; min-height: 14.5rem; }
  .jx-fan { margin: 0 0 0.3rem -0.35rem; }
}
@media (hover: hover) and (pointer: fine) {
  .jx-tile:hover .jx-fan > :nth-child(1) { transform: rotate(-27deg) translateX(-10px); }
  .jx-tile:hover .jx-fan > :nth-child(2) { transform: translateY(-11px); }
  .jx-tile:hover .jx-fan > :nth-child(3) { transform: rotate(27deg) translateX(10px); }
}

/* ---------- la partie : un panneau, la table à droite ---------- */
.jx-play { --stage-h: clamp(26rem, 100svh - 9rem, 46rem); display: grid; grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head stage" "rule stage" "seats stage" "say stage" "acts stage"; gap: 1rem clamp(1rem, 2.4vw, 2rem); margin-top: 1.25rem; padding: clamp(0.75rem, 1.6vw, 1.5rem); background: var(--surface); border-radius: var(--radius); scroll-margin-top: 4.25rem; overflow-x: clip; }
.jx .jx-head { grid-area: head; margin: 0; font-size: clamp(1.6rem, 1.1rem + 1vw, 2.2rem); line-height: 1.05; }
.jx-head:focus:not(:focus-visible) { outline: none; }
.jx-rule { grid-area: rule; margin-top: -0.4rem; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.jx-seats { grid-area: seats; display: grid; gap: 6px; align-content: start; }
.jx-seat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; min-height: 3.1rem; padding: 0.3rem 0.85rem 0.3rem 0.3rem; background: var(--bg); border-radius: 10px; font-weight: 500; line-height: 1.2; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.jx-seat small { display: block; margin-top: 0.1rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.jx-seat.is-turn { background: var(--ink); color: var(--accent-ink); }
.jx-seat.is-turn small { color: var(--accent-ink); }
.jx-seat b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; }
.jx-av { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 8px; background: var(--ink); color: var(--accent-ink); font-family: var(--font-display); font-size: 1.1rem; line-height: 1; }
.jx-av img { width: 100%; height: 100%; object-fit: cover; }
.jx-seat.is-turn .jx-av-you { background: var(--bg); color: var(--ink); }
.jx-av-ghost { background: var(--stripe-ink) 0 0 / 10px 100% repeat-x, var(--bg); }
.jx-av-chat { background: var(--stripe-paper) 0 0 / 10px 100% repeat-x, var(--ink); }
.jx-av-none { display: none; }
.jx-say { grid-area: say; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.75rem; min-height: 5.75rem; padding: 0.85rem 1rem; background: var(--bg); border-radius: 18px 18px 18px 4px; }
.jx-say p { display: grid; gap: 0.2rem; font-size: 1.0625rem; line-height: 1.4; }
.jx-say b:empty, .jx-say small:empty { display: none; }
.jx-say small { font-size: 0.9375rem; line-height: 1.35; color: var(--muted); }
.jx-say .is-big { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.jx-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.jx-acts:empty { display: none; }
.jx-acts .button { min-height: 3rem; padding: 0 1.4rem; }
.jx .button[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* ---------- la table ---------- */
.jx-stage { grid-area: stage; position: relative; display: grid; place-items: center; min-height: var(--stage-h); padding-bottom: 1rem; container-type: inline-size; perspective: 1500px; perspective-origin: 50% 90%; }
.jx-table { --tilt: 22deg; position: relative; max-width: 100%; transform-style: preserve-3d; transform: rotateX(calc(var(--tilt) - var(--py, 0) * 3deg)) rotateY(calc(var(--px, 0) * 4deg)); transition: transform 900ms var(--ease-out); }
.jx-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * 2.5); min-width: min(30rem, 100cqw); padding: var(--pad); background: var(--ink); border-radius: 26px; outline: 3px dashed var(--muted); outline-offset: calc(var(--pad) * -0.45); transform-style: preserve-3d; }
.jx-edge { position: absolute; left: 16px; right: 16px; top: calc(100% - 2px); height: 40px; background: var(--deep); border-radius: 0 0 14px 14px; transform-origin: 50% 0; transform: rotateX(-90deg); }

/* une zone de cartes : la largeur d'une carte suit la place (largeur de la table, part de sa hauteur) */
.jx-grid { --c: var(--cols); --r: var(--rows); --zh: calc(var(--stage-h) * var(--share, 1) - var(--pad) * 2 - 1.25rem);
  --cw: min(calc((94cqw - var(--pad) * 2 - (var(--c) - 1) * var(--gap)) / var(--c)), calc((var(--zh) - (var(--r) - 1) * var(--gap)) / var(--r) / 1.5));
  display: grid; grid-template-columns: repeat(var(--c), var(--cw)); grid-auto-rows: calc(var(--cw) * 1.5); gap: var(--gap); justify-content: center;
  min-height: calc(var(--cw) * 1.5 * var(--r) + (var(--r) - 1) * var(--gap)); transform-style: preserve-3d; transform: translateZ(1px); }
/* Le tapis et les zones laissent passer le pointeur : dans le même plan que les cartes, ils gagnaient parfois
   le test de toucher de Chrome (surtout en bas de la table penchée). Seules les cartes reçoivent les touchers. */
.jx-top, .jx-grid { pointer-events: none; }
.jx-top .c { pointer-events: auto; }
.jx-grid[data-label] { position: relative; margin-top: 0.8rem; }
.jx-grid[data-label]::before { content: attr(data-label); position: absolute; left: 0; bottom: 100%; padding-bottom: 0.3em; font-size: max(12px, min(0.95rem, calc(var(--cw) * 0.1))); font-weight: 700; line-height: 1.1; color: var(--accent-ink); white-space: nowrap; }
.jx-visions { display: flex; justify-content: center; }
.jx-hand { --cw: min(calc((94cqw - var(--pad) * 2) / (var(--c) * 0.92)), calc(var(--zh) / 1.75), 15rem); display: flex; padding: calc(var(--cw) * 0.1) 0 calc(var(--cw) * 0.22); }
.jx-hand .c { margin-inline: calc(var(--cw) * -0.08); transform: translateY(calc(var(--k, 0) * var(--k, 0) * var(--cw) * 0.05)) rotate(calc(var(--k, 0) * 5deg)) translateZ(calc(var(--k, 0) * 0.5px + 4px)); transition: transform 420ms var(--ease-out); }

/* ---------- une carte : recto, verso rayé ---------- */
.c { position: relative; display: block; width: var(--cw); height: calc(var(--cw) * 1.5); padding: 0; transform-style: preserve-3d; touch-action: manipulation; cursor: default; }
.c-lift, .c-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.c-lift { transition: transform 240ms var(--ease-out); }
.c.is-down .c-in { transform: rotateY(180deg); }
.c-face { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cw) * 0.07); background: var(--bg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.c-front { padding: calc(var(--cw) * 0.035); }
.c-front img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--cw) * 0.045); }
.c-back { transform: rotateY(180deg); border: calc(var(--cw) * 0.035) solid var(--bg); background: var(--stripe-ink) 0 0 / calc(var(--cw) * 0.17) 100% repeat-x, var(--bg); }
.c-back::after { content: "C."; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0.2em 0.45em 0.28em; background: var(--bg); border-radius: 0.35em; font-family: var(--font-display); font-size: max(10px, calc(var(--cw) * 0.15)); line-height: 1; color: var(--ink); }
.c.is-live { cursor: pointer; }
.c:focus-visible { outline: 3px solid var(--bg); outline-offset: 5px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .c.is-live:hover .c-lift { transform: translateZ(calc(var(--cw) * 0.18)) translateY(-3%); }
}
.c.is-live:focus-visible .c-lift, .c.is-eyed .c-lift { transform: translateZ(calc(var(--cw) * 0.18)) translateY(-3%); }
.c.is-picked .c-lift { transform: translateZ(calc(var(--cw) * 0.24)) translateY(-5%); }
.c.is-picked .c-lift::before { content: ""; position: absolute; inset: calc(var(--cw) * -0.05); border: calc(var(--cw) * 0.035) solid var(--bg); border-radius: calc(var(--cw) * 0.1); transform: translateZ(-1px); }
.c.is-out .c-lift { transform: scale(0.9); }

/* ce qu'on pose sur les cartes : jetons d'équipe, avatars, plaque de nom, mention du juge */
.c-mark { position: absolute; transform: translateZ(3px); pointer-events: none; }
.c-cover { inset: 0; display: grid; place-items: center; border-radius: calc(var(--cw) * 0.07); font-family: var(--font-display); font-size: max(11px, calc(var(--cw) * 0.15)); line-height: 1; }
.c-cover.is-us { background: var(--ink); color: var(--accent-ink); border: calc(var(--cw) * 0.06) solid var(--bg); }
.c-cover.is-them { background: var(--bg); color: var(--ink); border: calc(var(--cw) * 0.06) solid var(--muted); }
.c-cover.is-none { background: var(--muted); color: var(--accent-ink); }
.c-cover.is-trap { background: var(--stripe-paper) 0 0 / calc(var(--cw) * 0.2) 100% repeat-x, var(--deep); border: calc(var(--cw) * 0.035) solid var(--bg); }
.c-cover.is-trap span { padding: 0.25em 0.4em 0.3em; background: var(--bg); color: var(--ink); border-radius: 0.3em; }
.c-star { left: 50%; top: calc(var(--cw) * -0.1); translate: -50% 0; padding: 0.35em 0.7em; background: var(--bg); color: var(--ink); border-radius: 6px; font-size: max(12px, calc(var(--cw) * 0.085)); font-weight: 700; white-space: nowrap; }
.c-chips { position: absolute; left: 0; right: 0; bottom: calc(var(--cw) * -0.09); display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; transform: translateZ(8px); transform-style: preserve-3d; pointer-events: none; }
.c-chips .jx-av { width: max(22px, calc(var(--cw) * 0.24)); height: max(22px, calc(var(--cw) * 0.24)); border: 2px solid var(--bg); border-radius: 6px; font-size: max(11px, calc(var(--cw) * 0.11)); }
.c-plate { position: absolute; left: calc(var(--cw) * 0.035); right: calc(var(--cw) * 0.035); bottom: calc(var(--cw) * 0.035); display: grid; gap: 0.15em; padding: 0.55em 0.65em 0.6em; background: var(--bg); color: var(--ink); border-radius: 0 0 calc(var(--cw) * 0.045) calc(var(--cw) * 0.045); font-size: clamp(11px, calc(var(--cw) * 0.068), 15px); line-height: 1.25; text-align: left; }
.c-plate b { font-family: var(--font-display); font-size: 1.3em; font-weight: 400; }
.c.is-won .c-lift { transform: translateZ(2px); }

/* Légendes : la photo en polaroïd, les légendes sur des fiches */
.jx-grid.jx-pics { display: flex; justify-content: center; min-height: 0; }
.jx-photo { width: min(calc(var(--zh) / 1.42), 62cqw); margin: 0; padding: calc(var(--zh) * 0.025) calc(var(--zh) * 0.025) 0; background: var(--bg); border-radius: 6px; transform: rotate(-2deg) translateZ(2px); }
.jx-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.jx-photo figcaption { padding: 0.25em 0 0.35em; font-family: var(--font-display); font-size: max(14px, calc(var(--zh) * 0.06)); line-height: 1.1; text-align: center; color: var(--ink); }
.jx-slips { --cw: min(calc((94cqw - var(--pad) * 2 - (var(--c) - 1) * var(--gap)) / var(--c)), calc((var(--zh) - (var(--r) - 1) * var(--gap)) / var(--r) / 0.62), 16rem);
  display: flex; flex-wrap: wrap; justify-content: center; width: calc(var(--c) * var(--cw) + (var(--c) - 1) * var(--gap)); min-height: calc(var(--cw) * 0.62 * var(--r) + (var(--r) - 1) * var(--gap)); }
.c.c-slip { height: calc(var(--cw) * 0.62); }
.c-slip .c-face { border-radius: calc(var(--cw) * 0.04); }
.c-slip .c-front { display: grid; place-items: center; padding: 0.5em 0.75em; font-size: clamp(12px, calc(var(--cw) * 0.074), 16px); font-weight: 500; line-height: 1.25; text-align: center; color: var(--ink); }
.c-slip .c-back { background-size: calc(var(--cw) * 0.1) 100%; }
.c-slip .c-back::after { font-size: max(10px, calc(var(--cw) * 0.09)); }
.c-slip .c-chips .jx-av { width: max(22px, calc(var(--cw) * 0.13)); height: max(22px, calc(var(--cw) * 0.13)); }
.jx-type { display: flex; gap: 8px; width: 100%; }
.jx-type .field { flex: 1 1 auto; width: auto; min-width: 0; min-height: 3rem; }

/* le chronomètre de Trois manches : une bande rayée qui se vide */
.jx-clock { position: relative; width: 100%; height: 28px; }
.jx-clock i { position: absolute; inset: 0 3.5rem 0 0; background: var(--stripe-paper) 0 0 / 22px 100% repeat-x; border-radius: 6px; transform-origin: 0 50%; }
.jx-clock span { position: absolute; right: 0; top: 50%; translate: 0 -50%; font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-ink); }

/* ---------- la fin : une carte de sable qui se retourne au-dessus de la table ---------- */
/* la table et la carte de fin partagent la même case : la scène grandit si la carte est plus haute que la table */
.jx-table, .jx-end { grid-area: 1 / 1; }
.jx-end { position: relative; z-index: 2; display: grid; place-items: center; align-self: stretch; justify-self: stretch; padding: 0.75rem 0; perspective: 1200px; }
.jx-end-card { position: relative; display: flex; flex-direction: column; width: min(100%, 27rem); overflow: hidden; background: var(--bg); color: var(--ink); border-radius: var(--radius); text-align: center; }
.jx-end-card .stripe { height: 22px; background-size: 22px 100%; }
.jx-end-body { display: grid; justify-items: center; gap: 0.85rem; padding: 1.6rem clamp(1rem, 3vw, 1.9rem) 1.5rem; }
.jx-end-card h3 { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 400; line-height: 1.02; text-wrap: balance; }
.jx-end-card h3:focus:not(:focus-visible) { outline: none; }
.jx-end-card p { max-width: 36ch; }
.jx-end-pitch { font-weight: 700; }
.jx-end-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 1.25rem; margin-top: 0.4rem; }
.jx-end-acts .button { min-height: 3rem; padding: 0 1.25rem; }
.jx-end-acts .jx-alt { background: var(--muted); }
.jx-end-acts .link-plain { min-height: 2.75rem; font-weight: 500; text-decoration: underline; }
.jx-bit { position: absolute; left: 50%; top: 42%; width: 9px; height: 15px; border-radius: 2px; pointer-events: none; }

/* ---------- la fin de page ---------- */
.jx-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.jx-cta .lead { max-width: 30ch; }
.jx .jx-legal { max-width: 70ch; margin-top: 2rem; font-size: var(--step-small); color: var(--muted); }

/* ---------- tablette et téléphone ---------- */
@media (max-width: 60rem) {
  .jx-intro { grid-template-columns: minmax(0, 1fr); }
  .jx-play { --stage-h: clamp(21rem, 100svh - 22rem, 34rem); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "seats" "say" "stage" "acts" "rule"; }
  .jx-rule { margin-top: 0; }
  .jx-seats { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .jx-stage { min-height: 0; padding-bottom: 1.25rem; }
  .jx-table { --tilt: 14deg; }
  .jx-acts { position: sticky; bottom: 0.75rem; z-index: 3; justify-content: center; pointer-events: none; }
  .jx-acts > * { pointer-events: auto; }
  .jx-acts .button { flex: 1 1 auto; }
}
@media (max-width: 40rem) {
  .jx-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 1.75rem; }
  .jx-tile { min-height: 0; gap: 0.25rem 0.75rem; padding: 0.8rem 0.9rem 0.75rem; }
  .jx-tile-pitch { font-size: 0.9375rem; }
  .jx-tile-meta { margin-top: 0.15rem; }
  .jx-fan { width: 3.6rem; height: 4rem; }
  .jx-fan > * { left: 0.8rem; top: 0.45rem; width: 2rem; height: 3rem; border-width: 2px; border-radius: 4px; }
  .jx .jx-head { font-size: 1.75rem; }
  .jx-rule { font-size: 0.9375rem; line-height: 1.4; }
  .jx-seats { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .jx-seat { min-height: 2.75rem; gap: 0.5rem; padding: 0.25rem 0.6rem 0.25rem 0.25rem; font-size: 0.9375rem; }
  .jx-seat b { font-size: 1.1rem; }
  .jx-av { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .jx-say { min-height: 4.5rem; gap: 0.6rem; padding: 0.7rem 0.85rem; }
  .jx-say p { font-size: 1rem; }
  .jx-say .is-big { font-size: 1.35rem; }
  .jx-grid { --c: var(--cols-s); --r: var(--rows-s); }
  .jx-top { min-width: 0; border-radius: 18px; }
  .jx-end-acts .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .jx-table, .jx .c-lift, .jx-hand .c, .jx-fan > *, .jx-tile { transition: none; }
}