/* Nixi on her page: she walks the tops of the glass panels and climbs between them on ladders she sets
   down (assets/js/walker.js). Hidden from assistive tech; only the box over her body takes a tap. */
.nixi-roam {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 40;
  overflow-x: clip;               /* by a panel's side she never widens the page */
  pointer-events: none;
}
.nixi-roam[hidden] { display: none; }

/* Her body, for taps (she jumps and cheers): sized and moved with her, invisible, never over the empty frame. */
.nixi-roam__hit {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.nixi-roam__sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 90px;
  background-repeat: no-repeat;
  transform-origin: 0 0;
  will-change: transform;
}
/* Her sheets (assets/walker): 192-px frames, cut from the artist's sheets on their real gaps, her feet on one line. */
.nixi-roam__sprite[data-sheet="moves"] {
  background-image: url("/assets/walker/nixi-moves.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-moves.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-moves.png?v=1") type("image/png"));
  background-size: 400% 400%;
}
.nixi-roam__sprite[data-sheet="walk"] {
  background-image: url("/assets/walker/nixi-walk.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-walk.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-walk.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="turn"] {
  background-image: url("/assets/walker/nixi-turn.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-turn.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-turn.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="place"] {
  background-image: url("/assets/walker/nixi-place.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-place.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-place.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="climb"] {
  background-image: url("/assets/walker/nixi-climb2.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-climb2.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-climb2.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="mine"] {
  background-image: url("/assets/walker/nixi-mine.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-mine.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-mine.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="build"] {
  background-image: url("/assets/walker/nixi-build.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-build.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-build.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="flower"] {
  background-image: url("/assets/walker/nixi-flower.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-flower.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-flower.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="love"] {
  background-image: url("/assets/walker/nixi-love.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-love.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-love.png?v=1") type("image/png"));
  background-size: 400% 200%;
}
.nixi-roam__sprite[data-sheet="cherry"] {
  background-image: url("/assets/walker/nixi-cherry.png?v=1");
  background-image: image-set(url("/assets/walker/nixi-cherry.webp?v=1") type("image/webp"),
                              url("/assets/walker/nixi-cherry.png?v=1") type("image/png"));
  background-size: 400% 400%;
}

/* A Minecraft ladder: two oak rails, four rungs a block (a block is half her height, --h). */
.nixi-roam__ladder {
  --h: 84px;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--h) * .46);
  height: 0;
  /* A rung as a tile repeated down (whole pixels, --rung from walker.js): Safari drew the old repeating gradient on a
     tall ladder as one solid bar. */
  background-image:
    linear-gradient(to bottom, transparent 0 40%, #b98a52 40% 76%, #7c5530 76% 88%, transparent 88% 100%),
    linear-gradient(to right, transparent 0 6%, #6e4a2a 6% 20%, transparent 20% 80%, #6e4a2a 80% 94%, transparent 94%);
  background-size: 100% var(--rung, 10px), 100% 100%;
  background-repeat: repeat-y, no-repeat;
  opacity: 1;
  transition: opacity .7s ease;
}
.nixi-roam__ladder[hidden] { display: none; }
.nixi-roam__ladder.is-fading { opacity: 0; }

/* The footer switch sits before the background one and takes its place at the end of the line. */
.nixi-toggle:not([hidden]) + .world-toggle { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .nixi-roam__ladder { transition: none; }
}
@media print {
  .nixi-roam { display: none; }
}

/* "Her things" (assets/js/decorate.js): bottom left while she has set something down here; it starts removing. */
.deco-fab { position: fixed; left: 16px; bottom: 16px; z-index: 75; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(36, 48, 88, .25));
  background: var(--glass-solid, rgba(252, 248, 250, .95)); color: var(--heading, #243058); font: 600 .92rem var(--font-body, sans-serif);
  box-shadow: 0 10px 28px -14px rgba(25, 18, 52, .6); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[data-theme="dark"] .deco-fab { background: var(--glass-dark-solid, #262049); }
.deco-fab[hidden] { display: none; }
.deco-fab img { width: 26px; height: 26px; object-fit: contain; }
.deco-fab:focus-visible { outline: 3px solid var(--teal, #2FB3A5); outline-offset: 2px; }
@media (hover: hover) { .deco-fab:hover { transform: translateY(-1px); } }
.deco-fab:active { transform: translateY(1px); }
@media (max-width: 600px) { .deco-fab { padding: 8px; } .deco-fab span { display: none; } }
@media print { .deco-fab { display: none; } }