/* ===========================================================
   FLOATING CONSOLE — movable nav/language bubble (dark glass)
   =========================================================== */

/* Retire the old stuck footer — the console replaces it.
   Kept in the DOM (display:none) so links remain crawlable. */
.site-footer{ display: none !important; }

.wwj-console{
  position: fixed !important; right: 22px; bottom: 22px;
  z-index: 2000000000;            /* above grain (999), lang-banner (9000), everything */
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  touch-action: none;
}

/* Bubble (drag handle + toggle) */
.wwj-bubble{
  width: 56px; height: 56px; border-radius: 999px; cursor: grab;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem; border: none;
  background: rgba(255,255,255,0.02);
  transition: transform .2s ease;
}
.wwj-bubble:active{ cursor: grabbing; }
.wwj-console.is-open .wwj-bubble{ transform: rotate(90deg); }
.wwj-bubble-icon{ pointer-events: none; line-height: 1; }

/* Panel — fixed + JS-clamped so it never runs off-screen */
.wwj-panel{
  position: fixed;
  width: 250px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); overflow-y: auto;
  padding: 1rem 1.1rem 1.2rem; border-radius: 1.1rem;
  background: rgba(10,10,14,0.55);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  box-shadow: 0 20px 60px -12px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,.12);
  animation: wwj-pop .3s cubic-bezier(.16,.84,.32,1);
}
@keyframes wwj-pop{ from{ opacity:0; transform: translateY(10px) scale(.97); filter: blur(6px); } to{ opacity:1; transform:none; filter:none; } }

.wwj-panel-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.wwj-eyebrow{
  font-family: 'Barlow', sans-serif; font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.wwj-close{
  background: transparent; border: none; color: rgba(255,255,255,.7);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.wwj-close:hover{ color: #fff; }

/* Big section labels — "MISSIONS / STORIES", not a small nav */
.wwj-sections{ display: flex; flex-direction: column; gap: .15rem; margin-bottom: 1.1rem; }
.wwj-sec{
  text-align: left; background: transparent; border: none; cursor: pointer;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 1.65rem; line-height: 1.15; letter-spacing: -.01em;
  color: rgba(255,255,255,.62); padding: .15rem 0;
  transition: color .2s ease, transform .2s ease;
}
.wwj-sec:hover{ color: #fff; transform: translateX(3px); }
.wwj-sec.is-active{ color: #fff; }
.wwj-sec.is-active::after{ content: " ◆"; font-size: .7rem; color: rgba(255,255,255,.5); vertical-align: middle; }

.wwj-lang-label{
  font-family: 'Barlow', sans-serif; font-size: .66rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .5rem;
}
.wwj-langs{ display: flex; flex-wrap: wrap; gap: .35rem; }
.wwj-lang{
  font-family: 'Barlow', sans-serif; font-size: .82rem; cursor: pointer;
  color: rgba(255,255,255,.8); border: none; border-radius: 999px;
  padding: .3rem .7rem; background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: color .2s ease, background .2s ease;
}
.wwj-lang:hover{ color: #fff; background: rgba(255,255,255,.08); }
.wwj-lang.is-active{ color: #000; background: rgba(255,255,255,.92); box-shadow: none; }

@media (max-width: 600px){
  .wwj-console{ right: 14px; bottom: 14px; }
  .wwj-sec{ font-size: 1.45rem; }
}