/* Ecrans du jeu : rituel, designation, enigme, scan, revelation, chat, final, fins, souvenir. */

/* ---------- Rituel ---------- */
.rituel { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px calc(28px + var(--safe-b)); text-align: center; }
.rituel-poussiere { position: absolute; inset: 0; pointer-events: none; transform: translate(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px)); transition: transform .4s; }
.rituel-flamme { position: absolute; left: 50%; top: 34%; width: 160px; height: 200px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; transition: opacity 1.5s; }
.rituel-date { font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: rgba(232, 220, 192, .5); animation: riseIn 1.2s .2s both; }
.rituel-titre { font-family: var(--police-main); font-weight: 500; font-size: 46px; line-height: 1.05; margin: 14px 0 16px; animation: riseIn 1.4s .6s both; }
.rituel-titre.t-lumieres { font-size: 48px; margin: 0 0 16px; animation: riseIn 1.2s .1s both; }
.rituel-titre.t-prenoms { margin: 0; animation: riseIn 1.2s .1s both; }
.rituel-titre.t-paume { font-size: 44px; margin: 0; animation: riseIn 1.2s .1s both; }
.rituel-texte { font-size: 17px; line-height: 1.5; color: rgba(232, 220, 192, .82); text-wrap: pretty; margin: 0; animation: riseIn 1.4s 1.2s both; }
.rituel-texte.t-lumieres { animation: riseIn 1.2s .5s both; }
.rituel-sous { font-size: 15px; color: rgba(232, 220, 192, .6); margin: 8px 0 18px; animation: riseIn 1.2s .4s both; }
.rituel .btn-bougie.b-volume { animation: riseIn 1.4s 1.8s both; box-shadow: 0 0 30px rgba(224, 164, 88, .08); }
.rituel .btn-bougie.b-lumieres { animation: riseIn 1.2s .9s both; }
.rituel .btn-bougie.b-prenoms { margin-top: 18px; animation: riseIn 1.2s 1s both; }

.prenoms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 44px; margin-bottom: 10px; padding: 0; list-style: none; }
.prenoms li { font: 500 24px var(--police-main); color: var(--bougie); padding: 4px 14px; border: 1px solid rgba(224, 164, 88, .35); border-radius: 20px; animation: inkLetter .6s both; }
.prenom-saisie { display: flex; gap: 8px; width: 100%; animation: riseIn 1.2s .7s both; }
.prenom-saisie input { flex: 1; min-width: 0; min-height: 56px; padding: 0 14px; background: rgba(232, 220, 192, .04); border: 0; border-bottom: 1px solid rgba(232, 220, 192, .4); color: var(--papier); font: 500 28px var(--police-main); }
.prenom-saisie button { min-width: 60px; min-height: 56px; border: 1px solid rgba(232, 220, 192, .3); background: transparent; color: var(--papier); font-size: 28px; border-radius: 3px; cursor: pointer; }

.paume { position: relative; margin: 0 auto 10px; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed rgba(224, 164, 88, .4); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; animation: riseIn 1.2s .7s both; }
.paume-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(224, 164, 88, .4), transparent 70%); transform: scale(var(--paume-s, .6)); transition: transform .3s; opacity: var(--paume-o, .2); }
.anneau-pulse { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(224, 164, 88, .5); animation: pulseRing 1.2s ease-out infinite; }
.paume svg { opacity: .8; }
.paume-cercle { transition: stroke-dashoffset .2s linear; }
.paume-label { font-size: 13px; color: rgba(232, 220, 192, .5); letter-spacing: .2em; text-transform: uppercase; min-height: 20px; }

.verrou { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; padding-top: calc(86px + var(--safe-t)); font-family: var(--police-systeme); color: #fff; animation: fadeIn .25s; z-index: 2; }
.verrou-date { font-size: 17px; font-weight: 600; opacity: .85; animation: aberr .5s 1.6s 4; }
.verrou-heure { font-size: 88px; font-weight: 300; letter-spacing: -2px; line-height: 1; margin-top: 2px; animation: aberr .45s 1.7s 4; }
.verrou-mot { font-family: var(--police-main); font-size: 32px; color: var(--acc); text-shadow: 0 0 16px rgba(143, 240, 184, .5); min-height: 40px; margin-bottom: 70px; }
.verrou-barre { width: 139px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .7); margin-bottom: calc(10px + var(--safe-b)); }
.verrou .espace { min-height: 0; }

