/* Mobile-only composition. The desktop page and its assets remain untouched. */
:root {
  --mobile-max-width: 430px;
  --tile-size: 69px;
  --tile-gap: 2px;
  --drawer-padding: 3px;
  --grid-columns: 6;
  --drawer-rows: 4;
  --contact-columns: 4;
  --contact-rows: 4;
  --contact-tile-size: 51px;
  --contact-icon-size: 32px;
  --contact-icon-radius: 8px;
  --mobile-header-height: 64px;
  --z-drawer: 40;
  --z-viewer: 60;
}

html,
body.mobile-stage {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.7);
}

body.mobile-stage {
  display: grid;
  place-items: center;
  padding: 0;
  color: #f7fbff;
  font-family: "UniverseYaku", "Microsoft YaHei", system-ui, sans-serif;
}

body.mobile-stage .mobile-phone {
  --primary-w: auto;
  --head-h: var(--mobile-header-height);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: max-content max-content;
  align-items: start;
  width: min(100vw, var(--mobile-max-width), calc(100dvh * 9 / 16));
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100dvh;
  aspect-ratio: 9 / 16;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(0,0,0,.7);
  border: 1px solid #18313a;
  box-shadow: 0 0 0 1px #020405, 0 8px 36px rgba(0, 0, 0, .66);
  scrollbar-width: none;
  transition: none;
}

body.mobile-stage .mobile-phone::-webkit-scrollbar,
body.mobile-stage .primary-list::-webkit-scrollbar,
body.mobile-stage .drawer-scroll::-webkit-scrollbar,
body.mobile-stage .section-grid-scroll::-webkit-scrollbar {
  display: none;
}

body.mobile-stage .app-shell::after,
body.mobile-stage .focus-logo-panel {
  display: none;
}

body.mobile-stage .primary-column {
  position: relative;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100%;
  overflow: visible;
  border-right: 1px solid #11242b;
  background: rgba(0,0,0,.7);
}

body.mobile-stage .primary-column[data-column="universe"] { grid-column: 1; }
body.mobile-stage .primary-column[data-column="birth"] { grid-column: 2; }
body.mobile-stage .primary-column[data-column="products"] { grid-column: 3; }
body.mobile-stage .primary-column[data-column="versions"] { grid-column: 4; }
body.mobile-stage .primary-column[data-column="owned"] { grid-column: 5; }
body.mobile-stage .primary-column[data-column="release"] { grid-column: 6; border-right: 0; }

body.mobile-stage .primary-column::after {
  display: none;
}

body.mobile-stage .column-heading {
  display: block !important;
  height: var(--mobile-header-height);
  min-height: var(--mobile-header-height);
  padding: 9px 2px 7px;
  overflow: hidden;
  border-bottom: 1px solid #18313a;
  background: rgba(0,0,0,.7) !important;
  text-align: center;
}

body.mobile-stage .column-heading small {
  display: block;
  overflow: hidden;
  color: #58eaff;
  font-size: 6px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-overflow: clip;
  white-space: nowrap;
}

body.mobile-stage .column-heading h2 {
  margin: 6px 0 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(11px, 3.35vw, 15px);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

body.mobile-stage .primary-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tile-gap);
  width: 100%;
  height: auto;
  padding: var(--tile-gap) 0 8px;
  overflow: visible;
}

/* Every primary tile uses the same square token. */
body.mobile-stage .primary-button {
  position: relative;
  display: block;
  flex: 0 0 var(--tile-size);
  width: var(--tile-size);
  min-width: var(--tile-size);
  height: var(--tile-size);
  min-height: var(--tile-size);
  padding: 0;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--accent) 78%, #101418);
  border-radius: 9px;
  background: rgba(0,0,0,.7) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  touch-action: manipulation;
}

body.mobile-stage .primary-button:hover,
body.mobile-stage .primary-button.active,
body.mobile-stage .primary-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 90%, white 10%);
  background: rgba(0,0,0,.7) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  outline: none;
}

body.mobile-stage .primary-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.mobile-stage .primary-button::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 32%;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.7) 64%, transparent);
  pointer-events: none;
}

body.mobile-stage .primary-button .item-icon {
  position: absolute;
  inset: 2px;
  display: grid;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: rgba(0,0,0,.7);
}

