:root {
  color-scheme: dark;
  background: #01030a;
  font-family: "Courier New", monospace;
}

/* V36 mobile HUD: move MAP seventeen pixels inward from its previous edge. */
@media (max-width:700px), (pointer:coarse) {
  .kingdom-menu-button { left:27px!important; }
}

/* V32 — one bounded foreground billboard, refined navigation and celestial depth. */
.mystery-club-label { display:none!important; }
.ascii-angel-constellation { z-index:3; }
.world-blimp { z-index:20; }
@media (min-width:701px) {
  .ascii-angel-constellation { top:calc(34.5% - 200px); opacity:.31; filter:grayscale(1) invert(1) contrast(3.15) brightness(1.72) drop-shadow(0 0 7px #d8faff66); }
  .arcade-portal { overflow:visible; z-index:8; }
  .arcade-portal .arcade-game-screen {
    left:24.8%; right:auto; width:72.2%; top:16.5%; height:20.5%; z-index:30;
    overflow:hidden; isolation:isolate; contain:layout paint style;
    clip-path:polygon(1% 0,99% 0,100% 4%,100% 96%,99% 100%,1% 100%,0 96%,0 4%);
    border:1px solid #64efff; background:#01030a;
    box-shadow:inset 0 0 8px #58eeff77,0 0 4px #9d62ff88;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img { position:absolute; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; transform:none!important; clip-path:none!important; }
  .arcade-portal .arcade-gif-frame { overflow:hidden; }
  .arcade-portal .arcade-gif-frame img { object-fit:fill!important; object-position:center!important; }
  .arcade-portal .led-letter-sequence { inset:0 4%; gap:.07em; font-size:clamp(8px,.88vw,14px); }
}

/* V37 mobile utility alignment. */
@media (max-width:700px) {
  .kingdom-menu-button { left:6px!important; top:35px!important; }
  .animation-toggle { top:calc(max(8px,env(safe-area-inset-top)) + 49px)!important; }
}
@media (max-width:700px) {
  .ascii-angel-constellation { top:calc(10.5% + 77px); opacity:.22; filter:grayscale(1) invert(1) contrast(3) brightness(1.48) drop-shadow(0 0 5px #d7f9ff55); }
}
.portal-dialog .dialog-actions,.club-password-dialog .dialog-actions { gap:12px; }
.portal-dialog .dialog-actions button,.club-password-dialog .dialog-actions button {
  min-height:54px; padding:0 22px; border:3px solid #6ef2ff; border-right-color:#18213a; border-bottom-color:#18213a;
  font:900 14px/1 "Lucida Console","Courier New",monospace; letter-spacing:.07em; text-shadow:1px 1px #000;
  box-shadow:inset 0 0 12px #67efff33,0 0 10px #000;
}
.portal-dialog .portal-enter,.club-password-dialog .club-password-submit { color:#160602; border-color:#ffe36b; background:linear-gradient(#fff39a,#ffad3d 48%,#ed552f); box-shadow:inset 0 0 0 2px #fff3b777,0 0 14px #ff9d3b77; text-shadow:0 1px #fff1a0; }
.portal-dialog .portal-cancel,.club-password-dialog .club-password-cancel { color:#eaffff; background:linear-gradient(#274f70,#11172c 58%,#371742); }
.portal-dialog .dialog-actions button:hover,.portal-dialog .dialog-actions button:focus-visible,.club-password-dialog .dialog-actions button:hover,.club-password-dialog .dialog-actions button:focus-visible { filter:brightness(1.25); transform:translateY(-2px); outline:none; }
@media (max-width:560px) {
  .portal-dialog .dialog-actions button,.club-password-dialog .dialog-actions button { flex:1; min-width:0; min-height:50px; padding-inline:10px; font-size:12px; }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: #01030a;
}

button,
a {
  font: inherit;
}

.heaven-home {
  --gold: #ffe467;
  --ice: #a9eeff;
  --violet: #c36cff;
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 0;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: #01030a;
}

.sky,
.stars,
.cloud-wisp {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere-background,
.atmosphere-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.world-blimp {
  --blimp-duration: 34s;
  --blimp-top: 23%;
  position: absolute;
  z-index: 5;
  top: var(--blimp-top);
  left: 0;
  width: clamp(140px, 18vw, 300px);
  aspect-ratio: 999 / 394;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: transform;
}

.world-blimp img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 7px #000b) drop-shadow(0 0 4px #4167ff55);
}

.world-blimp-screen {
  position: absolute;
  z-index: 2;
  left: 17.5%;
  top: 29.4%;
  width: 61%;
  height: 27%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ff7683;
  background: #02040aa6;
  font-family: "Courier New", monospace;
  font-size: clamp(9px, 0.9vw, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-shadow: 0 0 1px #fff, 0 0 3px #ff3b51, 1px 0 #72eaff;
  white-space: nowrap;
  clip-path: polygon(2% 5%, 98% 9%, 98% 94%, 2% 89%);
  transform: rotate(1.25deg);
  transform-origin: center;
}

.world-blimp-screen b {
  display: block;
  min-width: max-content;
  padding-left: 104%;
  animation: blimp-message-scroll 13s linear infinite;
}

.world-blimp.is-flying.from-left {
  animation: blimp-flight-left var(--blimp-duration) linear 1 both;
}

.world-blimp.is-flying.from-right {
  animation: blimp-flight-right var(--blimp-duration) linear 1 both;
}

.world-blimp.from-left img { transform: scaleX(-1); }
.world-blimp.from-right img { transform: none; }

.atmosphere-background {
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.atmosphere-shade {
  background:
    radial-gradient(ellipse at 50% 37%, transparent 0 31%, #06102324 68%, #0102089c 100%),
    linear-gradient(180deg, #00020b14 0%, transparent 35%, #09102b12 60%, #010208b8 100%);
}

.stars {
  -webkit-mask-image: linear-gradient(#000 0 42%, transparent 70%);
  mask-image: linear-gradient(#000 0 42%, transparent 70%);
  background-repeat: repeat;
  image-rendering: pixelated;
}

.stars-near {
  opacity: 0.24;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px), radial-gradient(circle, #ffe893 0 1px, transparent 1.5px);
  background-size: 67px 61px, 113px 89px;
  background-position: 7px 12px, 49px 33px;
  animation: stars-drift 34s linear infinite;
}

.stars-far {
  opacity: 0.14;
  background-image: radial-gradient(circle, #a9d9ff 0 1px, transparent 1.3px);
  background-size: 31px 37px;
  animation: stars-drift 51s linear infinite reverse;
}

.shooting-star {
  position: absolute;
  width: 96px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #fff);
  rotate: 24deg;
}

.shooting-star-one {
  top: 12%;
  left: 23%;
  animation: shoot 9s steps(18, end) infinite;
}

.shooting-star-two {
  top: 27%;
  left: 58%;
  animation: shoot 13s 4s steps(18, end) infinite;
}

.cloud-wisp {
  top: auto;
  width: 34%;
  height: 80px;
  opacity: 0.1;
  background: repeating-linear-gradient(0deg, transparent 0 8px, #cfe0ff 8px 12px, transparent 12px 18px);
  filter: blur(1px);
  animation: cloud-pass 24s steps(20, end) infinite;
}

.cloud-wisp-one {
  left: -35%;
  bottom: 46%;
}

.cloud-wisp-two {
  left: -45%;
  bottom: 31%;
  animation-delay: -12s;
  animation-duration: 31s;
}

.site-header {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: clamp(10px, 2.2vh, 20px) 28px 55px;
  background: linear-gradient(#000c, transparent);
}

.kingdom-menu-button {
  justify-self: start;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.screen-reader-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.map-monitor {
  position: relative;
  display: block;
  width: 50px;
  height: 37px;
  padding: 4px 5px 8px;
  background:
    linear-gradient(90deg, #7d280f 0 6%, transparent 6% 94%, #6a1d0b 94%),
    linear-gradient(#ffc06c 0 10%, #e76824 10% 88%, #8d2b12 88%);
  border: 2px solid #3e160c;
  border-radius: 3px;
  box-shadow: inset 2px 2px #ffd494, inset -2px -2px #7d240d, 2px 2px #0008;
  image-rendering: pixelated;
}

.map-screen {
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  overflow: hidden;
  border: 2px solid #4b1e12;
  background: #170f2c;
  box-shadow: inset 0 0 0 1px #090613;
}

.map-logo-y {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 15px;
  height: 7px;
  animation: map-bounce-y 2.9s linear infinite;
}

.map-logo-y b {
  display: block;
  width: max-content;
  color: #60f7ff;
  font: 900 7px/1 "Arial Black", sans-serif;
  letter-spacing: -0.04em;
  text-shadow: 1px 1px #004cff, 0 0 3px currentColor;
  animation: map-bounce-x 3.7s linear infinite, map-logo-color 7.4s steps(1, end) infinite;
}

.map-stand {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 17px;
  height: 5px;
  translate: -50% 0;
  border-bottom: 3px solid #6f220e;
  background: #e46422;
  box-shadow: inset 2px 0 #ffad5a, 1px 1px #2b1009;
}

.site-logo {
  position: relative;
  justify-self: center;
  display: block;
  width: clamp(190px, min(29vw, 19vh), 360px);
  text-decoration: none;
  filter: drop-shadow(3px 3px #000) drop-shadow(0 0 15px #a8cfff75);
  transition: filter 180ms ease, scale 180ms ease;
}

.site-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-logo-halo {
  position: absolute;
  z-index: 2;
  left: 25%;
  top: -7%;
  width: clamp(13px, 1.5vw, 24px);
  height: clamp(4px, 0.42vw, 7px);
  border: 2px solid #ffe66d;
  border-radius: 50%;
  background: #fff6a617;
  box-shadow: 0 0 4px #fff, 0 0 9px #ffd936;
  transform: translateX(-50%) rotate(-7deg);
  pointer-events: none;
  animation: logo-halo 1.7s steps(6, end) infinite;
}

.site-logo:hover,
.site-logo:focus-visible {
  scale: 1.025;
  filter: drop-shadow(3px 3px #000) drop-shadow(0 0 12px var(--gold));
}

.kingdom-menu {
  position: absolute;
  z-index: 60;
  top: 58px;
  left: 25px;
  width: min(310px, calc(100% - 50px));
  padding: 10px;
  border: 2px ridge #dce5f4;
  background: #060813f2;
  box-shadow: 8px 8px #0009;
}

.kingdom-menu[hidden] {
  display: none;
}

.kingdom-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px dotted #596075;
  padding: 10px 8px;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.kingdom-menu button:hover,
.kingdom-menu button:focus-visible {
  padding-left: 17px;
  color: var(--gold);
  background: #ffffff10;
}

.scene-layer {
  position: absolute;
  left: 50%;
  transform-origin: center;
  image-rendering: pixelated;
}

.scene-layer img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: pixelated;
}

.castle-realm {
  z-index: 8;
  top: 9.5%;
  width: min(29vw, 31vh, 430px);
  translate: -50% 0;
  animation: castle-float 7s steps(14, end) infinite;
  filter: drop-shadow(0 0 15px #7cc8ff40);
}

.waterfall {
  position: absolute;
  z-index: 2;
  top: 60%;
  width: 2.5%;
  height: 31%;
  opacity: 0.78;
  background: repeating-linear-gradient(180deg, #eaffff 0 3px, #58d8ff 3px 8px, #1676e9 8px 11px, transparent 11px 15px);
  background-size: 100% 30px;
  mix-blend-mode: screen;
  animation: waterfall-flow 0.65s steps(5, end) infinite;
}

.waterfall-left {
  left: 30.6%;
}

.waterfall-right {
  right: 34.5%;
}

.castle-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff7a0;
  box-shadow: 8px -4px #7edfff, -7px 6px #fff;
  animation: castle-sparkle 2.4s steps(6, end) infinite;
}

.castle-spark-one {
  left: 19%;
  top: 67%;
}

.castle-spark-two {
  right: 18%;
  top: 72%;
  animation-delay: -1.2s;
}

.house-realm {
  z-index: 14;
  top: 4%;
  width: min(82vw, 117vh, 1330px);
  aspect-ratio: 1800 / 620;
  translate: -50% 0;
  filter: drop-shadow(0 12px 15px #000b);
}

.house-island {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: fill;
  will-change: transform;
}

.house-island-upper-left {
  z-index: 0;
  clip-path: none;
  transform: translate(calc(5.2% - 10px), calc(-7% - 24px));
}

.house-island-lower-left {
  z-index: 2;
  clip-path: none;
  transform: translate(-3.6%, -4.2%);
}

.house-island-lower-right {
  z-index: 2;
  clip-path: none;
  transform: translate(3.6%, -4.2%);
}

.house-island-upper-right {
  z-index: 0;
  clip-path: none;
  transform: translate(calc(-5.2% + 10px), calc(-7% - 24px));
}

.cloud-bridge {
  z-index: 13;
  top: 31%;
  bottom: 18px;
  width: 112%;
  height: auto;
  translate: -50% 0;
  opacity: 0.97;
  filter: drop-shadow(0 8px 15px #23376a45);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 8%, #000 100%);
  mask-image: linear-gradient(transparent 0, #000 8%, #000 100%);
  pointer-events: none;
}

.house-portals,
.district-portals {
  position: absolute;
  inset: 0;
  display: grid;
}

.house-portals {
  z-index: 5;
  grid-template-columns: repeat(4, 1fr);
}

.house-portals button {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.house-portals span {
  position: absolute;
  left: 50%;
  top: 19%;
  translate: -50% 0;
  opacity: 0;
  min-width: 92px;
  border: 2px ridge #dbe9ff;
  padding: 6px 8px;
  color: #fff;
  background: #07142be8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 2px 2px #000;
  transition: opacity 130ms ease, translate 130ms ease;
}

.house-portals button:hover span,
.house-portals button:focus-visible span {
  opacity: 1;
  translate: -50% -7px;
  box-shadow: 0 0 15px #7fe8ff;
}

.window-glint {
  position: absolute;
  z-index: 4;
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 9px #7de9ff, 7px 0 #85dfff, 0 7px #fff3a0;
  pointer-events: none;
  animation: window-glint 2.2s steps(5, end) infinite;
}

.glint-one { left: 18%; top: 30%; }
.glint-two { left: 38%; top: 52%; animation-delay: -0.5s; }
.glint-three { left: 63%; top: 52%; animation-delay: -1s; }
.glint-four { left: 82%; top: 28%; animation-delay: -1.5s; }

.district-realm {
  z-index: 22;
  bottom: 18px;
  width: min(100%, 1900px);
  translate: -50% 0;
  filter: drop-shadow(0 -4px 12px #0a1d57a8);
}

.district-strip {
  position: relative;
  width: 100%;
}

.mobile-district-realm {
  display: none;
}

.district-art {
  display: block;
  width: 100%;
  height: auto;
}

.district-art img {
  display: block;
  width: 100%;
  height: auto;
}

.district-portals {
  grid-template-columns: 9fr 29fr 16fr 16fr 15fr 6fr 9fr;
}

.district-portal {
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: filter 130ms ease;
}

.portal-label,
.arcade-digital-sign,
.mystery-club-label,
.coming-soon-sign {
  position: absolute;
  left: 7%;
  right: 7%;
  display: grid;
  place-items: center;
  padding: 3px;
  color: #fff;
  background: #07101ed0;
  font-size: clamp(7px, 0.72vw, 11px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 2px 2px #000;
  transition: translate 130ms ease, filter 130ms ease, opacity 130ms ease;
}

.district-portal:not(:disabled):hover,
.district-portal:not(:disabled):focus-visible {
  filter: brightness(1.4);
}

/* Casino marquee and small awning-light animations */
.casino-main-sign {
  position: absolute;
  left: 23%;
  right: 23%;
  top: 53.5%;
  height: 13%;
  display: grid;
  place-content: center;
  color: #fff9dc;
  background: linear-gradient(90deg, #07162aeb, #350f28f2 48%, #230709eb);
  border: 1px solid #ffd36e;
  box-shadow: inset 0 0 7px #ff6d2b88, 0 0 6px #ffb02f;
  font-family: Georgia, serif;
  text-align: center;
  text-shadow: 1px 1px #000, 0 0 5px #fff2a0;
  animation: casino-title 1.4s steps(4, end) infinite;
}

.casino-main-sign b {
  font-size: clamp(6px, 0.95vw, 18px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #fff;
}

.casino-main-sign .heaven-word {
  color: #fff;
  text-shadow: 1px 1px #000, 0 0 5px #fff, 0 0 8px #b9dcff;
}

.casino-main-sign .hell-word {
  color: #ff4242;
  text-shadow: 1px 1px #000, 0 0 5px #ff6a45, 0 0 8px #e50024;
}

.casino-main-sign em {
  color: #ffdc55;
  font-size: 0.72em;
  font-style: normal;
}

.casino-main-sign small {
  color: #ff9a42;
  font-size: clamp(7px, 0.9vw, 17px);
  font-weight: 900;
  letter-spacing: 0.2em;
}

.awning-die {
  position: absolute;
  top: 55.5%;
  width: clamp(6px, 1.05vw, 18px);
  aspect-ratio: 1;
  border: 1px solid #ffdb84;
  background: #d42125;
  box-shadow: inset 0 0 2px #ffecaa, 0 0 5px #ff491f;
  rotate: 45deg;
  animation: dice-roll 1.55s steps(4, end) infinite;
}

.awning-die::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  left: 2px;
  top: 2px;
  background: #fff5ca;
  box-shadow: 5px 0 #fff5ca, 2.5px 2.5px #fff5ca, 0 5px #fff5ca, 5px 5px #fff5ca;
}

.awning-die-left { left: 4%; }
.awning-die-right { right: 4%; animation-delay: -0.78s; }

.casino-seven-cards {
  position: absolute;
  left: 8.5%;
  top: 60%;
  display: flex;
  gap: 1px;
  rotate: -3deg;
}

.casino-seven-cards b {
  display: grid;
  place-items: center;
  width: clamp(7px, 1.1vw, 21px);
  height: clamp(10px, 1.62vw, 31px);
  border: 1px solid #ffeab5;
  color: #e5242e;
  background: #fff9e6;
  font-family: Arial, sans-serif;
  font-size: clamp(3px, 0.55vw, 10px);
  line-height: 1;
  box-shadow: 0 0 4px #fff1a0;
}

.casino-seven-cards i {
  position: absolute;
  left: 22%;
  bottom: 112%;
  width: 58%;
  height: 28%;
  border: 1px solid #fff09b;
  border-radius: 50%;
  box-shadow: 0 0 5px #fff, 0 0 10px #ffd83b;
  animation: accessory-glow 1.2s steps(4, end) infinite;
}

.casino-dice-fire {
  position: absolute;
  right: 16%;
  top: 49.5%;
  width: 3px;
  height: 7px;
  background: #fff47b;
  box-shadow: -3px 4px #ff9a18, 3px 3px #ff5129, 0 -3px #ffd72f;
  animation: dice-fire 0.55s steps(3, end) infinite;
}

.casino-palm {
  position: absolute;
  z-index: 3;
  bottom: calc(1.5% + 11px);
  width: clamp(28px, 3.8vw, 60px);
  height: clamp(46px, 8.3vw, 126px);
  background: url("assets/casino-palm.png") center bottom / contain no-repeat;
  filter: drop-shadow(0 2px 2px #000a) drop-shadow(0 0 2px #f0b84c66);
  transform-origin: bottom;
  animation: palm-sway 2.8s steps(5, end) infinite alternate;
  pointer-events: none;
}

.casino-palm::before,
.casino-palm::after { content: none; }

.casino-palm-left { left: 5%; transform: scaleX(-1); }
.casino-palm-right { right: 5%; animation-delay: -1.4s; transform: none; }

.arcade-digital-sign {
  top: 58.1%;
  height: 6.9%;
  min-height: 0;
  left: 18%;
  right: 13%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.45vw, 8px);
  color: #bbfbff;
  background: transparent;
  font-size: clamp(5px, 0.68vw, 11px);
  letter-spacing: 0.09em;
  text-shadow: 0 0 5px #25ddff, 2px 2px #000;
  box-shadow: none;
  animation: arcade-sign 0.95s steps(3, end) infinite;
}

.arcade-digital-sign b {
  font: inherit;
}

.coin-halo {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 12px;
  border: 0 solid #fff3a0;
  border-radius: 50%;
  background: #ffd33d;
  box-shadow: inset 2px 0 #fff2a0, 0 0 5px #ffcc31;
  animation: coin-to-halo 1.8s steps(6, end) infinite;
}

.mecha-halo {
  position: absolute;
  z-index: 3;
  left: 106%;
  top: 12.5%;
  width: clamp(16px, 2vw, 31px);
  height: clamp(5px, 0.62vw, 10px);
  border: 2px solid #ffe36c;
  border-radius: 50%;
  background: #fff4a014;
  box-shadow: 0 0 4px #fff, 0 0 10px #ffc632;
  transform: translateX(-50%) rotate(-18deg);
  pointer-events: none;
  animation: mecha-halo 1.35s steps(5, end) infinite;
}

.arcade-portal::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 8%;
  width: 18%;
  height: 20%;
  opacity: 0.62;
  background: repeating-linear-gradient(125deg, transparent 0 5px, #85f8ff 5px 8px, transparent 8px 13px);
  clip-path: polygon(40% 0, 100% 100%, 0 100%);
  animation: tractor-beam 1.25s steps(5, end) infinite;
  pointer-events: none;
}

/* The upper arcade billboard is deliberately code-driven for easy replacement. */
.arcade-game-screen {
  position: absolute;
  left: 26.5%;
  right: 19%;
  top: 17%;
  height: 19.5%;
  overflow: hidden;
  border: 1px solid #6be9ff;
  background:
    radial-gradient(circle at 18% 20%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 16%, #fff36c 0 1px, transparent 1.5px),
    linear-gradient(#050a23, #10194b 68%, #07131f 69%);
  box-shadow: inset 0 0 8px #32147b, 0 0 5px #23cfff;
  image-rendering: pixelated;
  animation: game-screen-color 2.4s steps(4, end) infinite;
}

.arcade-gif-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  animation: arcade-gif-cycle 9s steps(1, end) infinite;
}

.arcade-gif-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
  image-rendering: pixelated;
}

.arcade-gif-racer { animation-delay: 0s; }
.arcade-gif-invaders { animation-delay: -6s; }
.arcade-gif-led { animation-delay: -3s; }

.arcade-gif-led::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000e;
}

.led-letter-sequence {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  font: 900 clamp(7px, 1.05vw, 17px)/1 "Arial Black", sans-serif;
  font-style: normal;
}

.led-letter-sequence i {
  color: #143d1b;
  font-style: normal;
  text-shadow: 1px 1px #020a04;
  animation: led-letter-light 9s steps(1, end) infinite;
}

.led-letter-sequence i:nth-child(2) { animation-delay: 0.32s; }
.led-letter-sequence i:nth-child(3) { animation-delay: 0.64s; }
.led-letter-sequence i:nth-child(4) { animation-delay: 0.96s; }
.led-letter-sequence i:nth-child(5) { animation-delay: 1.28s; }
.led-letter-sequence i:nth-child(6) { animation-delay: 1.6s; }

.arcade-neon-kit,
.arcade-cabinet-lights {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.arcade-entrance-glow,
.arcade-neon-rail {
  position: absolute;
  display: block;
}

.arcade-entrance-glow {
  left: 31.5%;
  right: 17%;
  bottom: 3.4%;
  height: 25.7%;
  border: 0;
  background:
    linear-gradient(90deg, #ff48dc, #43eaff, #a65cff, #ff48dc) 0 0 / 300% 2px no-repeat,
    linear-gradient(180deg, #ff48dc, #43eaff, #a65cff, #ff48dc) 0 0 / 2px 300% no-repeat,
    linear-gradient(180deg, #43eaff, #a65cff, #ff48dc, #43eaff) 100% 0 / 2px 300% no-repeat;
  box-shadow: inset 0 2px 4px #4cecff19, 0 -1px 5px #ff36d877, -1px 0 4px #39e9ff66, 1px 0 4px #a34dff66;
  opacity: 0.84;
  filter: drop-shadow(0 0 2px #50e8ff) drop-shadow(0 0 3px #ff45d4);
  clip-path: polygon(0 0, 72% 0, 72% 14%, 100% 14%, 100% 100%, 0 100%);
  animation: arcade-rgb-travel 5.8s linear infinite;
}

.arcade-neon-rail {
  display: none;
}

.arcade-neon-rail.rail-left { left: 8%; top: 39%; width: 2px; height: 47%; color: #ff42d6; }
.arcade-neon-rail.rail-right { right: 6%; top: 38%; width: 2px; height: 49%; color: #5eff8a; animation-delay: -0.45s; }
.arcade-neon-rail.rail-top { left: 10%; top: 38%; width: 84%; height: 2px; color: #4be9ff; animation-delay: -0.9s; }

.arcade-cabinet-lights i {
  position: absolute;
  top: 43%;
  width: clamp(3px, 0.32vw, 5px);
  height: clamp(3px, 0.32vw, 5px);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, currentColor 62%, #07122b 38%);
  box-shadow: inset 1px 1px #fff7, 0 0 2px currentColor;
  animation: cabinet-light-blink 2.8s ease-in-out infinite;
}

.arcade-cabinet-lights i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  background: currentColor;
  box-shadow: 2px 1px currentColor, 1px 2px #fff9;
  animation: cabinet-screen-sprite 1.35s steps(4, end) infinite;
}

.arcade-cabinet-lights i:nth-child(1) { left: 17%; top: 43%; color: #4deaff; }
.arcade-cabinet-lights i:nth-child(2) { left: 34%; top: 45%; color: #ff4bd8; animation-delay: -0.3s; }
.arcade-cabinet-lights i:nth-child(3) { left: 52%; top: 43%; color: #fff25a; animation-delay: -0.58s; }
.arcade-cabinet-lights i:nth-child(4) { left: 72%; top: 45%; color: #63ff83; animation-delay: -0.86s; }
.arcade-cabinet-lights i:nth-child(5) { left: 23%; top: 53%; color: #fff25a; animation-delay: -1.1s; }
.arcade-cabinet-lights i:nth-child(6) { left: 42%; top: 55%; color: #53f5ff; animation-delay: -1.45s; }
.arcade-cabinet-lights i:nth-child(7) { left: 61%; top: 53%; color: #ff5bdb; animation-delay: -1.8s; }
.arcade-cabinet-lights i:nth-child(8) { left: 80%; top: 55%; color: #7bff8a; animation-delay: -2.15s; }

.arcade-star-machines {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.arcade-star-machines i {
  position: absolute;
  top: 74.5%;
  width: 7px;
  height: 7px;
  color: #fff272;
  background: currentColor;
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
  box-shadow: 0 0 3px #5aeaff, 0 0 7px currentColor;
  animation: arcade-star-sprite 2.2s steps(4, end) infinite;
}

.arcade-star-machines i:first-child { left: 20.5%; }
.arcade-star-machines i:last-child { left: 86.5%; color: #64efff; animation-delay: -1.1s; }

.arcade-side-sign {
  position: absolute;
  z-index: 5;
  left: -10%;
  top: 38.5%;
  width: 29%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 3px #25dfff88);
  animation: arcade-blade-pulse 3.8s ease-in-out infinite;
}

.arcade-side-sign img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.arcade-plasma-canister {
  position: absolute;
  z-index: 5;
  left: 18.5%;
  top: 37.5%;
  width: 9%;
  aspect-ratio: 2 / 3;
  pointer-events: none;
  filter: saturate(1.25) brightness(1.08) drop-shadow(0 0 3px #1fdfffaa) drop-shadow(0 0 6px #6b48ff99);
  animation: plasma-canister-hum 3.6s steps(8, end) infinite;
}

.arcade-plasma-canister::before {
  content: none;
}

.arcade-plasma-canister img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 1;
}

.arcade-plasma-canister i {
  position: absolute;
  z-index: 2;
  left: 34%;
  top: 48%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 10%, #53f6ff 16% 29%, #714cff 46%, transparent 68%);
  box-shadow: 0 0 4px #fff, 0 0 9px #28eaff, 0 0 14px #713cff;
  mix-blend-mode: screen;
  animation: plasma-core-orbit 1.8s steps(6, end) infinite;
}

.arcade-plasma-canister i::before,
.arcade-plasma-canister i::after {
  content: "";
  position: absolute;
  inset: -32%;
  border: 1px dashed #83fbff;
  border-radius: 50%;
  box-shadow: 0 -2px #fff, 2px 1px #7a55ff, -2px 2px #36eaff;
  animation: plasma-electric-ring 1.1s steps(7, end) infinite;
}

.arcade-plasma-canister i::after {
  inset: -60% 4%;
  rotate: 90deg;
  animation-direction: reverse;
  animation-duration: 0.85s;
}

.ufo-glow {
  position: absolute;
  z-index: 2;
  left: 4%;
  top: 0;
  width: 28%;
  height: 11%;
  border-radius: 50%;
  background: #65ff8a1f;
  box-shadow: 0 0 8px #44ff77, 0 0 16px #19c95a88;
  filter: blur(1px);
  animation: ufo-green-glow 2.7s steps(5, end) infinite;
  pointer-events: none;
}

.mecha-eye-glow {
  position: absolute;
  z-index: 7;
  left: 98.2%;
  top: 24.8%;
  width: 3px;
  height: 1.5px;
  border-radius: 50%;
  background: #eaffed;
  box-shadow: 0 0 1px #fff, 0 0 3px #54ff7a, 0 0 6px #00e45b;
  opacity: 0.18;
  transform: rotate(12deg);
  animation: mecha-eye-scan 9s ease-in-out infinite;
  pointer-events: none;
}

.mecha-eye-glow::after {
  content: "";
  position: absolute;
  left: clamp(10px, 0.98vw, 19px);
  top: 0;
  width: 3px;
  height: 1.5px;
  border-radius: inherit;
  background: inherit;
  box-shadow: inherit;
  transform: rotate(-23deg);
}

.gundam-foreground {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  image-rendering: pixelated;
  clip-path: polygon(52% 13%, 57.2% 13%, 61% 29%, 60.8% 49%, 56.8% 57%, 55.8% 70%, 53.8% 81%, 47.5% 81%, 49% 65%, 50.8% 49%, 51.5% 35%, 51.7% 23%);
}

.muzeum-portal .portal-label {
  opacity: 0;
}

.cathedral-scroll-sign {
  position: absolute;
  top: 47.8%;
  left: 55%;
  right: auto;
  width: 50%;
  height: 4.6%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #2ae9ff;
  color: #c9fbff;
  background: #031726d9;
  font-size: clamp(8px, 0.84vw, 14px);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px #168bbd, 0 0 11px #16bfff;
}

.cathedral-scroll-sign b {
  display: inline-block;
  width: max-content;
  font: inherit;
  font-weight: 700;
  text-shadow: 0 0 5px #4eeaff;
  animation: cathedral-scroll 8.8s linear infinite;
}

.mystery-club-label {
  top: 72%;
  left: 15%;
  right: 15%;
  min-height: 17px;
  padding: 2px;
  opacity: 0.38;
  color: #c3afd0;
  background: #0908129c;
  border: 1px dotted #584963;
  font-size: clamp(4px, 0.43vw, 7px);
  letter-spacing: 0.05em;
  text-shadow: 1px 1px #000;
}

.mystery-club-portal:hover .mystery-club-label,
.mystery-club-portal:focus-visible .mystery-club-label {
  opacity: 0.82;
  color: #eadbff;
  box-shadow: 0 0 5px #8d55a2;
}

.coming-soon-portal {
  cursor: not-allowed;
}

.coming-soon-portal::after {
  display: none;
}

.coming-soon-sign {
  z-index: 2;
  top: 66%;
  left: 3%;
  right: 3%;
  min-height: 34px;
  opacity: 0;
  color: #c6cad0;
  background: transparent;
  border: 0;
  font-size: clamp(5px, 0.51vw, 8px);
  letter-spacing: 0.04em;
  text-shadow: 2px 2px #000;
}

.coming-soon-one .coming-soon-sign {
  left: -10%;
  right: -10%;
}

.muzeum-sun-ornament {
  position: absolute;
  z-index: 4;
  left: 62%;
  top: 29.25%;
  width: clamp(17px, 1.8vw, 28px);
  height: auto;
  translate: -50% -50%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 3px #ffbf22);
  animation: muzeum-sun-glow 3.6s ease-in-out infinite;
  pointer-events: none;
}

.district-portal > .muzeum-sun-ornament {
  width: clamp(17px, 1.8vw, 28px);
  max-width: 28px;
  height: auto;
}

.muzeum-sun-ornament::before,
.muzeum-sun-ornament::after {
  content: none;
}

.construction-detail {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  top: 31%;
  bottom: 4%;
  opacity: 0.78;
  background: none;
  pointer-events: none;
}

.construction-detail::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6%;
  height: 8px;
  border: 1px solid #d4a52b;
  background: repeating-linear-gradient(135deg, #f7c62d 0 4px, #24211d 4px 8px);
  box-shadow: 0 0 3px #ffd24966;
}

.construction-detail::after {
  content: none;
}

.mobile-construction-details {
  position: absolute;
  z-index: 3;
  left: 62.2%;
  top: 79.4%;
  width: 27%;
  height: 12.5%;
  pointer-events: none;
}

.maintenance-badge {
  position: absolute;
  z-index: 8;
  left: 5%;
  right: 5%;
  top: 56%;
  display: none;
  padding: clamp(4px, 0.45vw, 8px) 3px;
  border: 2px solid #9ca2ac;
  background: #08090cf2;
  color: #fff6c7;
  box-shadow: inset 0 0 0 2px #30343a, 0 0 8px #000;
  font-family: "Courier New", monospace;
  line-height: 0.94;
  text-align: center;
  text-shadow: 2px 2px #000;
  transform: rotate(-2deg);
}

.maintenance-badge b,
.maintenance-badge strong { display: block; }
.maintenance-badge b { color: #ffd348; font-size: clamp(7px, 0.72vw, 12px); letter-spacing: 0.18em; }
.maintenance-badge strong { font-size: clamp(8px, 0.88vw, 15px); letter-spacing: 0.02em; }

.muzeum-maintenance .muzeum-portal::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 3%;
  right: 8%;
  top: 15%;
  bottom: 0;
  background: #05070b52;
  backdrop-filter: grayscale(1) brightness(0.52);
  clip-path: polygon(14% 0, 84% 0, 100% 23%, 100% 100%, 0 100%, 0 25%);
}

.muzeum-maintenance .muzeum-portal .maintenance-badge {
  left: 4%;
  right: 2%;
  display: block;
}
.muzeum-maintenance .desktop-gundam-foreground,
.muzeum-maintenance .mobile-gundam-foreground { z-index: 10 !important; }
.mobile-maintenance-shade { display: none; }

.mobile-construction-details i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44.5%;
  opacity: 0.82;
  background: none;
}

.mobile-construction-details i:first-child { left: 1%; }
.mobile-construction-details i:last-child { right: 1%; }

.mobile-construction-details i::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 38%;
  height: 4px;
  border: 1px solid #b98e25;
  background: repeating-linear-gradient(135deg, #f5c72e 0 3px, #29241b 3px 6px);
}

.mobile-construction-details i::before {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 21%;
  width: 2px;
  height: 7px;
  background: #9a7938;
  box-shadow: 29px 0 #725a31;
}

/* Light glows align with the two physical lamp sprites in pixel-district.webp. */
.street-lamp-glow {
  position: absolute;
  z-index: 4;
  top: 58%;
  width: clamp(4px, 0.55vw, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff7bf;
  box-shadow: 0 0 5px #fff, 0 0 13px #ffb43c, 0 0 24px #ff8c1f99;
  pointer-events: none;
  animation: lamp-pulse 1.65s steps(5, end) infinite;
}

.lamp-glow-one { left: 38.35%; }
.lamp-glow-two {
  left: 86%;
  top: 69.7%;
  animation: lamp-flicker 7s steps(1, end) infinite;
}

.pixel-road {
  position: absolute;
  z-index: 21;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  border-top: 3px solid #707785;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, #ddd37a 42px 72px, transparent 72px 114px) center / auto 3px no-repeat,
    repeating-linear-gradient(90deg, #181a22 0 48px, #20232c 48px 96px);
  box-shadow: inset 0 3px #11141c;
  image-rendering: pixelated;
}

.pixel-road i {
  position: absolute;
  inset: 6px 0 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 36px, #f0dc71 36px 62px, transparent 62px 98px);
  opacity: 0.85;
}

.animation-toggle {
  position: fixed;
  z-index: 9290;
  top: calc(max(10px, env(safe-area-inset-top)) + 53px);
  right: max(12px, env(safe-area-inset-right));
  bottom: auto;
  width: 42px;
  height: 24px;
  border: 2px solid #35100f;
  border-radius: 7px;
  padding: 0;
  color: #fff;
  background: linear-gradient(#ff5b64 0 18%, #d7182d 18% 76%, #8d0719 76%);
  box-shadow: inset 2px 2px #ff979e, inset -2px -2px #710514, 2px 2px #0009;
  cursor: pointer;
  image-rendering: pixelated;
}

.animation-toggle span::before {
  content: "Ⅱ";
  color: #fff;
  font: 900 12px/1 "Arial Black", sans-serif;
  text-shadow: 1px 1px #5f0010;
}

.animation-toggle[aria-pressed="true"] {
  border-color: #183311;
  background: linear-gradient(#8cff78 0 18%, #38ae3a 18% 76%, #146a21 76%);
  box-shadow: inset 2px 2px #c9ffbd, inset -2px -2px #0d5418, 2px 2px #0009;
}

.animation-toggle[aria-pressed="true"] span::before {
  content: "▶";
  font-size: 11px;
  text-shadow: 1px 1px #0b5414;
}

.portal-dialog,
.club-password-dialog {
  width: min(470px, calc(100% - 28px));
  border: 4px ridge #d5d9e1;
  padding: 0;
  color: #101010;
  background: #c5c9d1;
  box-shadow: 12px 12px #0009;
}

.portal-dialog::backdrop,
.club-password-dialog::backdrop {
  background: #02040a99;
  backdrop-filter: blur(2px);
}

.dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  color: #fff;
  background: linear-gradient(90deg, #030303 0%, #252525 48%, #777 100%);
  font-weight: 700;
}

.dialog-close {
  width: 26px;
  height: 24px;
  border: 2px outset #fff;
  padding: 0;
  color: #000;
  background: #c5c9d1;
  cursor: pointer;
}

.dialog-content {
  padding: 24px;
  background-image: linear-gradient(#fff1 50%, transparent 50%);
  background-size: 100% 4px;
}

.club-password-form {
  padding: 24px;
  background-image: linear-gradient(#fff1 50%, transparent 50%);
  background-size: 100% 4px;
}

.club-password-form h1 {
  margin: 0 0 18px;
  color: #111;
  font-family: Georgia, serif;
  font-size: 26px;
}

.club-password-form label {
  display: block;
  margin-bottom: 5px;
  color: #222;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.club-password-form input {
  width: 100%;
  border: 3px inset #fff;
  padding: 9px 10px;
  color: #101010;
  background: #fff;
  font: 700 16px "Courier New", monospace;
  letter-spacing: 0.18em;
  outline: none;
}

.club-password-form input:focus {
  box-shadow: 0 0 0 2px #4d4d4d, 0 0 10px #888;
}

.club-password-status {
  min-height: 18px;
  margin: 7px 0 10px;
  color: #a60022;
  font-size: 11px;
  font-weight: 700;
}

.portal-number {
  margin: 0 0 8px;
  color: #333;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.dialog-content h1 {
  margin: 0 0 9px;
  color: #111;
  font-family: Georgia, serif;
  font-size: 28px;
}

.portal-description {
  min-height: 40px;
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.5;
}

.dialog-actions {
  display: flex;
  gap: 10px;
}

.dialog-actions button {
  border: 3px outset #fff;
  padding: 8px 13px;
  color: #080808;
  background: #c5c9d1;
  font-weight: 700;
  font-size: 10px;
  cursor: pointer;
}

.dialog-actions button:active:not(:disabled) {
  border-style: inset;
}

.dialog-actions button:disabled {
  color: #555;
  cursor: not-allowed;
}

/* Destination-specific portal windows. The ??? CLUB password window intentionally keeps the original skin. */
.portal-dialog[data-theme] {
  --portal-edge: #70eaff;
  --portal-edge-dark: #17384c;
  --portal-glow: #70eaff66;
  --portal-ink: #eaffff;
  --portal-title: #fff5b2;
  border-color: var(--portal-edge);
  color: var(--portal-ink);
  background: #050813;
  box-shadow: 0 0 0 4px #010208, 12px 12px #0009, 0 0 30px var(--portal-glow);
}
.portal-dialog[data-theme] .dialog-titlebar { color: #fff; background: linear-gradient(90deg, var(--portal-edge-dark), #090b14 58%, var(--portal-edge)); text-shadow: 0 0 7px var(--portal-edge); }
.portal-dialog[data-theme] .dialog-close { color: #fff; background: var(--portal-edge-dark); border-color: var(--portal-edge); }
.portal-dialog[data-theme] .dialog-content { background-color: #070a13; background-image: linear-gradient(var(--portal-glow) 1px, transparent 1px), linear-gradient(90deg, var(--portal-glow) 1px, transparent 1px), radial-gradient(circle at 50% 25%, var(--portal-glow), transparent 55%); background-size: 12px 12px, 12px 12px, auto; }
.portal-dialog[data-theme] .portal-number { color: var(--portal-edge); text-shadow: 0 0 5px var(--portal-edge); }
.portal-dialog[data-theme] .dialog-content h1 { color: var(--portal-title); font-family: "Courier New", monospace; text-shadow: 3px 3px #000, 0 0 10px var(--portal-edge); }
.portal-dialog[data-theme] .portal-description { color: var(--portal-ink); }
.portal-dialog[data-theme] .dialog-actions button { border-color: var(--portal-edge); color: var(--portal-title); background: linear-gradient(var(--portal-edge-dark), #060914); box-shadow: inset 0 0 10px var(--portal-glow); }
.portal-dialog[data-theme="kingdom"] { --portal-edge: #ffe34f; --portal-edge-dark: #534611; --portal-glow: #ffe34f55; --portal-title: #fffbd0; }
.portal-dialog[data-theme="tennis"] { --portal-edge: #72fff0; --portal-edge-dark: #13473f; --portal-glow: #72fff066; --portal-title: #fff176; }
.portal-dialog[data-theme="casino"] { --portal-edge: #ffb139; --portal-edge-dark: #5c1618; --portal-glow: #ff482f66; --portal-title: #fff0aa; }
.portal-dialog[data-theme="arcade"] { --portal-edge: #52f4ff; --portal-edge-dark: #35135e; --portal-glow: #ff50e16b; --portal-title: #90ff7b; }
.portal-dialog[data-theme="muzeum"] { --portal-edge: #eac878; --portal-edge-dark: #38452a; --portal-glow: #eac87855; --portal-title: #fff4cb; }
.portal-dialog[data-theme="cathedral"] { --portal-edge: #49dcff; --portal-edge-dark: #122a62; --portal-glow: #714eff66; --portal-title: #ccf8ff; }
.portal-dialog[data-theme="sky"] { --portal-edge: #b9eeff; --portal-edge-dark: #1e4a71; --portal-glow: #8ddcff5c; --portal-title: #fffbd7; }
.portal-dialog[data-theme="archive"] { --portal-edge: #b694ff; --portal-edge-dark: #37245a; --portal-glow: #b694ff55; --portal-title: #e9ddff; }

.animations-paused *,
.animations-paused *::before,
.animations-paused *::after {
  animation-play-state: paused !important;
}

@keyframes stars-drift { to { background-position: 74px 70px, 162px 122px; } }
@keyframes shoot { 0%, 72% { opacity: 0; translate: -180px -100px; } 76% { opacity: 1; } 86%, 100% { opacity: 0; translate: 520px 270px; } }
@keyframes cloud-pass { to { translate: 430%; } }
@keyframes castle-float { 50% { margin-top: -7px; } }
@keyframes waterfall-flow { to { background-position: 0 30px; } }
@keyframes castle-sparkle { 50% { opacity: 0.22; translate: 0 8px; } }
@keyframes window-glint { 50% { opacity: 0.2; scale: 0.6; } }
@keyframes logo-halo { 50% { opacity: 0.52; translate: 0 -2px; filter: brightness(1.5); } }
@keyframes map-bounce-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
@keyframes map-bounce-x { 0%, 100% { translate: 0 0; } 50% { translate: 16px 0; } }
@keyframes map-logo-color { 0%, 100% { color: #63f7ff; } 25% { color: #ff5bd8; } 50% { color: #ffe65b; } 75% { color: #75ff6c; } }
@keyframes casino-title { 50% { filter: brightness(1.35); box-shadow: inset 0 0 10px #ff6d2bbb, 0 0 11px #ffb02f; } }
@keyframes dice-roll { 25% { rotate: 135deg; filter: brightness(1.5); } 50% { rotate: 225deg; } 75% { rotate: 315deg; filter: hue-rotate(-12deg); } }
@keyframes accessory-glow { 50% { opacity: 0.55; filter: brightness(1.6); translate: 0 -1px; } }
@keyframes dice-fire { 50% { translate: 1px -2px; box-shadow: 3px 4px #ff9a18, -3px 3px #ff5129, 0 -4px #fff76f; } }
@keyframes palm-sway { to { rotate: 1.5deg; } }
@keyframes arcade-sign { 0%, 100% { color: #c7ffff; } 35% { color: #ffbfff; filter: hue-rotate(38deg) brightness(1.35); } 70% { color: #fff69b; } }
@keyframes coin-to-halo {
  0%, 35% { width: 8px; height: 12px; border-width: 0; background: #ffd33d; rotate: 0deg; }
  45% { width: 2px; height: 12px; border-width: 0; background: #fff2a0; rotate: 0deg; }
  60%, 90% { width: 14px; height: 5px; border-width: 2px; background: transparent; rotate: -5deg; }
  100% { width: 8px; height: 12px; border-width: 0; background: #ffd33d; rotate: 0deg; }
}
@keyframes mecha-halo { 50% { opacity: 0.48; translate: 0 -2px; filter: brightness(1.45); } }
@keyframes tractor-beam { 50% { opacity: 0.28; translate: 3px -2px; } }
@keyframes game-screen-color { 50% { filter: brightness(1.13); } }
@keyframes arcade-gif-cycle { 0%, 32.9% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes led-letter-light {
  0%, 66%, 100% { color: #123b1a; text-shadow: 1px 1px #020a04; }
  67%, 96% { color: #63ff70; text-shadow: 0 0 3px #ffffff, 0 0 7px #27ff43, 1px 1px #063d12; }
  97%, 99% { color: #fff15b; text-shadow: 0 0 5px #ffffff, 0 0 9px #ffd62e; }
}
@keyframes arcade-rgb-outline {
  0%, 100% { border-color: #db54e8; box-shadow: inset 0 0 3px #31d8ff, 0 0 3px #c84ce0; }
  33% { border-color: #4ddaff; box-shadow: inset 0 0 3px #8b60ff, 0 0 4px #3bcfff; }
  66% { border-color: #8b6cff; box-shadow: inset 0 0 3px #ff5dcc, 0 0 3px #8d67ff; }
}
@keyframes arcade-rgb-travel {
  0% { background-position: 0 0, 0 0, 100% 0; filter: drop-shadow(0 0 3px #52eaff) drop-shadow(0 0 5px #ff45d4); }
  50% { background-position: 100% 0, 0 100%, 100% 100%; filter: drop-shadow(0 0 6px #ff58dd) drop-shadow(0 0 9px #4aeaff); }
  100% { background-position: 200% 0, 0 200%, 100% 200%; filter: drop-shadow(0 0 3px #8c62ff) drop-shadow(0 0 6px #38eaff); }
}
@keyframes arcade-neon-pulse { 50% { opacity: 0.35; filter: hue-rotate(90deg) brightness(1.6); } }
@keyframes cabinet-light-blink { 0%, 100% { opacity: 0.28; } 42%, 58% { opacity: 1; filter: brightness(1.45); } }
@keyframes cabinet-screen-sprite { 0%, 100% { translate: 0 0; opacity: 0.5; } 35% { translate: 1px 0; opacity: 1; } 70% { translate: 0 1px; opacity: 0.8; } }
@keyframes arcade-star-sprite { 0%, 100% { opacity: 0.35; scale: 0.72; filter: hue-rotate(0deg); } 35%, 64% { opacity: 1; scale: 1.08; filter: hue-rotate(55deg) brightness(1.45); } }
@keyframes arcade-side-sign-glow { 50% { color: #fff068; border-color: #56efff; filter: hue-rotate(32deg) brightness(1.25); } }
@keyframes side-sign-bulbs { 50% { opacity: 0.35; filter: brightness(1.7); } }
@keyframes arcade-arrow-blink { 50% { opacity: 0.25; translate: 2px 2px; } }
@keyframes arcade-blade-pulse {
  0%, 100% { filter: brightness(0.9) drop-shadow(0 0 2px #25dfff66); }
  45%, 60% { filter: brightness(1.2) drop-shadow(0 0 5px #27e7ffbb) drop-shadow(0 0 3px #c347ff88); }
}
@keyframes plasma-canister-hum { 0%, 100% { filter: brightness(0.92) drop-shadow(0 0 3px #1fdfff88); } 50% { filter: brightness(1.18) drop-shadow(0 0 6px #2ff1ffcc) drop-shadow(0 0 9px #754cffaa); } }
@keyframes plasma-core-orbit { 0%, 100% { scale: 0.78; rotate: 0deg; opacity: 0.72; } 50% { scale: 1.12; rotate: 180deg; opacity: 1; } }
@keyframes ufo-green-glow { 50% { opacity: 0.45; scale: 1.08; filter: brightness(1.45) blur(1px); } }
@keyframes mecha-eye-scan {
  0%, 54%, 100% { opacity: 0.14; filter: brightness(1); }
  61%, 82% { opacity: 1; filter: brightness(2.1); }
  88% { opacity: 0.34; }
}
@keyframes led-title-blink { 50% { color: #fff15b; filter: brightness(1.35); } }
@keyframes cathedral-scroll { from { translate: 0 0; } to { translate: -33.333% 0; } }
@keyframes muzeum-sun-glow { 50% { filter: brightness(1.22) drop-shadow(0 0 5px #ffc72f); } }
@keyframes plasma-electric-ring { to { rotate: 360deg; filter: hue-rotate(80deg); } }
@keyframes lamp-pulse { 50% { opacity: 0.55; filter: brightness(1.45); scale: 0.8; } }
@keyframes lamp-flicker { 0%, 38%, 42%, 74%, 78%, 100% { opacity: 1; } 39%, 41%, 75%, 77% { opacity: 0.12; box-shadow: none; } }
@keyframes blimp-message-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes blimp-flight-left { 0% { opacity: 0; transform: translateX(-115%); } 4%, 94% { opacity: 0.92; } 100% { opacity: 0; transform: translateX(calc(100vw + 115%)); } }
@keyframes blimp-flight-right { 0% { opacity: 0; transform: translateX(calc(100vw + 115%)); } 4%, 94% { opacity: 0.92; } 100% { opacity: 0; transform: translateX(-115%); } }

@media (max-width: 700px) {
  .heaven-home {
    height: 100svh;
    min-height: 0;
  }

  .world-blimp {
    width: min(39vw, 165px);
  }

  .world-blimp-screen {
    font-size: clamp(7px, 1.9vw, 9px);
    letter-spacing: 0.08em;
  }

  .site-header {
    display: block;
    height: 78px;
    padding: 8px 12px 42px;
  }

  .site-logo {
    position: absolute;
    top: 8px;
    left: 50%;
    display: block;
    min-width: 0;
    white-space: normal;
    text-align: center;
    width: min(34vw, 138px) !important;
    margin: 0;
    transform: translateX(-50%);
  }

  .site-logo-halo {
    left: 24.5%;
    top: -10%;
    width: 10px;
    height: 3px;
    border-width: 1px;
  }

  .kingdom-menu-button {
    position: absolute;
    left: 10px;
    top: 43px;
  }

  .map-monitor {
    width: 38px;
    height: 29px;
    padding: 3px 4px 7px;
    border-width: 1px;
  }

  .map-screen {
    height: 17px;
    border-width: 1px;
  }

  .map-logo-y b {
    font-size: 6px;
  }

  .castle-realm {
    top: 8.5%;
    width: min(50vw, 27vh);
  }

  .house-realm {
    top: 9.1%;
    width: min(118vw, 89vh);
  }

  .house-island-upper-left { transform: translate(calc(6.4% - 10px), calc(-8.3% - 24px)); }
  .house-island-upper-right { transform: translate(calc(-6.4% + 10px), calc(-8.3% - 24px)); }
  .house-island-lower-left { transform: translate(-4.8%, -5.6%); }
  .house-island-lower-right { transform: translate(4.8%, -5.6%); }

  .cloud-bridge {
    top: 25%;
    bottom: 14px;
    width: 300%;
    opacity: 0.96;
  }

  .house-portals span {
    display: none;
  }

  .district-realm {
    display: none;
  }

  .mobile-district-realm {
    position: absolute;
    z-index: 22;
    left: 0;
    right: 0;
    bottom: 14px;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7px;
    height: 70svh;
    overflow: visible;
    background: linear-gradient(180deg, transparent, #14224c24 48%, #050b19a8 100%);
    image-rendering: pixelated;
    filter: drop-shadow(0 -3px 8px #0a1d57a8);
  }

  .mobile-street {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, transparent 0 76%, #17203266 76% 100%);
  }

  .mobile-street-upper {
    overflow: visible;
  }

  .mobile-street::after {
    content: "";
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    border-top: 2px solid #7b8390;
    background: repeating-linear-gradient(90deg, #343b49 0 24px, #454d5b 24px 48px);
    box-shadow: 0 -2px #171c26;
    pointer-events: none;
  }

  .mobile-row-art {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 7px;
    height: calc(100% - 7px);
    overflow: hidden;
    translate: -50% 0;
    pointer-events: none;
    image-rendering: pixelated;
  }

  .mobile-row-art > img {
    position: absolute;
    z-index: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    image-rendering: pixelated;
  }

  .mobile-upper-art {
    left: 45%;
    width: auto;
    aspect-ratio: 492 / 298;
    scale: 1.11;
    transform-origin: 50% 100%;
  }

  .mobile-upper-art > img { left: -13.21%; }

  .mobile-upper-art::after {
    display: none;
  }

  .mobile-lower-art {
    width: 102vw;
    height: auto;
    aspect-ratio: 503 / 298;
  }

  .mobile-lower-art > .mobile-lower-main-image { left: -107.36%; }
  .mobile-lower-art > .mobile-club-image { left: 87.08%; }

  .mobile-museum-left-clean {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 16.5%;
    height: 100%;
    background: url("assets/pixel-district-mobile.webp") 69.61% 0 / 1178.31% 100% no-repeat;
    clip-path: inset(0 0 57% 0);
    transform: scaleX(-1);
    transform-origin: center;
    image-rendering: pixelated;
  }

  .mobile-row-portals {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
  }

  .mobile-upper-portals { grid-template-columns: 307fr 185fr; }
  .mobile-lower-portals {
    left: 50%;
    right: auto;
    width: 102vw;
    grid-template-columns: 166fr 146fr 126fr 65fr;
    translate: -50% 0;
  }

  .mobile-row-portals button,
  .mobile-row-portals span {
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .mobile-row-portals button {
    cursor: pointer;
  }

  .mobile-row-portals button:focus-visible {
    outline: 2px solid #9fefff;
    outline-offset: -3px;
  }

  .mobile-casino-sign {
    z-index: 3;
    left: 16.75%;
    right: auto;
    top: 53.5%;
    width: 31.5%;
    height: 13%;
  }

  .mobile-arcade-game {
    z-index: 3;
    left: 72%;
    right: auto;
    top: 17%;
    width: 17%;
    height: 19.5%;
  }

  .mobile-arcade-sign {
    z-index: 3;
    left: 70%;
    right: auto;
    top: 58.1%;
    width: 19.5%;
    height: 6.4%;
  }

  .mobile-mecha-halo {
    z-index: 8;
    left: 93.8%;
    top: 11.5%;
    transform: translateX(-50%) rotate(-18deg);
  }

  .mobile-cathedral-sign {
    z-index: 8;
    top: 47.5%;
    left: 45.2%;
    width: 29%;
    height: 5.2%;
    translate: -50% 0;
  }

  .portal-label,
  .arcade-digital-sign,
  .mystery-club-label,
  .coming-soon-sign {
    font-size: 7px;
  }

  .arcade-digital-sign {
    height: 6.9%;
    font-size: 7px;
  }

  .mobile-upper-art .mobile-arcade-sign {
    min-height: 0;
    gap: 2px;
    overflow: hidden;
    padding: 0;
    color: #eaffff;
    font-family: "Arial Black", "Trebuchet MS", sans-serif;
    font-size: clamp(5.5px, 1.42vw, 7px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    -webkit-text-stroke: 0.35px #dffcff;
    text-shadow: 0 0 2px #fff, 0 0 5px #1bdcff, 1px 1px #00152a;
  }

  .mobile-arcade-sign .coin-halo {
    margin-right: -4px;
    scale: 0.42;
    transform-origin: center;
  }

  .mobile-arcade-neon .arcade-entrance-glow {
    left: 71.2%;
    right: auto;
    bottom: 3.4%;
    width: 19%;
    height: 21.8%;
    box-shadow: inset 0 2px 4px #2ceaff1f, 0 -1px 5px #ff36d888, -1px 0 4px #39e9ff88, 1px 0 4px #a34dff88;
  }

  .mobile-arcade-neon .arcade-neon-rail { display: none; }

  .mobile-cabinet-lights i { width: 3px; height: 3px; }
  .mobile-cabinet-lights i:nth-child(1) { left: 67.8%; top: 43.8%; }
  .mobile-cabinet-lights i:nth-child(2) { left: 73.1%; top: 44.9%; }
  .mobile-cabinet-lights i:nth-child(3) { left: 78.4%; top: 43.8%; }
  .mobile-cabinet-lights i:nth-child(4) { left: 83.8%; top: 44.9%; }
  .mobile-cabinet-lights i:nth-child(5) { left: 68.7%; top: 51.2%; }
  .mobile-cabinet-lights i:nth-child(6) { left: 74%; top: 52.3%; }
  .mobile-cabinet-lights i:nth-child(7) { left: 79.3%; top: 51.2%; }
  .mobile-cabinet-lights i:nth-child(8) { left: 84.7%; top: 52.3%; }

  .mobile-star-machines i {
    top: 75.1%;
    width: 5px;
    height: 5px;
  }

  .mobile-star-machines i:first-child { left: 69.2%; }
  .mobile-star-machines i:last-child { left: 89.7%; }

  .mobile-arcade-side-sign {
    left: 64.7%;
    top: 47%;
    width: 9.8%;
    height: auto;
  }

  .mobile-plasma-canister {
    left: 63.5%;
    top: 34.5%;
    width: 5.5%;
  }

  .mobile-ufo-glow {
    left: 64%;
    top: 2.5%;
    width: 10%;
    height: 6.5%;
  }

  .mobile-mecha-eye {
    z-index: 9;
    left: 94.1%;
    top: 25.7%;
    width: 2.5px;
    height: 1.5px;
  }

  .mobile-mecha-eye::after {
    left: 7px;
    width: 2.5px;
  }

  .mobile-lower-art > .mobile-muzeum-sun {
    position: absolute;
    z-index: 4;
    left: 16.8%;
    top: 31.6%;
    width: 18px;
    height: 18px;
    max-width: 18px;
    object-fit: contain;
  }

  .mobile-casino-palm {
    z-index: 4;
    bottom: calc(1.7% + 10px);
    width: 35px;
    height: 62px;
  }

  .mobile-casino-palm-left {
    left: 18%;
    transform: scaleX(-1);
  }

  .mobile-casino-palm-right {
    left: 52.2%;
    right: auto;
    animation-delay: -1.4s;
    transform: none;
  }

  .mobile-gundam-foreground {
    z-index: 7 !important;
    clip-path: polygon(52% 13%, 57.2% 13%, 61% 29%, 60.8% 49%, 56.8% 57%, 55.8% 70%, 53.8% 81%, 47.5% 81%, 49% 65%, 50.8% 49%, 51.5% 35%, 51.7% 23%);
  }

  .mobile-mecha-eye,
  .mobile-mecha-halo { z-index: 9; }

  .muzeum-maintenance .mobile-maintenance-shade {
    position: absolute;
    z-index: 6;
    left: 0;
    top: 24%;
    display: block;
    width: 31%;
    height: 75%;
    background: #06091055;
    backdrop-filter: grayscale(1) brightness(0.5);
  }

  .muzeum-maintenance .mobile-maintenance-shade .maintenance-badge {
    left: 5%;
    right: 5%;
    top: 45%;
    display: block;
    padding: 5px 2px;
    border-width: 1px;
  }

  .muzeum-maintenance .mobile-maintenance-shade .maintenance-badge b { font-size: 7px; }
  .muzeum-maintenance .mobile-maintenance-shade .maintenance-badge strong { font-size: 8px; }

  .coin-halo {
    scale: 0.66;
  }

  .mystery-club-label {
    min-height: 10px;
    font-size: 3px;
  }

  .coming-soon-sign {
    min-height: 29px;
    font-size: 4px;
  }

  .casino-main-sign b { font-size: 8px; }
  .casino-main-sign small { font-size: 8px; }

  .arcade-game-screen {
    border-width: 1px;
  }

  .cathedral-scroll-sign {
    font-size: 8px;
  }

  .street-lamp-glow {
    scale: 0.55;
  }

  .pixel-road {
    height: 14px;
    border-top-width: 2px;
  }

  .pixel-road i {
    inset: 4px 0 auto;
  }

  .animation-toggle {
    top: calc(max(8px, env(safe-area-inset-top)) + 53px);
    right: max(8px, env(safe-area-inset-right));
    bottom: auto;
    width: 31px;
    height: 19px;
    border-width: 1px;
    padding: 0;
    border-radius: 5px;
    opacity: 0.72;
    transition: opacity 140ms ease;
  }

  .animation-toggle span::before,
  .animation-toggle[aria-pressed="true"] span::before {
    font-size: 8px;
  }

  .animation-toggle:hover,
  .animation-toggle:focus-visible {
    opacity: 1;
  }
}

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

/* V13: complete maintenance cloak coverage while keeping the Gundam and full wing untouched. */
.muzeum-maintenance .muzeum-portal::before {
  left:0;
  right:0;
  top:7%;
  bottom:-1%;
  background:#03050a61;
  clip-path:polygon(7% 0,91% 0,100% 17%,100% 100%,0 100%,0 18%);
}
.muzeum-maintenance .desktop-gundam-foreground {
  z-index:20!important;
  clip-path:polygon(49.5% 9%,61.8% 9%,63% 31%,62% 49%,58.5% 61%,56.2% 72%,54.5% 83%,46% 83%,47.8% 64%,49.5% 48%,50.2% 32%);
}
.muzeum-maintenance .mobile-gundam-foreground { z-index:20!important; }

/* Destination portals use matching late-90s pixel interfaces; the mystery club remains untouched. */
.portal-dialog[data-theme="casino"],
.portal-dialog[data-theme="arcade"] { font-family:"Lucida Console","Courier New",monospace; overflow:hidden; }
.portal-dialog[data-theme="casino"]::before,
.portal-dialog[data-theme="arcade"]::before { content:""; position:absolute; inset:0; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 5px,var(--portal-edge) 6px); pointer-events:none; }
.portal-dialog[data-theme="casino"] .dialog-content,
.portal-dialog[data-theme="arcade"] .dialog-content { position:relative; padding-top:32px; }
.portal-dialog[data-theme="casino"] .dialog-content::before,
.portal-dialog[data-theme="arcade"] .dialog-content::before { position:absolute; right:20px; top:10px; color:var(--portal-edge); font:900 14px/1 "Lucida Console",monospace; text-shadow:0 0 8px var(--portal-edge); }
.portal-dialog[data-theme="casino"] .dialog-content::before { content:"♢ ♢ ♢"; }
.portal-dialog[data-theme="arcade"] .dialog-content::before { content:"▣ 8-BIT LINK"; }
.portal-dialog[data-theme="casino"] .dialog-actions button,
.portal-dialog[data-theme="arcade"] .dialog-actions button { clip-path:polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px)); }

/* V14 beta skyline, destination restoration and mobile realm transition. */
.beta-badge {
  position:absolute;
  z-index:4;
  left:calc(100% + 9px);
  top:38%;
  display:grid;
  place-items:center;
  min-width:49px;
  height:25px;
  padding:0 8px;
  border:3px solid #7256ff;
  border-radius:3px;
  color:#dffcff;
  background:linear-gradient(180deg,#193b78,#4e278b 58%,#141b48);
  box-shadow:inset 0 0 0 2px #73ecff,3px 3px #03020b,0 0 9px #934dff;
  font:900 10px/1 "Lucida Console","Courier New",monospace;
  letter-spacing:.08em;
  text-shadow:1px 1px #471778,0 0 5px #77f6ff;
  image-rendering:pixelated;
  pointer-events:none;
  animation:beta-pulse 1.8s steps(4) infinite;
}
.beta-badge::before { content:""; position:absolute; left:3px; top:3px; width:6px; height:6px; border-top:3px solid #ff9fe8; border-left:3px solid #78f6ff; }
@keyframes beta-pulse { 50% { filter:brightness(1.18); transform:translateY(-1px); } }

/* Restore the arcade facade layers after the maintenance pass. */
.arcade-portal .arcade-game-screen,
.mobile-upper-art .mobile-arcade-game { overflow:hidden; isolation:isolate; clip-path:inset(0 round 1px); background:#01030a; }
.arcade-portal .arcade-gif-frame,
.mobile-upper-art .arcade-gif-frame { inset:0; width:100%; height:100%; clip-path:none; }
.arcade-portal .arcade-gif-frame img,
.mobile-upper-art .arcade-gif-frame img { inset:0; width:100%; height:100%; max-width:none; object-fit:cover; clip-path:none; transform:none; }
.arcade-portal .arcade-digital-sign { left:9%; right:4%; overflow:visible; gap:2px; letter-spacing:.03em; white-space:nowrap; font-size:clamp(5px,.64vw,10px); }
.arcade-portal .arcade-digital-sign b { display:block; min-width:0; white-space:nowrap; transform:none; }
.arcade-portal .coin-halo { width:6px; height:9px; }

/* Maintenance mask follows the Muzeum silhouette while the Gundam and wing stay above it. */
.muzeum-maintenance .muzeum-portal::before {
  left:2%;
  right:3%;
  top:17%;
  bottom:-1%;
  background:#03050a72;
  clip-path:polygon(31% 0,68% 0,80% 7%,88% 17%,96% 28%,100% 42%,100% 100%,0 100%,0 42%,5% 28%,13% 17%,21% 7%);
}
.muzeum-maintenance .desktop-gundam-foreground {
  z-index:20!important;
  clip-path:polygon(49% 0,58.2% 0,60.2% 17%,60.8% 34%,59.3% 49%,58.4% 62%,56.5% 73%,55% 84%,45% 84%,47% 63%,49% 47%,49.5% 28%);
}

/* Requested casino entrance palm offsets. */
.casino-palm { bottom:calc(1.5% + 21px); }
.casino-palm-left { left:calc(5% - 7px); }

/* Destination prompts are clearer while preserving the club prompt unchanged. */
.portal-dialog[data-theme="casino"],
.portal-dialog[data-theme="arcade"] { width:min(560px,calc(100% - 24px)); }
.portal-dialog[data-theme="casino"] .dialog-content,
.portal-dialog[data-theme="arcade"] .dialog-content { padding:38px clamp(18px,5vw,34px) 24px; }
.portal-dialog[data-theme="casino"] .dialog-content h1,
.portal-dialog[data-theme="arcade"] .dialog-content h1 { font-size:clamp(24px,6vw,38px); line-height:1.05; }
.portal-dialog[data-theme="casino"] .portal-description,
.portal-dialog[data-theme="arcade"] .portal-description { font-size:clamp(12px,2.6vw,15px); line-height:1.55; }
.portal-dialog[data-theme="casino"] .dialog-actions button,
.portal-dialog[data-theme="arcade"] .dialog-actions button { min-height:48px; padding-inline:20px; font-size:12px; }

@media (max-width:700px) {
  .beta-badge { left:calc(100% + 4px); top:34%; min-width:34px; height:18px; padding:0 4px; border-width:2px; box-shadow:inset 0 0 0 1px #73ecff,2px 2px #03020b,0 0 6px #934dff; font-size:7px; }
  .mobile-district-realm { grid-template-areas:"lower" "upper"; isolation:isolate; }
  .mobile-street-lower { grid-area:lower; order:1; }
  .mobile-street-upper { grid-area:upper; order:2; }
  .mobile-district-realm::before {
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:url("assets/mobile-red-cloud-transition-v1.webp") center 47% / 100% 100% no-repeat;
    filter:saturate(1.06) contrast(1.04);
    opacity:.74;
  }
  .mobile-district-realm::after { display:none; }
  .mobile-casino-palm { bottom:calc(1.7% + 15px); }
  .mobile-casino-palm-left { left:calc(18% - 13px); }
  .mobile-casino-palm-right { left:52.2%; }
  .muzeum-maintenance .mobile-maintenance-shade { left:0; top:30%; width:31%; height:69%; clip-path:polygon(28% 0,72% 0,87% 10%,96% 24%,100% 42%,100% 100%,0 100%,0 42%,5% 24%,15% 10%); }
  .mobile-upper-art .mobile-arcade-sign { left:69%; width:22%; overflow:visible; font-size:clamp(5px,1.3vw,6.5px); }
  .mobile-upper-art .mobile-arcade-sign b { transform:scaleX(.9); }
}

/* V15: exact layer repairs, facade polish and low-cost sign animation. */
.world-blimp-screen {
  left:18.2%;
  top:30.5%;
  width:58.6%;
  height:24%;
  transform:rotate(-2.35deg) skewX(-.6deg);
}
.world-blimp-screen b { padding-left:104%; padding-right:32%; }
.casino-palm-left { left:calc(5% - 10px); }
.beta-badge { top:5%; }
.muzeum-maintenance .muzeum-portal {
  isolation:isolate;
  overflow:hidden;
}
.muzeum-maintenance .muzeum-portal::before {
  inset:27% -1% -1%;
  width:auto;
  height:auto;
  background:#05070ac4;
  backdrop-filter:grayscale(1) brightness(.48);
  clip-path:polygon(18% 0,73% 0,86% 7%,95% 20%,100% 36%,100% 100%,0 100%,0 31%,5% 16%);
}

.arcade-billboard-halo {
  position:absolute;
  z-index:9;
  left:17%;
  top:5.4%;
  width:66%;
  height:15%;
  pointer-events:none;
  filter:drop-shadow(0 0 4px #ffe66e);
}
.arcade-billboard-halo::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:58%;
  height:36%;
  border:clamp(1px,.18vw,3px) solid #fff1a0;
  border-radius:50%;
  transform:translateX(-50%) skewX(-12deg);
  background:#ffca2830;
  box-shadow:inset 0 0 4px #fff,0 0 7px #ffd844;
  animation:arcade-billboard-halo-pulse 2.2s steps(5) infinite;
}
.arcade-billboard-halo i {
  position:absolute;
  left:49%;
  top:29%;
  width:3px;
  height:42%;
  background:linear-gradient(#ffd957,#4e5968);
  box-shadow:2px 0 #08090c;
  transform:skewX(-8deg);
}
@keyframes arcade-billboard-halo-pulse { 50% { filter:brightness(1.28); opacity:.82; } }

.arcade-digital-sign {
  font-family:"Lucida Console","Courier New",monospace;
  font-weight:900;
  letter-spacing:.045em;
  text-shadow:1px 1px #08021a,0 0 3px #fff,0 0 7px #39eeff;
}
.arcade-digital-sign b { animation:arcade-coin-sign-scan 2.8s steps(9) infinite; }
@keyframes arcade-coin-sign-scan {
  0%,100% { color:#f7fbff; filter:none; }
  45% { color:#72f6ff; filter:brightness(1.35); }
  55% { color:#fff1a0; }
}

.casino-rooftop-outages {
  position:absolute;
  z-index:8;
  left:15%;
  top:5.3%;
  width:70%;
  height:15%;
  display:flex;
  align-items:center;
  justify-content:space-around;
  color:#120c08;
  font:900 clamp(22px,2.4vw,43px)/1 Georgia,serif;
  letter-spacing:.02em;
  text-shadow:0 0 2px #000,1px 1px #020100;
  pointer-events:none;
}
.casino-rooftop-outages i { font-style:normal; opacity:0; }
.casino-rooftop-outages i:nth-child(1),
.casino-rooftop-outages i:nth-child(2),
.casino-rooftop-outages i:nth-child(6) { animation:casino-bulb-outage 12s steps(1) infinite; }
.casino-rooftop-outages i:nth-child(2) { animation-delay:-4.4s; }
.casino-rooftop-outages i:nth-child(6) { animation-delay:-8.2s; }
@keyframes casino-bulb-outage { 0%,82%,86%,89%,100% { opacity:0; } 83%,85%,87%,88% { opacity:.96; } }

.portal-dialog[data-theme="casino"] {
  --portal-edge:#ff9c45;
  border-color:#ffb34e;
  background:linear-gradient(145deg,#3b1117,#08060a 58%,#220c2b);
  box-shadow:0 0 0 4px #120204,inset 0 0 34px #ff2d3d2b,0 0 28px #ff9c4052;
}
.portal-dialog[data-theme="casino"] .dialog-titlebar { background:linear-gradient(90deg,#6b1517,#19070b); color:#ffe17a; }
.portal-dialog[data-theme="arcade"] {
  --portal-edge:#55efff;
  border-color:#5ff4ff;
  background:linear-gradient(145deg,#0a2843,#060713 58%,#38104b);
  box-shadow:0 0 0 4px #010916,inset 0 0 34px #2ee7ff26,0 0 28px #b348ff52;
}
.portal-dialog[data-theme="arcade"] .dialog-titlebar { background:linear-gradient(90deg,#063f59,#301052); color:#eaffff; }

@media (max-width:700px) {
  .beta-badge { left:calc(100% + 1px); top:5%; }
  .beta-badge::before { left:2px; top:2px; width:3px; height:3px; border-width:1px; }
  .mobile-street-lower { position:relative; z-index:3; }
  .mobile-street-upper {
    position:relative;
    z-index:5;
    height:calc(100% + 26px);
    margin-top:-26px;
  }
  .mobile-street-upper::after { z-index:9; }
  .mobile-street-upper .mobile-row-art { z-index:5; }
  .mobile-street-upper .mobile-row-portals { z-index:8; }
  .mobile-ufo-glow { z-index:10; }
  .mobile-lower-art { background:transparent!important; }
  .mobile-lower-art > img { background:transparent!important; }
  .muzeum-maintenance .mobile-maintenance-shade {
    left:0;
    top:28.5%;
    width:31.3%;
    height:71.5%;
    background:#05070ac4;
    clip-path:polygon(18% 0,73% 0,86% 7%,95% 20%,100% 36%,100% 100%,0 100%,0 31%,5% 16%);
    backdrop-filter:grayscale(1) brightness(.48);
  }
  .mobile-casino-palm { bottom:calc(1.7% + 19px); }
  .mobile-casino-palm-left { left:calc(18% - 16px); }
  .mobile-billboard-halo { left:70.6%; top:7.5%; width:18.5%; height:11%; }
  .mobile-billboard-halo::before { border-width:1px; }
  .mobile-billboard-halo i { width:1px; }
  .mobile-plasma-canister { left:calc(63.5% + 3px); }
  .mobile-casino-outages { left:15.5%; top:2.4%; width:32%; height:13%; font-size:clamp(19px,5vw,28px); }
}

@media (min-width:701px) {
  .arcade-portal .arcade-plasma-canister {
    left:calc(18.5% - 3px);
    top:calc(37.5% + 5px);
    width:27%;
    z-index:11;
  }
}

/* V17: facade animation, exact cloak silhouettes and responsive row cleanup. */
.world-blimp-screen {
  left:18.4%;
  top:31.2%;
  width:58.4%;
  height:23.2%;
  transform:rotate(2.65deg);
  overflow:hidden;
}
.world-blimp-screen b {
  left:100%;
  width:max-content;
  padding:0 100% 0 0;
  animation:blimp-message-scroll-v17 13s linear infinite;
}
@keyframes blimp-message-scroll-v17 { from { transform:translateX(0); } to { transform:translateX(-100%); } }

.arcade-portal .arcade-game-screen {
  left:26.5%;
  right:19%;
  top:17%;
  height:19.5%;
  z-index:8;
  overflow:hidden;
  isolation:isolate;
  clip-path:inset(0 round 1px);
  border:1px solid #70efff;
  background:#010208;
}
.arcade-portal .arcade-gif-frame { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.arcade-portal .arcade-gif-frame img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; transform:none; }
.arcade-portal .arcade-digital-sign {
  left:13%;
  right:9%;
  top:58.1%;
  height:6.9%;
  z-index:9;
  overflow:hidden;
  gap:3px;
  padding:0 2px;
  font-size:clamp(5px,.58vw,9px);
  letter-spacing:.025em;
}
.arcade-portal .arcade-digital-sign b { min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap; transform:none; }
.arcade-portal .coin-halo { width:7px; height:10px; flex:0 0 7px; }

/* Do not use backdrop-filter here: mobile Safari rasterized its full rectangle. */
.muzeum-maintenance .muzeum-portal::before {
  left:1%;
  right:2%;
  top:17%;
  bottom:0;
  background:linear-gradient(145deg,#4d5158a6,#090b0fbd 62%,#252932ad);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  clip-path:polygon(30% 0,69% 0,80% 6%,89% 17%,96% 30%,100% 44%,100% 100%,0 100%,0 43%,5% 29%,13% 17%,21% 6%);
  box-shadow:inset 0 0 24px #0009;
}
.muzeum-maintenance .muzeum-portal .maintenance-badge { z-index:9; left:5%; right:3%; top:57%; }
.muzeum-maintenance .desktop-gundam-foreground {
  clip-path:polygon(49.3% 0,57.7% 0,59.4% 13%,60.2% 29%,59.4% 43%,58.3% 59%,56.7% 72%,55% 83%,45.8% 83%,47.1% 66%,48.8% 48%,49.3% 27%);
}

@media (min-width:701px) {
  .beta-badge::before { width:4px; height:4px; border-width:2px; }
  .arcade-portal .arcade-plasma-canister { left:calc(18.5% - 10px); top:calc(37.5% - 1px); }
}

@media (max-width:700px) {
  .mobile-street-lower,
  .mobile-lower-art,
  .mobile-lower-art > img { background:transparent!important; }
  .mobile-street-lower::before { display:none!important; }
  .muzeum-maintenance .mobile-maintenance-shade {
    left:0;
    top:28.5%;
    width:31.3%;
    height:71.5%;
    background:linear-gradient(145deg,#4d5158a3,#090b0fbd 62%,#252932ad);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    clip-path:polygon(29% 0,70% 0,81% 6%,89% 16%,96% 29%,100% 43%,100% 100%,0 100%,0 43%,5% 29%,13% 16%,21% 6%);
    box-shadow:inset 0 0 18px #000a;
  }
  .mobile-upper-art .mobile-arcade-game { overflow:hidden; clip-path:inset(0 round 1px); }
  .mobile-upper-art .mobile-arcade-sign { overflow:hidden; left:69%; width:22%; padding:0 1px; font-size:clamp(5px,1.23vw,6.2px); }
  .mobile-upper-art .mobile-arcade-sign b { min-width:0; overflow:hidden; transform:scaleX(.88); transform-origin:center; }
  .mobile-plasma-canister { left:calc(63.5% + 6px); }
}

/* V18: the mobile district uses one continuous colorful sky behind both building rows. */
@media (max-width:700px) {
  .mobile-district-realm {
    background:
      radial-gradient(circle at 18% 18%,#55307d88 0 8%,transparent 31%),
      radial-gradient(circle at 78% 62%,#9e2d385c 0 11%,transparent 36%),
      linear-gradient(180deg,#08152e 0,#172b5a 41%,#6d2144 70%,#b2452d 100%);
  }
  .mobile-district-realm::before {
    display:block!important;
    opacity:.92;
    background-position:center 20%;
    background-size:100% 145%;
    filter:saturate(1.28) brightness(1.12);
  }
  .mobile-street,.mobile-street-lower,.mobile-lower-art,.mobile-lower-art > img { background:transparent!important; }
  .mobile-street-lower::before { display:none!important; }
}

/* V19: replace the dark rectangular mobile row backing with the shared colorful cloud sky. */
.casino-palm-right { right:calc(5% + 2px); }
.mecha-halo { transform:translateX(-50%) rotate(18deg) scaleX(-1); }

.casino-rooftop-outages i:nth-child(1),
.casino-rooftop-outages i:nth-child(2),
.casino-rooftop-outages i:nth-child(6) { animation:casino-bulb-fail-v19 17s steps(1,end) infinite; }
.casino-rooftop-outages i:nth-child(1) { animation-delay:-2.3s; }
.casino-rooftop-outages i:nth-child(2) { animation-delay:-8.1s; }
.casino-rooftop-outages i:nth-child(6) { animation-delay:-13.4s; }
@keyframes casino-bulb-fail-v19 {
  0%,89%,90.2%,91%,92.4%,100% { opacity:0; }
  89.4%,90.7%,91.5%,92% { opacity:.96; filter:brightness(.42); }
}

@media (max-width:700px) {
  .mobile-street-lower {
    background:
      linear-gradient(180deg,#090f2500 0,#42184252 19%,#891e374f 62%,#12091d00 100%),
      url("assets/mobile-red-cloud-transition-v1.webp") center 47% / 100% 175% no-repeat!important;
  }
  .mobile-street-lower::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    display:block!important;
    pointer-events:none;
    background:radial-gradient(ellipse at 52% 58%,#d3414852 0,transparent 58%);
  }
  .mobile-street-lower .mobile-row-art { z-index:2; }
  .mobile-street-lower .mobile-row-portals { z-index:5; }
  .mobile-casino-palm-right { left:calc(52.2% - 17px); right:auto; }
  .mobile-mecha-halo { transform:translateX(-50%) rotate(18deg) scaleX(-1); }
}

/* V20: one continuous cloud-and-space field behind both mobile building rows. */
@media (max-width:700px) {
  .mobile-district-realm {
    background:transparent!important;
    filter:none;
  }
  .mobile-district-realm::before {
    display:none!important;
  }
  .mobile-street,
  .mobile-street-lower,
  .mobile-street-upper,
  .mobile-lower-art,
  .mobile-lower-art > img {
    background:transparent!important;
  }
  .mobile-street-lower::before { display:none!important; }
}

/* V20: restore the complete desktop arcade facade and both original Bible Gum props. */
@media (min-width:701px) {
  .arcade-portal .arcade-game-screen {
    left:25.8%;
    right:15.2%;
    top:16.7%;
    height:20.2%;
    clip-path:inset(0 round 1px);
  }
  .arcade-portal .arcade-digital-sign {
    left:11%;
    right:3.2%;
    top:57.8%;
    height:7.5%;
    overflow:visible;
    padding-inline:3px;
    font-size:clamp(5px,.61vw,9.5px);
    letter-spacing:.018em;
  }
  .arcade-portal .arcade-digital-sign b { overflow:visible; transform:none; }
}

/* V21: complete arcade facade, exact object offsets and the syntax circuit-tree portal mark. */
.mystery-club-portal,
.mobile-lower-portals button[data-portal="mysteryClub"] { position:relative; overflow:visible; }
.district-portals .mystery-circuit-tree,
.mobile-lower-portals .mystery-circuit-tree {
  position:absolute;
  z-index:8;
  left:25%;
  top:52%;
  width:50%;
  height:auto;
  object-fit:contain;
  image-rendering:pixelated;
  opacity:.82;
  filter:drop-shadow(0 0 2px #5df4ff) drop-shadow(0 0 5px #875cff88);
  pointer-events:none;
  animation:circuit-tree-pulse-v21 3.4s steps(8,end) infinite;
}
@keyframes circuit-tree-pulse-v21 {
  0%,100% { opacity:.68; filter:drop-shadow(0 0 2px #5df4ff) drop-shadow(0 0 5px #875cff66); }
  42% { opacity:.94; filter:drop-shadow(0 0 3px #5df4ff) drop-shadow(0 0 7px #ff4eb088); }
  46% { opacity:.76; }
  50% { opacity:.98; }
}

@media (min-width:701px) {
  .arcade-portal .arcade-game-screen {
    left:25.2%;
    right:11.5%;
    top:16.5%;
    height:20.5%;
    overflow:hidden;
    clip-path:inset(0 round 1px);
  }
  .arcade-portal .arcade-digital-sign {
    left:8%;
    right:-2%;
    top:57.7%;
    height:7.7%;
    overflow:visible;
    gap:3px;
    padding-inline:3px;
    font-size:clamp(5px,.65vw,10px);
    letter-spacing:.012em;
  }
  .arcade-portal .arcade-digital-sign b {
    flex:0 0 auto;
    min-width:max-content;
    overflow:visible;
    white-space:nowrap;
  }
  .arcade-portal .arcade-plasma-canister {
    left:calc(18.5% - 17px);
    top:calc(37.5% - 4px);
  }
}

@media (max-width:700px) {
  .mobile-plasma-canister {
    left:calc(63.5% + 8px);
    top:calc(34.5% - 2px);
  }
  .mobile-lower-portals .mobile-mystery-circuit {
    left:20%;
    top:16%;
    width:60%;
    opacity:.86;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mystery-circuit-tree { animation:none; }
}

/* V22 — precise portal artwork sizing, continuous mobile skyline and desktop ASCII constellation. */
.ascii-angel-constellation { display:none; }

.district-portals .mystery-circuit-tree,
.mobile-lower-portals .mystery-circuit-tree {
  left:calc(25% - 10px);
  top:calc(52% + 10px);
  width:16.5%;
}

@media (min-width:701px) {
  .ascii-angel-constellation {
    display:block;
    z-index:27;
    left:auto;
    right:1.5%;
    top:34.5%;
    width:clamp(190px,19vw,330px);
    height:auto;
    transform:none;
    opacity:.16;
    object-fit:contain;
    mix-blend-mode:screen;
    filter:grayscale(1) invert(1) contrast(2.8) brightness(1.2) drop-shadow(0 0 3px #c9f7ff44);
    pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  }

  .arcade-portal { overflow:visible; }
  .arcade-portal .arcade-game-screen {
    left:25.1%;
    right:9.2%;
    overflow:hidden;
    clip-path:inset(0 0 0 0 round 1px);
  }
  .arcade-portal .arcade-gif-frame img { object-fit:contain; object-position:center; }
  .arcade-portal .arcade-digital-sign {
    left:6.5%;
    right:-5%;
    padding-inline:4px;
    overflow:visible;
    font-size:clamp(5px,.62vw,9.5px);
  }
  .arcade-portal .arcade-digital-sign b {
    flex:0 0 auto;
    min-width:max-content;
    overflow:visible;
  }
  .arcade-portal .arcade-plasma-canister {
    left:calc(18.5% - 22px);
    top:calc(37.5% - 5px);
  }
}

@media (max-width:700px) {
  .mobile-street-lower { transform:translateY(-13px); }
  .mobile-plasma-canister {
    left:calc(63.5% + 10px);
    top:calc(34.5% - 3px);
  }
  .mobile-lower-portals .mobile-mystery-circuit {
    left:calc(20% - 10px);
    top:calc(16% + 10px);
    width:19.8%;
  }
}

/* V23 — corrected celestial placement and uncropped Angel Arcade media. */
@media (min-width:701px) {
  .ascii-angel-constellation {
    top:calc(34.5% - 277px);
  }

  .district-portals .mystery-circuit-tree {
    left:calc(25% - 3px);
    top:calc(52% + 27px);
    width:19.3%;
  }

  .animation-toggle {
    right:calc(max(12px,env(safe-area-inset-right)) + 2px);
  }

  .casino-palm-right { right:calc(5% + 6px); }

  .arcade-portal .arcade-plasma-canister {
    left:calc(18.5% - 26px);
  }

  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:7.6%;
    overflow:hidden;
    clip-path:none;
  }
  .arcade-portal .arcade-gif-frame {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    clip-path:none;
  }
  .arcade-portal .arcade-gif-frame img {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:center;
    clip-path:none;
    transform:none;
  }
  .arcade-portal .arcade-digital-sign {
    left:5.2%;
    right:-7.5%;
    justify-content:flex-start;
    padding:0 3px 0 22%;
    gap:2px;
    overflow:visible;
    font-size:clamp(4.5px,.44vw,7px);
    letter-spacing:0;
  }
  .arcade-portal .arcade-digital-sign b {
    display:block;
    flex:0 0 auto;
    min-width:max-content;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    transform:none;
  }
}

@media (max-width:700px) {
  .ascii-angel-constellation {
    display:block;
    z-index:27;
    left:auto;
    right:0;
    top:10.5%;
    width:clamp(78px,23vw,108px);
    height:auto;
    transform:none;
    opacity:.13;
    object-fit:contain;
    mix-blend-mode:screen;
    filter:grayscale(1) invert(1) contrast(2.8) brightness(1.15) drop-shadow(0 0 3px #c9f7ff33);
    pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%);
  }

  .mobile-street-lower { transform:translateY(-29px); }
}

/* V24 — exact user-directed constellation/tree offsets and fully-contained Arcade media. */
@media (min-width:701px) {
  .ascii-angel-constellation {
    opacity:.24;
    filter:grayscale(1) invert(1) contrast(3.05) brightness(1.42) drop-shadow(0 0 5px #c9f7ff66);
  }
  .district-portals .mystery-circuit-tree {
    left:25%;
    top:calc(52% + 33px);
    width:20.65%;
  }
  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:12.2%;
    z-index:18;
    overflow:hidden;
    clip-path:inset(0);
    contain:paint;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img { inset:0; width:100%; height:100%; max-width:none; clip-path:none; transform:none; }
  .arcade-portal .arcade-gif-frame img { object-fit:contain; object-position:center; }
  .arcade-portal .arcade-digital-sign {
    left:25%;
    right:17%;
    z-index:21;
    justify-content:center;
    padding:0 2px;
    overflow:visible;
    font-size:clamp(4.5px,.42vw,6.8px);
  }
  .arcade-portal .arcade-digital-sign b { flex:0 0 auto; min-width:max-content; overflow:visible; }
}
@media (max-width:700px) {
  .ascii-angel-constellation { opacity:.19; filter:grayscale(1) invert(1) contrast(3) brightness(1.4) drop-shadow(0 0 4px #c9f7ff55); }
}

/* V25 — final Arcade facade containment and matched Syntax Tree coordinates. */
@media (min-width:701px) {
  .district-portals .mystery-circuit-tree {
    left:calc(25% + 2px);
    top:calc(52% + 37px);
  }
  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:3%;
    top:16.5%;
    height:20.5%;
    overflow:hidden;
    clip-path:inset(0 round 1px);
    contain:paint;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
  }
  .arcade-portal .arcade-gif-frame img {
    object-fit:fill;
    object-position:center;
  }
}
@media (max-width:700px) {
  .mobile-lower-portals .mobile-mystery-circuit.mystery-circuit-tree {
    left:calc(25% + 2px);
    top:calc(52% + 37px);
    width:20.65%;
  }
}

/* V26 — desktop billboard fills the complete physical cabinet display. */
@media (min-width:701px) {
  .arcade-portal { overflow:visible; }
  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:-25%;
    top:16.5%;
    height:20.5%;
    z-index:18;
    overflow:hidden;
    clip-path:inset(0 round 1px);
    contain:layout paint style;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    transform:none;
  }
  .arcade-portal .arcade-gif-frame img { object-fit:fill;object-position:center; }
}

/* V28 — restore the desktop cabinet's real screen boundary and keep celestial
   overlays in the same depth plane as the surrounding sky. */
.ascii-angel-constellation { z-index:4; }

@media (min-width:701px) {
  .ascii-angel-constellation {
    top:calc(34.5% - 233px);
  }

  .district-portals .mystery-circuit-tree {
    left:calc(25% + 6px);
    top:calc(52% + 42px);
  }

  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:3%;
    top:16.5%;
    height:20.5%;
    overflow:hidden;
    clip-path:inset(0 round 1px);
    contain:layout paint style;
  }

  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img {
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
  }

  .arcade-portal .arcade-gif-frame img {
    object-fit:fill;
    object-position:center;
  }

  .arcade-portal .led-letter-sequence {
    inset:0 3%;
    justify-content:center;
    gap:.025em;
    font-size:clamp(7px,.82vw,13px);
    white-space:nowrap;
  }
  .arcade-portal .led-letter-sequence i {
    color:#45c85b;
    text-shadow:0 0 2px #0c6f24,1px 1px #020a04;
    animation-name:desktop-led-complete-v28;
    animation-duration:1.8s;
    animation-timing-function:steps(4,end);
    animation-iteration-count:infinite;
  }
}

@media (max-width:700px) {
  .ascii-angel-constellation {
    top:calc(10.5% + 44px);
  }
}

@keyframes desktop-led-complete-v28 {
  0%,100% { color:#3daf51;text-shadow:0 0 2px #0d6721,1px 1px #020a04; }
  50% { color:#72ff82;text-shadow:0 0 3px #fff,0 0 8px #27ff43,1px 1px #063d12; }
}

/* V29 — the desktop facade art extends beyond the portal's original hitbox.
   Match that complete physical display instead of clipping the final column. */
@media (min-width:701px) {
  .arcade-portal {
    overflow:visible;
  }

  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:-25%;
    top:16.5%;
    height:20.5%;
    overflow:hidden;
    clip-path:inset(0 round 1px);
    contain:layout paint style;
  }

  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img {
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
  }

  .arcade-portal .arcade-gif-frame img {
    object-fit:fill;
    object-position:center;
  }

  .arcade-portal .led-letter-sequence {
    inset:0 5%;
    justify-content:center;
    gap:.08em;
    font-size:clamp(8px,.9vw,14px);
    white-space:nowrap;
  }
}

/* V32 final cascade — the desktop display is exactly one front-layer panel. */
.mystery-club-label { display:none!important; }
.ascii-angel-constellation { z-index:3; }
.world-blimp { z-index:20; }
@media (min-width:701px) {
  .ascii-angel-constellation { top:calc(34.5% - 200px); opacity:.31; filter:grayscale(1) invert(1) contrast(3.15) brightness(1.72) drop-shadow(0 0 7px #d8faff66); }
  .arcade-portal { overflow:visible; z-index:8; }
  .arcade-portal .arcade-game-screen { left:24.8%; right:auto; width:72.2%; top:16.5%; height:20.5%; z-index:30; overflow:hidden; isolation:isolate; contain:layout paint style; clip-path:polygon(1% 0,99% 0,100% 4%,100% 96%,99% 100%,1% 100%,0 96%,0 4%); border:1px solid #64efff; background:#01030a; box-shadow:inset 0 0 8px #58eeff77,0 0 4px #9d62ff88; }
  .arcade-portal .arcade-gif-frame,.arcade-portal .arcade-gif-frame img { position:absolute; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; transform:none!important; clip-path:none!important; }
  .arcade-portal .arcade-gif-frame { overflow:hidden; }
  .arcade-portal .arcade-gif-frame img { object-fit:fill!important; object-position:center!important; }
  .arcade-portal .led-letter-sequence { inset:0 4%; gap:.07em; font-size:clamp(8px,.88vw,14px); }
}
@media (max-width:700px) {
  .ascii-angel-constellation { top:calc(10.5% + 77px); opacity:.22; filter:grayscale(1) invert(1) contrast(3) brightness(1.48) drop-shadow(0 0 5px #d7f9ff55); }
}
.portal-dialog .dialog-actions,.club-password-dialog .dialog-actions { gap:12px; }
.portal-dialog .dialog-actions button,.club-password-dialog .dialog-actions button { min-height:54px; padding:0 22px; border:3px solid #6ef2ff; border-right-color:#18213a; border-bottom-color:#18213a; font:900 14px/1 "Lucida Console","Courier New",monospace; letter-spacing:.07em; text-shadow:1px 1px #000; box-shadow:inset 0 0 12px #67efff33,0 0 10px #000; }
.portal-dialog .portal-enter,.club-password-dialog .club-password-submit { color:#160602; border-color:#ffe36b; background:linear-gradient(#fff39a,#ffad3d 48%,#ed552f); box-shadow:inset 0 0 0 2px #fff3b777,0 0 14px #ff9d3b77; text-shadow:0 1px #fff1a0; }
.portal-dialog .portal-cancel,.club-password-dialog .club-password-cancel { color:#eaffff; background:linear-gradient(#274f70,#11172c 58%,#371742); }
.portal-dialog .dialog-actions button:hover,.portal-dialog .dialog-actions button:focus-visible,.club-password-dialog .dialog-actions button:hover,.club-password-dialog .dialog-actions button:focus-visible { filter:brightness(1.25); transform:translateY(-2px); outline:none; }
@media (max-width:560px) { .portal-dialog .dialog-actions button,.club-password-dialog .dialog-actions button { flex:1; min-width:0; min-height:50px; padding-inline:10px; font-size:12px; } }

/* V33 final billboard geometry — this must remain the last desktop facade rule. */
@media (min-width:701px) {
  .arcade-portal { overflow:visible; }
  .arcade-portal .arcade-game-screen {
    left:24.8%; right:auto; top:16.5%; width:100.5%; height:20.5%; z-index:300;
    overflow:hidden; isolation:isolate; contain:layout paint style;
    clip-path:polygon(1% 0,99% 0,100% 4%,100% 96%,99% 100%,1% 100%,0 96%,0 4%);
    border:1px solid #64efff; background:#01030a;
    box-shadow:inset 0 0 8px #58eeff77,0 0 4px #9d62ff88;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img { position:absolute; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; transform:none!important; clip-path:none!important; }
  .arcade-portal .arcade-gif-frame { overflow:hidden; }
  .arcade-portal .arcade-gif-frame img { object-fit:fill!important; object-position:center!important; }
  .arcade-portal .led-letter-sequence { inset:0 5%; width:auto; justify-content:center; gap:.08em; font-size:clamp(8px,.9vw,14px); white-space:nowrap; overflow:visible; }
  .arcade-portal .arcade-digital-sign { left:24.8%; right:auto; width:100.5%; z-index:301; justify-content:center; overflow:hidden; padding-inline:4px; }
  .arcade-portal .arcade-digital-sign b { min-width:max-content; overflow:visible; text-overflow:clip; white-space:nowrap; }
}

/* V40 requested home refinements. */
@media (min-width:701px) {
  .ascii-angel-constellation {
    opacity:.39!important;
    filter:grayscale(1) invert(1) contrast(3.3) brightness(2.08) drop-shadow(0 0 9px #e6fcff8c)!important;
  }
}
@media (max-width:700px), (pointer:coarse) {
  .kingdom-menu-button { top:24px!important; }
}

/* V39 — final home polish: slightly clearer desktop constellation and a MAP
   monitor tucked closer to the mobile safe-area corner. */
@media (min-width:701px) {
  .ascii-angel-constellation {
    opacity:.36!important;
    filter:grayscale(1) invert(1) contrast(3.25) brightness(1.96) drop-shadow(0 0 8px #ddfbff7a)!important;
  }
}
@media (max-width:700px), (pointer:coarse) {
  .kingdom-menu-button { top:29px!important; }
}

/* V34 — one rebuilt desktop billboard, outside the portal clipping tree. */
.desktop-arcade-billboard-remake { display:none; }
@media (min-width:701px) {
  .district-portals .arcade-portal > .arcade-game-screen,
  .district-portals .arcade-portal > .arcade-digital-sign { display:none!important; }
  .desktop-arcade-billboard-remake {
    position:fixed;
    z-index:8900;
    display:block;
    overflow:visible;
    pointer-events:none;
    transform:none;
    filter:none;
    contain:none;
  }
  .desktop-arcade-billboard-remake > .arcade-game-screen {
    position:absolute;
    left:24.8%;
    right:auto;
    top:16.5%;
    width:58.5%;
    height:20.5%;
    overflow:hidden;
    isolation:isolate;
    contain:none;
    clip-path:polygon(1% 0,99% 0,100% 4%,100% 96%,99% 100%,1% 100%,0 96%,0 4%);
    border:1px solid #70f4ff;
    background:#01030a;
    box-shadow:inset 0 0 8px #58eeff77,0 0 5px #9d62ff99;
  }
  .desktop-arcade-billboard-remake .arcade-gif-frame,
  .desktop-arcade-billboard-remake .arcade-gif-frame img {
    position:absolute;
    inset:0!important;
    display:block;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    transform:none!important;
    clip-path:none!important;
  }
  .desktop-arcade-billboard-remake .arcade-gif-frame { overflow:hidden; }
  .desktop-arcade-billboard-remake .arcade-gif-frame img { object-fit:fill!important; object-position:center!important; }
  .desktop-arcade-billboard-remake .led-letter-sequence {
    inset:0 3%;
    width:auto;
    justify-content:center;
    gap:.025em;
    overflow:visible;
    white-space:nowrap;
    font-size:clamp(7px,.78vw,13px);
  }
  .desktop-arcade-billboard-remake > .arcade-digital-sign {
    position:absolute;
    left:24.8%;
    right:auto;
    top:57.7%;
    width:58.5%;
    height:7.7%;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    overflow:visible;
    padding:0 3px;
    color:#c7fbff;
    background:transparent;
    font-size:clamp(5px,.5vw,8.5px);
    letter-spacing:.012em;
    white-space:nowrap;
  }
  .desktop-arcade-billboard-remake > .arcade-digital-sign b { flex:0 0 auto; min-width:max-content; overflow:visible; white-space:nowrap; }
  .desktop-arcade-billboard-remake.animations-paused *,
  .desktop-arcade-billboard-remake.animations-paused *::before,
  .desktop-arcade-billboard-remake.animations-paused *::after { animation-play-state:paused!important; }
}

/* V33 — the desktop Arcade facade artwork is wider than its link hitbox.
   Size both animated panels from the complete physical cabinet, never the hitbox. */
@media (min-width:701px) {
  .arcade-portal { overflow:visible; }
  .arcade-portal .arcade-game-screen {
    left:24.8%;
    right:auto;
    top:16.5%;
    width:100.5%;
    height:20.5%;
    z-index:300;
    overflow:hidden;
    isolation:isolate;
    contain:layout paint style;
    clip-path:polygon(1% 0,99% 0,100% 4%,100% 96%,99% 100%,1% 100%,0 96%,0 4%);
    background:#01030a;
  }
  .arcade-portal .arcade-gif-frame,
  .arcade-portal .arcade-gif-frame img {
    position:absolute;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    transform:none!important;
    clip-path:none!important;
  }
  .arcade-portal .arcade-gif-frame { overflow:hidden; }
  .arcade-portal .arcade-gif-frame img { object-fit:fill!important; object-position:center!important; }
  .arcade-portal .led-letter-sequence {
    inset:0 5%;
    width:auto;
    justify-content:center;
    gap:.08em;
    font-size:clamp(8px,.9vw,14px);
    white-space:nowrap;
    overflow:visible;
  }
  .arcade-portal .arcade-digital-sign {
    left:24.8%;
    right:auto;
    width:100.5%;
    z-index:301;
    justify-content:center;
    overflow:hidden;
    padding-inline:4px;
  }
  .arcade-portal .arcade-digital-sign b { min-width:max-content; overflow:visible; text-overflow:clip; white-space:nowrap; }
}