.cartoon-guide {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  position: relative;
}
.cartoon-guide .example-card:empty { display: none; }
.guide-line {
  grid-column: 1/-1;
  pointer-events: auto;
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.guide-avatar {
  order: 0;
  align-self: end;
  max-height: clamp(40px,20vmin,145px);
}
.reaction-character {
  width: clamp(44px,13vmin,130px);
  max-width: 100%;
  aspect-ratio: 1;
  align-self: center;
  position: relative;
  isolation: isolate;
  animation: character-idle 3.6s ease-in-out infinite;
}
.character-body {
  position: absolute;
  inset: 11% 3% 0;
  border-radius: 40% 42% 45% 48%;
  background:
    radial-gradient(ellipse at 24% 18%,#fff9 0%,transparent 40%),
    linear-gradient(155deg,var(--character-fill),color-mix(in srgb,var(--character-fill),#490841 24%));
  box-shadow: inset 0 2px 3px #fffa,inset 0 -7px 10px #6516403d,0 6px 8px #34113336;
}
.character-icon {
  position: absolute;
  right: 2%;
  top: -18%;
  font-size: clamp(.85rem,4.2vmin,2.35rem);
  line-height: 1;
  filter: drop-shadow(0 2px 1px #3e1d403a);
}
#app:is([data-game=word-builder],[data-game=number-recognition],[data-game=home-row-typing],
  [data-game=keyboarding-quest],[data-game=memory-match],[data-game=kids-jigsaw-puzzles]) .character-body {
  border-radius: 19%; inset-inline: 0; transform: rotate(-5deg);
}
#app[data-game=reading-quest] .character-body {
  border-radius: 12% 32% 20% 11%;
  box-shadow: inset 4px 0 #fff7,inset 8px 0 #6c3690,inset 0 -5px #6c3690,0 5px 8px #34113336;
}
#app:is([data-game=count-and-pop],[data-game=balloon-pop-typing]) .character-body {
  border-radius: 50% 50% 47% 47%; inset: 3% 12% 7%;
}
#app:is([data-game=count-and-pop],[data-game=balloon-pop-typing]) .character-body::after {
  content: ""; position: absolute; left: 45%; bottom: -8%; width: 12%; height: 11%;
  background: color-mix(in srgb,var(--character-fill),#490841 26%); clip-path: polygon(50% 0,100% 100%,0 100%);
}
#app:is([data-game=telling-time],[data-game=money-counting-shop],[data-game=solar-system-explorer],
  [data-game=us-states-map-puzzle]) .character-body {
  border: 3px solid color-mix(in srgb,var(--character-fill),#3c2547 38%); border-radius: 50%;
}
#app[data-game=dinosaur-discovery] .character-body {
  border-radius: 49% 49% 44% 44% / 64% 64% 36% 36%;
  background: radial-gradient(circle at 20% 32%,#fff8 0 4%,transparent 6%),
    radial-gradient(circle at 76% 27%,#fff8 0 3%,transparent 5%),
    linear-gradient(145deg,#daee7a,var(--character-fill) 64%,#557d2b);
}
.reaction-character[data-apple] .character-body {
  border-radius: 46% 48% 43% 48% / 45% 45% 56% 58%;
  background: radial-gradient(ellipse at 31% 24%,#ffb9a6,transparent 23%),
    radial-gradient(ellipse at 78% 22%,#ff6873,transparent 32%),
    linear-gradient(150deg,#ff5261,#e82339 61%,#a50833);
}
.reaction-character[data-apple] .character-icon { visibility: hidden; }
.reaction-character[data-apple] .character-body::before,
.reaction-character[data-apple] .character-body::after {
  content: "";
  position: absolute;
}
.reaction-character[data-apple] .character-body::before {
  width: 8%; height: 25%; left: 48%; top: -15%;
  border-radius: 60% 24% 26% 35%;
  background: linear-gradient(90deg,#783717,#c07431);
  transform: rotate(-18deg);
}
.reaction-character[data-apple] .character-body::after {
  width: 32%; height: 21%; left: 52%; top: -10%;
  border-radius: 80% 4% 82% 5%;
  background: linear-gradient(145deg,#c0ef4a,#489519 58%,#287325);
  box-shadow: inset 0 1px 2px #ecff94a0;
  transform: rotate(-16deg);
}
.character-face { position: absolute; inset: 35% 11% 12%; }
.character-eye {
  position: absolute; top: 8%; width: 25%; height: 40%;
  background: white; border-radius: 50%;
  box-shadow: 0 1px 1px #42051b55;
  animation: character-blink 4.8s ease-in-out infinite;
}
.character-eye.left { left: 15%; }
.character-eye.right { right: 15%; }
.character-pupil {
  position: absolute; width: 58%; height: 72%; inset: 17% 0 0 22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,#fff 0 16%,#30142c 22%);
}
.character-brow {
  position: absolute; width: 76%; height: 30%; left: 12%; top: -35%;
  border-radius: 65%; background: #4f1532; transform-origin: center;
  transition: transform .18s ease;
}
.character-mouth {
  position: absolute; width: 22%; height: 24%; top: 64%; left: 39%;
  background: #56182e; border-radius: 20% 20% 70% 70%;
  transition: border-radius .18s ease,transform .18s ease;
}
.character-mouth::after {
  content: ""; position: absolute; inset: 59% 16% 5%;
  border-radius: 70%; background: #ff94ac;
}
.reaction-character[data-mood=happy] { animation: character-cheer .44s ease-in-out 3; }
.reaction-character[data-mood=happy] .character-mouth { transform: scale(1.5,1.55); }
.reaction-character[data-mood=happy] .character-eye {
  animation: none; height: 28%; background: transparent;
  box-shadow: inset 0 4px #572335;
}
.reaction-character[data-mood=happy] .character-pupil { visibility: hidden; }
.reaction-character[data-mood=sad] { animation: character-sigh .36s ease-out both; }
.reaction-character[data-mood=sad] .character-mouth { border-radius: 75% 75% 12% 12%; transform: scale(.87,.57); }
.reaction-character[data-mood=sad] .left .character-brow,
.reaction-character[data-mood=determined] .right .character-brow { transform: rotate(-23deg); }
.reaction-character[data-mood=sad] .right .character-brow,
.reaction-character[data-mood=determined] .left .character-brow { transform: rotate(23deg); }
.reaction-character[data-mood=determined] { animation: character-ready .28s ease-in-out 2; }
.reaction-character[data-mood=determined] .character-eye { height: 30%; }
.reaction-character[data-mood=determined] .character-mouth { transform: scale(.92,.46); border-radius: 35%; }
.reaction-character:is([data-mood=sad],[data-mood=determined]) .character-mouth::after { display: none; }
@keyframes character-idle { 50% { transform: translateY(-4%); } }
@keyframes character-blink { 48%,53% { transform: scaleY(1); } 50% { transform: scaleY(.12); } }
@keyframes character-cheer { 50% { transform: translateY(-14%) rotate(6deg) scale(1.08,.93); } }
@keyframes character-sigh { to { transform: translateY(5%) rotate(-8deg); } }
@keyframes character-ready { 50% { transform: translateX(5%) rotate(5deg); } }
#app[data-no-motion] :is(.reaction-character,.character-eye) { animation: none; }

@media(max-width:630px),(orientation:portrait) {
  .cartoon-guide { display: flex; width: 100%; }
  .guide-line { flex: 1; font-size: clamp(.68rem,2.5vw,.83rem); }
  .reaction-character { width: clamp(28px,9vw,46px); flex: none; }
  .character-icon { font-size: .88rem; }
}