body[data-page] .portrait-hit{display:block;box-sizing:border-box;position:relative;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
body[data-page] .portrait-hit:hover,body[data-page] .portrait-hit:active{background:transparent;color:inherit}
.portrait-hit:focus-visible{outline:2px solid #eee4fb;outline-offset:5px}
.portrait-hit.is-hit{animation:portrait-hit-shake .22s steps(3,end)}
.portrait-hit.is-hit img{animation:portrait-hit-flash .22s linear}
body[data-page] [data-portrait-game] .portrait-damage-layer{position:absolute;inset:0;pointer-events:none;z-index:8}
body[data-page] [data-portrait-game] .portrait-damage{position:absolute;z-index:8;left:var(--hit-x,50%);top:var(--hit-y,15%);pointer-events:none;opacity:0;color:#fff0ef;font:900 calc(18px * var(--portrait-hit-scale,1))/1 monospace;letter-spacing:-.04em;text-shadow:2px 2px 0 #9f2929,-1px -1px 0 #080809;white-space:nowrap;transform:translate(-50%,0)}
body[data-page] [data-portrait-game] .portrait-damage.is-visible{animation:portrait-damage-rise .65s ease-out}
@keyframes portrait-hit-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(calc(-3px * var(--portrait-hit-scale,1))) rotate(-.6deg)}65%{transform:translateX(calc(3px * var(--portrait-hit-scale,1))) rotate(.6deg)}}
@keyframes portrait-hit-flash{30%{filter:sepia(.5) saturate(2) hue-rotate(310deg)}100%{filter:none}}
@keyframes portrait-damage-rise{0%{opacity:1;transform:translate(-50%,calc(8px * var(--portrait-hit-scale,1)))}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--hit-dx,0px)),var(--hit-dy,-28px))}}
@media(prefers-reduced-motion:reduce){.portrait-hit.is-hit,.portrait-hit.is-hit img{animation:none}body[data-page] [data-portrait-game] .portrait-damage.is-visible{animation:none;opacity:1;transform:translate(-50%,0)}}

body[data-page] [data-portrait-game] .portrait-hit-caption{position:absolute;z-index:9;left:8px;right:8px;bottom:10px;box-sizing:border-box;padding:7px 9px;border:0;border-radius:0;background:transparent;color:#f3f1f6;text-shadow:0 1px 3px #000,0 0 5px #0008;font:500 clamp(11px,.9vw,12px)/1.35 Arial,sans-serif;text-align:center;pointer-events:none;opacity:0}
body[data-page] [data-portrait-game] .portrait-hit-caption.is-visible{animation:portrait-caption-show 1.35s ease-out}
@keyframes portrait-caption-show{0%{opacity:0;transform:translateY(4px)}12%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){body[data-page] [data-portrait-game] .portrait-hit-caption.is-visible{animation:none;opacity:1;transform:none}}

body[data-page] [data-portrait-game] .portrait-damage{right:auto;bottom:auto;text-transform:none}
body[data-page] [data-portrait-game] .portrait-hit-caption{top:auto;letter-spacing:normal;text-transform:none}
body[data-page=about] [data-portrait-game] .portrait-hit{border-radius:inherit}
body[data-page=about] [data-portrait-game] .portrait-hit img{border-radius:inherit}
body[data-page=about] [data-portrait-game] .portrait-hit-caption{bottom:42px}
body[data-page=about] .figure-sound-toggle{min-height:44px;padding:6px 0;border:0;background:transparent;color:#bdb5c8;font:inherit;font-size:.75rem;cursor:pointer}
body[data-page=about] .figure-sound-toggle:focus-visible{outline:1px solid #f3f1f6;outline-offset:4px}

/* During a hit, pointer tilt must not change the phone-style shake. */
body[data-page] [data-portrait-game].is-taking-damage { --portrait-rx:0deg !important; --portrait-ry:0deg !important; }

/* A visible impact also works when motion animations are disabled. */
body[data-page] [data-portrait-game] .portrait-hit-impact {
  position:absolute;
  inset:0;
  z-index:7;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:rgb(255 63 58 / 16%);
  box-shadow:inset 0 0 0 2px rgb(255 113 100 / 65%),inset 0 0 38px rgb(229 46 53 / 25%);
}
body[data-page] [data-portrait-game].is-taking-damage .portrait-hit-impact { opacity:1; }