/* Deus : le plateau de jeu (téléphone en portrait d'abord, puis tablette et ordinateur) */
@property --aura-c { syntax: '<color>'; inherits: true; initial-value: #d9a441; }

.jeu {
  --aura-c: #d9a441;
  position: fixed; inset: 0; overflow: hidden; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding-top: var(--safe-t); color: var(--encre); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: --aura-c 1.4s ease;
}
.jeu[data-aura="grec"] { --aura-c: #d9a441; }
.jeu[data-aura="nordique"] { --aura-c: #6f9fc4; }
.jeu[data-aura="egypte"] { --aura-c: #3f6fb5; }
.jeu[data-aura="japon"] { --aura-c: #c8452e; }
.jeu[data-aura="inde"] { --aura-c: #e0821e; }
.jeu[data-aura="chine"] { --aura-c: #2f9c85; }

/* ─── Fond : temple, Europe ou Asie selon la dernière carte jouée, aura de culture ─── */
.j-fond { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 50% 55%, #2a1d12, #0b0806 75%); }
.j-fond-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 1.6s ease; filter: brightness(.55) saturate(.9); }
.j-fond-temple { background-image: url(../assets/art/bg-temple-p.webp); opacity: .75; }
.j-fond-eu { background-image: url(../assets/art/bg-europe-p.webp); opacity: 0; }
.j-fond-as { background-image: url(../assets/art/bg-asie-p.webp); opacity: 0; }
@media (orientation: landscape) {
  .j-fond-temple { background-image: url(../assets/art/bg-temple-l.webp); }
  .j-fond-eu { background-image: url(../assets/art/bg-europe-l.webp); }
  .j-fond-as { background-image: url(../assets/art/bg-asie-l.webp); }
}
.jeu[data-cote="eu"] .j-fond-eu { opacity: .45; }
.jeu[data-cote="as"] .j-fond-as { opacity: .45; }
.j-aura { position: absolute; inset: 0; background: radial-gradient(55% 40% at 50% 52%, color-mix(in srgb, var(--aura-c) 38%, transparent), transparent 70%), radial-gradient(90% 30% at 50% 100%, color-mix(in srgb, var(--aura-c) 22%, transparent), transparent); mix-blend-mode: screen; }
.j-vignette { position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, .78)); }
.jeu > .particules { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.jeu > .j-haut, .jeu > .j-sanct, .jeu > .j-arene, .jeu > .j-bas { position: relative; z-index: 5; }
.jeu > .j-haut { grid-row: 1; } .jeu > .j-sanct.adv { grid-row: 2; } .jeu > .j-arene { grid-row: 3; } .jeu > .j-sanct.moi { grid-row: 4; } .jeu > .j-bas { grid-row: 5; }

/* ─── Haut : le dieu adverse ─── */
.j-haut { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; }
.j-haut .icon-btn { width: 40px; height: 40px; font-size: 20px; }
.j-adv-main { flex: 1; display: flex; justify-content: center; min-height: 44px; align-items: center; }
.j-adv-main .carte { margin: 0 -6px; transform: rotate(calc(var(--i) * 6deg)) translateY(calc(var(--i) * var(--i) * 1px)); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.j-piles { display: flex; gap: 6px; }
.j-pile { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 30px; font-family: var(--titre); font-size: .72rem; color: var(--encre-2); }
.j-pile svg { font-size: 18px; color: var(--or); }

/* Médaillon d'un dieu */
.j-dieu { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; cursor: pointer; }
.j-portrait { grid-row: span 2; position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #5a3d1f, #1c120a);
  box-shadow: 0 0 0 2px #2a1a08, 0 0 0 4px var(--or), 0 6px 14px rgba(0, 0, 0, .6); transition: box-shadow .4s; }
.j-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.j-portrait .art-vide { position: absolute; inset: 0; display: grid; place-items: center; color: var(--or); }
.j-portrait .art-vide svg { width: 70%; height: 70%; }
.j-portrait.grand { width: 120px; height: 120px; margin: 0 auto 14px; box-shadow: 0 0 0 3px #2a1a08, 0 0 0 6px var(--or), 0 0 40px rgba(255, 200, 100, .35); }
.j-dieu-txt { display: flex; flex-direction: column; line-height: 1.05; }
.j-dieu-nom { font-family: var(--titre); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-clair); }
.j-fid { display: flex; align-items: center; gap: 4px; font-family: var(--titre); font-weight: 900; font-size: 1.5rem; color: var(--fid); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.j-fid svg { font-size: 18px; color: var(--or); }
.j-jauge { grid-column: 2; height: 4px; width: 74px; border-radius: 2px; background: rgba(0, 0, 0, .5); overflow: hidden; box-shadow: 0 0 0 1px rgba(214, 172, 87, .3); }
.j-jauge i { display: block; height: 100%; background: linear-gradient(90deg, #ffe39a, #d6ac57); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.j-dieu.danger .j-jauge i { background: linear-gradient(90deg, #ff8a5a, #b8260f); }
.j-dieu.danger .j-fid b { color: #ffb19a; }
.j-dieu.actif .j-portrait { box-shadow: 0 0 0 2px #2a1a08, 0 0 0 4px var(--or-clair), 0 0 22px 4px var(--aura-c); animation: halo 2.2s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 2px #2a1a08, 0 0 0 4px #fff1c4, 0 0 32px 8px var(--aura-c); } }
.j-dieu.touche .j-portrait { animation: touche .5s ease; }
@keyframes touche { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-5px) scale(.94); filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* Sanctuaires */
.j-sanct { display: flex; justify-content: center; gap: 6px; min-height: 0; padding: 0 12px; }
.j-sanct:empty { display: none; }
.j-sanct .carte { cursor: pointer; }

/* ─── Arène et Autel ─── */
.j-arene { position: relative; min-height: 0; }
.j-ere { position: absolute; left: 14px; top: 6px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; pointer-events: none; }
.j-ere-n { font-family: var(--titre); font-weight: 900; font-size: 1.6rem; color: var(--or); text-shadow: 0 0 14px rgba(255, 200, 100, .4); }

.j-chrono { margin-top: 3px; font-family: var(--titre); font-size: .62rem; letter-spacing: .1em; color: var(--encre-3); opacity: .8; font-variant-numeric: tabular-nums; }
.j-fin-temps { margin: -6px 0 16px; font-size: .9rem; color: var(--encre-3); }
.j-fin-temps b { color: var(--or-clair); font-weight: 600; }
.j-ere-t { font-family: var(--titre); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3); }
.j-zone-jeu { position: absolute; left: 10%; right: 10%; top: 6%; bottom: 46%; display: grid; place-items: center; border: 2px dashed rgba(255, 213, 107, .0); border-radius: 24px; opacity: 0; transition: opacity .2s, background .2s, border-color .2s; pointer-events: none;
  font-family: var(--titre); letter-spacing: .3em; text-transform: uppercase; color: var(--or-clair); font-size: .9rem; }
.glisse-en-cours .j-zone-jeu { opacity: 1; border-color: rgba(255, 213, 107, .35); }
.j-zone-jeu.survol { background: rgba(255, 200, 100, .12); border-color: rgba(255, 213, 107, .9); }

.j-autel { position: absolute; left: 50%; top: 66%; width: min(52vw, 240px); transform: translate(-50%, -50%); aspect-ratio: 200 / 120; --niveau: 0; transition: transform .2s; }
.j-bol { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 calc(10px + var(--niveau) * 30px) rgba(255, 180, 70, calc(.25 + var(--niveau) * .5))); }
.j-bol-feu { transition: opacity .5s; opacity: calc(.45 + var(--niveau) * .55); }
.j-autel.vide .j-bol-feu { opacity: .25; }
.j-autel.survol { transform: translate(-50%, -50%) scale(1.1); }
.j-autel.survol .j-bol { filter: drop-shadow(0 0 30px rgba(255, 210, 120, .9)); }
.j-autel.pulse { animation: autelPulse .5s ease; }
@keyframes autelPulse { 30% { transform: translate(-50%, -50%) scale(1.07); } }
.j-flammes { position: absolute; left: 22%; right: 22%; bottom: 62%; height: calc(14px + var(--niveau) * 70px); display: flex; justify-content: center; align-items: flex-end; gap: 8%; pointer-events: none; transition: height .6s; }
.j-flammes i { width: 24%; height: 100%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: radial-gradient(60% 80% at 50% 90%, #fff6d0, var(--feu1, #ffc15a) 40%, rgba(255, 90, 20, .0) 75%); filter: blur(2px); mix-blend-mode: screen; transform-origin: 50% 100%; animation: flamme 1.1s ease-in-out infinite alternate; }
.j-flammes i:nth-child(2) { height: 130%; animation-delay: -.4s; }
.j-flammes i:nth-child(3) { animation-delay: -.8s; }
.j-autel.vide .j-flammes { opacity: .25; }
@keyframes flamme { 0% { transform: scaleY(.85) skewX(-4deg); } 100% { transform: scaleY(1.12) skewX(5deg); } }
.j-foi { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 8px; border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #4b2d0c, #1a0f04); border: 1.5px solid #f3c46a; box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 170, 60, .35); font-family: var(--titre); white-space: nowrap; }
.j-foi svg { color: var(--foi); font-size: 20px; }
.j-foi b { font-size: 1.45rem; font-weight: 900; color: #fff1c4; }
.j-foi small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.j-presage { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap; padding: 3px 12px; border-radius: 999px; background: rgba(60, 35, 5, .9); border: 1px solid var(--ray); color: var(--ray); font-family: var(--titre); font-weight: 700; font-size: .8rem; display: flex; gap: 5px; align-items: center; box-shadow: 0 0 16px rgba(255, 200, 80, .4); }
.j-presage[hidden] { display: none; }
.j-presage.pop { animation: pop .4s ease; }
@keyframes pop { 40% { transform: translate(-50%, -6px) scale(1.3); } }

/* Scène : la carte jouée flotte au-dessus de l'Autel */
.j-scene { position: absolute; inset: 0; pointer-events: none; }
.j-scene-wrap { position: absolute; pointer-events: auto; animation: flotte 3s ease-in-out infinite; }
.j-scene-wrap.dissout { animation: dissout .55s ease forwards; }
@keyframes flotte { 50% { transform: translateY(-5px); } }
@keyframes dissout { to { opacity: 0; filter: blur(6px) sepia(1) brightness(1.6); transform: translateY(-24px) scale(.92); } }
.carte.sur-scene { cursor: pointer; }
.carte.rayonne { filter: drop-shadow(0 0 14px var(--cu-glow)) drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); animation: rayonne 1.6s ease-in-out infinite alternate; }
@keyframes rayonne { to { filter: drop-shadow(0 0 30px var(--cu-glow)) drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); } }
.j-ray-geant { position: absolute; right: -34px; top: 18%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6c9, #ffcf4a 45%, #c27a07 80%); box-shadow: 0 0 0 3px #5a3200, 0 0 0 5px #ffe28a, 0 0 30px rgba(255, 200, 80, .8); animation: soleil 6s linear infinite; }
.j-ray-geant svg { position: absolute; width: 150%; height: 150%; color: rgba(255, 220, 110, .55); }
.j-ray-geant b { position: relative; font-family: var(--titre); font-weight: 900; font-size: 1.7rem; color: #3a1c00; animation: contre 6s linear infinite; }
.j-ray-geant.eteint { filter: grayscale(1) brightness(.6); }
@keyframes soleil { to { transform: rotate(360deg); } }
@keyframes contre { to { transform: rotate(-360deg); } }
.j-chips { position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 100%); display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 70vw; }
.j-chips span { padding: 2px 9px; border-radius: 999px; font-family: var(--titre); font-size: .66rem; letter-spacing: .06em; background: rgba(20, 12, 4, .85); border: 1px solid rgba(255, 213, 107, .6); color: var(--ray); }

/* Bannières (Ère, tour, Miracle) */
.j-banniere { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 9; text-align: center; pointer-events: none; width: max-content; max-width: 92vw; padding: 10px 34px;
  background: linear-gradient(90deg, transparent, rgba(10, 6, 2, .88) 18%, rgba(10, 6, 2, .88) 82%, transparent); animation: banniere 1.5s ease both; }
.j-banniere::before, .j-banniere::after { content: ''; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.j-banniere::before { top: 0; } .j-banniere::after { bottom: 0; }
.j-ban-titre { font-family: var(--titre); font-weight: 900; font-size: clamp(1.3rem, 6vw, 2.2rem); letter-spacing: .12em; color: var(--or-clair); text-shadow: 0 0 20px rgba(255, 200, 100, .5); }
.j-ban-sous { font-family: var(--texte); font-size: 1.05rem; color: var(--encre-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.j-ban-sous svg { color: var(--foi); }
.j-banniere.adv .j-ban-titre { color: #ffc3a8; }
.j-banniere.ere .j-ban-titre { font-size: clamp(2rem, 10vw, 3.4rem); letter-spacing: .3em; }
@keyframes banniere { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); letter-spacing: .3em; } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 1; } }

/* ─── Bas : mon dieu, ma main, mes actions ─── */
.j-bas { padding: 0 8px calc(8px + var(--safe-b)); background: linear-gradient(180deg, transparent, rgba(8, 5, 3, .75) 30%); }
.j-barre { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; }
.j-barre .j-dieu { margin-right: auto; }
.j-outil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 58px; height: 52px; padding: 4px 8px; border-radius: 12px; cursor: pointer; position: relative;
  border: 1px solid rgba(214, 172, 87, .35); background: linear-gradient(180deg, rgba(58, 42, 26, .85), rgba(24, 17, 11, .9)); color: var(--or-clair); font-family: var(--titre); }
.j-outil svg { font-size: 20px; }
.j-outil span { font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-outil b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-size: .72rem; background: #2a1206; border: 1px solid var(--foi); color: #ffe0b0; }
.j-outil:disabled { opacity: .45; cursor: default; }
.j-outil.prete { border-color: var(--or-clair); box-shadow: 0 0 14px rgba(255, 200, 100, .45); }
.j-outil.prete svg { animation: pulse 1.6s ease-in-out infinite; }
.j-barre .j-pile { color: var(--encre-2); }
.j-barre .icon-btn { width: 42px; height: 42px; font-size: 19px; }
.j-indice { text-align: center; font-family: var(--texte); font-style: italic; font-size: .98rem; color: var(--or-clair); height: 0; opacity: 0; overflow: hidden; transition: opacity .3s, height .3s; }
.j-indice.on { height: 1.5em; opacity: .9; }

.j-main { display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--cw-main, 100px) * 1.4 + 10px); padding: 8px 0 4px; }
.j-main .carte { margin: 0 3px; cursor: pointer; transform: rotate(calc(var(--i) * 2.5deg)) translateY(calc(var(--i) * var(--i) * 1.6px)); transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .2s; touch-action: none; }
.j-main .carte.choisie { transform: translateY(-16px) scale(1.04); z-index: 3; }
.j-main .carte.terne { filter: brightness(.68) saturate(.7) drop-shadow(0 calc(var(--cw) * .018) calc(var(--cw) * .026) rgba(0, 0, 0, .55)); }
.j-main .carte.opposee, .j-main .carte.payee { transform: translateY(-18px); z-index: 3; }
.j-main .carte.conseil::after { content: ''; position: absolute; inset: -3px; border-radius: calc(var(--cw) * .07); border: 2px dashed var(--or-clair); animation: pulse 1s ease-in-out infinite; pointer-events: none; }
@media (hover: hover) { .j-main .carte:hover { transform: translateY(-10px) scale(1.03); z-index: 2; } }
.en-opposition .j-main .carte:not(.opposee):not(.payee) { filter: drop-shadow(0 0 6px rgba(140, 200, 255, .55)) drop-shadow(0 calc(var(--cw) * .018) calc(var(--cw) * .026) rgba(0, 0, 0, .55)); }
.j-actions { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.j-fin { min-width: 180px; }
.j-fin.insiste { animation: insiste 1.6s ease-in-out infinite; }
@keyframes insiste { 50% { box-shadow: 0 0 0 2px var(--or-clair), 0 0 26px rgba(255, 200, 100, .6); } }
.j-attente { font-family: var(--texte); font-style: italic; color: var(--encre-2); display: flex; align-items: center; gap: 10px; }
.j-pensee { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(214, 172, 87, .25); border-top-color: var(--or-clair); animation: soleil .9s linear infinite; }
.j-opp-info { width: 100%; display: flex; justify-content: center; gap: 14px; font-family: var(--titre); font-size: .9rem; letter-spacing: .04em; }
.j-opp-info .fer { color: var(--fer); display: flex; align-items: center; gap: 4px; }
.j-opp-info .net { color: #ffb19a; font-weight: 700; }
.j-opp-info .net.zero { color: #bfe3ff; }
.j-opp-info .vish { color: var(--or-clair); }
.j-opp-btns { display: flex; gap: 10px; align-items: center; }
.j-conseil { width: 44px; height: 44px; }
.j-opp-btns .btn { white-space: nowrap; }
@media (max-width: 420px) { .j-opp-btns { gap: 8px; } .j-opp-btns .btn { padding: 8px 14px; font-size: .74rem; letter-spacing: .1em; } }

/* Aperçu d'une carte (toucher) */
.j-apercu { position: fixed; inset: 0; z-index: 40 !important; display: grid; place-items: center; background: rgba(5, 3, 2, .72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fondu .18s ease; padding: 16px; }
.j-apercu[hidden] { display: none; }
.j-apercu-boite { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; animation: monte .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes monte { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.j-apercu-carte { transition: transform .15s; }
.j-apercu-sous { margin: 0; text-align: center; font-size: 1.05rem; color: var(--encre-2); max-width: 340px; }
.j-apercu-sous b { color: var(--or-clair); }
.j-apercu-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.j-apercu-btns .btn b { font-size: 1.2em; }

/* Journal */
.j-journal { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 45 !important; padding: calc(18px + var(--safe-t)) 16px 16px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(28, 20, 13, .97), rgba(12, 8, 5, .98)); border-left: 1px solid rgba(214, 172, 87, .35); box-shadow: -20px 0 40px rgba(0, 0, 0, .6); animation: glisse .25s ease; }
.j-journal[hidden] { display: none; }
@keyframes glisse { from { transform: translateX(100%); } }
.j-journal ol { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; font-size: .98rem; }
.j-journal li { padding: 5px 0 5px 10px; border-left: 2px solid rgba(214, 172, 87, .25); margin-bottom: 2px; color: var(--encre-2); }
.j-journal li.moi { border-color: var(--or); color: var(--encre); }
.j-journal li.adv { border-color: #b8563a; }
.j-journal li.perte { border-color: #e0573c; color: #ffc3b0; }
.j-journal li.gain { border-color: #8fd0ff; }
.j-journal li b { color: var(--or-clair); }
.j-j-round { font-family: var(--titre); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--or); }

/* Effets volants */
.j-volants { position: fixed !important; inset: 0; z-index: 30 !important; pointer-events: none; }
.j-flottant { position: fixed; transform: translate(-50%, -50%); font-family: var(--titre); font-weight: 900; font-size: 1.7rem; white-space: nowrap; pointer-events: none; animation: flotteHaut 1.5s ease-out forwards; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.j-flottant.perte { color: #ff8a6a; font-size: 2.1rem; }
.j-flottant.gain, .j-flottant.foi { color: #fff1b0; }
.j-flottant.foi { font-size: 1.5rem; }
.j-flottant.preserve, .j-flottant.pouvoir { color: var(--or-clair); font-size: 1rem; letter-spacing: .08em; }
.j-flottant.retenu { color: #bfe3ff; font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase; }
@keyframes flotteHaut { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.j-rayon { position: fixed; height: 10px; margin-top: -5px; transform-origin: 0 50%; border-radius: 5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c) 20%, #fff 60%, var(--c)); box-shadow: 0 0 20px var(--c), 0 0 40px var(--c); animation: rayon .65s ease-out forwards; }
@keyframes rayon { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 35% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 70%); opacity: 0; } }
.carte.opposante { filter: drop-shadow(0 0 10px rgba(140, 200, 255, .9)); }
.carte.dissout { animation: dissout .45s ease forwards; }
.carte.j-glisse { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 12px rgba(255, 210, 120, .6)); }

.jeu.secoue { animation: secoue .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes secoue { 10%, 90% { transform: translate(calc(var(--secousse) * -.3), 0); } 20%, 80% { transform: translate(calc(var(--secousse) * .5), calc(var(--secousse) * .2)); } 30%, 50%, 70% { transform: translate(calc(var(--secousse) * -1), calc(var(--secousse) * -.3)); } 40%, 60% { transform: translate(var(--secousse), calc(var(--secousse) * .3)); } }
.jeu.eclair::after { content: ''; position: absolute; inset: 0; z-index: 20; background: radial-gradient(circle at 50% 40%, rgba(230, 245, 255, .9), rgba(160, 200, 255, .3) 50%, transparent); animation: eclair .45s ease-out forwards; pointer-events: none; }
@keyframes eclair { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: .2; } 30% { opacity: .9; } 100% { opacity: 0; } }
.jeu.defaite .j-fond { filter: grayscale(.8) brightness(.6); transition: filter 2s; }

/* Fin de partie, menu, infos */
.j-fin, .j-menu-boite, .j-info-dieu, .j-regles { text-align: center; }
.j-fin-sur { font-family: var(--titre); letter-spacing: .4em; text-transform: uppercase; color: var(--or); margin: 0; }
.j-fin.perdu .j-fin-sur { color: #e0573c; }
.j-fin h2 { font-size: 1.8rem; }
.j-fin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.j-fin-stats div { display: flex; flex-direction: column; padding: 10px 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(214, 172, 87, .2); }
.j-fin-stats b { font-family: var(--titre); font-size: 1.5rem; color: var(--or-clair); }
.j-fin-stats span { font-size: .8rem; color: var(--encre-3); }
.j-fin-btns, .j-menu-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.j-reglage { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; font-family: var(--titre); letter-spacing: .08em; }
.j-seg { display: flex; border-radius: 999px; padding: 3px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(214, 172, 87, .3); }
.j-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: var(--titre); font-size: .8rem; color: var(--encre-2); }
.j-seg button.on { background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #2a1a06; }
.j-info-dieu h3, .j-regles h3 { margin-top: 14px; }
.j-info-etat { font-size: .95rem; color: var(--encre-2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.j-info-etat svg { color: var(--or); }
.j-regles { text-align: left; }
.j-regles h2 { text-align: center; }
.j-regles p { display: flex; gap: 10px; align-items: flex-start; }
.j-regles p svg { font-size: 22px; color: var(--or); margin-top: 3px; }

/* ─── Tablettes et ordinateurs ─── */
@media (min-width: 700px) {
  .jeu { max-width: 1180px; margin: 0 auto; }
  .j-portrait { width: 62px; height: 62px; }
  .j-fid { font-size: 1.9rem; }
  .j-dieu-nom { font-size: .9rem; }
  .j-jauge { width: 110px; }
  .j-autel { width: min(30vw, 300px); }
  .j-ray-geant { width: 80px; height: 80px; right: -44px; }
  .j-ray-geant b { font-size: 2.1rem; }
  .j-haut { padding: 14px 24px 6px; }
  .j-bas { padding: 0 24px calc(14px + var(--safe-b)); }
  .j-outil { min-width: 76px; height: 58px; }
  .j-outil span { font-size: .66rem; max-width: 90px; }
}
/* Téléphones bas ou en paysage : on resserre */
@media (max-height: 640px) {
  .j-portrait { width: 40px; height: 40px; }
  .j-fid { font-size: 1.2rem; }
  .j-haut { padding: 4px 10px 0; }
  .j-barre { padding: 2px 4px 2px; }
  .j-outil { height: 44px; min-width: 50px; }
  .j-actions { min-height: 46px; }
  .j-autel { width: min(34vw, 190px); }
}
@media (max-width: 360px) {
  .j-outil span { display: none; }
  .j-outil { min-width: 46px; }
}

/* Paiement d'une Intercession */
.j-paie { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 6px; font-size: .92rem; line-height: 1.25; color: #ffd9a0; text-align: left; }
.j-paie svg { flex: none; font-size: 20px; color: var(--foi); }
.j-paie b { color: #fff1c4; }
.j-paie .btn { flex: none; min-height: 34px; padding: 4px 12px; font-size: .68rem; }

/* Foi de chaque dieu (gardée jusqu'à sa prochaine Aube) */
.j-dieu { grid-template-columns: auto auto auto; }
.j-foi-dieu { grid-row: span 2; align-self: center; display: flex; align-items: center; gap: 2px; margin-left: 4px; padding: 3px 9px 3px 6px; border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #4b2d0c, #1a0f04); border: 1.5px solid #f3c46a; box-shadow: 0 0 12px rgba(255, 170, 60, .3); font-family: var(--titre); }
.j-foi-dieu svg { color: var(--foi); font-size: 16px; }
.j-foi-dieu b { font-size: 1.1rem; font-weight: 900; color: #fff1c4; }
.j-foi-dieu.vide { opacity: .45; box-shadow: none; }
.j-foi-dieu.pop { animation: popFoi .45s ease; }
@keyframes popFoi { 40% { transform: scale(1.35); box-shadow: 0 0 22px rgba(255, 190, 80, .8); } }
.j-foi-qui { position: absolute; left: 50%; top: calc(66% + 26px); transform: translateX(-50%); white-space: nowrap; font-family: var(--titre); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); text-shadow: 0 1px 3px #000; }
@media (max-width: 380px) { .j-jauge { width: 60px; } .j-foi-dieu { padding: 2px 7px 2px 4px; } .j-foi-dieu b { font-size: .95rem; } }

/* Dessus du Destin, visible en permanence */
.j-destin-top { display: grid; place-items: center; height: 30px; }
.j-destin-top svg { font-size: 20px; }
.j-destin-top .carte.mini { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.j-destin-top .carte.mini .carte-reflet { display: none; }
.j-outil.j-destin { gap: 2px; }
.j-destin-adv { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.j-destin-adv .j-destin-top { height: 36px; }
@media (min-width: 700px) { .j-destin-top { height: 40px; } }

/* Rien ne doit déborder en largeur sur téléphone */
.jeu { grid-template-columns: minmax(0, 1fr); }
.j-bas, .j-haut, .j-barre, .j-actions { min-width: 0; }
.j-barre .j-outil { flex: 0 1 auto; min-width: 0; }
.j-paie span { min-width: 0; }
@media (max-width: 480px) {
  .j-barre { gap: 5px; }
  .j-barre .j-portrait { width: 44px; height: 44px; }
  .j-barre .j-fid { font-size: 1.3rem; }
  .j-jauge { width: 56px; }
  .j-outil { min-width: 0; padding: 4px 6px; }
  .j-outil span { max-width: 52px; font-size: .5rem; }
  .j-barre .icon-btn { width: 36px; height: 36px; font-size: 17px; }
  .j-foi-dieu { margin-left: 2px; }
}
.j-destin-top { position: relative; }
.j-destin-top .carte.mini { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Loupe sur les cartes pendant l'opposition */
.j-loupe { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); z-index: 6; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 233, 170, .7); background: rgba(20, 14, 8, .82); color: var(--or-clair); font-size: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.j-loupe:active { transform: translateX(-50%) scale(.9); }
.carte.opposee .j-loupe, .carte.payee .j-loupe { top: auto; bottom: 30%; }

/* Foi et Augures sur l'Autel */
.j-autel .j-foi { left: 31%; }
.j-augures { position: absolute; left: 69%; top: 66%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 8px; border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #1f3346, #0a121a); border: 1.5px solid #9fd3ff; box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 18px rgba(120, 190, 255, .3); font-family: var(--titre); white-space: nowrap; }
.j-augures svg { color: #bfe3ff; font-size: 20px; }
.j-augures b { font-size: 1.45rem; font-weight: 900; color: #eaf6ff; }
.j-augures small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #a9c4d8; }
.j-augures.vide { opacity: .5; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
@media (max-width: 420px) { .j-foi small, .j-augures small { display: none; } .j-foi, .j-augures { padding: 3px 10px 3px 7px; } }

/* Choix demandés par une carte */
.j-choix { text-align: center; }
.j-choix-cartes { display: flex; gap: 14px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.j-choix-cartes .carte { cursor: pointer; }
.carte.j-revele { filter: drop-shadow(0 0 16px rgba(255, 220, 140, .7)) drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }