.page-wrapper {
  min-height: 100vh;
  background: #000;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px 48px;
}
.stoop-header, .stoop-who, .instruction, .campus { position: relative; z-index: 1; width: min(1100px, 100%); }
.stoop-header {
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  font-weight: 700; letter-spacing: 1.5px; text-align: center;
  animation: pulse-glow 1.6s ease-in-out infinite;
  text-shadow: 0 0 12px #00ff66, 0 0 28px #00ff66;
  margin: 8px 0 10px;
}
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 12px #00ff66, 0 0 28px #00ff66; }
  50% { text-shadow: 0 0 24px #00ff66, 0 0 64px #00ff66; }
}
.stoop-who { margin: 0 0 8px; opacity: .85; font-size: .9rem; text-align: center; }
.instruction { max-width: 720px; text-align: center; opacity: .85; margin: 0 auto 12px; }
.map-stoop { box-shadow: 0 0 40px #00ff6633, inset 0 0 80px #00180844; }
.campus-stage.map-stoop { overflow: visible; }
.stoop-facade {
  position: absolute; left: 18%; right: 18%; top: 4%; height: 18%;
  pointer-events: none;
}
.stoop-index { display: flex; flex-direction: column; gap: 8px; }
.stoop-index button {
  background: transparent; color: #00ff66; border: 1px solid #00ff66;
  padding: 12px; cursor: pointer; font-weight: 700; text-align: left;
}
.stoop-index button:hover { background: #00ff66; color: #000; }
.stoop-feed { max-width: 640px; margin: 0 auto; width: 100%; }

.station-modal {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.92); align-items: center; justify-content: center; padding: 16px;
}
.station-modal.is-open { display: flex; }
.station-panel {
  position: relative; width: min(640px, 96vw); max-height: 88vh; overflow: auto;
  background: #101410; border: 2px solid #00ff66;
  box-shadow: 0 0 30px #00ff66, 0 0 80px #00ff6633, inset 0 0 40px #00ff6611;
  padding: 28px 22px 22px;
}
.station-art {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  border: 1px solid #00ff6655;
  margin: 0 0 14px;
  box-shadow: 0 0 18px #00ff6633;
}
.station-panel.news, .station-panel.uxu { width: min(720px, 96vw); }
.trade-lede { margin: 0 0 12px; }
.trade-term {
  white-space: pre-wrap;
  font-size: .78rem;
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid #00ff6655;
  background: #001208cc;
  box-shadow: inset 0 0 24px #00ff6614;
  text-shadow: 0 0 6px #00ff66;
  margin: 0 0 12px;
}
.trade-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.trade-tabs button {
  flex: 1; min-width: 4.4rem; background: transparent; color: #00ff66; border: 1px solid #00ff66;
  padding: 8px 6px; cursor: pointer; font-weight: 700; letter-spacing: 1px; font-size: .78rem;
}
.trade-tabs button[aria-selected="true"] { background: #00ff66; color: #000; }
.trade-rolodex {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px;
}
.trade-trader {
  background: #001208; color: #00ff66; border: 1px solid #00ff6655;
  padding: 4px 8px; cursor: pointer; font-size: .72rem; letter-spacing: .5px;
  display: inline-flex; gap: 6px; align-items: center;
}
.trade-trader span { text-shadow: 0 0 8px #00ff66; }
.trade-trader:hover { border-color: #00ff66; box-shadow: 0 0 10px #00ff6644; }
.trade-board { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; max-height: 32vh; overflow: auto; }
.trade-slip {
  border: 1px solid #00ff6655;
  padding: 10px 12px;
  background: #001208cc;
  box-shadow: inset 0 0 18px #00ff6614;
}
.trade-slip--HAVE { border-left: 3px solid #00ff66; }
.trade-slip--WANT { border-left: 3px solid #b8ffd0; }
.trade-slip--TRADE { border-left: 3px solid #ffe566; }
.trade-slip--trader { border-left: 3px solid #66ffcc; }
.trade-slip header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.trade-flag {
  font-size: .68rem; letter-spacing: 1px; font-weight: 700;
  border: 1px solid #00ff66; padding: 1px 6px; text-shadow: 0 0 6px #00ff66;
}
.trade-flag--kind { opacity: .75; border-style: dashed; }
.trade-notes { margin: 6px 0 0; opacity: .85; font-size: .85rem; }
.trade-meta { margin: 4px 0 0; font-size: .7rem; opacity: .6; letter-spacing: .4px; }
.trade-slip footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: .75rem; opacity: .85; gap: 8px; flex-wrap: wrap;
}
.trade-slip em { font-style: normal; }
.trade-actions { display: flex; gap: 8px; align-items: center; }
.trade-index {
  color: #00ff66; font-size: .7rem; letter-spacing: .6px; text-decoration: underline;
  text-underline-offset: 2px;
}
.trade-pull {
  background: transparent; color: #00ff66; border: 1px solid #00ff6655;
  cursor: pointer; font-size: .7rem; letter-spacing: 1px; padding: 3px 8px;
}
.trade-pull:hover { background: #00ff66; color: #000; }
.trade-form { margin-top: 8px; padding-top: 10px; border-top: 1px dashed #00ff6644; }
.trade-form-label { margin: 0; font-weight: 700; letter-spacing: 1px; font-size: .8rem; }
.trade-side { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; letter-spacing: 1px; }
.trade-side label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.trade-form textarea, .trade-form select {
  background: #000; color: #00ff66; border: 1px solid #00ff66; padding: 10px;
  box-shadow: inset 0 0 12px #00ff6618; font: inherit; width: 100%;
}
.trade-form textarea { resize: vertical; min-height: 52px; }
.trade-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.trade-src { margin: 0; font-size: .72rem; opacity: .55; }
.trade-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.uxu-mark {
  display: block;
  width: min(320px, 78%);
  margin: 8px auto 16px;
  filter: drop-shadow(0 0 18px #00ff6688) contrast(1.08);
}
.uxu-term {
  white-space: pre-wrap;
  font-size: .82rem;
  line-height: 1.45;
  padding: 12px;
  border: 1px solid #00ff6655;
  background: #001208cc;
  box-shadow: inset 0 0 24px #00ff6614;
  text-shadow: 0 0 6px #00ff66;
  margin: 0 0 12px;
  overflow: auto;
}
.uxu-preview { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.uxu-folio {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 8px; align-items: center;
  border: 1px solid #00ff6655; padding: 8px;
}
.uxu-folio--master {
  border-color: #00ff66;
  box-shadow: 0 0 12px #00ff6644;
}
.uxu-folio em { font-style: normal; opacity: .6; font-size: .75rem; }
.station-close {
  position: absolute; top: 8px; right: 12px; background: transparent;
  border: 0; color: #00ff66; font-size: 2rem; cursor: pointer;
  text-shadow: 0 0 10px #00ff66;
}
.gate-tabs { display: flex; gap: 8px; margin: 8px 0 16px; }
.gate-tabs button {
  flex: 1; background: transparent; color: #00ff66; border: 1px solid #00ff66;
  padding: 10px; cursor: pointer; font-weight: 700; letter-spacing: 1px;
}
.gate-tabs button[aria-selected="true"] { background: #00ff66; color: #000; }
.gate-form { display: flex; flex-direction: column; gap: 10px; }
.gate-form[hidden] { display: none !important; }
.gate-form label { font-size: .8rem; letter-spacing: 1px; }
.gate-form input {
  background: #000; color: #00ff66; border: 1px solid #00ff66; padding: 10px;
  box-shadow: inset 0 0 12px #00ff6618;
}
.gate-form button[type="submit"] {
  margin-top: 8px; background: transparent; color: #00ff66; border: 2px solid #00ff66;
  padding: 12px; font-weight: 700; cursor: pointer;
}
.gate-form button[type="submit"]:hover { background: #00ff66; color: #000; box-shadow: 0 0 22px #00ff66; }
.gate-form .ghost-link {
  background: transparent; border: 0; color: #00ff66; cursor: pointer;
  text-decoration: underline; padding: 0; font-size: .8rem; letter-spacing: 1px;
  align-self: flex-start; opacity: .85;
}
.gate-form .ghost-link:hover { opacity: 1; text-shadow: 0 0 8px #00ff66; }
.gate-status { min-height: 2.4em; font-size: .9rem; margin-top: 10px; }
.gate-status[data-ok="1"] { color: #b8ffd0; }
.gate-status[data-ok="0"] { color: #ffb0b0; }
.modal-enter-btn {
  display: inline-block; margin-top: 14px; padding: 12px 20px;
  border: 2px solid #00ff66; text-decoration: none; font-weight: 700;
  box-shadow: 0 0 16px #00ff6644;
}
.modal-enter-btn:hover { background: #00ff66; color: #000; box-shadow: 0 0 28px #00ff66; }
.flavor { white-space: pre-line; line-height: 1.5; }
.skin-rack { display: block; margin: 14px 0; }

.stoop-furn {
  background: transparent !important;
  border-color: transparent !important;
  color: #b8ffd0 !important;
  min-height: 0;
  padding: 0 0 2px !important;
  box-shadow: none;
}
.stoop-furn:hover {
  background: transparent !important;
  color: #e8ffe8 !important;
}
.stoop-furn:hover .spot-photo {
  filter: brightness(1.08) contrast(1.08) drop-shadow(0 0 14px #00ff6688);
}
.stoop-furn__art {
  display: block; width: 100%; height: 72px;
  pointer-events: none;
}
.stoop-door {
  display: block; width: 42%; height: 68px; margin: 4px auto 0;
  background: linear-gradient(#0c2214, #031408);
  border: 3px solid #00ff66;
  box-shadow: inset 8px 0 0 #00ff6644, 0 0 12px #00ff6644;
}
.stoop-crt {
  display: block; width: 70%; height: 54px; margin: 8px auto 0;
  background: radial-gradient(ellipse at 40% 40%, #00ff6644, #031408);
  border: 3px solid #00ff66;
  border-radius: 4px;
  box-shadow: 0 0 12px #00ff6644, inset 0 0 12px #00ff6622;
}
.stoop-x {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 8px auto 0;
  border: 3px solid #00ff66; color: #00ff66;
  font-weight: 700; font-size: 1.4rem;
  text-shadow: 0 0 8px #00ff66;
  background: #031408;
}
.stoop-x::before { content: "^X^"; }
.stoop-rack {
  display: flex; justify-content: center; gap: 8px; align-items: flex-end;
  height: 64px; padding-top: 8px;
}
.stoop-rack i {
  display: block; width: 14px; height: 48px;
  background: linear-gradient(#00ff6688, #063018);
  border: 1px solid #00ff66;
  box-shadow: 0 0 8px #00ff6644;
}
.stoop-rack i:nth-child(2) { height: 40px; }
.stoop-bath {
  display: block; width: 58px; height: 28px; margin: 22px auto 0;
  border: 3px solid #00ff66; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #00ff6644, #0a1810);
  box-shadow: inset 0 4px 8px #0008, 0 0 10px #00ff6644;
}
.shrub-spot {
  width: min(72px, 16vw);
  min-height: 0;
  background: transparent !important;
  z-index: 3;
}
.stoop-shrub {
  display: block; width: 70px; height: 58px; margin: 10px auto 0;
  position: relative;
  background:
    radial-gradient(circle at 50% 70%, #00ff6633, transparent 62%),
    radial-gradient(circle at 28% 48%, #00cc5588 0 38%, transparent 40%),
    radial-gradient(circle at 72% 44%, #00ff6688 0 36%, transparent 38%),
    radial-gradient(circle at 50% 28%, #33ff8888 0 34%, transparent 36%);
  filter: drop-shadow(0 0 10px #00ff6688);
}
.stoop-shrub::after {
  content: "";
  position: absolute; left: 50%; bottom: 2px; width: 10px; height: 16px;
  transform: translateX(-50%);
  background: #063018;
  border: 1px solid #00ff6655;
}

.stoop-index details.stoop-shrub-note {
  border: 1px solid #00ff66;
  padding: 10px 12px;
  cursor: pointer;
}
.stoop-index details.stoop-shrub-note summary { font-weight: 700; letter-spacing: .4px; }
.stoop-index details.stoop-shrub-note p { margin: 8px 0 0; opacity: .85; font-size: .85rem; }

.kiosk-spot, .entry-spot { width: min(118px, 22vw); min-height: 0; }
.spot.obj .spot-photo { height: 64px; }

.shrub-pop {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 8px;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  text-align: left;
  background: #001208f2;
  color: #00ff66;
  border: 1px solid #00ff66;
  box-shadow: 0 0 16px #00ff6644;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transform: none;
}
.shrub-pop--left {
  left: auto;
  right: calc(100% + 8px);
}
.shrub-pop strong, .shrub-pop em, .shrub-pop span {
  display: block;
  pointer-events: none;
}
.shrub-pop strong { font-size: .68rem; letter-spacing: 1px; }
.shrub-pop em { font-style: normal; opacity: .65; font-size: .58rem; margin: 0 0 6px; }
.shrub-pop span { font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-shadow: 0 0 8px #00ff66; }
.shrub-spot:hover .shrub-pop,
.shrub-spot:focus-visible .shrub-pop,
.shrub-spot.is-pinned .shrub-pop {
  opacity: 1;
}
@media (hover: none) {
  .shrub-spot .shrub-pop { opacity: 0; }
  .shrub-spot.is-pinned .shrub-pop { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stoop-header { animation: none; }
}