body.mobile-stage .primary-button .item-icon img {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 6px;
  background: rgba(0,0,0,.7);
  object-fit: contain;
  object-position: center;
  transform: none;
}

body.mobile-stage [data-parent-group="products"] .item-icon img { object-fit: cover; }

body.mobile-stage .primary-button .item-copy {
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 4px;
  left: 2px;
  display: block !important;
  min-width: 0;
  pointer-events: none;
}

body.mobile-stage .primary-button .item-copy b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: clamp(6px, 1.9vw, 8px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  white-space: nowrap;
}

body.mobile-stage .primary-button .item-copy small,
body.mobile-stage .primary-button > em {
  display: none !important;
}

/* Full-width, one-at-a-time child sheet. */
body.mobile-stage .detail-drawer {
  position: absolute;
  z-index: var(--z-drawer);
  top: var(--drawer-top, var(--mobile-header-height));
  right: 0;
  bottom: auto;
  left: 0;
  display: none;
  width: 100%;
  height: calc(52px + (var(--drawer-rows) * var(--tile-size)) + ((var(--drawer-rows) - 1) * var(--tile-gap)) + var(--drawer-padding) + var(--drawer-padding));
  min-height: 0;
  max-height: calc(100% - var(--mobile-header-height));
  overflow: hidden;
  border: 1px solid #29454f;
  background: rgba(0,0,0,.7) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .82);
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

body.mobile-stage .mobile-phone.drawer-universe-open [data-drawer="universe"],
body.mobile-stage .mobile-phone.drawer-birth-open [data-drawer="birth"],
body.mobile-stage .mobile-phone.drawer-products-open [data-drawer="products"],
body.mobile-stage .mobile-phone.drawer-versions-open [data-drawer="versions"],
body.mobile-stage .mobile-phone.drawer-owned-open [data-drawer="owned"],
body.mobile-stage .mobile-phone.drawer-release-open [data-drawer="release"] {
  display: block;
}

body.mobile-stage .drawer-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 9px 10px;
  border-bottom: 1px solid #18313a;
  background: rgba(0,0,0,.7) !important;
}

body.mobile-stage .drawer-heading small { font-size: 7px; }
body.mobile-stage .drawer-heading h2 { margin-top: 4px; font-size: 15px; }
body.mobile-stage .drawer-heading .drawer-actions { margin-left: auto; }
body.mobile-stage .drawer-heading #owned-edit-toggle,
body.mobile-stage .drawer-heading #release-edit-toggle { display: none; }

body.mobile-stage .drawer-heading button {
  min-width: 56px;
  min-height: 36px;
  padding: 7px 10px;
  border-color: #3b6875;
  background: rgba(0,0,0,.7);
  font-size: 10px;
}

body.mobile-stage .dual-flow-close-button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(46, 79, 89, .72);
  border-radius: 8px;
  background: rgba(0,0,0,.7);
  color: #c8d8dc;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 6px rgba(85, 233, 255, .24);
}

body.mobile-stage .dual-flow-close-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--flow-angle),
    transparent 0 8%,
    rgba(85, 233, 255, .24) 11%,
    #55e9ff 16%,
    #eaffff 19%,
    transparent 25% 54%,
    rgba(185, 76, 255, .24) 58%,
    #b94cff 64%,
    #f0c9ff 67%,
    transparent 73% 100%
  );
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: double-flow 4.8s linear infinite;
}

body.mobile-stage .dual-flow-close-button:hover {
  border-color: rgba(85, 233, 255, .72);
  background: rgba(0,0,0,.7);
  color: #fff;
  text-shadow: 0 0 8px rgba(185, 76, 255, .54);
}

body.mobile-stage .dual-flow-close-button:active {
  transform: scale(.94);
}

body.mobile-stage .dual-flow-close-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.mobile-stage .drawer-scroll {
  width: 100%;
  height: calc((var(--drawer-rows) * var(--tile-size)) + ((var(--drawer-rows) - 1) * var(--tile-gap)) + var(--drawer-padding) + var(--drawer-padding));
  max-height: calc((var(--drawer-rows) * var(--tile-size)) + ((var(--drawer-rows) - 1) * var(--tile-gap)) + var(--drawer-padding) + var(--drawer-padding));
  padding: var(--drawer-padding);
  overflow-y: auto;
}

body.mobile-stage .drawer-scroll > .detail-section:not(.active):not(:only-child) {
  display: none !important;
}

body.mobile-stage .detail-section,
body.mobile-stage .detail-section.active,
body.mobile-stage .drawer-scroll > .detail-section:only-child {
  display: block;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.7) !important;
  box-shadow: none;
  contain: none;
  content-visibility: visible;
}

body.mobile-stage .detail-section-heading {
  display: none !important;
}

body.mobile-stage .section-grid-scroll,
body.mobile-stage .section-grid-scroll.virtualized {
  max-height: none;
  padding: 0;
  overflow: visible;
}

body.mobile-stage .section-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), var(--tile-size));
  grid-auto-rows: var(--tile-size);
  justify-content: center;
  gap: var(--tile-gap);
  min-height: var(--tile-size);
}

body.mobile-stage .virtual-grid-space { width: 100%; }
body.mobile-stage .virtual-grid-window { left: 0; width: 100%; transform-origin: top center; }

/* Child rows use the same six column centers, icon size and row gap as the main catalog. */
body.mobile-stage .detail-drawer .drawer-scroll {
  width: calc(100% + 2px);
  margin-left: -1px;
  padding-inline: 0;
}
body.mobile-stage .detail-drawer .section-grid,
body.mobile-stage .detail-drawer #owned-detail {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--tile-gap);
  justify-items: center;
}
body.mobile-stage .detail-drawer .section-grid > :not(:nth-child(6n)),
body.mobile-stage .detail-drawer #owned-detail > :not(:nth-child(6n)) {
  margin-right: 1px;
}
body.mobile-stage .detail-drawer #owned-detail > .owned-endpoint-section {
  width: var(--tile-size);
  height: var(--tile-size);
}

/* Every rendered child tile uses the same square token as a primary tile. */
body.mobile-stage .square-tile {
  position: relative;
  display: block;
  width: var(--tile-size);
  min-width: var(--tile-size);
  height: var(--tile-size);
  min-height: var(--tile-size);
  padding: 0;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--accent) 78%, #101418);
  border-radius: 9px;
  background: rgba(0,0,0,.7) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

body.mobile-stage .square-tile:hover,
body.mobile-stage .square-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 90%, white 10%);
  background: rgba(0,0,0,.7) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  outline: none;
  transform: none;
}

body.mobile-stage .square-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.mobile-stage .square-tile .tile-icon {
  inset: 2px;
  border-radius: 6px;
}

body.mobile-stage .square-tile::after { border-radius: 0 0 7px 7px; }
body.mobile-stage .square-tile strong { bottom: 4px; font-size: clamp(6px, 1.9vw, 8px); }

body.mobile-stage .grid-spacer {
  width: var(--tile-size);
  height: var(--tile-size);
}

body.mobile-stage #owned-detail {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), var(--tile-size));
  grid-auto-rows: var(--tile-size);
  justify-content: center;
  gap: var(--tile-gap);
}

body.mobile-stage .owned-endpoint-section {
  width: var(--tile-size);
  height: var(--tile-size);
  margin: 0;
}

body.mobile-stage .owned-endpoint-heading {
  display: block !important;
  width: var(--tile-size);
  min-width: var(--tile-size);
  height: var(--tile-size);
  min-height: var(--tile-size);
  padding: 0;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--accent) 78%, #101418);
  border-radius: 9px;
  background: rgba(0,0,0,.7) !important;
}

body.mobile-stage .owned-endpoint-heading .section-parent-icon {
  position: absolute;
  inset: 2px;
  width: auto;
  height: auto;
  border: 0;
  background: rgba(0,0,0,.7);
}

body.mobile-stage .owned-endpoint-heading > div {
  position: absolute;
  z-index: 3;
  right: 2px;
  bottom: 4px;
  left: 2px;
  display: block;
  text-align: center;
}

body.mobile-stage .owned-endpoint-heading h3 {
  overflow: hidden;
  font-size: clamp(6px, 1.9vw, 8px);
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  white-space: nowrap;
}

