/* Screen-ready 16:9 artwork supplied for LUMA's straight-on TV wall. */
.tv[data-world="movies"]{--screen-image:url("assets/movies-screen.png?v=1")}
.tv[data-world="anime"]{--screen-image:url("assets/anime-screen.png?v=1")}
.tv[data-world="series"]{--screen-image:url("assets/series-photo.jpg?v=2")}
.tv[data-world="kids"]{--screen-image:url("assets/kids-screen.png?v=1")}
.tv[data-world="school"]{--screen-image:url("assets/school-screen.png?v=1")}
.tv[data-world="docs"]{--screen-image:url("assets/docs-screen.png?v=1")}
.tv[data-world="dating"]{--screen-image:url("assets/reality-screen.png?v=1")}
.tv[data-world="more"]{--screen-image:url("assets/more-screen.png?v=1")}
.world-card{background-image:url("assets/world-screen.png?v=1")}

.tv span,.tv[data-world] span{
  background-image:var(--screen-image)!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:brightness(.88) saturate(.9)!important;
  overflow:hidden;
}
.tv span:before,.tv span:after{display:none!important}
.tv:hover span,.tv.active span{
  transform:scale(1.025)!important;
  filter:brightness(1) saturate(1)!important;
}
.plans-page{box-sizing:border-box}

/* Wallpaper and clickable screens share one responsive 16:9 coordinate plane. */
.tv-room-stage{
  position:absolute;
  z-index:1;
  left:50%;
  top:0;
  width:100%;
  aspect-ratio:16/9;
  transform:translateX(-50%);
  transform-origin:center top;
  overflow:hidden;
  animation:roomBreath 10s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 2%,rgba(0,0,0,.72) 7%,#000 12%,#000 88%,rgba(0,0,0,.72) 93%,rgba(0,0,0,.18) 98%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 2%,rgba(0,0,0,.72) 7%,#000 12%,#000 88%,rgba(0,0,0,.72) 93%,rgba(0,0,0,.18) 98%,transparent 100%);
}
.hero:after{
  display:none;
}
.hero:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:#000;
  filter:none;
  transform:none;
  animation:none;
  pointer-events:none;
}
@keyframes roomBreath{
  0%{transform:translate3d(-50%,0,0) scale(1)}
  50%{transform:translate3d(-49.7%,-.2%,0) scale(1.018)}
  100%{transform:translate3d(-50.25%,-.45%,0) scale(1.03)}
}
@keyframes backdropBreath{
  0%{transform:translate3d(-1.2%,.5%,0) scale(1.08)}
  50%{transform:translate3d(.8%,-.8%,0) scale(1.105)}
  100%{transform:translate3d(1.5%,.7%,0) scale(1.13)}
}
@media(prefers-reduced-motion:reduce){.tv-room-stage,.hero:before{animation:none!important}}
.tv-room-stage .hero-bg{inset:0!important;width:100%;height:100%;background-size:100% 100%!important;animation:none!important;transform:none!important}
.tv-room-stage .tv-wall{inset:0!important;width:100%;height:100%;padding:0!important;display:block!important;animation:none!important;transform:none!important}
.tv-room-stage .tv[data-world]{position:absolute!important;padding:3px!important}
.tv-room-stage .tv[data-world="movies"]{left:13.2%!important;top:22%!important;width:17.7%!important;height:20.2%!important}
.tv-room-stage .tv[data-world="anime"]{left:31.8%!important;top:22%!important;width:18.2%!important;height:20.2%!important}
.tv-room-stage .tv[data-world="series"]{left:50.7%!important;top:22%!important;width:18.7%!important;height:20.2%!important}
.tv-room-stage .tv[data-world="kids"]{left:70.5%!important;top:22%!important;width:17.4%!important;height:20.2%!important}
.tv-room-stage .tv[data-world="school"]{left:13.2%!important;top:44.5%!important;width:17.7%!important;height:20.4%!important}
.tv-room-stage .tv[data-world="docs"]{left:31.8%!important;top:44.5%!important;width:18.2%!important;height:20.4%!important}
.tv-room-stage .tv[data-world="dating"]{left:50.7%!important;top:44.5%!important;width:18.7%!important;height:20.4%!important}
.tv-room-stage .tv[data-world="more"]{left:70.5%!important;top:44.5%!important;width:17.4%!important;height:20.4%!important}
@media(min-aspect-ratio:16/9) and (min-width:801px){.tv-room-stage{width:auto;height:100%;aspect-ratio:16/9}}
@media(max-width:800px){.tv-room-stage{top:82px;width:100%;animation:roomBreathMobile 10s ease-in-out infinite alternate;transform:translateX(-50%);transform-origin:center top}.tv-room-stage .tv i{font-size:6px;right:5px;bottom:4px}.tv-room-stage .tv[data-world]{padding:1px!important}.hero-copy{z-index:8!important}}
@keyframes roomBreathMobile{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.025)}}
.grain{display:none!important}
.hero-copy,.plan-grid article,.balance-panel,.refill-grid button,.auth-card,.notebook-page,.note-card{background-image:none!important}

