/* ============================================================================
   SKLD × MW4 — L'ÉCRAN D'ENTRÉE (la chambre du film, la télé, le choix du jeu)
   et LA BANDE DU FILM de l'accueil. Le reste de l'accueil ne change pas.
   ========================================================================= */

/* ------------------------------------------------------------ 1. L'ÉCRAN D'ENTRÉE : il couvre tout */
.mw4-porte{position:fixed;inset:0;z-index:300;background:#000;color:var(--mw4-os);outline:none;overflow:hidden}
.mw4-porte__film{position:absolute !important;z-index:7;left:max(clamp(14px,3vw,40px),calc(env(safe-area-inset-left,0px) + 12px));bottom:calc(clamp(14px,3vh,32px) + env(safe-area-inset-bottom,0px))}
body.v5 .mw4-porte__film{background:rgba(14,16,14,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.en-terminal{position:absolute;inset:0;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 42% 58%,#0c160c 0%,#050805 46%,#000 100%);color:var(--mw4-os)}
/* la chambre fixe : la même scène tirée en image ; l'écran vivant posé sur la vitre (entree.js : caler) */
.en-chambre{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity 600ms ease}
.en-chambre img{display:block;width:100%;height:100%;object-fit:cover}
.en-terminal[data-mode="cliche"] .en-chambre{opacity:1}
/* la chambre fixe reste pleine pendant que la 3D, la même scène, apparaît dessus ; elle ne s'efface qu'ensuite (deux
   fondus croisés sur le noir faisaient un creux, puis un saut) */
.en-terminal[data-mode="3d"] .en-chambre{opacity:0;transition:opacity 900ms var(--mw4-entre) 1400ms}
/* la télé à plat n'est qu'un dernier recours (entree.js : 2,5 s sans la chambre fixe, ou son échec) ; avant, le noir de
   la chambre (Kiyo 29-10 : « l'image au début… elle est en 2D ») */
.en-terminal:not([data-mode]) .en-crt{opacity:0}
.en-terminal[data-mode="cliche"] .en-crt{transform:none}
.en-terminal[data-mode="cliche"] .en-crt__caisse{height:100%;padding:0;border-radius:0;background:none;box-shadow:none}
.en-terminal[data-mode="cliche"] .en-crt__caisse::before,.en-terminal[data-mode="cliche"] .en-crt__caisse::after{display:none}
.en-terminal[data-mode="cliche"] .en-crt__pied{display:none}
.en-terminal[data-mode="cliche"] .en-crt__tube{height:100%;aspect-ratio:auto;border-radius:7% / 9%;
  box-shadow:0 0 34px rgba(157,255,60,.22),inset 0 0 22px rgba(0,0,0,.85)}
.en-scene{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1400ms var(--mw4-entre)}
.en-scene__toile{display:block;width:100%;height:100%;touch-action:manipulation}
.en-terminal[data-mode="3d"] .en-scene{opacity:1}
.mw4-grain--terminal{opacity:.12;z-index:3}
.en-terminal[data-mode="3d"] .mw4-grain--terminal{opacity:.05}

/* le repli à plat : le même écran, dans une caisse de tube */
.en-crt{position:absolute;z-index:2;left:50%;top:50%;width:min(86vw,calc((100dvh - 180px) * 1.08),860px);transform:translate(-50%,-50%);
  transition:opacity 900ms var(--mw4-entre),transform 1100ms var(--mw4-entre)}
.en-terminal[data-mode="3d"] .en-crt{opacity:0;visibility:hidden;transition:opacity 900ms var(--mw4-entre),visibility 0s linear 900ms}
.en-crt__caisse{position:relative;padding:7% 7.5% 14%;border-radius:9% / 11%;
  background:linear-gradient(165deg,#30322d 0%,#191a17 34%,#0e0f0d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -18px 40px rgba(0,0,0,.6),
    0 40px 90px -30px rgba(0,0,0,.95),0 0 120px -20px rgba(137,244,33,.22)}
.en-crt__tube{position:relative;aspect-ratio:4 / 3;border-radius:10% / 12%;overflow:hidden;background:#000;touch-action:manipulation;
  box-shadow:0 0 0 3px #050605,0 0 0 9px #22241f,inset 0 0 50px rgba(0,0,0,.95);cursor:pointer}
.en-crt__ecran{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;filter:contrast(1.08) brightness(1.12) saturate(1.05)}
.en-crt__tube::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px)}
.en-crt__verre{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.72) 100%),radial-gradient(60% 40% at 26% 18%,rgba(255,255,255,.12),transparent 70%);
  box-shadow:inset 0 0 70px rgba(137,244,33,.1)}
.en-crt__pied{position:absolute;left:7.5%;right:7.5%;bottom:4.2%;display:flex;justify-content:flex-end;gap:14px;align-items:center}
.en-crt__pied i{display:block;width:clamp(10px,2.2vw,22px);height:clamp(10px,2.2vw,22px);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#4a4c46,#121311 70%);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.en-crt__pied i:first-child{width:auto;height:4px;flex:1;border-radius:2px;background:repeating-linear-gradient(90deg,#0a0b09 0 3px,#22241f 3px 6px)}

/* les liens des jeux : visibles sans script ; avec le script, c'est l'écran qui choisit (le clavier y passe aussi) */
.en-choix{position:absolute;z-index:5;left:50%;bottom:clamp(24px,5vh,56px);transform:translateX(-50%);display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:min(92vw,720px)}
.en-choix__z{flex:1 1 260px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;padding:16px 18px;border-radius:16px;
  text-decoration:none;color:var(--mw4-os);background:rgba(10,12,10,.72);box-shadow:inset 0 0 0 1px rgba(238,242,230,.14)}
.en-choix__n{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:24px;letter-spacing:-.03em;text-transform:uppercase}
.en-choix__j{font-family:var(--f-chiffre);font-weight:800;font-size:22px;color:var(--mw4-lime)}
.en-choix__z small{grid-column:1 / -1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,242,230,.6)}
.en-choix__z:hover,.en-choix__z:focus-visible{box-shadow:inset 0 0 0 1.5px var(--mw4-lime);outline:none}
.en-terminal.en-js .en-choix{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;left:0;bottom:0;transform:none}
.en-terminal.en-js.is-clavier .en-crt__tube{outline:2px solid var(--mw4-lime);outline-offset:6px}
.en-terminal.en-js.is-clavier[data-mode="3d"]::after{content:"";position:absolute;inset:10px;z-index:6;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 0 2px var(--mw4-lime)}

/* ------------------------------------------------------------ 2. LA BANDE DU FILM (accueil) */
.mw4-film{position:relative;height:min(78vh,820px);min-height:420px;overflow:hidden;isolation:isolate;background:#000;margin:clamp(28px,6vh,72px) 0;
  border-radius:clamp(0px,2vw,28px);max-width:1640px;margin-inline:auto}
.mw4-film__boucle{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.86) contrast(1.05)}
.mw4-film__voile{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 46%),linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 24%)}
.mw4-equerre--bande{top:18px}
.mw4-film__cta{position:absolute;z-index:4;left:clamp(18px,3.4vw,56px);bottom:clamp(20px,4vh,48px)}
.mw4-film__cta .btn{min-height:52px}
.mw4-lecture svg{width:13px !important;height:13px !important;transform:translateX(1px)}

