/* Opening crawl (original CSS implementation) */
.crawl{position:fixed;inset:0;z-index:60;background:#000;overflow:hidden;perspective:400px;color:var(--saber);font-family:var(--display)}
.crawl::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 80%,#fff,transparent),radial-gradient(2px 2px at 50% 40%,#fff,transparent),radial-gradient(1px 1px at 70% 10%,#fff,transparent),radial-gradient(1px 1px at 90% 60%,#fff,transparent),radial-gradient(1px 1px at 20% 50%,#fff,transparent),radial-gradient(1px 1px at 80% 90%,#fff,transparent);background-size:300px 300px}
.crawl-intro{position:absolute;top:42%;left:50%;transform:translateX(-50%);width:min(560px,90vw);color:#4bd5ee;font:400 clamp(18px,3vw,30px) var(--body);opacity:0;animation:intro 5s ease-in-out .5s forwards}
@keyframes intro{15%,75%{opacity:1}100%{opacity:0}}
.crawl-logo{position:absolute;top:50%;left:50%;font-size:clamp(60px,14vw,180px);line-height:.9;text-align:center;letter-spacing:.06em;
  -webkit-text-stroke:2px var(--saber);color:transparent;opacity:0;transform:translate(-50%,-50%) scale(2.6);animation:logo 9s ease-in 5.6s forwards}
@keyframes logo{0%{opacity:1;transform:translate(-50%,-50%) scale(2.6)}90%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.05)}}
.crawl-stage{position:absolute;left:50%;bottom:0;width:min(780px,94vw);height:150vh;transform-origin:50% 100%;transform:translateX(-50%) rotateX(24deg)}
.crawl-text{position:absolute;top:100%;font:700 clamp(20px,3.4vw,40px)/1.4 var(--display);text-align:justify;animation:crawl 50s linear 7s forwards}
.crawl-text p{margin:0 0 1.2em}
.crawl-episode,.crawl-title{text-align:center;margin:0!important}
.crawl-title{font-size:1.5em;margin-bottom:1em!important}
@keyframes crawl{from{top:100%}to{top:-160%}}
.crawl-skip{position:absolute;right:20px;bottom:20px;z-index:2}

/* Landing hero */
.landing-hero{min-height:calc(100vh - 64px)}
.landing-hero .wrap{padding-bottom:80px}
.landing-hero h1{font-size:clamp(52px,10vw,130px)}
.ms-btn{background:#fff;color:#222;font-weight:600;margin-top:6px}
.ms-logo{display:grid;grid-template-columns:repeat(2,9px);gap:2px}
.ms-logo i{width:9px;height:9px;display:block}
.ms-logo i:nth-child(1){background:#f25022}.ms-logo i:nth-child(2){background:#7fba00}.ms-logo i:nth-child(3){background:#00a4ef}.ms-logo i:nth-child(4){background:#ffb900}
.setup-note{margin-top:14px;color:var(--lcars)}
.status-line{font-size:18px}

/* Galaxy map */
.map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.map-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.map-grid{grid-template-columns:1fr}}
.room-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;padding:20px;border-radius:20px;overflow:hidden;text-decoration:none;border:1px solid var(--line);isolation:isolate;transition:transform .25s,border-color .25s}
.room-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
.room-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,#05070df2 85%)}
.room-card:hover{transform:translateY(-4px);border-color:var(--saber)}
.room-card:hover img{transform:scale(1.07)}
.room-card strong{font:700 30px var(--display);text-transform:uppercase;color:var(--saber)}
.room-card small{color:#d7dce6;font-size:14px}
.room-num{position:absolute;top:16px;left:18px;font:600 12px var(--mono);letter-spacing:.2em;color:var(--holo)}
.room-card.lotr strong{color:var(--elf)}
.room-card.trek strong{color:var(--lcars)}
.room-card.trek:hover{border-color:var(--lcars)}
.landing-hero .stone{right:9%;top:22%}
.crawl-gate{position:fixed;inset:0;z-index:61;background:#000;display:grid;place-content:center;text-align:center;padding:24px}
.crawl-intro-static{color:#4bd5ee;font:400 clamp(18px,3vw,30px) var(--body);margin-bottom:28px}
.gate-buttons{justify-content:center}
.crawl-skip{display:flex;gap:8px}