:root{
  --xf402-ink:#111827;
  --xf402-night:#100e0d;
  --xf402-amber:#ff8a3d;
  --xf402-cyan:#62d8dd;
  --xf402-glass:rgba(14,20,24,.7);
  --xf402-edge:rgba(255,210,171,.42);
}

.home-page-v402{
  max-width:none;
  padding-inline:clamp(8px,1.4vw,22px);
}

.home-page-v402 .home-living-stage{
  min-height:680px;
  height:calc(100dvh - 116px);
  max-height:980px;
  overflow:hidden;
  border:1px solid rgba(255,184,124,.45);
  border-radius:8px;
  background:#171311;
  box-shadow:0 24px 64px rgba(19,28,33,.28),inset 0 0 0 1px rgba(255,255,255,.12);
}

.home-page-v402 #home-living-map{
  background:#171311 url("./assets/textures/panorama/xfartura-360-master-v402.png") center/cover no-repeat;
}

.home-page-v402 #home-living-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:13;
  pointer-events:none;
  border:1px solid rgba(255,209,170,.24);
  background:linear-gradient(115deg,rgba(255,255,255,.05),transparent 20%,transparent 76%,rgba(255,126,46,.04));
  box-shadow:inset 0 0 52px rgba(16,9,5,.2);
}

.home-page-v402 .home-search-dock{
  z-index:28;
  top:12px;
  left:12px;
}

.home-page-v402 .home-search-toggle{
  border-radius:50%;
  background:rgba(249,252,253,.9);
  color:#1b2931;
  backdrop-filter:blur(15px) saturate(1.12);
}

.home-page-v402 .home-regional-chat-preview{
  z-index:23;
  left:14px;
  top:76px;
  bottom:auto;
  width:min(340px,calc(100% - 128px));
  max-height:94px;
  border-color:rgba(255,214,180,.36);
  background:rgba(13,20,24,.68);
  box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(13px) saturate(1.12);
}

.home-page-v402 .home-regional-chat{
  z-index:34;
  top:78px;
  left:14px;
  right:auto;
  bottom:auto;
  width:min(420px,calc(100% - 92px));
  max-height:min(510px,calc(100% - 110px));
}

.home-page-v402 .home-map-actions{
  z-index:30;
  top:auto;
  right:50%;
  bottom:18px;
  display:flex;
  flex-direction:row;
  gap:5px;
  padding:5px;
  border:1px solid rgba(255,224,198,.36);
  border-radius:8px;
  background:rgba(16,20,23,.72);
  box-shadow:0 14px 32px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.08);
  opacity:0;
  pointer-events:none;
  transform:translate(50%,10px);
  transition:opacity .18s ease,transform .18s ease;
}

.home-page-v402 .home-map-actions.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(50%,0);
}

.home-page-v402 .home-map-actions button{
  width:42px;
  height:42px;
  min-height:42px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;
  background:rgba(245,249,250,.9);
  color:#182831;
  box-shadow:none;
}

.home-page-v402 .home-map-actions button:hover,
.home-page-v402 .home-map-actions button:focus-visible,
.home-page-v402 .home-map-actions button.active{
  border-color:rgba(255,166,103,.74);
  background:#fff;
  color:#e84e13;
}

.home-page-v402 .home-map-actions .home-regional-chat-toggle,
.home-page-v402 .home-map-actions .home-map-cart{display:none!important}

.home-page-v402 .home-side-nav{
  position:absolute;
  z-index:29;
  top:50%;
  right:12px;
  display:grid;
  gap:7px;
  padding:5px;
  border:1px solid rgba(255,223,195,.32);
  border-radius:8px;
  background:rgba(14,19,23,.72);
  box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.11);
  backdrop-filter:blur(15px) saturate(1.08);
  transform:translateY(-50%);
}

