/* Page d'entrée « Monte à bord ! » (connexion par pseudo) : une seule scène plein écran, sombre et BD, avec le formulaire posé par-dessus.
   Neutre : elle ouvre la porte des deux jeux. Toutes les classes, animations et variables commencent par « lg ». */
.lg-root { --lg-px:0; --lg-py:0; --lg-display:'Anton','Impact','Arial Narrow',sans-serif; --lg-body:'Cabin',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:fixed; inset:0; z-index:20; overflow:hidden; background:#030816; color:#f1e6c8; font-family:var(--lg-body); }
.lg-root, .lg-root *, .lg-root *::before, .lg-root *::after { box-sizing:border-box; }
html.lg-lock, html.lg-lock body { overflow:hidden; }

/* la scène : deux compositions de la même nuit sur l'île, l'une large (ordinateur), l'autre haute (téléphone en portrait) */
/* une seule scène (le cadrage change sur téléphone : voir login.js) */
.lg-scene { position:absolute; display:block; inset:0; width:100%; height:100%; transform:scale(1.04) translate(calc(var(--lg-px) * -10px), calc(var(--lg-py) * -6px)); }
/* feuillage de premier plan : bouge davantage que la scène (profondeur) et ondule */
.lg-fore { position:absolute; display:block; inset:0; width:100%; height:100%; pointer-events:none; transform:scale(1.07) translate(calc(var(--lg-px) * -30px), calc(var(--lg-py) * -18px)); }
.lg-sway { transform-box:fill-box; animation:lg-sway 7.5s ease-in-out infinite alternate; }
.lg-sw-pc { transform-origin:50% 88%; } .lg-sw-tl { transform-origin:0% 0%; } .lg-sw-tr { transform-origin:100% 0%; } .lg-sw-tc { transform-origin:50% 0%; } .lg-sw-bl { transform-origin:0% 100%; } .lg-sw-br { transform-origin:100% 100%; } .lg-sw-bc { transform-origin:50% 100%; }
.lg-s2 { animation-duration:9.5s; animation-delay:-3s; } .lg-s3 { animation-duration:8.5s; animation-delay:-5s; }
@keyframes lg-sway { from { transform:rotate(-1.6deg); } to { transform:rotate(1.6deg); } }
.lg-tall { display:none; left:0; top:0; width:100%; height:50vh; -webkit-mask-image:linear-gradient(#000 74%, transparent); mask-image:linear-gradient(#000 74%, transparent); }
.lg-shade { position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, rgba(2,5,14,0) 46%, rgba(2,5,14,.55) 68%, rgba(2,5,14,.82) 100%), radial-gradient(ellipse at 38% 56%, transparent 42%, rgba(0,0,0,.62) 100%); }

.lg-moonglow { transform-box:fill-box; transform-origin:center; animation:lg-moon 7s ease-in-out infinite; }
@keyframes lg-moon { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
.lg-cloud { animation:lg-cloud 26s ease-in-out infinite alternate; } .lg-c2 { animation-duration:34s; animation-direction:alternate-reverse; } .lg-c3 { animation-duration:40s; }
@keyframes lg-cloud { from { transform:translateX(-26px); } to { transform:translateX(30px); } }
.lg-twinkle { animation:lg-tw 3.2s ease-in-out infinite; } .lg-t2 { animation-delay:-1s; } .lg-t3 { animation-delay:-2s; }
@keyframes lg-tw { 0%,100% { opacity:.25; } 50% { opacity:.95; } }
.lg-refl { animation:lg-shimmer2 4.2s ease-in-out infinite; }
@keyframes lg-shimmer2 { 0%,100% { opacity:.7; transform:translateX(0); } 50% { opacity:1; transform:translateX(6px); } }
.lg-marks { animation:lg-marks 9s linear infinite; } @keyframes lg-marks { to { transform:translateX(-24px); } }
.lg-ship { transform-box:fill-box; transform-origin:50% 88%; animation:lg-bob 5.5s ease-in-out infinite; }
.lg-hot .lg-ship { animation-duration:3.4s; }
@keyframes lg-bob { 0%,100% { transform:translateY(0) rotate(-.3deg); } 50% { transform:translateY(-4px) rotate(.35deg); } }
/* les lanternes : elles se balancent autour de leur crochet, la flamme vacille et la lueur respire */
.lg-swing { transform-origin:0 0; animation:lg-swing 4.8s ease-in-out infinite alternate; }
.lg-hot .lg-swing, .lg-typing .lg-swing { animation-duration:2.9s; }
@keyframes lg-swing { from { transform:rotate(-7deg); } to { transform:rotate(7deg); } }
.lg-flameg { transform-box:fill-box; transform-origin:50% 100%; animation:lg-flame .7s ease-in-out infinite alternate; }
@keyframes lg-flame { from { transform:scale(1,1) skewX(-3deg); } to { transform:scale(.9,1.14) skewX(3deg); } }
.lg-lgl { transform-box:fill-box; transform-origin:center; animation:lg-flick 2.6s infinite; }
.lg-typing .lg-lgl, .lg-hot .lg-lgl { animation-duration:1.5s; }
@keyframes lg-flick { 0%,100% { opacity:.85; transform:scale(1); } 20% { opacity:.6; transform:scale(.95); } 45% { opacity:1; transform:scale(1.06); } 70% { opacity:.7; transform:scale(.97); } }
.lg-fronds { transform-box:fill-box; transform-origin:50% 62%; animation:lg-palm 8s ease-in-out infinite alternate; }
@keyframes lg-palm { from { transform:rotate(-1.4deg); } to { transform:rotate(1.4deg); } }
.lg-fog { filter:blur(22px); animation:lg-fogdrift 24s ease-in-out infinite alternate; } .lg-f2 { animation-duration:34s; animation-direction:alternate-reverse; }
@keyframes lg-fogdrift { from { transform:translateX(-60px); } to { transform:translateX(70px); } }
.lg-foam { animation:lg-splash 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
@keyframes lg-splash { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.12) translateY(-3px); } }

/* le formulaire, posé sur la scène */
.lg-card { position:absolute; z-index:7; right:5vw; top:50%; width:min(32vw, 470px); max-height:92vh; overflow:auto; padding:clamp(18px, 2.4vw, 34px); transform:translateY(-50%) rotate(.6deg);
  background:rgba(5,8,18,.82); border:3px solid #000; box-shadow:8px 8px 0 #000, inset 0 0 0 2px rgba(255,179,71,.32), 0 0 60px rgba(0,0,0,.5); border-radius:6px; animation:lg-in .7s cubic-bezier(.2,1.2,.3,1) both; backdrop-filter:blur(4px); }
@keyframes lg-in { from { opacity:0; transform:translateY(-46%) rotate(-3deg); } }
.lg-kicker { margin:0 0 clamp(18px, 2.6vw, 34px); font:700 clamp(11px, 1vw, 13px)/1.2 var(--lg-body); letter-spacing:.22em; text-transform:uppercase; color:#cdb98d; text-shadow:0 2px 0 #000; }
.lg-title { margin:0 0 .35em; padding-top:.14em; font:400 clamp(34px, 4.6vw, 70px)/1.02 var(--lg-display); text-transform:uppercase; color:#ffcf6a; transform:skewX(-5deg) rotate(-1.5deg); transform-origin:left bottom;
  paint-order:stroke fill; -webkit-text-stroke:clamp(3px, .4vw, 6px) #000; text-shadow:.045em .05em 0 #7a1b12, 0 0 .5em rgba(255,140,40,.45); }
.lg-lead { margin:0 0 1.1em; font-size:clamp(14px, 1.2vw, 17px); line-height:1.4; color:#f1e6c8; }
.lg-field { display:block; margin:0 0 .4em; font:700 clamp(12px, 1vw, 14px) var(--lg-body); letter-spacing:.14em; text-transform:uppercase; color:#cdb98d; }
.lg-input { display:block; width:100%; margin-top:.4em; padding:.55em .7em; font:400 clamp(20px, 2vw, 28px) var(--lg-display); letter-spacing:.06em; color:#fff3d6; background:#0b0b12; border:3px solid #000; box-shadow:inset 0 0 0 2px #5a4a30; border-radius:3px; outline:none; transition:box-shadow .2s ease, transform .2s ease; }
.lg-input:focus { box-shadow:inset 0 0 0 2px #ffb347, 0 0 14px rgba(255,179,71,.45); transform:translateY(-1px); }
.lg-input::placeholder { color:#6b6250; }
.lg-error { margin:.7em 0 0; padding:.5em .7em; font-weight:700; color:#fff; background:#a8301f; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:3px; }
.lg-error[hidden] { display:none; }
.lg-go { display:flex; align-items:center; justify-content:center; gap:.7em; width:100%; margin-top:1.2em; padding:.6em 1em; font:400 clamp(20px, 2.1vw, 30px) var(--lg-display); letter-spacing:.07em; text-transform:uppercase; color:#0a0608; background:#ffb347; border:3px solid #000; box-shadow:5px 5px 0 #000; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s; }
.lg-go svg { width:1.4em; height:1.4em; flex:none; transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
.lg-go:hover, .lg-go:focus-visible { transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:8px 8px 0 #000; background:#ffc766; outline:none; }
.lg-go:hover svg, .lg-go:focus-visible svg { transform:rotate(-18deg) scale(1.25); }
.lg-go:active { transform:translate(3px,3px); box-shadow:2px 2px 0 #000; }
.lg-go[disabled] { opacity:.7; cursor:progress; }
.lg-links { display:flex; flex-wrap:wrap; gap:.4em 1.2em; margin-top:1em; }
.lg-link { padding:.35em .2em; font:700 clamp(13px, 1.1vw, 16px) var(--lg-body); color:#c9d6e2; background:none; border:0; border-bottom:2px dashed rgba(201,214,226,.5); cursor:pointer; }
.lg-link:hover, .lg-link:focus-visible { color:#fff; border-bottom-color:#7fe3ff; outline:none; }
.lg-tag { margin:.9em 0 0; font-size:11px; letter-spacing:.08em; color:#8a8474; }
.lg-music { position:fixed; z-index:9; top:1.8vh; left:2vw; width:38px; height:38px; display:grid; place-items:center; padding:0; font:700 20px/1 var(--lg-body); color:#ffd993; background:#0b0b12dd; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:50%; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.lg-music:hover, .lg-music:focus-visible { transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000; outline:none; }
.lg-music[aria-pressed="false"] { color:#7d7a72; }
.lg-music::after { content:""; position:absolute; width:26px; height:3px; background:#c8402f; border:1px solid #000; border-radius:2px; transform:rotate(-45deg); opacity:0; transition:opacity .2s; }
.lg-music[aria-pressed="false"]::after { opacity:1; }

/* téléphone (portrait) : la scène en haut, qui se fond dans la nuit, et le formulaire en dessous */
@media (max-aspect-ratio: 4/5) {
  .lg-scene, .lg-fore { inset:auto; left:0; top:0; width:100%; height:50vh; -webkit-mask-image:linear-gradient(#000 74%, transparent); mask-image:linear-gradient(#000 74%, transparent); }
  .lg-shade { background:linear-gradient(180deg, rgba(2,5,14,0) 28%, rgba(2,5,14,.86) 52%, rgba(2,5,14,.96) 100%); }
  .lg-root { background:#030816; }
  .lg-card { right:auto; left:50%; top:auto; bottom:9vh; width:min(92vw, 460px); max-height:56vh; transform:translateX(-50%) rotate(0); animation:none; padding:14px 16px 16px; }
  .lg-title { font-size:clamp(30px, 10vw, 46px); } .lg-kicker { margin-bottom:12px; } .lg-lead { margin-bottom:.7em; }
  .lg-music { top:1.2vh; left:3vw; width:34px; height:34px; font-size:18px; }
}
html.no-anim .lg-root *, html.no-anim .lg-root *::before, html.no-anim .lg-root *::after { animation:none !important; }
.lg-still *, .lg-still *::before, .lg-still *::after { animation:none !important; transition-duration:.01ms !important; }
@media (prefers-reduced-motion: reduce) { .lg-root *, .lg-root *::before, .lg-root *::after { animation:none !important; transition-duration:.01ms !important; } }

/* mouettes qui passent devant la lune, pavillon qui flotte au sommet du grand mât */
.lg-bird { animation:lg-bird 13s ease-in-out infinite alternate; } .lg-b2 { animation-duration:17s; animation-delay:-4s; } .lg-b3 { animation-duration:11s; animation-delay:-7s; }
@keyframes lg-bird { from { translate:-46px 8px; } to { translate:58px -14px; } }
.lg-flap { transform-box:fill-box; transform-origin:50% 100%; animation:lg-flap .9s ease-in-out infinite alternate; }
@keyframes lg-flap { from { transform:scaleY(1); } to { transform:scaleY(.45); } }
.lg-flagw { transform-box:fill-box; transform-origin:0% 50%; animation:lg-flag 1.9s ease-in-out infinite alternate; }
.lg-hot .lg-flagw { animation-duration:1.1s; }
@keyframes lg-flag { from { transform:skewY(-5deg) scaleX(1); } to { transform:skewY(5deg) scaleX(.93); } }
@media (prefers-reduced-motion: reduce) { .lg-bird, .lg-flap, .lg-flagw { animation:none; } }
.lg-still .lg-bird, .lg-still .lg-flap, .lg-still .lg-flagw { animation:none; }