/* Load after home.css. These rules only own enhanced comic panels. */
.comic-panel[data-comic-motion] .comic-frame { position: relative; isolation: isolate; }
.comic-panel[data-comic-motion] .comic-art,
.comic-panel[data-comic-motion] .comic-speech { animation: none; }
.comic-motion-overlay { position: absolute; inset: 12px; pointer-events: none; z-index: 1; }
.comic-motion-corner { position: absolute; width: 20px; height: 20px; border: solid white; filter: drop-shadow(0 1px 1px #17271d); }
.comic-motion-corner:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.comic-motion-corner:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.comic-motion-corner:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.comic-motion-corner:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.comic-motion-status { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; background: #fff; color: #17271d; font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: 0; }
.comic-motion-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #bf2b29; }
[data-comic-motion="review"] .comic-motion-status::before { border-radius: 0; background: #286542; }
.comic-motion-voice { position: absolute; left: 46%; top: 37%; width: 38px; height: 34px; transform: rotate(-12deg); }
.comic-motion-voice i { position: absolute; left: 0; width: 24px; height: 4px; background: #fff; border: 1px solid #17271d; border-radius: 2px; transform-origin: left center; }
.comic-motion-voice i:nth-child(1) { top: 0; transform: rotate(-30deg); }
.comic-motion-voice i:nth-child(2) { top: 14px; width: 32px; }
.comic-motion-voice i:nth-child(3) { top: 28px; transform: rotate(30deg); }
.comic-motion-play { position: absolute; z-index: 2; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #17271d; border-radius: 4px; background: #fff; color: #17271d; cursor: pointer; touch-action: manipulation; font: 20px/1 system-ui, sans-serif; }
.comic-motion-play:hover { background: #d8f45c; }
.comic-motion-play:focus-visible { outline: 3px solid #1765db; outline-offset: 3px; }
.comic-motion-play:disabled { cursor: default; color: #526158; }
@media (prefers-reduced-motion: reduce) {
  .comic-panel[data-comic-motion] .comic-art,
  .comic-panel[data-comic-motion] .comic-speech,
  .comic-panel[data-comic-motion] .comic-motion-voice { animation: none !important; transform: none !important; transition: none !important; }
}