/* The fox is a separate fixed room. It never participates in document flow,
   so scrolling the site cannot move it. */
.fox-dock {
  position:fixed; z-index:30;
  right:max(24px,calc((100vw - 1600px)/2));
  bottom:max(20px,env(safe-area-inset-bottom));
  width:clamp(260px,22vw,360px); aspect-ratio:416/552; border-radius:10px;
  box-shadow:0 14px 42px #0008; background:#111317;
  border:1px solid #383b44; box-shadow:7px 7px 0 var(--action),0 14px 42px #0008;
  transition:opacity .45s ease, transform .45s ease;
}
.fox-dock[hidden] { display:none; }
.fox-dock.is-vanished { opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; }
.fox-dock.character-hidden .fox-companion img,
.fox-dock.character-hidden .fox-companion video:not(.fox-confetti) { opacity:0!important; }
.fox-companion { display:block; position:relative; width:100%; aspect-ratio:416/552; padding:0; border:0; border-radius:inherit; overflow:hidden; cursor:pointer; background:#111317; }
.fox-companion img { display:block; width:100%; height:100%; pointer-events:none; }
.fox-companion video { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; opacity:0; }
.fox-companion video.is-current { opacity:1; }
.fox-confetti { z-index:8; object-fit:cover; opacity:0!important; transition:opacity .22s ease!important; }
.fox-confetti.is-playing { opacity:1!important; }
.fox-companion:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.runner-shell { position:relative; overflow:visible; }
.runner-hud { border-radius:9px 9px 0 0; }
.runner-footer { border-radius:0 0 9px 9px; }
.runner-stage { overflow:hidden; }
.runner-peek-video { position:absolute; top:0; right:22%; width:240px; aspect-ratio:640/496; transform:translateY(-86.49%); pointer-events:none; z-index:4; opacity:0; }
.runner-peek-video.is-playing { opacity:1; }
.runner-peek-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.runner-peek-canvas { display:block; width:100%; height:100%; }
.runner-shell:fullscreen .runner-peek-video { display:none; }
@media(max-width:1050px) {
  .fox-dock {
    right:12px; bottom:max(12px,env(safe-area-inset-bottom));
    width:min(310px,48vw); aspect-ratio:416/552;
  }
}
/* Keep the ordinary-monitor placement unchanged. On wide viewports put the
   room in the free right margin shown in the owner's reference, not the game. */
@media(min-width:1920px) {
  .fox-dock { right:max(24px,calc((100vw - 2260px)/2)); }
}
@media(max-width:700px) {
  .fox-dock { width:min(270px,62vw); right:10px; bottom:max(10px,env(safe-area-inset-bottom)); }
  .runner-peek-video { width:136px; right:2%; }
}
@media(max-height:500px) { .fox-dock { width:220px; } }
@media(prefers-reduced-motion:reduce) { .fox-dock { transition:none; } }