/* ------------------------------------------------------------ 3. LA SALLE DE CINÉMA */
.en-cine{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#000;color:var(--mw4-os)}
.en-cine::backdrop{background:#000}
.en-cine[open]{display:grid;place-items:center}
.en-cine__cadre{width:min(100vw,calc(100dvh * 16 / 9));aspect-ratio:16 / 9;background:#000}
.en-cine__film{display:block;width:100%;height:100%;background:#000}
.en-cine__x{position:absolute;top:16px;right:16px;width:46px;height:46px;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  color:var(--mw4-os);background:rgba(20,22,20,.8);box-shadow:inset 0 0 0 1px rgba(238,242,230,.18)}
.en-cine__x svg{width:18px;height:18px}
.en-cine__x:hover,.en-cine__x:focus-visible{box-shadow:inset 0 0 0 1.5px var(--mw4-lime);outline:none}

/* ------------------------------------------------------------ téléphone */
@media (max-width:760px){
  .en-crt{width:min(94vw,calc((100dvh - 200px) * 1.08));transform:translate(-50%,-54%)}
  .mw4-film{height:62vh;min-height:360px;border-radius:0;margin:28px 0}
  .mw4-film__cta{left:max(16px,calc(env(safe-area-inset-left,0px) + 12px));right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .mw4-film__cta .btn{width:100%;justify-content:space-between}
}