html,body.op-home-page{background:#000;color:#D9E8FC;margin:0}
body.op-home-page #topbar{position:relative;z-index:30;background:#000}
body.op-home-page .home-hero{height:min(850px,calc(100vh - 90px));min-height:640px;position:relative;overflow:hidden;background:#000}
body.op-home-page .home-hero-words{position:absolute;inset:8% 5% 0;pointer-events:none;z-index:1}
.home-outline{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:0;white-space:nowrap;font:600 clamp(58px,7.5vw,120px)/1 Unbounded,sans-serif;color:transparent;-webkit-text-stroke:1px #3B444E;paint-order:stroke fill;letter-spacing:.008em}.home-outline span{display:block;line-height:1}
.home-year[hidden]{display:none!important}
.home-year{position:absolute;top:55%;left:50%;font:400 clamp(150px,19vw,256px)/1 Splash,cursive;color:#B782F5;transform:translateX(-5%) rotate(-6.59deg);white-space:nowrap}
#home-inspector{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:3;opacity:0;transition:opacity .18s ease}
#home-inspector.is-ready{opacity:1}
body.op-home-page #footer{position:relative;background:#090909;z-index:5}
@media(max-width:900px){.home-outline{font-size:clamp(40px,8vw,95px)}.home-hero-words{inset:10% 2% 0!important}.home-year{top:60%;left:44%}}

/* No overlapping letter outlines: neutral tracking and isolated glyph contours. */
.home-outline{letter-spacing:.012em;-webkit-text-stroke:.85px #3B444E;paint-order:normal;overflow:visible}
.home-outline span{white-space:nowrap;overflow:visible}

/* Match the existing Flow silhouette-outline renderer, not CSS text-stroke. */
body.op-home-page .home-outline{display:block;width:100%;height:min(420px,45vw);font-size:0!important;-webkit-text-stroke:0!important;letter-spacing:normal!important}
body.op-home-page .home-outline svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:768px){body.op-home-page .home-outline{height:230px}}

/* Popular collections uses the exact profile main/extra room card classes. */
.home-popular{max-width:none;margin:0;padding:80px 3.333% 100px;background:#000}
.home-popular h2{font:500 40px/1.25 Unbounded,sans-serif;margin:0 0 40px;color:#D9E8FC}
.home-collections-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.home-collections-grid .room-card{width:100%;height:352px;flex:none;display:block;overflow:hidden;position:relative;background:linear-gradient(105deg,#30364C,#0C0D17);border-radius:8px}
.home-collections-grid .room-card:hover{outline:none;background:linear-gradient(105deg,#30364C,#0C0D17)}
.home-collections-grid .main-room-count,.home-collections-grid .extra-room-count{color:#E95332!important}
.home-collections-grid .main-room-render{top:30px}
.home-collections-grid .main-room-menu,.home-collections-grid .extra-room-menu{display:none!important}
.home-collections-grid .main-room:hover .main-room-labels{opacity:0}
.home-collections-grid .main-room:hover .main-room-render{opacity:1}
.home-collections-grid .extra-room:hover .extra-room-name{color:#D9E8FC}
.home-popular .profile-games-more{margin-top:60px}
.home-popular .profile-games-more[hidden]{display:none}
@media(max-width:750px){.home-collections-grid{grid-template-columns:1fr}.home-popular h2{font-size:28px}}

/* v1.3.46: every Popular collection uses the identical Main-card composition. */
.home-collections-grid .main-room-title{display:block;opacity:1}
.home-collections-grid .main-room-count{line-height:1;display:block;transform-origin:left bottom}
.home-collections-grid .main-room-render{opacity:.10}


/* v1.3.47: count is pinned to card, independent of the title's line count. */
.home-collections-grid .main-room-labels{position:static!important}
.home-collections-grid .main-room-title{position:absolute;top:24px;left:24px;z-index:2}
.home-collections-grid .main-room-count{position:absolute!important;left:35px!important;bottom:37px!important;z-index:2;transform:rotate(-8deg)!important}
.home-popular-games{padding-top:0}
.home-popular-games .profile-games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-popular-games .profile-game{cursor:pointer}
@media(max-width:1050px){.home-popular-games .profile-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.home-popular-games .profile-games-grid{grid-template-columns:1fr}}

/* v1.3.52: Figma reference positioning for a single long-shelf room.
   The PNG stays at its original camera framing; only the image within the card is moved/scaled.
   Reference: selected PNG is 2.075x the card width; card starts at 15.2%/35.2% inside it. */
.home-collections-grid .room-card.single-long-shelf .main-room-render {
  width:207.5%;max-width:none;height:auto;
  left:-31.5%;top:-106%;transform:none;
}

/* v1.3.75: home sections align with the shared header grid, without nested gutters. */
body.op-home-page main{max-width:none;margin:0;padding:0}

/* Remove the previous manual 207.5% zoom and offsets for long shelves.
   All collection cards display the same calibrated renderer output. */
.home-collections-grid .room-card .main-room-render,
.home-collections-grid .room-card.single-long-shelf .main-room-render {
  position:absolute;inset:0;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;max-width:none;transform:none;
  object-fit:cover;object-position:center center;
}

/* Mobile hero: center the release year independently of the outline headline. */
@media(max-width:768px){
 body.op-home-page .home-year{font-size:122px;line-height:1;top:calc(10% + 390px);left:50%;transform:translateX(-50%) rotate(-6.59deg);}
}

/* Compact mobile viewports: keep the release year behind the lower part of
   the inspected box and reveal two headline lines above it. Taller phones
   retain the original mobile composition. */
@media (max-width:768px) and (max-height:720px){
 body.op-home-page .home-hero-words{inset:4% 2% 0!important;}
 body.op-home-page .home-year{top:calc(10% + 355px);}
}

/* Modal details in the hero iframe: backdrop belongs to the parent document. */
.op-home-details-backdrop:not([hidden]){position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:40;pointer-events:none}
html.op-home-details-locked,body.op-home-details-locked{overflow:hidden!important;overscroll-behavior:none}
body.op-home-details-locked .home-hero{position:relative;z-index:41}
/* The backdrop darkens the rest of the page; the iframe keeps its game UI on top. */