/* reiwa.boo */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0D0D1A; color: #F0F0F5; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.65; }
.haunting { text-align: center; padding: 5rem 2rem 4rem; position: relative; }
.ghost-mascot { width: 100px; height: 120px; background: rgba(255,255,255,0.9); border-radius: 50% 50% 40% 60% / 60% 60% 40% 40%; margin: 0 auto 1.5rem; box-shadow: 0 0 20px rgba(199,125,255,0.3); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.kanji-float { position: relative; margin-bottom: 1rem; }
.kanji { font-size: 1rem; color: rgba(199,125,255,0.15); position: absolute; }
.k1 { left: 25%; top: -20px; }
.k2 { right: 25%; top: -10px; }
.brand { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); color: #C77DFF; text-shadow: 0 0 8px rgba(199,125,255,0.4), 0 0 24px rgba(199,125,255,0.15); margin-bottom: 0.5rem; }
.tagline { font-size: 1rem; color: #F0F0F5; margin-bottom: 2rem; }
.tagline.pulse { animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.cta-btn { display: inline-block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.85rem; color: #C77DFF; border: 1px solid #C77DFF; border-radius: 12px; padding: 0.6rem 1.5rem; text-decoration: none; }
.section-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; text-align: center; margin-bottom: 1.5rem; color: #C77DFF; text-shadow: 0 0 8px rgba(199,125,255,0.3); }
.catalog { max-width: 650px; margin: 0 auto; padding: 3rem 2rem; }
.yokai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.yokai-card { background: #1A1A2E; border: 1px dashed #2A2A3E; border-radius: 16px; padding: 1.5rem; text-align: center; }
.badge { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.65rem; border-radius: 9999px; padding: 0.15rem 0.6rem; display: inline-block; margin-bottom: 0.75rem; }
.badge.friendly { background: rgba(125,249,255,0.15); color: #7DF9FF; }
.badge.mischievous { background: rgba(199,125,255,0.15); color: #C77DFF; }
.badge.dangerous { background: rgba(255,107,157,0.15); color: #FF6B9D; }
.yokai-name-jp { font-size: 1.1rem; margin-bottom: 0.2rem; }
.yokai-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
.yokai-era { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #6B6B80; }
.map-section { max-width: 500px; margin: 0 auto; padding: 3rem 2rem; }
.location-list { display: flex; flex-direction: column; gap: 1rem; }
.location { display: flex; align-items: center; gap: 1rem; }
.ghost-pin { width: 24px; height: 28px; background: rgba(199,125,255,0.6); border-radius: 50% 50% 40% 60% / 60% 60% 40% 40%; flex-shrink: 0; }
.loc-info { display: flex; flex-direction: column; gap: 0.2rem; }
.loc-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.9rem; }
.scare-rating { display: flex; gap: 3px; }
.scare-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6B9D; }
.scare-dot.dim { background: #2A2A3E; }
.reviews { max-width: 500px; margin: 0 auto; padding: 3rem 2rem; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.review-card { background: #1A1A2E; border: 1px dashed #2A2A3E; border-radius: 16px; padding: 1.25rem; }
.genre-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: #C77DFF; background: rgba(199,125,255,0.15); border-radius: 4px; padding: 0.1rem 0.4rem; }
.genre-tag.supernatural { color: #7DF9FF; background: rgba(125,249,255,0.15); }
.review-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; margin: 0.5rem 0 0.3rem; }
.review-stars { color: #C77DFF; font-size: 0.8rem; display: block; margin-bottom: 0.3rem; }
.review-quote { font-size: 0.8rem; color: #6B6B80; font-style: italic; }
.footer { text-align: center; padding: 3rem 2rem; }
.ghost-parade { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.mini-ghost { display: block; width: 20px; height: 24px; background: #F0F0F5; border-radius: 50% 50% 40% 60% / 60% 60% 40% 40%; }
.footer-text { font-size: 0.8rem; color: #6B6B80; }
@media (max-width: 520px) {
    .yokai-grid { grid-template-columns: 1fr; max-width: 220px; margin: 0 auto; }
    .review-grid { grid-template-columns: 1fr; }
}
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }