/* V4: exact identity, live navigation, HD project art and a movable claw.
   The approved room PNG stays unchanged. Every home overlay is localized. */

.topbar-art,
.arcade-menu-header { container-type: inline-size; }

.arcade-menu-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8.501594%;
  z-index: 8;
}

.route-menu,
.topnav .route-menu {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

/* Conceal only the old raster menu, not the Digital Demons identity. */
.route-menu::before {
  content: '';
  position: absolute;
  inset: 0 0 1.5% 52.7%;
  background: linear-gradient(115deg, #0b0d11, #0b0c10 52%, #0c0d10);
}

.route-menu .route-link {
  position: absolute;
  top: 24%;
  height: 47%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 1px;
  color: #f0efec;
  font: 600 clamp(10px, 1.02cqw, 24px)/1 IBMPlexMono, Consolas, monospace;
  letter-spacing: .045em;
  text-shadow: 0 0 2px #d2e3f83d;
  pointer-events: auto;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}

.route-menu .route-home { left: 54.9%; width: 5.65%; }
.route-menu .route-projects { left: 63.1%; width: 7.3%; }
.route-menu .route-services { left: 71.65%; width: 7.3%; }
.route-menu .route-about { left: 80.6%; width: 5.5%; }
.route-menu .route-contact { left: 88%; width: 7.3%; }

.route-menu .route-link:hover {
  color: #d9efac;
  border-color: #758d463d;
  background: #b7e77e0a;
}

.route-menu .route-link[aria-current='page'] {
  color: #bedb6b;
  border: 1px solid #5c6c364f;
  border-bottom: 2px solid #a3bd4d;
  background: linear-gradient(180deg, #2c382b8c, #1e271dd9);
  box-shadow: inset 0 0 10px #a8d6770a, 0 2px 5px #76b53918;
  text-shadow: 0 0 5px #a7d66c45;
}

.route-menu .route-link[aria-current='page']::before,
.route-menu .route-link[aria-current='page']::after {
  content: '✧';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fbe338;
  font: 600 clamp(12px, 1.28cqw, 25px)/1 Georgia, serif;
  text-shadow: 0 0 4px #f3ce3a50;
}
.route-menu .route-link[aria-current='page']::before { right: calc(100% + .6cqw); }
.route-menu .route-link[aria-current='page']::after { left: calc(100% + .6cqw); }
.route-menu .route-link:focus-visible { outline: 2px solid #ffe36a; outline-offset: 4px; }

.topnav .topbar-mobile a[aria-current='page'] {
  color: #c5e879;
  border-bottom: 2px solid #a3bd4d;
  background: #b0d86a14;
}

/* Repaired wall exists only behind the former fixed claw. Moving artwork
   never catches pointer events, so all prize links keep working. */
.claw-clearance {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.moving-claw {
  position: absolute;
  left: 33.074163%;
  top: 22.848034%;
  width: 7.77512%;
  height: 20.191286%;
  z-index: 3;
  pointer-events: none;
}
.moving-claw > svg { display: block; width: 100%; height: 100%; overflow: hidden; }

/* Exact original Heaven Online wordmark; its halo is a separate element on
   the original website too. The BETA UI badge is not part of the logo. */
.heaven-wordmark { position: relative; display: block; width: 100%; }
.heaven-wordmark > img { display: block; width: 100%; height: auto; object-fit: contain; }
.wordmark-halo {
  position: absolute;
  left: 25%;
  top: -7%;
  width: 12.6%;
  height: 10%;
  border: max(1px, .13cqw) solid #fff476;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-7deg);
  box-shadow: 0 0 5px #ffffa052;
}
.home-heaven-wordmark {
  position: absolute;
  left: 29.68%;
  top: 60.36%;
  width: 7.08%;
  height: 2.34%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .13% .2% .02%;
  background: linear-gradient(#101013, #020204);
  border-radius: 1px;
  pointer-events: none;
  container-type: inline-size;
}
.home-heaven-wordmark .heaven-wordmark { width: 59%; }
.home-heaven-wordmark .wordmark-halo { border-width: .65px; box-shadow: none; }

.hh-hd,
.psp-hd { object-fit: contain; }
.software-psp .specimen-display > .psp-hd { max-width: 480px; width: 90%; }
.psp-stage > .psp-hd { max-width: 440px; width: 86%; }
.proof-art > .psp-hd { width: 100%; max-width: 360px; }
.hh-app-bubble > .hh-hd { width: 86%; }

/* Give the cabinet the main stage. Notes move below it, leaving the center
   column wide enough to see the real animated homepage in its screen. */
.heaven-page .portal-main { width: min(1720px, calc(100% - 64px)); }
.heaven-page .project-heading { padding-top: 31px; }
.heaven-page .project-heading h1 { font-size: 62px; }
.heaven-exhibit {
  grid-template-columns: 185px minmax(0, 1fr);
  column-gap: 30px;
  row-gap: 20px;
  padding-top: 15px;
  min-height: 0;
}
.heaven-exhibit .ddr-exhibit { width: 100%; max-width: 1350px; padding-top: 0; }
.heaven-exhibit .ddr-floor { left: 0; right: 0; }
.heaven-entry { align-self: start; margin-top: clamp(100px, 18vw, 300px); }
.heaven-exhibit .exhibit-notes {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  border: 0;
  border-top: 1px solid #35313a;
  padding: 25px 0 0;
}
.heaven-exhibit .exhibit-notes > .micro-label { display: block; }
.heaven-exhibit .exhibit-notes dl { display: flex; justify-content: space-evenly; flex: 1; gap: 35px; margin: 0; }
.heaven-exhibit .exhibit-notes dl > div { margin: 0; }
.heaven-exhibit .exhibit-number { font-size: 48px; }

.ddr-marquee {
  position: absolute;
  left: 36.1%;
  top: 4.35%;
  width: 27.8%;
  height: 9.7%;
  padding: 1.05% 2.8% .8%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, #222034, #101019 74%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  pointer-events: none;
  container-type: inline-size;
}
.ddr-marquee .heaven-wordmark { filter: drop-shadow(0 0 2px #a6aee640); }
.ddr-marquee .wordmark-halo { border-width: 1.5px; }

@media (max-width: 1050px) {
  .heaven-page .portal-main { width: calc(100% - 44px); }
  .heaven-exhibit { grid-template-columns: 145px minmax(0, 1fr); column-gap: 10px; }
  .heaven-entry { margin-top: 130px; }
  .hh-app-bubble { width: 140px; height: 140px; }
  .heaven-entry h2 { font-size: 25px; }
  .heaven-entry > p { font-size: 11px; }
  .heaven-exhibit .exhibit-notes > .micro-label { display: none; }
}

@media (max-width: 600px) {
  .heaven-page .portal-main { width: calc(100% - 30px); }
  .heaven-page .project-heading h1 { font-size: clamp(39px, 12vw, 53px); }
  .heaven-exhibit { grid-template-columns: 1fr; padding-top: 26px; row-gap: 0; }
  .heaven-entry { margin: 0 auto 15px; }
  .hh-app-bubble { width: 104px; height: 104px; }
  .heaven-exhibit .ddr-exhibit { width: calc(100% + 24px); max-width: none; margin: 0 -12px; }
  .heaven-exhibit .exhibit-notes { padding-top: 20px; gap: 15px; }
  .heaven-exhibit .exhibit-notes dl { justify-content: space-between; gap: 12px; }
  .heaven-exhibit .exhibit-notes dd { font-size: 10px; }
  .heaven-exhibit .exhibit-number { font-size: 36px; }
  .ddr-marquee .wordmark-halo { border-width: .7px; }
  .software-psp .specimen-display > .psp-hd { width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .route-menu .route-link { transition: none; }
}