@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

body {
    /* --- Webサイト全体として使用する場合の基本スタイル --- */
    font-family: 'Roboto Mono', monospace;
    line-height: 1.6;
    overflow-x: hidden;
    /* ↓↓↓ 特定の要素（例：neon-text）を画面中央に表示するデモ用のスタイルです。サイト全体で使う場合はこちらをコメントアウトしてください。*/
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #000;
    overflow: hidden;
    */
}

.container {
    max-width: 960px;
}

.bg-matrix-dark {
    background-color: #0d0221;
    background-image: 
        radial-gradient(circle at 25% 30%, #26175e 0%, transparent 40%),
        radial-gradient(circle at 75% 70%, #0d0221 0%, transparent 40%);
    position: relative;
}

.text-neon-blue { color: #ade8f4; }
.neon-sub-blue { color: #48cae4; }
.glow-blue { color: #caf0f8; text-shadow: 0 0 5px #48cae4, 0 0 10px #48cae4, 0 0 20px #00b4d8, 0 0 30px #0077b6; }
.glow-green { color: #a7f3d0; text-shadow: 0 0 5px #34d399, 0 0 10px #34d399, 0 0 20px #10b981, 0 0 30px #059669; }
.glow-yellow { color: #fef08a; text-shadow: 0 0 5px #facc15, 0 0 10px #facc15, 0 0 20px #eab308, 0 0 30px #ca8a04; }
.neon-sub-green { color: #6ee7b7; }
.neon-sub-yellow { color: #fde047; }

.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.card-matrix { background-color: rgba(13, 2, 33, 0.5); padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #48cae440; position: relative; overflow: hidden; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.glass-panel { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(72, 202, 228, 0.2); border-radius: 0.375rem; transition: all 0.3s ease-in-out; }
.border-neon-blue-light { border-color: rgba(72, 202, 228, 0.5); }
.border-neon-green-light { border-color: rgba(110, 231, 183, 0.5); }
.border-neon-yellow-light { border-color: rgba(253, 224, 71, 0.5); }
.hover-glow:hover { box-shadow: 0 0 10px #48cae4, 0 0 15px #00b4d8; transform: translateY(-5px); }
.hover-glow-green:hover { box-shadow: 0 0 10px #6ee7b7, 0 0 15px #34d399; transform: translateY(-5px); }
.icon { margin-right: 0.75rem; font-size: 1.25rem; }
.counter-container { padding: 1rem; border: 1px solid #48cae440; border-radius: 0.5rem; background-color: rgba(13, 2, 33, 0.5); display: inline-block; }
#visitor-counter { letter-spacing: 0.1em; }
.nav-matrix { border-top: 1px solid #48cae440; border-bottom: 1px solid #48cae440; padding-top: 1rem; padding-bottom: 1rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; }
.neon-link { color: #ade8f4; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.25rem; transition: all 0.3s ease; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.875rem; }
.neon-link:hover { color: #ffffff; background-color: #48cae4; text-shadow: 0 0 5px #fff, 0 0 10px #48cae4; }
.neon-link.active { color: #ffffff; background-color: #00b4d8; cursor: default; }
.neon-link.pending { color: #497d86; cursor: not-allowed; opacity: 0.6; }
.social-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(13, 2, 33, 0.5); border: 1px solid #48cae480; color: #ade8f4; transition: all 0.3s ease; }
.social-svg { width: 24px; height: 24px; fill: currentColor; }
.social-icon-link:hover, .social-icon-link:focus { color: #ffffff; transform: translateY(-5px) scale(1.1); }
.social-icon-link.youtube:hover { background-color: #FF0000; border-color: #FF0000; filter: drop-shadow(0 0 6px #FF0000) drop-shadow(0 0 12px #FF0000); }
.social-icon-link.x-twitter:hover { background-color: #48cae4; border-color: #48cae4; filter: drop-shadow(0 0 6px #48cae4) drop-shadow(0 0 12px #00b4d8); }
.social-icon-link.twitch:hover { background-color: #9146FF; border-color: #9146FF; filter: drop-shadow(0 0 6px #9146FF) drop-shadow(0 0 12px #9146FF); }
.social-icon-link.instagram:hover { background-color: #E4405F; border-color: #E4405F; filter: drop-shadow(0 0 6px #E4405F) drop-shadow(0 0 12px #E4405F); }
.member-card { display: flex; flex-direction: column; align-items: center; padding: 2rem; transition: all 0.3s ease-in-out; }
.member-card:hover { transform: translateY(-10px); box-shadow: 0 0 15px #48cae4, 0 0 30px #00b4d8; }
.member-image-placeholder { width: 150px; height: 150px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); border: 2px dashed #48cae480; display: flex; justify-content: center; align-items: center; color: #48cae480; font-size: 2rem; font-weight: 700; }
.member-image { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid #48cae4; }
.rules-box { background-color: rgba(0, 0, 0, 0.2); border: 1px solid #fde04750; padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; }
.fanart-gallery { column-count: 2; column-gap: 0.75rem; }
@media (min-width: 768px) { .fanart-gallery { column-count: 3; } }
.gallery-item { margin-bottom: 0.75rem; position: relative; overflow: hidden; border-radius: 0.25rem; break-inside: avoid; cursor: pointer; background-color: rgba(13, 2, 33, 0.7); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gallery-item:hover { transform: scale(1.03); box-shadow: 0 0 15px #ade8f4; }
.gallery-item img { width: 100%; height: auto; display: block; }
.gallery-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(13, 2, 33, 0.9), transparent); color: #fff; padding: 2rem 1rem 1rem; text-align: right; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.gallery-item:hover .overlay { opacity: 1; }
.gallery-item .overlay .artist-name { font-size: 1.25rem; font-weight: bold; color: #caf0f8; text-shadow: 0 0 5px #48cae4; }
.load-more-btn { padding: 0.75rem 2rem; border: 1px solid #ade8f4; border-radius: 0.375rem; background: transparent; color: #ade8f4; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s ease; }
.load-more-btn:hover { background-color: #ade8f4; color: #0d0221; box-shadow: 0 0 15px #ade8f4; }
.lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; animation: fadeIn 0.5s; }
.lightbox.active { display: flex; }
.lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 85vh; animation: zoomIn 0.5s; }
.lightbox-close-btn { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; }
.lightbox-close-btn:hover, .lightbox-close-btn:focus { color: #bbb; text-decoration: none; }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes zoomIn { from {transform: scale(0.8);} to {transform: scale(1);} }
.artist-name-mobile { display: none; text-align: center; padding: 0.5rem; font-size: 0.8rem; font-weight: bold; color: #ade8f4; }
@media (max-width: 767px) {
    .gallery-item .overlay { display: none; }
    .artist-name-mobile.glow-green { display: block; }
}

/* --- ✨ Text Link Styles (Updated for Fan Art Page) ✨ --- */
.text-link-naniverso {
    color: #6ee7b7; /* より明るいネオングリーンに変更 */
    text-decoration: none; /* 通常時の下線はなしに */
    font-weight: bold;
    border-bottom: 1px dashed #6ee7b780; /* 点線の下線を追加 */
    padding-bottom: 1px;
    transition: color 0.3s ease, text-shadow 0.3s ease, border-bottom-color 0.3s ease;
}

.text-link-naniverso:hover,
.text-link-naniverso:focus {
    color: #a7f3d0; /* ホバー時さらに明るいグリーンに */
    text-shadow: 0 0 5px #34d399, 0 0 10px #10b981; /* グリーン系のグロウ */
    border-bottom-color: #a7f3d0; /* ホバー時の下線の色 */
}
/* --- ✨ Member Card Image Glitch Effect ✨ --- */
.member-image-wrapper {
    position: relative;
    width: 150px; /* .member-image のサイズに合わせる */
    height: 150px; /* .member-image のサイズに合わせる */
    /* margin-bottom は .member-image または .member-image-placeholder が持つ想定 */
    overflow: hidden; 
    border-radius: 50%; /* 画像が丸いのでラッパーも合わせる */
}

/* .member-image と .member-image-placeholder は既存のスタイルを尊重 */
.member-image-wrapper .member-image,
.member-image-wrapper .member-image-placeholder {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ホバー時のスムーズな拡大のため */
}

.member-card:hover .member-image-wrapper .member-image,
.member-card:hover .member-image-wrapper .member-image-placeholder {
    transform: scale(1.15); /* ホバーで画像を少しリッチに拡大 */
}

.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* 通常時は透明 */
    pointer-events: none; /* 下の画像がクリックできるように */
}

.member-card:hover .glitch-layer::before,
.member-card:hover .glitch-layer::after {
    content: attr(data-text); /* HTMLのdata-text属性から文字を取得 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* グリッチテキストのサイズ */
    font-weight: bold;
    opacity: 0;
    overflow: hidden;
    color: #ade8f4; /* ネオンブルー */
    background: #0d0221; /* 背景色と同じ */
    animation: glitch-anim 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
}

.member-card:hover .glitch-layer::after {
    color: #FF00FF; /* マゼンタ系の色 */
    background: #0d0221;
    animation: glitch-anim-2 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
    animation-delay: -0.15s; /* 少し遅れて開始 */
}

@keyframes glitch-anim {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
        transform: translate(-3px, -2px);
        opacity: 0.3;
    }
    20% {
        clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
        transform: translate(3px, 2px);
        opacity: 0.6;
    }
    40% {
        clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
        transform: translate(-2px, 1px);
        opacity: 0.2;
    }
    60% {
        clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%);
        transform: translate(2px, -1px);
        opacity: 0.7;
    }
    80% {
        clip-path: polygon(0 45%, 100% 45%, 100% 65%, 0 65%);
        transform: translate(-3px, 0px);
        opacity: 0.4;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
        transform: translate(1px, 2px);
        opacity: 0.5;
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
        transform: translate(2px, 1px);
        opacity: 0.4;
    }
    20% {
        clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
        transform: translate(-2px, -1px);
        opacity: 0.7;
    }
    40% {
        clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
        transform: translate(1px, -2px);
        opacity: 0.3;
    }
    60% {
        clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
        transform: translate(-1px, 2px);
        opacity: 0.8;
    }
    80% {
        clip-path: polygon(0 75%, 100% 75%, 100% 95%, 0 95%);
        transform: translate(3px, -1px);
        opacity: 0.2;
    }
    100% {
        clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
        transform: translate(-2px, 1px);
        opacity: 0.6;
    }
}

.neon-text {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}