/* Keep account actions visible on laptop and compact screens. */
@media (max-width:1500px) and (min-width:801px){
  .topbar{padding-inline:2vw;gap:18px}
  .topbar nav{min-width:0;gap:clamp(8px,1vw,15px)}
  .topbar nav button,.saved{font-size:9px;letter-spacing:.08em;white-space:nowrap}
  .topbar nav .release-locked{gap:3px}
  .topbar nav .release-locked small{font-size:5px;padding:2px 3px;letter-spacing:.08em}
  .account-nav{flex:0 0 auto;gap:10px}
  .account-nav>button{white-space:nowrap}
}
@media (max-width:1100px) and (min-width:801px){
  .topbar nav .release-locked{display:none}
}
@media (max-width:800px){
  .topbar{padding-inline:16px;gap:12px}
  .topbar nav{display:none!important}
  .brand{flex:0 0 auto;font-size:12px}
  .account-nav{margin-left:auto;flex:0 0 auto;gap:8px}
  .account-nav #openAuth{display:inline-flex!important;min-height:38px;align-items:center;padding:0 11px;border:1px solid rgba(117,220,233,.38);font-size:9px!important}
  .account-nav .saved{display:none!important}
}
@media (max-width:430px){
  .brand{letter-spacing:.13em}
  .brand-orbit{display:none}
  .account-nav #signalBalance{font-size:8px;padding-inline:4px}
}

