/* ---------- 心が0の夜（はい・はい・はい・はい） ---------- */
.overlay.horror-ov { background: #000; }
.horror { width: min(100%, 420px); min-height: 70vh; display: grid; align-content: center; gap: 44px; padding: 24px 18px; position: relative; isolation: isolate; }
.horror::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); animation: hrScan 6s linear infinite; }
.hr-q { margin: 0; text-align: center; font-family: var(--f-doc); font-weight: 800; font-size: 26px; letter-spacing: .12em; color: #e9e2e2; line-height: 1.6; }
.hr-q span { display: inline-block; opacity: 0; animation: hrChar .9s ease forwards, hrShake 3.4s steps(1) infinite; text-shadow: 1px 0 rgba(255, 40, 40, .7), -1px 0 rgba(40, 200, 255, .5); }
.hr-btns { display: grid; gap: 14px; }
.hr-btn { justify-self: center; width: 78%; padding: 14px 10px; background: #0b0b0b; color: #d9cfcf; border: 1px solid #5a1a1a; font-family: var(--f-doc); font-size: 19px; letter-spacing: .3em; transform: translateX(var(--x)) rotate(var(--r)); opacity: 0; animation: hrBtn .8s ease forwards, hrFlick 5s steps(1) infinite; }
.hr-btn:nth-child(3) { color: #f0e4e4; border-color: #8a1a1a; }
.hr-btn:hover, .hr-btn:focus-visible { background: #1a0606; color: #fff; outline: 1px solid #b22; }
.hr-flood { position: fixed; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 10px; padding: 12px; overflow: hidden; }
.hr-flood span { font-family: var(--f-doc); font-weight: 800; font-size: 20px; color: #c9bebe; opacity: 0; transform: rotate(var(--r)); animation: hrChar .2s ease forwards; }
.hr-white { position: fixed; inset: 0; background: #fff; opacity: 0; animation: hrWhite .9s ease 1.4s forwards; }
@keyframes hrChar { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
@keyframes hrBtn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hrShake { 0%, 92%, 100% { transform: none; } 93% { transform: translate(2px, -1px); } 95% { transform: translate(-2px, 1px); } 97% { transform: translate(1px, 0) skewX(8deg); } }
@keyframes hrFlick { 0%, 88%, 100% { filter: none; } 89% { filter: brightness(2.2); } 91% { filter: blur(1px); } }
@keyframes hrScan { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes hrWhite { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hr-q span, .hr-btn, .hr-flood span { animation: none; opacity: 1; } .hr-white { animation: none; } .horror::before { animation: none; } }