:root{
  --gold:#d6b06a;--cream:#f3ead9;--ink:#071009;--panel:rgba(7,13,9,.82);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050806;color:var(--cream);font-family:Georgia,"Times New Roman",serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{
  position:fixed;z-index:100;left:0;right:0;top:0;height:72px;
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  background:rgba(4,8,5,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(214,176,106,.25)
}
.brand{letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-size:.78rem}
.nav{display:flex;gap:24px;align-items:center}
.nav a,.sound-toggle{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase}
.nav a:hover{color:var(--gold)}
.sound-toggle{border:1px solid rgba(214,176,106,.45);padding:9px 12px;background:transparent;color:var(--cream);cursor:pointer}
.scene{min-height:100svh;position:relative;padding-top:72px;overflow:hidden}
.scene-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.scene-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,4,.78),rgba(3,6,4,.18) 60%,rgba(3,6,4,.34))}
.scene-content{position:relative;z-index:2;max-width:620px;padding:clamp(100px,16vh,180px) clamp(24px,7vw,120px)}
.eyebrow{letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-size:.67rem}
h1{font-size:clamp(4.2rem,9vw,9rem);line-height:.84;margin:12px 0 24px;font-weight:500;letter-spacing:-.045em}
.lede{font-size:clamp(1.18rem,2.1vw,1.55rem);line-height:1.55;font-style:italic;color:#eee3d2}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--gold);background:var(--gold);color:#17130c;letter-spacing:.13em;text-transform:uppercase;font-size:.66rem;cursor:pointer}
.btn.alt{background:rgba(5,9,6,.72);color:var(--cream)}
.room-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;max-width:1100px;margin:0 auto;padding:120px 28px 70px}
.room-card{min-height:340px;position:relative;overflow:hidden;border:1px solid rgba(214,176,106,.28)}
.room-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.room-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(3,6,4,.86))}
.room-card .copy{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.room-card h2{font-size:2.4rem;margin:0 0 8px}
.room-card:hover img{transform:scale(1.035)}
.common-stage{min-height:100svh;position:relative;padding-top:72px;background:url("../images/common-room.jpg") center/cover no-repeat}
.common-stage:after{content:"";position:absolute;inset:72px 0 0;background:linear-gradient(180deg,rgba(1,3,2,.16),rgba(1,3,2,.32));pointer-events:none}
.common-title{position:relative;z-index:3;text-align:center;padding-top:38px;text-shadow:0 4px 25px #000}
.common-title h1{font-size:clamp(3.8rem,8vw,7.5rem);margin-bottom:12px}
.hotspot{position:absolute;z-index:5;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:rgba(5,10,6,.8);color:var(--gold);cursor:pointer;box-shadow:0 0 0 6px rgba(214,176,106,.12),0 0 24px rgba(214,176,106,.36)}
.hotspot:before{content:"✦"}
.hotspot span{position:absolute;top:50px;left:50%;transform:translateX(-50%);opacity:0;white-space:nowrap;background:rgba(5,9,6,.92);border:1px solid rgba(214,176,106,.42);padding:6px 9px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);transition:.25s}
.hotspot:hover span,.hotspot:focus span{opacity:1}
.hotspot.met{background:var(--gold);color:#111}
.progress{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 18px;background:rgba(5,9,6,.9);border:1px solid rgba(214,176,106,.42);letter-spacing:.13em;text-transform:uppercase;font-size:.68rem}
dialog{border:none;padding:0;background:transparent;color:var(--cream);width:min(880px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.77);backdrop-filter:blur(8px)}
.dialog-card{display:grid;grid-template-columns:.8fr 1.2fr;background:#0b130d;border:1px solid rgba(214,176,106,.55);position:relative;box-shadow:0 30px 110px rgba(0,0,0,.7)}
.dialog-card img{width:100%;height:100%;object-fit:cover;min-height:560px}
.dialog-copy{padding:40px}
.dialog-copy small{color:var(--gold);letter-spacing:.18em;text-transform:uppercase}
.dialog-copy h2{font-size:clamp(3rem,7vw,5.6rem);margin:6px 0}
.dialog-copy .intro{font-size:1.18rem;line-height:1.55;font-style:italic}
.dialog-section{border-top:1px solid rgba(214,176,106,.24);margin-top:22px;padding-top:16px}
.dialog-section h3{color:var(--gold);letter-spacing:.15em;text-transform:uppercase;font-size:.7rem}
.psst{background:#e4d4b4;color:#272015;padding:17px;margin-top:20px;transform:rotate(-1deg)}
.close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:1px solid rgba(214,176,106,.5);background:#08100a;color:#fff;font-size:1.4rem;cursor:pointer;z-index:2}
.secret{position:fixed;z-index:110;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#08100a;border:1px solid var(--gold);padding:18px 25px;text-align:center;transition:.5s}
.secret.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.secret strong{display:block;color:var(--gold);font-size:1.2rem}
.footer{padding:28px;text-align:center;background:#050806;border-top:1px solid rgba(214,176,106,.18);color:#bfb5a3;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:800px){
  .site-header{height:auto;min-height:68px;align-items:flex-start;padding:16px 18px}
  .nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}
  .room-grid{grid-template-columns:1fr}
  .dialog-card{grid-template-columns:1fr}
  .dialog-card img{height:290px;min-height:0}
  .dialog-copy{padding:24px}
  .progress{width:90%;text-align:center}
}

.common-stage::before{content:"";position:absolute;inset:72px 0 0;z-index:2;pointer-events:none;background:radial-gradient(circle at 55% 50%,rgba(255,157,55,.14),transparent 17%);animation:roomBreathe 5.5s ease-in-out infinite}
.rain-layer{position:absolute;inset:72px 0 0;z-index:3;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(105deg,rgba(210,230,245,.16) 0 1px,transparent 1px 12px);background-size:14px 90px;animation:rainFall .85s linear infinite;mask-image:linear-gradient(90deg,#000 0 18%,transparent 28% 100%)}
.fire-glow{position:absolute;left:50%;top:50%;width:22vw;height:22vw;min-width:220px;min-height:220px;transform:translate(-50%,-50%);border-radius:50%;z-index:3;pointer-events:none;background:radial-gradient(circle,rgba(255,142,42,.24),rgba(255,109,24,.07) 42%,transparent 70%);animation:fireFlicker 1.8s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes roomBreathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes rainFall{from{background-position:0 -90px}to{background-position:-10px 0}}
@keyframes fireFlicker{0%{opacity:.62;transform:translate(-50%,-50%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
.hotspot{opacity:.28;transition:.25s}
.common-stage:hover .hotspot{opacity:.72}
.hotspot:hover,.hotspot:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.info-note{position:fixed;right:22px;bottom:22px;z-index:120;width:min(360px,calc(100vw - 44px));padding:18px 20px;border:1px solid var(--gold);background:rgba(6,11,8,.95);opacity:0;transform:translateY(18px);pointer-events:none;transition:.35s}
.info-note.show{opacity:1;transform:none}
.info-note strong{display:block;color:var(--gold);margin-bottom:6px}
.version-badge{position:fixed;z-index:140;right:12px;bottom:12px;padding:6px 9px;background:rgba(4,8,5,.82);border:1px solid rgba(214,176,106,.35);color:#c9b892;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.common-stage::before,.rain-layer,.fire-glow{animation:none!important}}


/* =========================================================
   ALPHA 2.2 — COMMON ROOM POLISH
   ========================================================= */

.common-stage{
  background-size:cover;
  animation:scene-drift 22s ease-in-out infinite alternate;
}

@keyframes scene-drift{
  0%{background-position:49.5% center}
  100%{background-position:50.5% center}
}

.common-title{
  padding-top:24px;
  pointer-events:none;
}

.common-title .eyebrow{
  display:none;
}

.common-title h1{
  margin:0;
  font-size:clamp(3.6rem,7vw,6.8rem);
  line-height:.9;
}

.common-title .lede{
  margin:.55rem 0 0;
  font-size:clamp(1rem,1.8vw,1.32rem);
  opacity:0;
  transform:translateY(8px);
  animation:greeting-arrives .9s ease 1.7s forwards;
}

@keyframes greeting-arrives{
  to{opacity:1;transform:none}
}

.jonah-notice{
  position:absolute;
  z-index:7;
  left:20%;
  top:48%;
  transform:translate(-50%,-50%) scale(.92);
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(235,197,121,.88);
  box-shadow:0 0 0 0 rgba(235,197,121,.45);
  opacity:0;
  pointer-events:none;
  animation:jonah-notices 3.3s ease 1.35s forwards;
}

@keyframes jonah-notices{
  0%{opacity:0;box-shadow:0 0 0 0 rgba(235,197,121,0)}
  30%{opacity:1;box-shadow:0 0 0 6px rgba(235,197,121,.18)}
  62%{opacity:1;box-shadow:0 0 0 18px rgba(235,197,121,.04)}
  100%{opacity:0;box-shadow:0 0 0 28px rgba(235,197,121,0)}
}

.common-stage .hotspot{
  opacity:.035;
  box-shadow:none;
}

.common-stage.explore-ready .hotspot{
  opacity:.12;
}

.common-stage .hotspot:hover,
.common-stage .hotspot:focus-visible,
.common-stage .hotspot.met{
  opacity:1;
  box-shadow:0 0 0 5px rgba(214,176,106,.11),0 0 22px rgba(214,176,106,.3);
}

.common-stage .hotspot span{
  top:48px;
}

.explore-hint{
  position:absolute;
  z-index:7;
  left:24px;
  bottom:26px;
  max-width:280px;
  padding:12px 15px;
  background:rgba(5,9,6,.76);
  border-left:2px solid var(--gold);
  color:#d9cfbc;
  font-size:.74rem;
  line-height:1.45;
  opacity:0;
  transform:translateY(8px);
  animation:hint-in .8s ease 3.1s forwards;
}

.explore-hint strong{
  display:block;
  color:var(--gold);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.61rem;
  margin-bottom:4px;
}

@keyframes hint-in{
  to{opacity:.88;transform:none}
}

.embers{
  position:absolute;
  z-index:4;
  left:50%;
  top:57%;
  width:120px;
  height:120px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}

.ember{
  position:absolute;
  bottom:18px;
  left:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#ffd08a;
  box-shadow:0 0 9px rgba(255,147,50,.9);
  opacity:0;
  animation:ember-rise var(--duration) linear var(--delay) infinite;
}

@keyframes ember-rise{
  0%{opacity:0;transform:translate(0,0) scale(.8)}
  20%{opacity:.85}
  100%{opacity:0;transform:translate(var(--drift),-105px) scale(.2)}
}

.version-badge{
  right:14px;
  bottom:14px;
}

@media(max-width:800px){
  .common-title{padding-top:18px}
  .explore-hint{left:14px;right:14px;bottom:72px;max-width:none}
  .jonah-notice{left:20%;top:50%}
}

@media(prefers-reduced-motion:reduce){
  .common-stage,
  .common-title .lede,
  .jonah-notice,
  .explore-hint,
  .ember{animation:none!important}
  .common-title .lede,
  .explore-hint{opacity:1;transform:none}
}


/* =========================================================
   ALPHA 2.2 — VIDEO COMMON ROOM
   ========================================================= */
.common-stage{
  background:#050806!important;
  overflow:hidden;
  animation:none!important;
}
.common-stage::before,
.common-stage::after,
.rain-layer,
.fire-glow,
.embers,
.jonah-notice{
  display:none!important;
}
.common-room-video{
  position:absolute;
  inset:72px 0 0;
  width:100%;
  height:calc(100% - 72px);
  object-fit:cover;
  object-position:center;
  z-index:1;
  background:#050806;
}
.common-room-scrim{
  position:absolute;
  inset:72px 0 0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,5,3,.18),rgba(2,5,3,.1) 46%,rgba(2,5,3,.34)),
    linear-gradient(90deg,rgba(2,5,3,.18),transparent 25%,transparent 78%,rgba(2,5,3,.2));
}
.common-title{z-index:4;padding-top:24px}
.common-title h1{font-size:clamp(3.5rem,7vw,6.8rem);margin:0;text-shadow:0 4px 22px #000}
.common-title .lede{opacity:1!important;transform:none!important;animation:none!important;text-shadow:0 3px 18px #000}
.common-stage .hotspot{z-index:6;opacity:.035;box-shadow:none}
.common-stage.explore-ready .hotspot{opacity:.08}
.common-stage .hotspot:hover,.common-stage .hotspot:focus-visible,.common-stage .hotspot.met{opacity:1;box-shadow:0 0 0 5px rgba(214,176,106,.12),0 0 22px rgba(214,176,106,.34)}
.video-status{
  position:absolute;z-index:8;left:18px;top:88px;padding:8px 11px;
  border:1px solid rgba(214,176,106,.26);background:rgba(5,9,6,.68);
  color:#cbbd9d;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase
}
.video-status button{margin-left:8px;border:0;background:transparent;color:var(--gold);cursor:pointer}
.video-paused .common-room-video{filter:saturate(.8) brightness(.75)}
.version-badge{right:12px;bottom:12px}
@media(max-width:800px){
 .common-room-video{inset:68px 0 0;height:calc(100% - 68px)}
 .common-room-scrim{inset:68px 0 0}
 .video-status{top:78px;left:12px}
}

#jonahDialog{width:min(980px,94vw);max-height:92vh}
#jonahDialog::backdrop{background:rgba(2,5,3,.82);backdrop-filter:blur(10px)}
.jonah-video-card{position:relative;display:grid;grid-template-columns:minmax(300px,.85fr) minmax(300px,1.15fr);min-height:620px;overflow:hidden;background:#09110c;border:1px solid rgba(214,176,106,.58);box-shadow:0 34px 120px rgba(0,0,0,.78)}
.jonah-video-wrap{position:relative;min-height:620px;overflow:hidden;background:#030604}
.jonah-video{width:100%;height:100%;min-height:620px;display:block;object-fit:cover;object-position:center 28%;background:#030604}
.jonah-video-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,58px)}
.jonah-video-copy small{color:var(--gold);letter-spacing:.18em;text-transform:uppercase}
.jonah-video-copy h2{margin:8px 0 18px;font-size:clamp(3.2rem,7vw,6rem);font-weight:500}
.jonah-video-copy p{line-height:1.6;color:#d8cebb}
.jonah-video-copy .hint{margin-top:24px;padding-top:18px;border-top:1px solid rgba(214,176,106,.22);font-size:.82rem;color:#bcb19e}
.jonah-close{position:absolute;z-index:3;right:12px;top:12px;width:44px;height:44px;border:1px solid rgba(214,176,106,.5);background:rgba(5,9,6,.9);color:#fff;cursor:pointer;font-size:1.45rem}
body.jonah-speaking .common-room-video{filter:brightness(.58) saturate(.72)}
body.jonah-speaking .common-room-scrim{background:rgba(1,3,2,.42)}
@media(max-width:760px){
  .jonah-video-card{grid-template-columns:1fr;max-height:88vh;overflow:auto}
  .jonah-video-wrap,.jonah-video{min-height:52vh;height:52vh}
  .jonah-video-copy{padding:24px}
}

/* ALPHA 2.2 — LARGE CLICKABLE CHARACTER AREAS */
.character-hit-area{
  position:absolute;
  z-index:14;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  border-radius:28px;
}
.character-hit-area::after{
  content:attr(data-name);
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translate(-50%,10px);
  padding:8px 14px;
  white-space:nowrap;
  color:var(--gold);
  background:rgba(5,9,6,.92);
  border:1px solid rgba(214,176,106,.6);
  box-shadow:0 10px 35px rgba(0,0,0,.38);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:0;
  transition:.25s ease;
}
.character-hit-area:hover::after,
.character-hit-area:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}
.character-hit-area:hover,
.character-hit-area:focus-visible{
  outline:1px solid rgba(214,176,106,.22);
  background:radial-gradient(ellipse at center,rgba(214,176,106,.08),transparent 72%);
}
.jonah-hit{
  left:2%;
  top:25%;
  width:28%;
  height:55%;
}
@media(max-width:800px){
  .jonah-hit{left:0;top:25%;width:34%;height:55%}
}


/* =========================================================
   ALPHA 2.2 — CLEAN CHARACTER VIDEO SYSTEM
   ========================================================= */
.character-video-dialog{
  width:min(980px,94vw);
  max-height:92vh;
}
.character-video-dialog::backdrop{
  background:rgba(2,5,3,.84);
  backdrop-filter:blur(10px);
}
.character-video-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,.88fr) minmax(300px,1.12fr);
  min-height:620px;
  overflow:hidden;
  background:#09110c;
  border:1px solid rgba(214,176,106,.58);
  box-shadow:0 34px 120px rgba(0,0,0,.78);
}
.character-video-wrap{
  min-height:620px;
  overflow:hidden;
  background:#030604;
}
.character-video-media{
  width:100%;
  height:100%;
  min-height:620px;
  display:block;
  object-fit:cover;
  object-position:center 28%;
  background:#030604;
}
.character-video-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,5vw,58px);
}
.character-video-copy small{
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.character-video-copy h2{
  margin:8px 0 18px;
  font-size:clamp(3.2rem,7vw,6rem);
  font-weight:500;
}
.character-video-copy p{
  line-height:1.6;
  color:#d8cebb;
}
.character-video-copy .hint{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(214,176,106,.22);
  font-size:.82rem;
  color:#bcb19e;
}
.character-video-close{
  position:absolute;
  z-index:3;
  right:12px;
  top:12px;
  width:44px;
  height:44px;
  border:1px solid rgba(214,176,106,.5);
  background:rgba(5,9,6,.92);
  color:#fff;
  cursor:pointer;
  font-size:1.45rem;
}
body.character-speaking .common-room-video{
  filter:brightness(.55) saturate(.7);
}
body.character-speaking .common-room-scrim{
  background:rgba(1,3,2,.46);
}
.mara-hit{
  left:22%;
  top:28%;
  width:25%;
  height:47%;
}
.mara-hit::after{
  content:"Mara";
}
.hotspot[data-child="mara"]{
  width:54px;
  height:54px;
  opacity:.86;
}
.hotspot[data-child="mara"] span{
  opacity:1;
  top:60px;
}
@media(max-width:760px){
  .character-video-card{
    grid-template-columns:1fr;
    max-height:88vh;
    overflow:auto;
  }
  .character-video-wrap,.character-video-media{
    min-height:52vh;
    height:52vh;
  }
  .character-video-copy{padding:24px}
  .mara-hit{left:19%;top:28%;width:30%;height:47%}
}


/* ALPHA 2.2 — TESS INTERACTION */
.tess-hit{
  left:49%;
  top:28%;
  width:24%;
  height:48%;
}
.tess-hit::after{
  content:"Tess";
}
.hotspot[data-child="tess"]{
  width:54px;
  height:54px;
  opacity:.86;
}
.hotspot[data-child="tess"] span{
  opacity:1;
  top:60px;
}
@media(max-width:760px){
  .tess-hit{
    left:46%;
    top:28%;
    width:29%;
    height:49%;
  }
}


/* =========================================================
   ALPHA 2.3 — CORRECT COMMON ROOM RESTORATION
   Uses the correct common-room.jpg artwork.
   The older mismatched autoplay room video is disabled.
   ========================================================= */
.common-stage{
  background:
    linear-gradient(180deg,rgba(2,5,3,.08),rgba(2,5,3,.20)),
    url("../images/common-room.jpg") center/cover no-repeat !important;
  overflow:hidden;
}
.common-room-video,
.common-room-scrim,
.video-status{
  display:none !important;
}
.common-stage::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:72px 0 0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 58% 52%,rgba(255,157,55,.12),transparent 18%);
  animation:roomBreathe 5.5s ease-in-out infinite;
}
.common-stage::after{
  display:block !important;
  content:"";
  position:absolute;
  inset:72px 0 0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(1,3,2,.06),rgba(1,3,2,.18));
}
.rain-layer{
  display:block !important;
}
.fire-glow{
  display:block !important;
  left:58%;
  top:53%;
}

/* Canonical character positions */
.tess-hit{
  left:22%;
  top:28%;
  width:25%;
  height:47%;
}
.mara-hit{
  left:49%;
  top:28%;
  width:24%;
  height:48%;
}
.finn-hit{
  left:67%;
  top:34%;
  width:22%;
  height:47%;
}
.tess-hit::after{content:"Tess"}
.mara-hit::after{content:"Mara"}
.finn-hit::after{content:"Finn"}

@media(max-width:760px){
  .tess-hit{left:19%;top:28%;width:30%;height:47%}
  .mara-hit{left:46%;top:28%;width:29%;height:49%}
  .finn-hit{left:64%;top:34%;width:27%;height:48%}
}


/* ALPHA 2.4 — ELI TALKING PORTRAIT
   The Common Room artwork and all existing character positions remain unchanged. */
.eli-hit{
  left:33%;
  top:36%;
  width:18%;
  height:47%;
}
.eli-hit::after{content:"Eli"}
@media(max-width:760px){
  .eli-hit{left:31%;top:36%;width:23%;height:48%}
}


/* ALPHA 2.5 — MARCUS INTERACTION
   Existing room artwork and previous character positions remain unchanged. */
.marcus-hit{
  left:82%;
  top:22%;
  width:18%;
  height:58%;
}
.marcus-hit::after{
  content:"Marcus";
}
.hotspot[data-child="marcus"]{
  width:54px;
  height:54px;
  opacity:.86;
}
.hotspot[data-child="marcus"] span{
  opacity:1;
  top:60px;
}
@media(max-width:760px){
  .marcus-hit{
    left:79%;
    top:22%;
    width:21%;
    height:58%;
  }
}


/* =========================================================
   ALPHA 2.6 — BLU'S GENTLE AWAKENING
   Full-scene, non-speaking Common Room interaction.
   ========================================================= */
.blu-hotspot::before{content:"✦"}
.blu-scene-overlay{
  position:fixed;
  inset:72px 0 0;
  z-index:140;
  background:#030503;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
  overflow:hidden;
}
.blu-scene-overlay.show{
  opacity:1;
  visibility:visible;
}
.blu-scene-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#030503;
}
.blu-scene-close{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:3;
  border:1px solid rgba(214,176,106,.72);
  background:rgba(5,9,6,.92);
  color:var(--cream);
  padding:11px 15px;
  font:inherit;
  letter-spacing:.08em;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:.3s ease;
}
.blu-scene-finish{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:3;
  transform:translate(-50%,12px);
  width:min(520px,calc(100vw - 260px));
  padding:13px 18px;
  border:1px solid rgba(214,176,106,.58);
  background:rgba(5,9,6,.90);
  color:var(--cream);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
}
.blu-scene-finish strong{
  display:block;
  color:var(--gold);
  margin-bottom:3px;
  letter-spacing:.06em;
}
.blu-scene-finish span{font-size:.9rem}
.blu-scene-overlay.finished .blu-scene-close,
.blu-scene-overlay.finished .blu-scene-finish{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.blu-scene-overlay.finished .blu-scene-close{
  transform:none;
}
@media(max-width:760px){
  .blu-scene-overlay{inset:64px 0 0}
  .blu-scene-finish{
    left:16px;
    right:16px;
    bottom:76px;
    width:auto;
    transform:translateY(12px);
  }
  .blu-scene-overlay.finished .blu-scene-finish{transform:none}
  .blu-scene-close{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .blu-scene-overlay,.blu-scene-close,.blu-scene-finish{transition:none!important}
}


/* =========================================================
   ALPHA 2.6.1 — BLU CLICK FIX
   Blu's earlier marker overlapped Finn's large invisible area.
   This dedicated dog-shaped region sits above character targets.
   ========================================================= */
.blu-hit-area{
  position:absolute;
  z-index:32;
  left:60.5%;
  top:69%;
  width:19%;
  height:29%;
  border:0;
  padding:0;
  margin:0;
  border-radius:48% 45% 34% 42%;
  background:transparent;
  cursor:pointer;
}
.blu-hit-area:hover,
.blu-hit-area:focus-visible{
  outline:1px solid rgba(214,176,106,.22);
  background:radial-gradient(ellipse at 48% 55%,rgba(214,176,106,.08),transparent 70%);
}
.blu-hotspot{
  z-index:34 !important;
}
.blu-hotspot span{
  opacity:1;
}
body.blu-moving .blu-hit-area,
body.blu-moving .character-hit-area,
body.blu-moving .hotspot{
  pointer-events:none;
}
.blu-scene-overlay{
  z-index:200;
}
@media(max-width:760px){
  .blu-hit-area{
    left:58%;
    top:68%;
    width:23%;
    height:30%;
  }
}

/* =========================================================
   ALPHA 2.9.1 — PORTRAIT PHONE FULL-ROOM VIEW
   On narrow phones the Common Room artwork is 2:1, so "cover"
   crops the sides. This fits the entire room across the phone.
   ========================================================= */
@media (max-width:760px) and (orientation:portrait){
  .common-stage{
    min-height:0 !important;
    height:calc(68px + 50vw + 150px) !important;
    padding-top:68px !important;
    background-color:#050806 !important;
    background-image:
      linear-gradient(180deg,rgba(2,5,3,.06),rgba(2,5,3,.16)),
      url("../images/common-room.jpg") !important;
    background-size:100vw 50vw !important;
    background-position:center 68px !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }

  /* Keep atmosphere limited to the actual room image. */
  .common-stage::before,
  .common-stage::after,
  .rain-layer{
    inset:68px 0 auto 0 !important;
    height:50vw !important;
  }
  .fire-glow{
    left:58% !important;
    top:calc(68px + 26.5vw) !important;
    width:22vw !important;
    height:22vw !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  /* Put the room title beneath the complete artwork rather than over it. */
  .common-title{
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    top:calc(68px + 50vw + 10px) !important;
    padding-top:0 !important;
    text-align:center !important;
  }
  .common-title h1{
    font-size:2.15rem !important;
    line-height:1 !important;
    margin:0 0 5px !important;
  }
  .common-title .lede{
    margin:0 !important;
    font-size:.88rem !important;
  }
  .progress{
    bottom:12px !important;
    width:calc(100% - 28px) !important;
    padding:9px 12px !important;
    font-size:.56rem !important;
  }

  /* Character targets are remapped to the fitted 2:1 image area. */
  .jonah-hit{left:0 !important;top:calc(68px + 12.5vw) !important;width:34% !important;height:27.5vw !important}
  .tess-hit{left:19% !important;top:calc(68px + 14vw) !important;width:30% !important;height:23.5vw !important}
  .mara-hit{left:46% !important;top:calc(68px + 14vw) !important;width:29% !important;height:24.5vw !important}
  .finn-hit{left:64% !important;top:calc(68px + 17vw) !important;width:27% !important;height:24vw !important}
  .eli-hit{left:31% !important;top:calc(68px + 18vw) !important;width:23% !important;height:24vw !important}
  .marcus-hit{left:79% !important;top:calc(68px + 11vw) !important;width:21% !important;height:29vw !important}
  .blu-hit-area{left:58% !important;top:calc(68px + 34vw) !important;width:23% !important;height:15vw !important}

  /* The old star markers are too crowded on a portrait phone.
     The large invisible character/dog tap areas remain active. */
  .common-stage > .hotspot{display:none !important}

  .version-badge{font-size:.48rem !important;right:8px !important;bottom:8px !important}
}