/* Nowl the cheerleader: a small decorative owl in the top-right of the game header.
   One element, one sprite sheet (img/mascot/buddy-*.webp, 7 cells: calm happy think cheer oops sleepy hoot). */
:root { --knowl-w: 52px; --knowl-h: 42px; }
@media (min-width: 720px) { :root { --knowl-w: 80px; --knowl-h: 64px; } }
.knowl-buddy {
  width: var(--knowl-w); height: var(--knowl-h); flex: none; pointer-events: none; user-select: none;
  -webkit-user-select: none; perspective: 400px; contain: layout style; justify-self: end; align-self: center;
}
.knowl-sprite {
  display: block; width: 100%; height: 100%; --i: 0; will-change: transform;
  background: url("/img/mascot/buddy-128.webp") no-repeat;
  background-size: calc(var(--knowl-w) * 7) var(--knowl-h);
  background-position: calc(var(--knowl-w) * var(--i) * -1) 0;
  transform-origin: 50% 90%;
}
@media (min-resolution: 1.5dppx) { .knowl-sprite { background-image: url("/img/mascot/buddy-256.webp"); } }
/* legacy + K2D header (.play-head grid): the buddy takes a reserved column on the title row */
.knowl-sm { --knowl-w: 40px; --knowl-h: 32px; }
@media (min-width: 720px) { .knowl-sm { --knowl-w: 56px; --knowl-h: 45px; } }
.knowl-xs { --knowl-w: 34px; --knowl-h: 27px; }
.play-head.knowl-col { grid-template-columns: auto 1fr auto var(--knowl-w); grid-template-areas: "back title actions nowl" "sub sub sub sub"; }
.play-head.knowl-col > .knowl-buddy { grid-area: nowl; margin-left: -6px; }
@media (max-width: 600px) {
  .play-head.knowl-col { grid-template-columns: auto 1fr var(--knowl-w); grid-template-areas: "back title nowl" "sub sub sub" "actions actions actions"; }
}
/* overlay tier: no reserved column; sits in the blank right end of the title row (only used when measured clear) */
.knowl-ov { position: relative; }
.knowl-ov > .knowl-buddy { position: absolute; right: 0; top: 2px; }
/* 3D arcade HUD: last item in the right cluster */
.g3d-hud-right .knowl-buddy { margin-left: 2px; }
/* very narrow screens, or the buddy would squeeze the title: gone, slot released */
@media (max-width: 359px) { .knowl-buddy { display: none; } .play-head.knowl-col { grid-template-columns: auto 1fr auto; grid-template-areas: "back title actions" "sub sub sub"; } }
.knowl-buddy[hidden] { display: none; }
/* Close-Up header is a flex row */
.cu-head > .knowl-buddy { margin-left: auto; align-self: flex-start; }

.g3d-hud.knowl-ov > .knowl-buddy { top: 9px; }   /* v58p1: was 0 = flush with the screen top, his tufts and hops were clipped */