.manifeste { font-family: var(--police-main); font-size: 38px; line-height: 1.2; color: var(--acc); text-shadow: 0 0 18px rgba(143, 240, 184, .45); min-height: 200px; text-align: left; text-wrap: pretty; }
.manifeste-btn { margin-top: 18px; width: 100%; font-size: 17px; animation: riseIn 1.2s both; }

/* ---------- Designation ---------- */
.designation { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; text-align: center; background: radial-gradient(ellipse at 50% 40%, rgba(143, 240, 184, .1), rgba(10, 10, 14, .55) 70%); animation: fadeIn .6s; }
.designation-halo { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 240, 184, .18), transparent 65%); transform: translate(-50%, -50%); animation: breathe 3s ease-in-out infinite; pointer-events: none; }
.designation-kicker { font-size: 13px; letter-spacing: .35em; text-transform: uppercase; color: rgba(232, 220, 192, .5); animation: riseIn 1s both; }
.designation-medaille { position: relative; width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; }
.designation-medaille > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.designation-cercle { animation: crackDraw 2s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.designation-icone { width: 160px; height: 160px; animation: coinSpin 1.7s .5s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 0 28px rgba(143, 240, 184, .55)); }
.designation-label { font-family: var(--police-main); font-size: 56px; line-height: 1; color: var(--acc); animation: riseIn 1.2s 1s both; margin: 0; font-weight: 500; }
.designation-ligne { font-size: 17px; line-height: 1.5; max-width: 300px; color: rgba(232, 220, 192, .85); text-wrap: pretty; animation: riseIn 1.2s 1.6s both; margin: 0; }

/* ---------- Enigme generique ---------- */
.enigme { overflow-y: auto; overflow-x: hidden; background: linear-gradient(rgba(5, 5, 7, .55), rgba(5, 5, 7, .2) 40%, rgba(5, 5, 7, .6)); }
.voix { position: relative; font-family: var(--police-main); font-size: 30px; line-height: 1.2; text-wrap: pretty; min-height: 84px; flex: none; color: var(--voix, var(--papier)); filter: var(--voix-filtre, none); transform: var(--voix-tr, none); animation: var(--voix-anim, none); text-shadow: 0 0 14px var(--voix-lueur, rgba(224, 164, 88, .2)); }

.chiffre { flex: none; margin: 18px 0 6px; padding: 18px 16px; background: linear-gradient(160deg, rgba(217, 201, 163, .1), rgba(217, 201, 163, .03)); border: 1px solid rgba(217, 201, 163, .18); font-size: 25px; line-height: 1.8; letter-spacing: .14em; color: var(--parchemin); word-break: break-word; box-shadow: inset 0 0 50px rgba(0, 0, 0, .65); animation: riseIn 1.2s .8s both; }

