/* Shared MallowByte UI drawings. Text remains the accessible label. */
.ui-icon{display:inline-block;width:18px;height:18px;flex:0 0 auto;vertical-align:middle;color:inherit;--icon-accent:#a64f8c}
.site-header .ui-icon{--icon-accent:#89d9f5}
.nav-links a{gap:8px;white-space:nowrap}
.nav-links .nav-cta{gap:8px}
.nav-cta>.icon-arrow{margin-left:12px}
.nav-links .ui-icon{width:17px;height:17px}
.menu-toggle .menu-symbol{display:inline-flex;align-items:center}
.menu-toggle .ui-icon{width:19px;height:19px}
.menu-toggle .menu-close{display:none}
.menu-toggle[aria-expanded=true] .menu-lines{display:none}
.menu-toggle[aria-expanded=true] .menu-close{display:block}
.catalogue-heading h2{display:inline-flex;align-items:center;gap:10px}
.catalogue-heading .ui-icon{width:21px;height:21px;color:#63728e}
.world-status>.status-label,.world-status>.status-platform{display:inline-flex;align-items:center;gap:6px}
.world-status>.status-label{font:inherit;color:inherit;letter-spacing:inherit;border:0;padding:0}
.world-status .ui-icon,.survivor-status .ui-icon{width:15px;height:15px}
.world-status>.status-platform .ui-icon{width:13px;height:13px}
.world-button.store-link,.button.store-link{gap:10px}
.store-link>.icon-arrow{margin-left:10px}
.store-link .ui-icon{--icon-accent:currentColor}
/* Download actions stay legible beside both game art and pale page panels. */
a.store-link:is(.button,.world-button){max-width:100%;min-height:56px;padding:14px 16px;border:1px solid #1b2a43;border-radius:8px;background:#1b2a43;color:#fff;font-size:14px;font-weight:800;line-height:1.4;text-align:center;gap:10px}
a.store-link:is(.button,.world-button):hover{background:#304565;border-color:#304565;color:#fff}
.world-copy>a.store-link+.world-meta{margin-top:10px}
@media(max-width:480px){a.store-link:is(.button,.world-button){width:100%}.store-link>.icon-arrow{display:none}}
.home-email{gap:12px}
.home-email>.ui-icon{width:23px;height:23px}
.home-support .world-more{gap:9px}
.footer-bottom a,.footer-top nav a{gap:6px}
.site-footer nav .ui-icon{width:14px;height:14px}
.game-mode-top>.ui-icon{width:48px;height:48px;color:#334865;--icon-accent:#a04e8a}
.game-screenshot>.ui-icon{position:absolute;bottom:1rem;right:1rem;width:2.4rem;height:2.4rem;padding:.6rem;border-radius:50%;background:#f6f7fb;color:#1b2031}
.lightbox button{display:grid;place-items:center}
.lightbox button .ui-icon{width:20px;height:20px}

/* Open the four-link studio menu earlier to keep the original logo clear. */
@media(max-width:850px){
  .home-header .nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0}
  .home-header .brand{min-height:94px}
  .home-header .nav-links{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;gap:0;padding-block:5px 15px}
  .home-header.menu-ready .menu-toggle{display:inline-flex}
  .home-header.menu-ready .nav-links{display:none}
  .home-header.menu-open .nav-links{display:flex;order:3;flex-direction:column;align-items:stretch;gap:0;padding-block:10px 20px}
  .home-header.menu-open .home-nav-group{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .home-header.menu-open .nav-links a{font-size:14px;padding:12px 5px;min-height:44px;gap:11px}
  .home-header .menu-toggle{font-size:11px;min-height:42px;padding:7px 14px;gap:12px}
}
@media(max-width:760px){
  .site-header:not(.home-header) .nav{flex-wrap:wrap;gap:0}
  .site-header:not(.home-header) .brand{min-height:83px}
  .site-header:not(.home-header) .nav-links{width:100%;justify-content:space-between;padding:8px 0 15px;font-size:11px}
  .site-header:not(.home-header).menu-ready .menu-toggle{display:inline-flex}
  .site-header:not(.home-header).menu-ready .nav-links{display:none}
  .site-header:not(.home-header).menu-open .nav-links{display:flex;order:3;flex-direction:column;align-items:stretch;gap:0;padding-block:10px 20px}
  .site-header:not(.home-header).menu-open .nav-links a{padding:13px 8px;font-size:15px}
  .site-header:not(.home-header).menu-open .nav-links .nav-cta{border:0;padding:13px 8px;border-radius:0;justify-content:flex-start}
  .site-header:not(.home-header).menu-open .nav-cta>.icon-arrow{margin-left:auto}
}
@media(max-width:620px){
  .home-header .brand{min-height:85px}
  .home-email{gap:11px}
  .home-email>.ui-icon{width:19px;height:19px}
  .catalogue-heading .ui-icon{width:18px;height:18px}
  .nav-links .nav-cta>.icon-arrow{margin-left:auto}
}
@media(max-width:360px){
  .home-header .menu-toggle{gap:9px;padding-inline:12px}
  .home-email{font-size:20px;gap:9px}
}