.simba-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  min-height: 44px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  font: 700 1rem/1.35 Arial, sans-serif;
}
.simba-link span { text-decoration: underline; text-underline-offset: .24em; }
.simba-link:hover span { text-decoration-thickness: 2px; }
.simba-link img {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
  flex: none;
}
footer .simba-link { margin-block: .9rem .3rem; }
.school-comic .comic-frame { position: relative; }
.simba-playfield {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 12%;
  width: 54%;
  height: 7.2rem;
  pointer-events: none;
  --cat-x: .5rem;
  --cat-face: 1;
  --menu-width: min(19rem, 100%);
}
html[lang=he] .hero .photograph { position: relative; inset: auto; }
html[lang=he] .hero .simba-playfield { right: 2%; width: 96%; bottom: 11%; }
@media (max-width: 700px) {
  .simba-playfield { right: 2%; width: 96%; bottom: 40%; }
  html[lang=he] .hero .simba-playfield { top: auto; bottom: 12%; }
}
.cover-cat { color: #193647; scroll-margin-block-start: 8rem; }
.cover-cat summary {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(var(--cat-x));
  display: grid;
  justify-items: center;
  width: 5.5rem;
  cursor: pointer;
  list-style: none;
  border-radius: .45rem;
  touch-action: manipulation;
}
.cover-cat summary, .cover-cat nav { pointer-events: auto; }
.cover-cat summary::-webkit-details-marker { display: none; }
.cover-cat .cat-sprite {
  display: block;
  width: 5.5rem;
  aspect-ratio: 216 / 156;
  background: url('/assets/simba/tabby-standing.webp') center / contain no-repeat;
  transform: translateY(var(--lift, 0px)) scaleX(var(--cat-face));
  pointer-events: none;
}
.cover-cat .cat-sprite.has-frame { background-image: none; }
.cat-sprite canvas { display: block; width: 100%; height: 100%; }
.cover-cat .comic-label, .cover-cat .cat-speech, .cover-cat nav {
  background: #fff8e9;
  border: 1px solid #193647;
  border-radius: .55rem;
  box-shadow: 0 2px 0 #193647;
}
.cover-cat .comic-label, .cover-cat .cat-speech {
  padding: .12rem .48rem;
  font: 700 .82rem/1.35 system-ui,sans-serif;
}
.cover-cat .cat-speech {
  pointer-events: none;
  display: none;
  position: absolute;
  bottom: 95%;
  text-align: center;
  background: #ffe199;
  transform: rotate(-5deg);
}
.simba-playfield.is-meowing .cat-speech { display: block; }
.cover-cat summary:focus-visible, .cover-cat a:focus-visible { outline: 3px solid #005e75; outline-offset: 3px; }
.cover-cat nav {
  position: absolute;
  left: clamp(0px, var(--cat-x), calc(100% - var(--menu-width)));
  bottom: 5.5rem;
  width: var(--menu-width);
  padding: .25rem .75rem;
}
.cover-cat nav a { display: flex; align-items: center; min-height: 44px; color: inherit; font-weight: 650; text-underline-offset: .18em; }
.cover-cat nav a + a { border-block-start: 1px solid #d8cdb8; }
.cat-treats { position: absolute; inset: 0; pointer-events: none; }
.cat-treats i {
  --dx: calc(var(--landing-x) - var(--food-x) + var(--spread));
  --fall: calc(var(--ground-y) + var(--scatter-y) - var(--food-y));
  position: absolute;
  left: var(--food-x);
  top: var(--food-y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  background: url('/assets/simba/dry-kibble.webp') var(--kind) center / 400% 100% no-repeat,
    radial-gradient(ellipse at center, #aa733c 20%, #6b4023 43%, transparent 51%);
  filter: drop-shadow(0 1px .6px #351d0db3);
  animation: simba-kibble-fall .44s var(--delay) both;
}
@keyframes simba-kibble-fall {
  0% { opacity: 0; transform: translateY(-3px); animation-timing-function: ease-in; }
  14% { opacity: 1; }
  71% { transform: translate(var(--dx), var(--fall)) rotate(var(--turn)); animation-timing-function: ease-out; }
  85% { transform: translate(var(--dx), calc(var(--fall) - 2px)) rotate(var(--turn)); animation-timing-function: ease-in; }
  100% { transform: translate(var(--dx), var(--fall)) rotate(var(--turn)); }
}
.cat-treats i.is-picked {
  animation: simba-kibble-bite .14s ease-in both;
}
.simba-playfield[data-paused] .cat-treats i { animation-play-state: paused; }
@keyframes simba-kibble-bite {
  from { transform: translate(var(--dx), var(--fall)) rotate(var(--turn)); }
  to { transform: translate(calc(var(--landing-x) - var(--food-x)), calc(var(--fall) - 2px)) scale(.55); opacity: 0; }
}
/* The paper ends before the mascot's body begins. Only paws meet the printed edge. */
.school-comic .comic-frame {
  --margin-cat: clamp(2.25rem, 8vw, 3.65rem);
  margin: 0;
  padding: .55rem .55rem var(--margin-cat);
  background: #fff8e9;
}
.school-comic .comic-frame > img:first-child { border: 1px solid #324850; }
.school-comic .comic-frame .frame-cat {
  position: absolute;
  height: calc(var(--margin-cat) + .2rem);
  width: auto;
  max-width: 34%;
  object-fit: contain;
  border: 0;
  bottom: 0;
  pointer-events: none;
}
.school-comic .comic-frame .sketch-tuck { z-index: 0; }
.school-comic .comic-frame:has(.sketch-tuck) > img:first-child {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 2px #19364735;
}
.school-comic .margin-left .frame-cat { left: 8%; }
.school-comic .margin-right .frame-cat { right: 7%; }
.school-comic .comic-guide {
  display: flex; align-items: center; gap: .6rem;
  width: fit-content; max-width: 100%; margin-block: 1rem;
  color: #193647; text-underline-offset: .18em; font-weight: 700;
}
.guide-figure { position: relative; flex: none; width: 3.6rem; height: 3.1rem; }
.guide-figure i {
  display: block; height: 100%;
  background: url('/assets/simba/field-mouse.webp') left center / 200% 100% no-repeat;
  transform: scaleX(-1);
}
.guide-figure b { position: absolute; inset-inline-end: -.15rem; bottom: 0; color: #193647; font: 1.25rem/1 Georgia, serif; }
[dir=rtl] .guide-figure i { transform: none; }
[dir=rtl] .guide-arrow { transform: scaleX(-1); }
@media print { .cover-cat, .simba-link, .simba-report-footer { display: none !important; } }

.simba-friends {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin-block: 2.25rem .5rem;
}
footer .simba-friends .simba-link { margin: 0; align-self: center; }
.simba-friends .mouse-button {
  position: relative;
  display: grid;
  place-items: end center;
  min-width: 48px;
  min-height: 48px;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.mouse-portrait { display: block; width: 100%; height: 100%; overflow: hidden; direction: ltr; }
.mouse-portrait img { display: block; max-width: none; width: 200%; height: 100%; }
.simba-friends.is-calling .mouse-portrait img { transform: translateX(-50%); }
[dir=rtl] .mouse-portrait { transform: scaleX(-1); }
.mouse-button:focus-visible { outline: 3px solid #e09b2e; outline-offset: 3px; }
.mouse-note {
  position: absolute;
  inset-inline-end: -.2rem;
  bottom: 0;
  border-radius: 50%;
  background: #fff4d7;
  color: #173447;
  font: bold .76rem/1.1rem system-ui,sans-serif;
  width: 1.1rem;
  text-align: center;
}
.friend-quip {
  position: absolute;
  z-index: 3;
  inset-inline-end: 0;
  bottom: calc(100% + .15rem);
  width: max-content;
  max-width: 100%;
  padding: .3rem .65rem;
  background: #fff6e5;
  color: #173447;
  border: 1px solid #173447;
  border-radius: .7rem .7rem .25rem .7rem;
  box-shadow: 0 2px 0 #173447;
  font: 700 .88rem/1.35 system-ui,sans-serif;
  text-align: start;
  pointer-events: none;
}
.simba-friends.is-answering .friend-quip { inset-inline: 0 auto; background: #ffe6a7; }
[dir=rtl] .friend-quip { border-radius: .7rem .7rem .7rem .25rem; }
.friend-quip[hidden] { display: none !important; }
@media print { .simba-friends { display: none !important; } }
.school-comic .inside-door, .school-comic .inside-gate { padding: 0; }
.school-comic .inside-door > img:first-child, .school-comic .inside-gate > img:first-child { border: 0; }
.school-comic .inside-door .frame-cat, .school-comic .inside-gate .frame-cat {
  right: 12%; bottom: 5.5%; width: 10%; height: auto;
}