.photo { flex: none; position: relative; margin: 18px auto 6px; width: 210px; padding: 10px 10px 34px; background: var(--parchemin); box-shadow: 0 14px 40px rgba(0, 0, 0, .7); transform: rotate(2deg) perspective(600px) rotateY(calc(var(--px, 0) * 18deg)) rotateX(calc(var(--py, 0) * -18deg)); transition: transform .25s; animation: fadeIn 1.2s .8s both; }
.photo-image { position: relative; height: 150px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #8a7658, #3a2f22 80%); }
.photo-image > div { position: absolute; bottom: 0; }
.photo-p1 { left: 18px; width: 48px; height: 110px; border-radius: 24px 24px 4px 4px; background: #2a2219; }
.photo-p2 { left: 78px; width: 52px; height: 122px; border-radius: 26px 26px 4px 4px; background: #241d15; }
.photo-p3 { left: 142px; width: 46px; height: 104px; border-radius: 23px 23px 4px 4px; background: #2d251b; }
.photo-fantome { left: 52px; width: 30px; height: 64px; border-radius: 15px 15px 3px 3px; background: #1a150f; animation: photoGhost 9s infinite; }
.photo-image > .photo-yeux { left: 61px; bottom: 50px; width: 12px; height: 5px; border-radius: 50%; background: rgba(143, 240, 184, .9); animation: photoGhost 9s infinite; filter: blur(1px); }
.photo-image > .photo-vignette { inset: 0; background: radial-gradient(ellipse, transparent 50%, rgba(60, 40, 20, .8)); }
.photo-legende { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 500 18px var(--police-main); color: #3a2f22; }

.miroir { flex: none; position: relative; margin: 16px 0; aspect-ratio: 3 / 4; border-radius: 140px 140px 10px 10px; overflow: hidden; background: #15151a; border: 3px solid #2a2520; box-shadow: inset 0 0 70px rgba(0, 0, 0, .9), 0 0 0 1px rgba(217, 201, 163, .2); animation: riseIn 1.2s .6s both; }
.miroir video, .scan-vue video, .souvenir-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.miroir video { transform: scaleX(-1); filter: sepia(.8) contrast(1.25) brightness(.55) saturate(.5); }
.sans-camera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 14px; color: rgba(232, 220, 192, .5); background: radial-gradient(circle at 50% 60%, #2a241c, #0e0d0f); }
.bruit { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .9; pointer-events: none; }
.miroir-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .85)); pointer-events: none; }
.miroir-tache { position: absolute; top: 18%; left: 8%; width: 22px; height: 30px; border-radius: 50%; background: rgba(217, 201, 163, .25); filter: blur(2px); }
.silhouette { position: absolute; right: 14%; top: 22%; width: 70px; height: 180px; border-radius: 40px 40px 10px 10px; background: linear-gradient(#000, #05060a); filter: blur(6px); animation: silhouette 1.3s ease-in-out forwards; pointer-events: none; }
.miroir-legende { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--police-main); font-size: 22px; color: rgba(143, 240, 184, .9); }
.miroir-attente { font-size: 14px; color: rgba(232, 220, 192, .55); text-align: center; animation: glow 2s infinite; }

.bougie { flex: none; position: relative; margin: 4px 0; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: riseIn 1.2s .6s both; }
.bougie-cire { width: 70px; height: 130px; background: linear-gradient(90deg, #9f8f70, #e8dcc0 40%, #8a7a5c); border-radius: 8px 8px 3px 3px; box-shadow: 0 14px 40px rgba(0, 0, 0, .7); }
.bougie-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.bougie-statut { font-size: 16px; color: rgba(232, 220, 192, .8); text-align: center; }

/* Saisie ouija */
.saisie-ligne { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 56px; margin: 12px 0 4px; font-family: var(--police-main); font-size: 44px; letter-spacing: .18em; color: var(--papier); text-shadow: 0 0 12px rgba(143, 240, 184, .35); }
.saisie-curseur { animation: cursor 1.1s infinite; color: var(--acc); }
.ouija { flex: none; position: relative; margin: 0 auto; width: 322px; max-width: 100%; padding: 10px 0 4px; background: radial-gradient(ellipse at 50% 30%, rgba(217, 201, 163, .1), transparent 70%); border-top: 1px solid rgba(217, 201, 163, .18); border-bottom: 1px solid rgba(217, 201, 163, .18); animation: riseIn 1.2s .9s both; }
.ouija-grille { display: grid; grid-template-columns: repeat(7, 46px); grid-auto-rows: 46px; position: relative; justify-content: center; }
.ouija-grille button { border: 0; background: transparent; color: var(--parchemin); font: 500 27px var(--police-main); cursor: pointer; min-width: 46px; min-height: 46px; padding: 0; }
.planchette { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 1.5px solid rgba(143, 240, 184, .85); box-shadow: 0 0 18px rgba(143, 240, 184, .4), inset 0 0 10px rgba(143, 240, 184, .2); transition: left .7s cubic-bezier(.5, 0, .2, 1), top .7s cubic-bezier(.5, 0, .2, 1); pointer-events: none; }
.planchette::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(143, 240, 184, .3); }

/* Cadenas a roues */
.cadenas { flex: none; display: flex; justify-content: center; gap: 10px; margin: 14px 0 6px; animation: riseIn 1.2s .9s both; }
.roue { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.roue > button { min-width: 60px; min-height: 46px; border: 0; background: transparent; color: rgba(232, 220, 192, .5); font-size: 20px; cursor: pointer; }
.roue-fenetre { width: 60px; height: 84px; position: relative; perspective: 260px; overflow: hidden; border: 1px solid rgba(217, 201, 163, .3); border-radius: 6px; background: #0f0d0a; box-shadow: inset 0 14px 18px rgba(0, 0, 0, .95), inset 0 -14px 18px rgba(0, 0, 0, .95), 0 2px 0 rgba(217, 201, 163, .1); }
.roue-cylindre { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rot, 0deg)); transition: transform .5s cubic-bezier(.3, .9, .3, 1.15); }
.roue-face { position: absolute; left: 0; right: 0; top: 50%; height: 30px; margin-top: -15px; display: flex; align-items: center; justify-content: center; font: 700 30px var(--police-texte); color: var(--bougie); text-shadow: 0 0 8px rgba(224, 164, 88, .5); background: linear-gradient(#2c2620, #1a1612); border-top: 1px solid rgba(217, 201, 163, .12); backface-visibility: hidden; transform: rotateX(var(--a)) translateZ(47px); }
.roue-repere { position: absolute; left: 0; right: 0; top: 50%; height: 30px; margin-top: -15px; border-top: 1px solid rgba(224, 164, 88, .25); border-bottom: 1px solid rgba(224, 164, 88, .25); pointer-events: none; }

/* Sceau */
.sceau-ligne { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; animation: riseIn 1.2s 1.1s both; }
.effacer { min-width: 60px; min-height: 60px; border: 1px solid rgba(232, 220, 192, .2); background: transparent; color: rgba(232, 220, 192, .6); font-size: 13px; border-radius: 50%; cursor: pointer; }
.sceau { transition: transform .12s; position: relative; width: 104px; height: 104px; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 35%, #9b2a2a, #5d1414 60%, #3a0c0c); box-shadow: 0 8px 22px rgba(0, 0, 0, .75), inset 0 -5px 12px rgba(0, 0, 0, .5), inset 0 3px 6px rgba(255, 255, 255, .08); color: var(--papier); font: 700 15px var(--police-texte); letter-spacing: .14em; cursor: pointer; }
.sceau:active { transform: perspective(400px) rotateX(18deg) scale(.93); }
.sceau.bon { animation: sealPress .6s; }
.sceau.faux { animation: shake .5s; }
.sceau-bord { position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(232, 220, 192, .3); pointer-events: none; }
.sceau-anneau { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(143, 240, 184, .7); animation: pulseRing 1.2s ease-out 2; pointer-events: none; }
.sceau-fumee { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(143, 240, 184, .35), transparent 70%); animation: smoke 1.8s ease-out forwards; pointer-events: none; }
.sceau-coulure { position: absolute; left: 46%; top: 86%; width: 9px; height: 30px; border-radius: 0 0 6px 6px; background: linear-gradient(#7a1a1a, #4a0c0c); transform-origin: top; animation: waxDrip 1s .25s both; pointer-events: none; }
.sceau-fissure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sceau-fissure path { animation: crackDraw .4s ease-out forwards; }
.erreurs { min-width: 60px; font-size: 12px; color: rgba(232, 220, 192, .4); text-align: center; }

/* Recompense a l'encre */
.recompense { flex: none; position: relative; margin: 16px 0; padding: 26px 20px 52px; background: linear-gradient(170deg, #1a1711, #0f0d0a); border: 1px solid rgba(217, 201, 163, .2); overflow: hidden; min-height: 170px; animation: riseIn 1s both; }
.recompense-texte { font-family: var(--police-main); font-size: 30px; line-height: 1.2; color: var(--bougie); margin: 0; }
.recompense-encre { position: absolute; inset: 0; background: radial-gradient(circle at var(--ix) var(--iy), rgba(5, 5, 8, .98) 0, rgba(5, 5, 8, .98) var(--ir), transparent var(--ir2)); transition: all .5s cubic-bezier(.3, .7, .3, 1); pointer-events: none; }
.recompense-pied { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; font-size: 12px; color: rgba(232, 220, 192, .55); }
.recompense-pied button { min-height: 44px; padding: 0 12px; border: 1px dashed rgba(232, 220, 192, .25); background: transparent; color: rgba(232, 220, 192, .6); font-size: 12px; cursor: pointer; }

/* ---------- Scan ---------- */
.scan .voix { font-size: 29px; }
.scan-vue { position: relative; flex: 1; margin: 14px 0; border: 1px solid rgba(143, 240, 184, .25); overflow: hidden; background: #07080a; animation: riseIn 1.2s .6s both; }
.scan-vue video { filter: grayscale(1) contrast(1.3) brightness(.7); }
.scan-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 40%, rgba(0, 0, 0, .9)); }
.scan-ligne { position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); box-shadow: 0 0 16px var(--acc); animation: scanRoll 2.6s ease-in-out infinite; top: 50%; }
.scan-coin { position: absolute; width: 40px; height: 40px; border: 0 solid var(--acc); }
.scan-coin.c1 { left: 14%; top: 14%; border-top-width: 2px; border-left-width: 2px; }
.scan-coin.c2 { right: 14%; top: 14%; border-top-width: 2px; border-right-width: 2px; }
.scan-coin.c3 { left: 14%; bottom: 14%; border-bottom-width: 2px; border-left-width: 2px; }
.scan-coin.c4 { right: 14%; bottom: 14%; border-bottom-width: 2px; border-right-width: 2px; }
.scan-statut { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; color: rgba(143, 240, 184, .8); letter-spacing: .2em; text-transform: uppercase; }
.scan-simuler { min-height: 56px; font-size: 14px; color: rgba(232, 220, 192, .6); }

/* ---------- Revelation ---------- */
.revelation { display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 24px calc(28px + var(--safe-b)); gap: 18px; background: rgba(6, 8, 10, .4); }
.revelation-lueur { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(143, 240, 184, .16), transparent 70%); animation: greenWipe 3.5s cubic-bezier(.3, .6, .2, 1) forwards; pointer-events: none; }
.revelation-etoiles { position: absolute; inset: 0; pointer-events: none; transform: translate(calc(var(--px, 0) * 30px), calc(var(--py, 0) * 22px)); transition: transform .4s; }
.revelation-acte { position: absolute; left: 24px; top: calc(var(--pad-top) + var(--safe-t)); font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: rgba(143, 240, 184, .6); animation: fadeIn 2s 1s both; }
.revelation-nom { position: relative; font-family: var(--police-main); font-weight: 500; font-size: 72px; line-height: .95; color: var(--acc); text-shadow: 0 1px 0 #4a9a72, 0 2px 0 #35704f, 0 3px 0 #234a36, 0 4px 0 #142a1f, 0 5px 0 #0a1a12, 0 0 30px rgba(143, 240, 184, .6); animation: wipeWord 2.2s 1.2s cubic-bezier(.4, 0, .3, 1) both, nameTilt 7s 4s ease-in-out infinite; width: max-content; transform-origin: 50% 100%; margin: 0; }
.plume { position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px var(--acc); animation: quill 2.2s 1.2s cubic-bezier(.4, 0, .3, 1) both, fadeOut .4s 3.4s forwards; }
.revelation .voix, .fin .voix { font-size: 29px; min-height: 230px; color: var(--papier); text-shadow: none; }

/* ---------- Trouve le chat ---------- */
.chat { overflow-y: auto; }
.chat .voix { font-size: 29px; min-height: 96px; color: var(--acc); text-shadow: 0 0 14px rgba(143, 240, 184, .3); }
.globe-socle { flex: none; position: relative; margin: 10px auto; width: 200px; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.globe-socle.secoue { animation: shake .5s infinite; }
.globe { position: relative; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .2), rgba(143, 240, 184, .06) 40%, rgba(10, 12, 16, .9) 75%); border: 1px solid rgba(217, 201, 163, .35); box-shadow: inset 0 -20px 40px rgba(0, 0, 0, .7), 0 0 30px rgba(143, 240, 184, .12); overflow: hidden; }
.globe-neige { position: absolute; inset: 0; pointer-events: none; }
.globe-perspective { position: absolute; inset: 0; perspective: 380px; }
.globe-rotation { position: absolute; inset: 0; transform-style: preserve-3d; animation: globeSpin 18s linear infinite; }
.globe-chat { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateZ(34px); }
.globe-point { position: absolute; border-radius: 50%; }
.globe-reflet { position: absolute; left: 22%; top: 12%; width: 40px; height: 70px; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .22), transparent); transform: rotate(25deg); pointer-events: none; }
.globe-pied { width: 120px; height: 26px; background: linear-gradient(#3a2f22, #1a1511); border-radius: 4px 4px 8px 8px; border-top: 1px solid rgba(217, 201, 163, .3); }
.chat-indices { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chat-indices li { padding: 10px 14px; border-left: 2px solid rgba(143, 240, 184, .4); font-size: 16px; line-height: 1.4; color: rgba(232, 220, 192, .85); animation: riseIn .9s both; }
.chat-consigne { font-size: 14px; color: rgba(232, 220, 192, .6); text-align: center; margin: 0 0 10px; }
.chat-btn { width: 100%; border-color: rgba(143, 240, 184, .4); background: rgba(143, 240, 184, .05); font-size: 15px; letter-spacing: .08em; animation: none; }

/* ---------- Final ---------- */
.final { display: flex; flex-direction: column; align-items: center; padding: calc(var(--pad-top) + var(--safe-t)) 22px calc(24px + var(--safe-b)); text-align: center; }
.final-lueur { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, rgba(224, 164, 88, var(--lueur, .25)), transparent 65%); transition: background 1s; pointer-events: none; }
.final-griffes { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 48px, rgba(232, 220, 192, .5) 48px 49px, transparent 49px 120px), repeating-linear-gradient(60deg, transparent 0 83px, rgba(143, 240, 184, .4) 83px 84px); opacity: var(--griffes, 0); mix-blend-mode: screen; pointer-events: none; transition: opacity .5s; }
.final-mots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.final .voix { font-size: 27px; color: var(--acc); min-height: 120px; text-align: left; text-shadow: none; animation: none; }
.main-tenue { position: relative; width: 260px; height: 260px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; border: 1px solid rgba(143, 240, 184, .3); background: radial-gradient(circle, rgba(143, 240, 184, var(--tenue, .04)), transparent 70%); transition: background .3s; animation: riseIn 1.2s .8s both; transform-style: preserve-3d; perspective: 500px; }
.orbite { position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid rgba(143, 240, 184, .45); animation: orbit var(--orb1, 6s) linear infinite; pointer-events: none; }
.orbite-2 { inset: 34px; border: 1px dashed rgba(224, 164, 88, .45); animation: orbit2 var(--orb2, 9s) linear infinite; }
.main-tenue .anneau-pulse { border: 2px solid rgba(143, 240, 184, .5); animation: pulseRing var(--coeur, 1.4s) ease-out infinite; }
.main-cercle { transition: stroke-dashoffset .25s linear; }
.main-coeur { animation: heartbeat var(--coeur, 1.4s) infinite; transform-origin: 50px 50px; }
.final-statut { margin-top: 16px; font-size: 15px; color: rgba(232, 220, 192, .7); min-height: 44px; }
.final-compte { font-size: 12px; color: rgba(232, 220, 192, .35); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Fins ---------- */
.fin { display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 24px calc(28px + var(--safe-b)); gap: 18px; animation: fadeIn 2s; }
.fin.gagne { background: radial-gradient(ellipse at 50% 100%, rgba(143, 240, 184, .12), rgba(6, 8, 10, .45) 70%); }
.fin.perdu { background: radial-gradient(ellipse at 50% 30%, rgba(18, 13, 13, .6), rgba(3, 3, 4, .7) 70%); }
.fin-calque { position: absolute; inset: 0; pointer-events: none; }
.fin-aube-bas { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(143, 240, 184, .14)); animation: fadeIn 12s both; pointer-events: none; }
.fin-aube { position: absolute; inset: 0; background: linear-gradient(#1b2633, rgba(6, 8, 10, 0) 65%); opacity: 0; animation: dawn 16s 5s forwards; pointer-events: none; }
.fin-chat { position: absolute; bottom: calc(150px + var(--safe-b)); left: -30%; width: 84px; height: 54px; animation: catWalk 10s 7s cubic-bezier(.4, 0, .3, 1) both; pointer-events: none; }
.fin-main { position: absolute; left: 50%; top: 26%; width: 150px; height: 170px; transform: translate(-50%, -50%); animation: handprint 6s 3s both; pointer-events: none; }
.fin-main path { filter: blur(1px); }
.fin-kicker { font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: rgba(232, 220, 192, .5); animation: riseIn 1.5s .5s both; margin: 0; }
.fin .voix { font-size: 31px; color: var(--fin-couleur, var(--papier)); text-shadow: 0 0 16px var(--voix-lueur); }
.btn-souvenir { min-height: 60px; border: 1px solid rgba(232, 220, 192, .4); background: rgba(232, 220, 192, .05); color: var(--papier); font: 700 16px var(--police-texte); letter-spacing: .1em; border-radius: 3px; animation: riseIn 1s both; cursor: pointer; }

/* ---------- Souvenir ---------- */
.souvenir { display: flex; flex-direction: column; padding: calc(44px + var(--safe-t)) 22px calc(24px + var(--safe-b)); gap: 14px; animation: fadeIn 1s; }
.souvenir-consigne { font-size: 13px; color: rgba(232, 220, 192, .6); text-align: center; margin: 0; }
.souvenir-cadre { position: relative; flex: 1; background: var(--parchemin); padding: 14px 14px 58px; box-shadow: 0 24px 60px rgba(0, 0, 0, .85); transform: rotate(-1.5deg) perspective(900px) rotateY(calc(var(--px, 0) * 10deg)) rotateX(calc(var(--py, 0) * -10deg)); transition: transform .25s; animation: fadeIn 1.4s .3s both; }
.souvenir-image { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2a241c; }
.souvenir-image video { transform: scaleX(-1); filter: sepia(.9) contrast(1.15) brightness(.8) saturate(.6); }
.souvenir-image .sans-camera { background: none; font-size: 13px; padding: 20px; }
.souvenir-fantome { position: absolute; right: 12%; bottom: 0; width: 64px; height: 160px; border-radius: 32px 32px 6px 6px; background: linear-gradient(rgba(10, 10, 14, .95), rgba(10, 10, 14, .6)); filter: blur(3px); opacity: var(--fantome, .9); animation: fadeIn 4s 2s both; }
.souvenir-yeux { position: absolute; right: 16%; bottom: 132px; width: 20px; height: 16px; border-radius: 50%; background: rgba(143, 240, 184, .7); filter: blur(4px); opacity: var(--fantome, .9); animation: fadeIn 4s 2s both; }
.souvenir-image .bruit { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.souvenir-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse, transparent 50%, rgba(40, 25, 10, .7)); pointer-events: none; }
.souvenir-legende { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--police-main); font-size: 24px; color: #3a2f22; margin: 0; }
.recommencer { min-height: 48px; border: 0; background: transparent; color: rgba(232, 220, 192, .45); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }

/* Secours sans camera : saisie discrete du code, dans le ton du scan */
.scan-secours { display: flex; gap: 8px; margin-bottom: 10px; }
.scan-secours[hidden] { display: none; }
.scan-secours input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; background: rgba(143, 240, 184, .04); border: 0; border-bottom: 1px solid rgba(143, 240, 184, .35); color: var(--papier); font: 500 22px var(--police-main); letter-spacing: .06em; }
.scan-secours button { min-height: 48px; padding: 0 14px; border: 1px solid rgba(143, 240, 184, .35); background: transparent; color: var(--acc); font-size: 13px; border-radius: 3px; cursor: pointer; }

/* ---------- Indices (avant chaque reponse) ---------- */
/* Trois zones : en-tete (titre + voix), corps defilable (indices), pied fixe (phrase, consigne, bouton). Rien ne passe sous le pied. */
.indices-ecran { overflow: hidden; padding-bottom: calc(16px + var(--safe-b)); background: linear-gradient(rgba(5, 5, 7, .55), rgba(5, 5, 7, .2) 40%, rgba(5, 5, 7, .6)); }
.indices-ecran .voix { font-size: 24px; min-height: 0; max-height: 7.5em; overflow: hidden; }
.indices-corps[hidden] { display: none; }
.indices-corps { flex: 0 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; margin: 10px -6px 0; padding: 0 6px 6px; mask-image: linear-gradient(transparent, #000 18px); }
.indices-liste { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.piste { position: relative; flex: none; animation: riseIn 1s .3s both; }
.piste.scelle { animation: none; }
.piste-pli { display: grid; grid-template-columns: 18px auto 1fr; gap: 10px; align-items: center; width: 100%; min-height: 40px; padding: 4px 6px; border: 0; border-bottom: 1px solid rgba(217, 201, 163, .08); background: transparent; color: rgba(232, 220, 192, .42); font-size: 13px; text-align: left; cursor: pointer; }
.piste-pli .piste-texte { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: line-through; text-decoration-color: rgba(155, 42, 42, .7); }
.piste.ouvert .piste-pli .piste-texte { white-space: normal; }
.piste-preuve { font-family: var(--police-main); font-size: 20px; color: rgba(224, 164, 88, .8); letter-spacing: .06em; white-space: nowrap; }
.cachet { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #9b2a2a, #5d1414 60%, #3a0c0c); box-shadow: 0 2px 6px rgba(0, 0, 0, .7), inset 0 -2px 4px rgba(0, 0, 0, .5); }
.piste-zone { flex: none; margin-top: auto; padding-top: 8px; }
.piste.courant { padding: 16px 16px 14px; background: linear-gradient(160deg, rgba(217, 201, 163, .1), rgba(217, 201, 163, .03)); border: 1px solid rgba(217, 201, 163, .2); box-shadow: inset 0 0 50px rgba(0, 0, 0, .65); }
.piste-num { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(224, 164, 88, .7); margin-bottom: 8px; }
.piste.courant .piste-texte { margin: 0; font-family: var(--police-main); font-size: 26px; line-height: 1.2; color: var(--papier); text-wrap: pretty; }
.indices-pied { flex: none; padding: 10px 70px 0 0; }
.phrase-passe { margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
.phrase-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(143, 240, 184, .6); }
.phrase-mots { display: flex; flex-wrap: wrap; gap: 0 10px; font-family: var(--police-main); font-size: 24px; line-height: 1.15; }
.mot-trouve { color: var(--acc); text-shadow: 0 0 12px rgba(143, 240, 184, .4); animation: inkLetter .6s both; }
.mot-vide { color: rgba(232, 220, 192, .25); }
.indice-attendu { margin: 0; font-size: 14px; color: rgba(232, 220, 192, .6); }
.indices-ecran .indice-trouve { margin-top: 8px; animation: riseIn 1.2s 1s both; }
@media (max-height: 700px) {
  .indices-ecran { --pad-top: 72px; }
  .indices-ecran .voix { font-size: 21px; max-height: 6.2em; }
  .piste.courant .piste-texte { font-size: 23px; }
  .indices-ecran .indice-trouve { min-height: 52px; }
}

/* Retour aux indices depuis l'ecran de reponse */

.revoir-indices { flex: none; align-self: flex-start; margin: -4px 0 6px; min-height: 36px; padding: 0 12px 0 0; border: 0; background: transparent; color: rgba(224, 164, 88, .7); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; animation: riseIn 1s .4s both; }
.revoir-indices::before { content: '‹ '; }
.final .revoir-indices { align-self: center; }
.saisie-ligne.longue { flex-wrap: wrap; font-size: 30px; letter-spacing: .08em; }

/* Clavier ouija : espace et retour arriere, gros et dans la DA */
.ouija-grille .touche-espace { grid-column: span 2; font: 500 22px var(--police-main); letter-spacing: .12em; color: var(--parchemin); border: 1px dashed rgba(217, 201, 163, .3); border-radius: 23px; margin: 4px 2px; min-height: 38px; }
.saisie-ligne .lettre.blanc { color: rgba(143, 240, 184, .5); width: .5em; text-align: center; }
.effacer.retour { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 68px; height: 68px; min-width: 68px; font-size: 26px; color: var(--papier); border-color: rgba(232, 220, 192, .35); }
.effacer.retour small { font-size: 8px; letter-spacing: .04em; color: rgba(232, 220, 192, .45); line-height: 1; margin-top: 2px; }

/* Le texte runique ne doit pas repousser la planche hors de l'ecran : il defile dans son cadre */
.enigme .chiffre { max-height: 30svh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 700px) {
  .enigme { --pad-top: 72px; }
  .enigme .voix { font-size: 21px; min-height: 0; }
  .enigme .chiffre { font-size: 19px; line-height: 1.5; padding: 8px 12px; margin: 8px 0 4px; max-height: 19svh; }
  .enigme .sceau { width: 84px; height: 84px; font-size: 13px; }
  .enigme .sceau-ligne { margin-top: 6px; }
  .saisie-ligne { min-height: 46px; margin: 6px 0 2px; font-size: 36px; }
  .ouija-grille { grid-template-columns: repeat(7, 42px); grid-auto-rows: 42px; }
  .ouija-grille button { min-width: 42px; min-height: 42px; }
}

/* Titre et « revoir les indices » sur une seule ligne, pour laisser la place a la saisie */
.titre-ligne { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.titre-ligne .surtitre { margin: 0; }
.titre-ligne .revoir-indices { margin: 0; padding: 0 0 0 8px; align-self: auto; min-height: 32px; white-space: nowrap; }