/* Reaction lettering lives beside the portrait, independent of its hit area. */
#main[data-screen="home"] .chiqi-tap-burst {
  position: absolute;
  width: clamp(92px, 12vw, 174px);
  aspect-ratio: 164 / 115;
  left: 78%;
  top: 23%;
  z-index: 8;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-origin: 48% 72%;
  animation: chiqi-tap-pop 600ms both;
}
#main .chiqi-tap-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#main .chiqi-tap-burst .chiqi-tap-spikes { fill: none; stroke: #f5f1e8; stroke-width: 3; }
#main .chiqi-tap-burst .chiqi-tap-ink { fill: #111112; transform: translate(4px, 5px); }
#main .chiqi-tap-burst .chiqi-tap-face { fill: #ef1637; stroke: #f5f1e8; stroke-width: 2.6; }
#main .chiqi-tap-burst strong {
  z-index: 1;
  color: #f5f1e8;
  font: italic 950 clamp(26px, 3.35vw, 45px)/1 system-ui, sans-serif;
  letter-spacing: -.055em;
  -webkit-text-stroke: 4px #111112;
  paint-order: stroke fill;
  text-shadow: 2px 3px #111112;
  transform: translate(-2%, -1%) rotate(-10deg);
}
@media (max-width: 650px) {
  #main[data-screen="home"] .chiqi-tap-burst { left: 31%; top: 10%; }
}
@keyframes chiqi-tap-pop {
  0% { transform: translate(-8px, 10px) rotate(-19deg) scale(.46); }
  18% { transform: translate(0, 0) rotate(1deg) scale(1.11); }
  28%, 78% { transform: translate(0, 0) rotate(-3deg) scale(1); opacity: 1; }
  100% { transform: translate(5px, -7px) rotate(-7deg) scale(.88); opacity: 0; }
}

/* A native modal intercepts the closing click without changing the HOME route. */
#chiqi-tap-egg[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #111112de;
  color: #f5f1e8;
}
#chiqi-tap-egg::backdrop { background: #11111260; }
#chiqi-tap-egg > button {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 20px max(18px, env(safe-area-inset-right)) 20px max(18px, env(safe-area-inset-left));
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.chiqi-egg-poster {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 540px);
  padding: clamp(28px, 7vw, 48px) 12px;
  border: 4px solid #f5f1e8;
  box-shadow: 9px 10px #111112, 15px 16px #ef1637;
  background: repeating-linear-gradient(-53deg, transparent 0 13px, #11111221 13px 15px), #ef1637;
  text-align: center;
  transform: skew(-4deg) rotate(-3deg);
}
#chiqi-tap-egg button:focus-visible .chiqi-egg-poster { outline: 2px solid #f5f1e8; outline-offset: 5px; }
.chiqi-egg-star { width: clamp(56px, 19vw, 105px); }
.chiqi-egg-star svg { display: block; width: 100%; height: auto; fill: #111112; stroke: #f5f1e8; stroke-width: 18; }
#chiqi-egg-title {
  font: italic 950 clamp(38px, min(13vw, 13vh), 90px)/.84 system-ui, sans-serif;
  letter-spacing: -.07em;
  text-shadow: 4px 5px #111112;
}
.chiqi-egg-poster small { background: #111112; padding: 5px 12px; font: 700 12px/1.4 system-ui, sans-serif; }

body.reduced #main[data-screen="home"] .chiqi-tap-burst { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  #main[data-screen="home"] .chiqi-tap-burst { display: none; animation: none; }
}