.home-page-v402 .home-side-nav a{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;
  background:rgba(248,251,252,.9);
  color:#202c34;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.home-page-v402 .home-side-nav a:hover,
.home-page-v402 .home-side-nav a:focus-visible,
.home-page-v402 .home-side-nav a.active{
  background:#ff641d;
  color:#fff;
  transform:translateX(-2px);
}

.home-page-v402 .home-side-nav svg{width:21px;height:21px;stroke-width:1.8}
.home-page-v402 ~ .bottom-nav,
.home-page-v402 .bottom-nav{display:none!important}
.home-map-shell-active #bottom-nav{display:none!important}

.home-map-shell-active #cart-fab.home-map-cart{
  z-index:30;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  min-height:52px;
  border-radius:50%;
}

.home-page-v402 .home-map-theme-menu,
.home-page-v402 .home-map-brightness-panel{
  z-index:35;
  top:auto;
  right:50%;
  bottom:72px;
  transform:translateX(50%);
}

.home-page-v402 .xf-map-scale{
  position:absolute;
  z-index:24;
  left:16px;
  bottom:24px;
  display:grid;
  grid-template-columns:74px auto;
  align-items:end;
  gap:7px;
  min-width:118px;
  padding:6px 8px;
  border-radius:6px;
  color:#fff;
  background:rgba(12,19,23,.66);
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(10px);
}

.home-page-v402 .xf-map-scale span{
  display:block;
  height:7px;
  border:solid rgba(255,255,255,.92);
  border-width:0 2px 2px;
}

.home-page-v402 .xf-compass-rose{
  position:absolute;
  z-index:24;
  right:74px;
  top:18px;
  width:66px;
  height:66px;
  border:1px solid rgba(255,221,193,.34);
  border-radius:50%;
  color:#fff;
  background:rgba(12,19,23,.62);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 9px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  font-size:9px;
  font-weight:900;
  pointer-events:none;
}

.home-page-v402 .xf-compass-rose span{position:absolute}
.home-page-v402 .xf-compass-rose .north{top:4px;left:50%;color:#ff9757;transform:translateX(-50%)}
.home-page-v402 .xf-compass-rose .east{right:5px;top:50%;transform:translateY(-50%)}
.home-page-v402 .xf-compass-rose .south{bottom:4px;left:50%;transform:translateX(-50%)}
.home-page-v402 .xf-compass-rose .west{left:5px;top:50%;transform:translateY(-50%)}
.home-page-v402 .xf-compass-rose i{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:25px;
  background:#ff6a22;
  transform:translate(-50%,-82%);
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);
}

.home-page-v402 .home-living-map .xf-living-map-status{
  left:146px;
  bottom:22px;
}

.home-page-v402 .xf-compatible-stage{
  --xf-map-pan-x:0px;
  --xf-map-pan-y:0px;
  background:#171311;
  cursor:grab;
}

.home-page-v402 .xf-compatible-stage.is-dragging{cursor:grabbing}

.home-page-v402 .xf-compatible-architecture{
  inset:0;
  overflow:hidden;
  background:#171311;
  transform:none;
  transition:none;
}

.home-page-v402 .xf-compatible-architecture::after{
  z-index:2;
  background:linear-gradient(180deg,rgba(7,8,9,.02),rgba(7,8,9,.05) 56%,rgba(7,8,9,.2));
  mix-blend-mode:normal;
}

.home-page-v402 .xf-panorama-ring{
  position:absolute;
  inset-block:0;
  left:0;
  display:flex;
  height:100%;
  will-change:transform;
  transition:transform .08s linear;
}

.home-page-v402 .xf-compatible-stage.is-dragging .xf-panorama-ring{transition:none}

