/* The exaggerated effects are scoped to the post-clear extra. */
#bonus-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.bonus-format-heading { position: absolute; left: 30px; right: 30px; top: 22px; padding: 13px 20px; color: #fff; background: #123c46; border: 3px solid #fff; font: bold 26px/1.4 sans-serif; text-align: center; box-shadow: 5px 5px 0 #0008; }
.bonus-pc { position: absolute; left: 635px; top: 75px; width: 570px; height: 365px; border: 12px solid #c2bfaf; border-bottom-width: 26px; border-radius: 14px; background: #e8e8df; box-shadow: 10px 14px 0 #0006; font-family: monospace; color: #111; }
.bonus-pc-title { background: #103a87; color: #fff; padding: 6px 12px; font-size: 17px; }
.bonus-pc-display { padding: 18px 24px; height: 294px; background: #fff; overflow: hidden; }
.bonus-pc-display h2 { font-size: 28px; margin: 0 0 12px; }
.bonus-pc-display p { font-size: 20px; white-space: pre-line; line-height: 1.6; margin: 0; }
.bonus-pc-aa { float: right; padding: 12px; margin: 0 0 0 10px; font: bold 21px/1.3 monospace; }
.bonus-running[data-bonus-mode="board"] #background, .bonus-running[data-bonus-mode="newspaper"] #background { background-image: none !important; background: #c9baa7 !important; }
.bonus-board-picture { position: absolute; left: 24px; top: 22px; width: 1232px; height: 483px; object-fit: contain; box-shadow: 0 4px 16px #0005; }
.bonus-perry { background: repeating-linear-gradient(0deg,#e5e1cf,#e5e1cf 3px,#ece8d8 3px,#ece8d8 6px); }
.bonus-impact { position: absolute; top: 80px; left: 55px; max-width: 1170px; font: 900 96px/1.1 sans-serif; letter-spacing: -.07em; color: #fff; -webkit-text-stroke: 2px #161321; text-shadow: 7px 8px 0 #111; transform: rotate(-5deg); }
.bonus-impact-ron { color: #fff0a4; }
.bonus-impact-apology { top: 280px; left: 170px; font-size: 65px; }
.bonus-impact-gunya { color: #fff; opacity: .8; }
.bonus-running[data-bonus-mode="manga"] #background { filter: grayscale(1) contrast(1.1); }
.bonus-running[data-bonus-mode="yukkuri"] #background { background-image: none !important; background: linear-gradient(#376d72,#183c43) !important; }
.bonus-running[data-bonus-mode="yukkuri"] .char-sprite img { max-height: 310px; margin-bottom: 225px; }
.bonus-running[data-bonus-mode="yukkuri"] #char-left { left: 80px; }
.bonus-running[data-bonus-mode="yukkuri"] #char-right { right: 80px; }
.bonus-running[data-bonus-mode="aa"] #background { background-image: none !important; background: #f8f8f5 !important; }
.bonus-running[data-bonus-mode="aa"] .bonus-format-heading { background: #e8e8e8; color: #161616; border: 2px solid #171717; font-family: monospace; box-shadow: none; }
.bonus-running[data-bonus-mode="aa"] .char-sprite img { max-height: 440px; margin-bottom: 160px; }
.bonus-running[data-bonus-mode="aa"] .character-slot:has(img[src*="10_sakura_boon"]) { width: 660px; }
.bonus-running[data-bonus-mode="aa"] .character-slot.dimmed { filter: brightness(.85); }
.bonus-running[data-bonus-mode="end"] #background { background-image: none !important; background: #000 !important; }
#bonus-video { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #000; color: #fff; }
#bonus-endcard { position: absolute; inset: 0; pointer-events: auto; background: #17111c; animation: bonus-endcard-in 1.2s ease both; }
#bonus-endcard img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bonus-running[data-bonus-mode="endcard"] #ui-layer, .bonus-running[data-bonus-mode="endcard"] #menu-bar, .bonus-running[data-bonus-mode="endcard"] #btn-menu-toggle { visibility: hidden; }
.bonus-endcard-thanks { position: absolute; left: 35px; bottom: 22px; margin: 0; padding: 7px 14px; border-radius: 4px; background: #1b142044; color: #fff5df; font: 20px/1.5 serif; text-shadow: 0 1px 5px #241222; }
#bonus-endcard-back { position: absolute; right: 32px; bottom: 25px; padding: 9px 18px; color: #fff5df; background: #241b2d99; border: 1px solid #fff3c999; border-radius: 4px; font: 17px/1.4 serif; cursor: pointer; }
#bonus-endcard-back:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes bonus-endcard-in { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { #bonus-endcard { animation: none; } }
#bonus-video video { display: block; width: 100%; height: 0; min-height: 0; flex: 1 1 auto; object-fit: contain; background: #000; }
.bonus-video-controls { min-height: 68px; display: flex; align-items: center; justify-content: flex-end; gap: 15px; padding: 10px 18px; background: #181622; font: 17px/1.4 sans-serif; }
.bonus-video-controls span { margin-right: auto; max-width: 590px; }
.bonus-video-controls button { color: #fff2c4; border: 1px solid #a49b7e; background: #292534; border-radius: 6px; padding: 9px 12px; font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bonus-video-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media(prefers-reduced-motion:reduce) { .bonus-running * { scroll-behavior: auto; } }

.bonus-running #still-layer.effect-slide_in_bottom { animation: bonus-cut-in .35s cubic-bezier(.2,.75,.2,1) both; }
@keyframes bonus-cut-in { from { opacity: 0; transform: translateY(55px) scale(1.08); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) { .bonus-running #still-layer.effect-slide_in_bottom { animation: none; } }

/* A theatrical discard, rather than supernatural luck: the following ron exposes the bad read. */
.bonus-impact-bakuhai { color: #ffe080; top: 130px; left: 60px; }
.bonus-impact-chombo { color: #ffd0b7; }
.bonus-bakuhai { position: absolute; left: 50%; top: 43%; width: 0; height: 0; }
.bonus-bakuhai-burst { position: absolute; left: -200px; top: -200px; width: 400px; height: 400px; border-radius: 50%; background: repeating-conic-gradient(from 7deg,#ffe69a 0deg 8deg,transparent 8deg 22deg,#ff833d 22deg 26deg,transparent 26deg 40deg); -webkit-mask-image: radial-gradient(circle,#0000 3%,#000 22%,#000 50%,#0000 71%); mask-image: radial-gradient(circle,#0000 3%,#000 22%,#000 50%,#0000 71%); animation: bonus-bakuhai-burst .85s ease-out both; }
.bonus-bakuhai-tile { position: absolute; left: -40px; top: -58px; width: 80px; height: 116px; padding: 14px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff9e9; border: 3px solid #383024; border-bottom: 12px solid #538b69; border-radius: 8px; box-shadow: 0 12px 20px #0009; animation: bonus-bakuhai-tile .5s cubic-bezier(.2,.8,.3,1) both; }
.bonus-bakuhai-tile i { border: 3px solid #215a77; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff9e9; background: #598ba0; }
@keyframes bonus-bakuhai-burst { 0% { transform: scale(.08) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1.8) rotate(12deg); opacity: 0; } }
@keyframes bonus-bakuhai-tile { 0% { transform: translateY(-180px) rotate(20deg) scale(1.5); opacity: 0; } 55% { transform: translateY(8px) rotate(-8deg) scale(.95); opacity: 1; } 100% { transform: translateY(0) rotate(-5deg) scale(1); opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .bonus-bakuhai-burst { display:none; } .bonus-bakuhai-tile { animation:none; } }