/* Compact navigation: core journeys stay visible; personal tools live in one menu. */
.topbar{position:absolute;overflow:visible}
.topbar .primary-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,38px);margin-left:auto}
.nav-menu{position:relative;display:flex;align-items:center}
.nav-menu-toggle{
  width:42px;height:42px;padding:0;display:grid;place-content:center;gap:5px;
  border:1px solid rgba(117,220,233,.34);background:rgba(4,13,22,.72);
  transition:border-color .25s,background .25s,transform .25s;
}
.nav-menu-toggle:hover,.nav-menu-toggle[aria-expanded="true"]{border-color:var(--accent);background:rgba(16,34,46,.94)}
.nav-menu-toggle span{display:block;width:17px;height:1px;background:#e8f1f3;transition:transform .25s,opacity .2s}
.nav-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-menu-panel{
  position:absolute;z-index:40;right:0;top:calc(100% + 13px);width:min(280px,calc(100vw - 24px));
  padding:9px;background:rgba(3,12,20,.98);border:1px solid rgba(117,220,233,.42);
  box-shadow:0 24px 70px rgba(0,0,0,.62);backdrop-filter:blur(18px);
}
.topbar .nav-menu-panel[hidden]{display:none!important}
.topbar .nav-menu-panel:not([hidden]){display:flex!important;flex-direction:column!important;gap:0!important;margin-left:0!important;animation:navMenuIn .24s ease-out}
.nav-menu-panel button{
  min-height:49px;width:100%;padding:0 14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(117,220,233,.14);color:#dce9ed;text-align:left;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s,padding .2s;
}
.nav-menu-panel button:last-child{border-bottom:0}
.nav-menu-panel button:not(:disabled):hover{padding-left:19px;background:rgba(117,220,233,.09);color:#fff}
.nav-menu-panel .release-locked{display:flex!important;color:#6f7f86;cursor:not-allowed}
.nav-menu-panel .release-locked.demo-unlocked{color:#dce9ed;cursor:pointer}
.nav-menu-panel .release-locked.demo-unlocked:hover{padding-left:19px;background:rgba(117,220,233,.09);color:#fff}
.nav-menu-panel .release-locked small{padding:3px 5px;border:1px solid rgba(117,220,233,.2);font-size:6px;letter-spacing:.12em;color:#7999a3}
@keyframes navMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:1500px) and (min-width:801px){
  .topbar .primary-nav{gap:clamp(15px,2vw,30px)}
  .topbar .primary-nav button{font-size:9px;letter-spacing:.1em}
}
@media (max-width:800px){
  .topbar{height:112px;padding:0 14px 40px;gap:8px}
  .topbar .primary-nav{
    position:absolute;left:0;right:0;bottom:0;height:40px;margin:0;padding:0 8px;
    display:flex!important;justify-content:center;gap:clamp(18px,8vw,52px);
    border-top:1px solid rgba(117,220,233,.12);background:rgba(2,8,14,.82);
  }
  .topbar .primary-nav button{font-size:8px;letter-spacing:.12em;white-space:nowrap}
  .account-nav{gap:6px}
  .account-nav #openAuth{min-height:40px;padding-inline:10px}
  .account-nav #signalBalance{min-height:40px}
  .nav-menu-toggle{width:40px;height:40px}
  .nav-menu-panel{position:fixed;top:112px;right:10px;left:10px;width:auto}
  .topbar .nav-menu-panel:not([hidden]){display:flex!important;flex-direction:column!important}
  .tv-room-stage{top:112px}
  .more-hub{inset:112px 0 0}
}
@media (max-width:430px){
  .topbar{padding-inline:10px}
  .brand{font-size:11px;letter-spacing:.12em}
  .account-nav #openAuth{padding-inline:8px;font-size:8px!important}
  .account-nav #signalBalance{font-size:7px;padding-inline:3px}
  .topbar .primary-nav{gap:clamp(12px,6vw,28px)}
}

/* Reserve account controls on smaller laptops and tablets. */
.account-nav #signalBalance{display:inline-flex!important;align-items:center;justify-content:center}

/* Give every top-level action the same visual rhythm. */
.topbar .primary-nav,.account-nav{gap:4px}
.topbar .primary-nav>button,.account-nav>button,.nav-menu-toggle{
  box-sizing:border-box;width:96px;min-width:96px;height:42px;min-height:42px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
  font-size:9px;letter-spacing:.11em;
}
.nav-menu-toggle{flex-direction:column}
.account-nav .saved{margin:0}
.account-nav .saved span{margin-left:6px}
@media (max-width:1500px) and (min-width:1101px){
  .topbar .primary-nav>button,.account-nav>button,.nav-menu-toggle{width:88px;min-width:88px;padding-inline:5px;font-size:8px}
}
@media (max-width:1100px){
  .topbar{height:112px;padding:0 14px 40px;gap:8px}
  .brand{flex:0 0 auto}
  .topbar .primary-nav{
    position:absolute;left:0;right:0;bottom:0;height:40px;margin:0;padding:0 8px;
    display:flex!important;align-items:center;justify-content:center;gap:clamp(22px,8vw,70px);
    border-top:1px solid rgba(117,220,233,.12);background:rgba(2,8,14,.9);
  }
  .topbar .primary-nav button{font-size:8px;letter-spacing:.12em;white-space:nowrap}
  .account-nav{margin-left:auto;flex:0 0 auto;gap:6px}
  .account-nav .saved{display:none!important}
  .account-nav #openAuth,.account-nav #signalBalance{display:inline-flex!important;min-height:40px;white-space:nowrap}
  .topbar .primary-nav>button{width:clamp(92px,25vw,170px);min-width:0;height:40px;min-height:40px}
  .account-nav>button,.nav-menu-toggle{width:78px;min-width:78px;height:40px;min-height:40px}
  .nav-menu{flex:0 0 auto}
  .nav-menu-panel{position:fixed;top:112px;right:10px;left:auto;width:min(300px,calc(100vw - 20px));max-height:calc(100vh - 122px);overflow-y:auto}
  .tv-room-stage{top:112px}
  .more-hub{inset:112px 0 0}
}
@media (max-width:560px){
  .topbar{padding-inline:10px}
  .brand{font-size:11px;letter-spacing:.12em}
  .brand-orbit{display:none}
  .account-nav #openAuth{padding-inline:8px;font-size:8px!important}
  .account-nav #signalBalance{padding-inline:3px;font-size:7px}
  .nav-menu-toggle{width:40px;height:40px}
  .nav-menu-panel{left:10px;width:auto}
  .topbar .primary-nav{gap:clamp(14px,6vw,30px)}
}