.home-page-v402 .xf-panorama-panel{
  flex:0 0 auto;
  height:100%;
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.home-page-v402 .xf-compatible-map-world{
  left:5%;
  right:5%;
  top:48%;
  bottom:-32%;
  border-color:rgba(255,143,70,.74);
  border-radius:12px 12px 2px 2px;
  box-shadow:0 -2px 0 rgba(255,128,51,.72),0 0 36px rgba(255,104,30,.18),inset 0 0 32px rgba(5,28,40,.16);
  transform:translate3d(var(--xf-map-pan-x),var(--xf-map-pan-y),0) perspective(790px) rotateX(56deg) scale(var(--xf-compatible-zoom));
  transition:transform .2s ease;
}

.home-page-v402 .xf-compatible-marker-layer{
  transform:translate3d(var(--xf-map-pan-x),var(--xf-map-pan-y),0);
  transition:transform .2s ease;
}

.home-page-v402 .xf-compatible-stage.is-dragging .xf-compatible-map-world,
.home-page-v402 .xf-compatible-stage.is-dragging .xf-compatible-marker-layer{transition:none}

.home-page-v402 .xf-compatible-stage.is-top-view .xf-compatible-map-world{
  top:27%;
  bottom:8%;
  transform:translate3d(var(--xf-map-pan-x),var(--xf-map-pan-y),0) perspective(900px) rotateX(8deg) scale(var(--xf-compatible-zoom));
}

.home-page-v402 .xf-compatible-map-glow{bottom:0}
.home-page-v402 .xf-compatible-camera-texture{opacity:.56;mix-blend-mode:screen}
.home-page-v402 .xf-compatible-merch{top:24%;right:17%;max-width:min(300px,34vw)}

@media (max-width:900px){
  .home-page-v402 .home-living-stage{height:calc(100dvh - 112px);min-height:650px}
  .home-page-v402 .home-side-nav{right:8px}
  .home-page-v402 .xf-compass-rose{right:66px}
  .home-page-v402 .home-regional-chat-preview{width:min(310px,calc(100% - 92px))}
}

@media (max-width:720px){
  .home-page-v402{padding-inline:0}
  .home-page-v402 .home-living-stage{height:calc(100dvh - 104px);min-height:620px;border-radius:0}
  .home-page-v402 .home-search-dock{top:8px;left:8px}
  .home-page-v402 .home-regional-chat-preview{top:60px;left:8px;width:min(260px,calc(100% - 76px));max-height:78px}
  .home-page-v402 .home-regional-chat{top:62px;left:8px;width:calc(100% - 74px);max-height:calc(100% - 128px)}
  .home-page-v402 .home-side-nav{top:50%;right:7px;gap:5px;padding:4px}
  .home-page-v402 .home-side-nav a{width:42px;height:42px}
  .home-page-v402 .home-map-actions{bottom:16px;max-width:calc(100% - 98px);overflow-x:auto}
  .home-page-v402 .home-map-actions button{flex:0 0 39px;width:39px;height:39px;min-height:39px}
  .home-page-v402 .xf-compass-rose{top:12px;right:61px;width:54px;height:54px}
  .home-page-v402 .xf-map-scale{left:8px;bottom:14px;grid-template-columns:58px auto;min-width:98px}
  .home-page-v402 .home-living-map .xf-living-map-status{left:112px;bottom:13px;padding:5px 7px}
  .home-page-v402 .xf-compatible-map-world{left:-12%;right:-12%;top:48%;bottom:-30%;transform:translate3d(var(--xf-map-pan-x),var(--xf-map-pan-y),0) perspective(650px) rotateX(58deg) scale(var(--xf-compatible-zoom))}
  .home-page-v402 .xf-compatible-merch{top:21%;right:18%;max-width:54vw}
  .home-map-shell-active #cart-fab.home-map-cart{right:8px;bottom:8px;width:48px;height:48px;min-height:48px}
}

@media (max-width:430px){
  .home-page-v402 .home-regional-chat-preview{width:min(232px,calc(100% - 70px))}
  .home-page-v402 .regional-chat-preview-list>span:nth-child(n+2){display:none}
  .home-page-v402 .xf-compatible-marker-card{max-width:118px}
  .home-page-v402 .xf-compatible-merch{right:20%;max-width:57vw}
}

@media (prefers-reduced-motion:reduce){
  .home-page-v402 .home-map-actions,
  .home-page-v402 .home-side-nav a,
  .home-page-v402 .xf-panorama-ring{transition:none}
}