body.mobile-stage .owned-endpoint-heading p,
body.mobile-stage .owned-endpoint-status,
body.mobile-stage .tile-edit,
body.mobile-stage .release-item-kind,
body.mobile-stage .add-tile { display: none !important; }

/* Contact block keeps its existing identity and media composition, but spans the page. */
body.mobile-stage .universe-social-panel {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: block !important;
  width: 100%;
  min-height: 0;
  padding: 16px 8px 18px;
  overflow: visible;
  border-top: 1px solid #17343c;
  border-right: 0;
  background: rgba(0,0,0,.7) !important;
  box-shadow: none;
}

body.mobile-stage .universe-social-panel__brand {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  min-height: 68px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #17343c;
  border-bottom: 0;
}

body.mobile-stage .universe-social-panel__logo { width: 62px; height: 62px; }
body.mobile-stage .universe-social-panel__identity h2 { font-size: 18px; }
body.mobile-stage .universe-social-panel__identity p { font-size: 8px; }
body.mobile-stage .universe-social-panel__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .7vw, 5px);
  width: 100%;
  min-height: 18px;
  margin-top: 5px;
  padding: 3px 0 0;
  overflow: hidden;
  border: 0;
  color: #697982;
  font-size: clamp(5px, 1.55vw, 7px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

body.mobile-stage .universe-social-panel__legal i {
  color: #3e5058;
  font-style: normal;
}

body.mobile-stage .universe-social-panel__heading { padding: 0 1px 10px; }
body.mobile-stage .universe-social-panel__heading h3 { font-size: 17px; }

body.mobile-stage .universe-social-panel__grid {
  display: grid;
  grid-template-columns: repeat(var(--contact-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--contact-rows), var(--contact-tile-size));
  grid-auto-rows: var(--contact-tile-size);
  width: 100%;
  gap: var(--tile-gap);
}

body.mobile-stage .universe-social-panel__grid > a {
  position: relative;
  display: grid;
  grid-template-columns: var(--contact-icon-size) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--contact-tile-size);
  min-height: var(--contact-tile-size);
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid #24343a;
  border-radius: 9px;
  background: rgba(0,0,0,.7) !important;
  transform: none;
}

body.mobile-stage .universe-social-panel__grid .universe-social-icon {
  position: relative;
  top: auto;
  left: auto;
  width: var(--contact-icon-size);
  height: var(--contact-icon-size);
  border: 1px solid color-mix(in srgb, var(--social-accent, #49efff) 58%, transparent);
  border-radius: var(--contact-icon-radius);
  color: var(--social-accent, #49efff);
  background: color-mix(in srgb, var(--social-accent, #49efff) 13%, rgba(0,0,0,.7)) !important;
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--social-accent, #49efff) 16%, transparent);
  transform: none;
}

body.mobile-stage .universe-social-panel__grid .universe-social-icon img,
body.mobile-stage .universe-social-panel__grid .universe-social-icon svg {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

body.mobile-stage .universe-social-panel__grid .social-logo--mini svg > circle:first-child {
  fill: #07c160 !important;
}

body.mobile-stage .universe-social-panel__grid .social-logo--mini svg > path {
  fill: none !important;
  stroke: #fff !important;
}

body.mobile-stage .universe-social-panel__grid .social-logo--mini svg > circle:not(:first-child) {
  fill: #fff !important;
}

body.mobile-stage .universe-social-panel__grid b {
  position: relative;
  z-index: 7;
  right: auto;
  bottom: auto;
  left: auto;
  overflow: hidden;
  color: #fff;
  font-size: clamp(6px, 1.9vw, 8px);
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  white-space: nowrap;
}

body.mobile-stage .universe-social-panel__grid > a::after {
  content: none;
}

body.mobile-stage .social-order { display: none; }

body.mobile-stage .web-viewer {
  z-index: var(--z-viewer);
  width: min(100vw, var(--mobile-max-width), calc(100dvh * 9 / 16));
  max-width: 100vw;
}

@media (max-width: 360px) {
  :root {
    --mobile-header-height: 58px;
  }

  body.mobile-stage .column-heading { padding-top: 8px; }
  body.mobile-stage .column-heading h2 { margin-top: 5px; }
  body.mobile-stage .universe-social-panel { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-stage *,
  body.mobile-stage *::before,
  body.mobile-stage *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}