/* ============================================================
   MUDD BRUDDAS — WORLD C · "THE MUDD BLOCK"
   Explorable cel-shaded world. Loads AFTER mudd.css (reuses
   brand tokens, .sticker, .flav, .cart, .peek, .toast, .nav, .bg).
   ============================================================ */

/* app mode (JS on) hides rooms until entered; no-JS = everything stacked & scrollable */
.room{display:block}
body.appmode .room{display:none}
body.appmode .room.is-active{display:block;animation:croom .45s var(--ease)}
body.appmode.room-open #hub{display:none}
@keyframes croom{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.appmode .room.is-active{animation:none}}

/* ---------- HUB · the block ---------- */
.hub{padding-block:clamp(1rem,3vw,2rem) clamp(2rem,5vw,3rem)}
.hub__head{text-align:center;margin-bottom:1rem}
.hub__kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .4rem}
.hub__title{font-family:var(--display);font-size:clamp(2rem,6vw,3.6rem);color:var(--cream);line-height:.95}
.hub__title .hl{color:var(--purple)}
.hub__sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--tx-dim);margin:.5rem 0 0}
.hub__stage{position:relative;max-width:1180px;margin:1.2rem auto 0;border:2px solid var(--edge-2);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.hub__scene{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hub__spots{position:absolute;inset:0}
.hot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.4em;cursor:pointer;
  font-family:var(--display);font-size:clamp(.72rem,1.6vw,1rem);letter-spacing:.01em;text-transform:uppercase;color:#120a1c;
  background:var(--c,var(--gold));border:3px solid #0d0814;border-radius:999px;padding:.45em 1em;white-space:nowrap;
  box-shadow:0 4px 0 #0d0814,0 10px 20px -6px rgba(0,0,0,.8);transition:transform .15s var(--ease)}
.hot:hover{transform:translate(-50%,-50%) scale(1.07)}
.hot::before{content:"";width:9px;height:9px;border-radius:50%;background:#0d0814;animation:hotp 1.6s ease-in-out infinite}
@keyframes hotp{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.hot::before{animation:none}}
@media (max-width:620px){ .hot{font-size:.6rem;padding:.4em .7em;border-width:2px;box-shadow:0 3px 0 #0d0814} }

/* mobile / no-JS tap list */
.hub__list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1180px;margin:14px auto 0}
@media (max-width:620px){.hub__list{grid-template-columns:1fr}}
.hub__li{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--edge);border-left:4px solid var(--c,var(--purple));border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;color:inherit}
.hub__li:hover{border-color:var(--c,var(--purple))}
.hub__li b{font-family:var(--display);font-size:1.05rem;color:var(--c,var(--purple));display:block}
.hub__li span{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mute)}

/* ---------- ROOM shell ---------- */
.room{--flavor:var(--purple)}
.room__banner{position:relative;max-width:1180px;margin:0 auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge)}
.room__banner img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.room__banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(13,8,20,.9))}
.room__head{position:relative;max-width:1180px;margin:-70px auto 0;padding:0 var(--gutter);z-index:1;text-align:center}
.room__back{position:sticky;top:calc(var(--head-h) + 8px);z-index:5;display:inline-flex;margin:14px 0 0}
.room__kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--flavor);margin:0}
.room__title{font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);color:var(--cream);line-height:.95;margin:.2rem 0 0}
.room__sub{color:var(--tx-dim);max-width:60ch;margin:.6rem auto 0}
.room__body{max-width:1180px;margin:0 auto;padding:clamp(1.4rem,3vw,2.4rem) var(--gutter) clamp(2.5rem,5vw,4rem)}

/* ---------- WHIP · double cupp ---------- */
.cupp{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,3vw,40px);align-items:center}
@media (max-width:760px){.cupp{grid-template-columns:1fr}}
.cup{position:relative;width:min(220px,60%);margin:0 auto;aspect-ratio:3/4}
.cup__body{position:absolute;inset:0;background:linear-gradient(90deg,#d7d2dd,#f2eef6 30%,#cfc9d6 60%,#e7e2ec);border:4px solid #0d0814;border-radius:14px 14px 20px 20px;overflow:hidden;box-shadow:inset 0 -10px 24px rgba(0,0,0,.2)}
.cup__fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--pour,var(--purple));transition:height .9s var(--ease);opacity:.92}
.cup__fill::after{content:"";position:absolute;top:-6px;left:0;right:0;height:10px;background:var(--pour,var(--purple));filter:brightness(1.2);border-radius:50%}
.cup__rim{position:absolute;top:-8px;left:-6px;right:-6px;height:26px;background:#e7e2ec;border:4px solid #0d0814;border-radius:50%}
.cupp__pick{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}
.pour{cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#120a1c;background:var(--c);border:2px solid #0d0814;border-radius:999px;padding:.45em .9em;box-shadow:0 3px 0 #0d0814}
.pour:active{transform:translateY(2px);box-shadow:0 1px 0 #0d0814}
.cupp__now{font-family:var(--display);font-size:1.3rem;color:var(--cream);margin:.4rem 0 1rem;min-height:1.4em}

/* ---------- STUDIO · cast + guestbook ---------- */
.cast{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0 1.6rem}
.cast span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);border:1px solid var(--edge-2);border-radius:999px;padding:5px 11px}
.cast span b{color:var(--cream)}
.gbook{max-width:900px}
.gbook__form{display:grid;gap:10px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem);margin-bottom:1.2rem}
.gbook__form input,.gbook__form textarea{width:100%;background:var(--ink);color:var(--tx);border:2px solid var(--edge-2);border-radius:10px;padding:.75em 1em;font-family:var(--body);font-size:1rem;resize:vertical}
.gbook__form input:focus,.gbook__form textarea:focus{outline:none;border-color:var(--gold)}
.gbook__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.gbook__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.gbook__count{font-family:var(--mono);font-size:.64rem;color:var(--tx-mute)}
.gbook__msg{font-family:var(--mono);font-size:.7rem;color:var(--gold);min-height:1em;margin:0}
.gbook__msg.is-err{color:#e8706e}
.gwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gwall__empty{grid-column:1/-1;color:var(--tx-mute);font-family:var(--mono);font-size:.76rem;text-align:center;padding:1rem}
.gnote{background:var(--panel);border:1px solid var(--edge);border-left:3px solid var(--purple);border-radius:10px;padding:.9rem 1rem}
.gnote p{margin:0 0 .5rem;color:var(--cream);font-size:.95rem;white-space:pre-wrap;word-break:break-word}
.gnote .m{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mute)}
.gnote .m b{color:var(--gold-soft)}
.ylink{display:inline-flex;align-items:center;gap:.5em;margin-top:.4rem}

/* world switch in nav */
.nav__worlds{display:flex;gap:4px}
.nav__worlds a{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);border:1px solid var(--edge);border-radius:8px;padding:5px 9px}
.nav__worlds a:hover{color:var(--gold);border-color:var(--edge-2)}
@media (max-width:620px){.nav__worlds{display:none}}