*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#080604}
body{overflow:hidden}
.foyer{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#080604}
.foyer-background{
  position:absolute;inset:0;
  background:url("../assets/images/great-swingali-foyer.png") center/cover no-repeat
}


.castle-title{
  position:absolute;
  z-index:5;
  top:1.8%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width:max-content;
  max-width:88vw;
  color:#ead8b8;
  font:400 clamp(1.15rem,1.75vw,1.85rem)/1.05 "Rye",Georgia,serif;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:
    0 3px 10px rgba(0,0,0,.98),
    0 0 12px rgba(167,99,232,.20);
  pointer-events:none;
}

/* HOTSPOTS
   These are separate HTML layers, so we can move/resize them later without touching the artwork. */
.hotspot{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#f1ddbc;
  border-radius:18px;
  outline:none;
  cursor:pointer;
}

.hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(circle,rgba(220,171,255,.36),rgba(145,76,205,.12) 62%,transparent 80%);
  box-shadow:
    0 0 28px rgba(210,153,255,.62),
    inset 0 0 24px rgba(246,226,255,.18);
  transition:opacity .22s ease, transform .25s ease;
}

.hotspot span{
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(6px);
  padding:.48rem .72rem;
  background:rgba(7,5,5,.70);
  border:1px solid rgba(227,196,157,.34);
  border-radius:4px;
  font:700 clamp(.72rem,.9vw,.98rem)/1.1 Georgia,serif;
  letter-spacing:.07em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 2px 8px #000;
  box-shadow:0 0 12px rgba(0,0,0,.42);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}

.hotspot:hover::before,
.hotspot:focus-visible::before{
  opacity:1;
  transform:scale(1.035);
}

.hotspot:hover span,
.hotspot:focus-visible span{
  opacity:1;
  transform:translateY(0);
}

.hotspot:focus-visible{
  outline:2px solid rgba(233,210,255,.88);
  outline-offset:4px;
}

/* Tuned to the approved foyer master image. */
.archives{
  left:1.3%; top:30.8%;
  width:16.5%; height:31%;
}

.radio{
  left:0.8%; top:66%;
  width:20.5%; height:23%;
}

.workshop{
  left:42.2%; top:74%;
  width:20.5%; height:20%;
}

.shop{
  left:62.5%; top:24%;
  width:16.2%; height:31%;
}

.noticeboard{
  right:0.7%; top:33%;
  width:15.8%; height:28%;
}

.contact{
  right:0.5%; bottom:0.8%;
  width:22%; height:28%;
}

.about{
  left:41.7%; top:6.2%;
  width:16.8%; height:27%;
}

.gallery{
  left:25.5%; top:5%;
  width:17%; height:23%;
}

.return-portal{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  z-index:7;padding:.48rem .8rem;color:rgba(239,220,185,.60);
  font:600 .72rem/1.1 Georgia,serif;letter-spacing:.08em;text-decoration:none;
  text-transform:uppercase;text-shadow:0 2px 7px #000;opacity:.22;transition:.2s
}
.return-portal:hover,.return-portal:focus-visible{
  opacity:1;text-shadow:0 0 12px rgba(183,117,255,.85),0 2px 7px #000
}

/* Keep hotspots usable on narrower screens while preserving relative locations. */
@media(max-width:900px){
  .hotspot span{
    font-size:.64rem;
    padding:.35rem .45rem;
  }
}


/* ============================================================
   FOYER FIRST-VISIT UX — ROOM-SCOPED MARKER SYSTEM
   CSS-only: does not alter hotspot geometry, links, JS, artwork,
   permanent header/countdown, or ambience.
   ============================================================ */
.hotspot{
  --marker-size:clamp(13px,1.15vw,18px);
  --marker-x:50%;
  --marker-y:50%;
}

/* Visible Portal-purple interaction marker */
.hotspot::after{
  content:"";
  position:absolute;
  z-index:3;
  left:var(--marker-x);
  top:var(--marker-y);
  width:var(--marker-size);
  height:var(--marker-size);
  margin-left:calc(var(--marker-size) / -2);
  margin-top:calc(var(--marker-size) / -2);
  border:1px solid rgba(247,226,255,.96);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,
      #efc9ff 9% 22%,
      #c36df2 42%,
      #681b8c 72%,
      rgba(77,10,107,.25) 78%,
      transparent 80%);
  box-shadow:
    0 0 6px rgba(246,223,255,.98),
    0 0 15px rgba(205,105,255,.95),
    0 0 28px rgba(142,43,205,.76);
  pointer-events:none;
  transform-origin:center;
  animation:
    foyerMarkerPulse 1.8s ease-in-out infinite,
    foyerMarkerTurn 4.6s linear infinite;
}

.hotspot:hover::after,
.hotspot:focus-visible::after{
  box-shadow:
    0 0 8px rgba(255,242,255,1),
    0 0 21px rgba(220,139,255,1),
    0 0 38px rgba(155,51,221,.94);
  filter:brightness(1.18);
}

@keyframes foyerMarkerPulse{
  0%,100%{scale:.88;opacity:.80}
  50%{scale:1.14;opacity:1}
}
@keyframes foyerMarkerTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}

/* Independent marker positions. These do not move/resize click targets. */
.archives{--marker-x:52%;--marker-y:50%}
.radio{--marker-x:48%;--marker-y:47%}
.workshop{--marker-x:50%;--marker-y:38%;--marker-size:clamp(15px,1.28vw,20px)}
.shop{--marker-x:50%;--marker-y:49%}
.noticeboard{--marker-x:48%;--marker-y:48%}
.about{--marker-x:50%;--marker-y:60%}
.gallery{--marker-x:50%;--marker-y:63%;--marker-size:clamp(15px,1.28vw,20px)}

@media(prefers-reduced-motion:reduce){
  .hotspot::after{animation:none}
}


/* ============================================================
   FOYER — SHOP MARKER LABEL CLEARANCE
   Move the Shop marker above the word SHOP so it never covers the label.
   ============================================================ */
.hotspot.shop::after,
.hotspot.shop .portal-marker,
.hotspot.shop .hotspot-marker{
  top:-14px !important;
  bottom:auto !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}


/* ============================================================
   FOYER — HORROR THEATER ENTRANCE
   Dark hallway immediately left of the top of the left spiral staircase.
   Separate hotspot layer; no Foyer artwork is changed.
   ============================================================ */
.horror-theater{
  left:18.8%;
  top:27.4%;
  width:8.2%;
  height:10.8%;

  /* Marker sits toward the RIGHT side of this small hallway target:
     just left of the top stairway post. */
  --marker-x:84%;
  --marker-y:43%;
  --marker-size:clamp(15px,1.28vw,20px);
}

/* This entrance is intentionally a smaller environmental target.
   It still uses the Foyer's normal purple hover glow/box and label. */
.horror-theater::before{
  border-radius:10px;
  background:
    radial-gradient(ellipse at center,
      rgba(220,171,255,.34),
      rgba(145,76,205,.13) 60%,
      transparent 82%);
  box-shadow:
    0 0 25px rgba(210,153,255,.60),
    inset 0 0 21px rgba(246,226,255,.17);
}

/* Keep its hover label clear of the marker and stair-post reference point. */
.horror-theater span{
  transform:translate(-7%,6px);
}
.horror-theater:hover span,
.horror-theater:focus-visible span{
  transform:translate(-7%,0);
}

@media(max-width:900px){
  .horror-theater{
    width:9%;
    height:11.5%;
  }
}