/* --- gaming.nx-space.com 用ゲーミングデザインカラー上書き --- */
/* common.css の :root 変数とコンポーネントスタイルをレインボー配色に上書きする */
/* gaming サブドメインのみ規約「滑らか・穏やか」の対象外として、 */
/* 派手なレインボー演出 (グロー多重・濃色背景・倍速アニメ 2-5s) を意図的に許容している */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

:root {
    /* ゲーミング系ベースカラー */
    --gaming-bg: #0a0a14;
    --gaming-card-bg: rgba(15, 15, 30, 0.95);
    --gaming-text: #ffffff;
    --gaming-text-sub: #aaaadd;

    /* 7色レインボーグラデ (linear 用) */
    --rainbow-linear: linear-gradient(
        90deg,
        #ff006e 0%,
        #ff8500 14%,
        #ffd60a 28%,
        #00d26a 42%,
        #00f0ff 57%,
        #4361ee 71%,
        #9d4edd 85%,
        #ff006e 100%
    );

    /* conic 用 (border / 円 グロー) */
    --rainbow-conic: conic-gradient(
        from 0deg,
        #ff006e, #ff8500, #ffd60a, #00d26a, #00f0ff, #4361ee, #9d4edd, #ff006e
    );

    /* レインボー多重 drop-shadow グロー (テキスト発光用) — 常時飽和 */
    --rainbow-glow:
        drop-shadow(0 0 6px rgba(255, 0, 110, 1.0))
        drop-shadow(0 0 14px rgba(0, 240, 255, 0.85))
        drop-shadow(0 0 24px rgba(157, 78, 221, 0.75));

    /* レインボー多重 box-shadow グロー (ボックス発光用) — 常時飽和 */
    --rainbow-box-glow:
        0 0 18px rgba(255, 0, 110, 0.7),
        0 0 36px rgba(0, 240, 255, 0.55),
        0 0 60px rgba(157, 78, 221, 0.45);

    /* common.css の変数を上書き */
    --color-bg-light: var(--gaming-bg);
    --color-bg-dark: #050510;
    --color-text-light: #ffffff;
    --color-text-dark: var(--gaming-text);
    --color-text-sub: var(--gaming-text-sub);
    --color-border: rgba(255, 255, 255, 0.2);
    --color-accent: #ff006e;
    --box-shadow: var(--rainbow-box-glow);
    --box-shadow-hover:
        0 0 28px rgba(255, 0, 110, 0.95),
        0 0 56px rgba(0, 240, 255, 0.8),
        0 0 88px rgba(157, 78, 221, 0.7);
}

/* --- 緩やかなレインボー色相回転 (filter: hue-rotate) --- */
@keyframes rainbow-hue {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* --- レインボーグラデーションの位置スライド --- */
@keyframes rainbow-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* --- conic-gradient 回転 (border / 円グロー用) --- */
@keyframes rainbow-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 全体背景: ダーク + 高彩度レインボーぼかしオーラ (常時固定、薄くならない) --- */
/* パフォーマンス最適化: background-attachment: fixed を削除 (スクロール毎の再描画コスト大)。 */
/* 5 箇所の radial-gradient はそのまま、見た目の彩度は維持 */
body {
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 0, 110, 0.40), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.30), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(157, 78, 221, 0.40), transparent 45%),
        radial-gradient(circle at 30% 80%, rgba(255, 213, 10, 0.20), transparent 40%),
        radial-gradient(circle at 75% 20%, rgba(0, 210, 106, 0.20), transparent 40%),
        var(--gaming-bg);
    min-height: 100vh;
}

/* --- ヘッダー: レインボー下線 + 強グロー --- */
/* position / height / flex 等のレイアウト系プロパティは common.css のものをそのまま使う */
/* パフォーマンス最適化: backdrop-filter: blur 削除 (GPU 負荷大)。background は不透明寄り (0.95) なので透過要らない */
.site-header {
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.98), rgba(10, 10, 20, 0.92));
    border-bottom: 3px solid transparent;
    border-image: var(--rainbow-linear) 1;
    box-shadow:
        0 4px 28px rgba(255, 0, 110, 0.85),
        0 8px 48px rgba(0, 240, 255, 0.6);
}

/* ロゴ: レインボーグラデ文字 + 強烈な多重グロー + 緩やかに色が流れる */
/* font-size はモバイル 0.8rem / PC 1.5rem、長いタイトル「gaming.nx-space.com@レインボー」がスマホ画面に収まるよう小さめ */
.header-logo a {
    font-family: 'Orbitron', var(--font-family);
    font-size: 0.8rem;
    background: var(--rainbow-linear);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.03em;
    animation: rainbow-flow 4s linear infinite;
    filter: var(--rainbow-glow);
}

@media (min-width: 769px) {
    .header-logo a {
        font-size: 1.5rem;
        letter-spacing: 0.05em;
    }
}

/* --- ハンバーガー3本線: レインボーグラデ + flow + グロー --- */
/* common.css の単色 background-color を打ち消し、レインボーグラデに置き換える。 */
/* is-active で × に変形する transform / opacity は common.css のルールがそのまま生きる */
.hamburger-line {
    background-color: transparent;
    background: var(--rainbow-linear);
    background-size: 200% auto;
    animation: rainbow-flow 4s linear infinite;
    filter:
        drop-shadow(0 0 4px rgba(255, 0, 110, 0.8))
        drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
    border-radius: 2px;
}

/* --- カード: レインボー border + ダーク中身 + 強グロー --- */
/* パフォーマンス最適化: backdrop-filter: blur(8px) 削除。--gaming-card-bg は rgba(15,15,30,0.95) で十分不透明 */
.card {
    position: relative;
    background: var(--gaming-card-bg);
    border: 3px solid transparent;
    border-radius: var(--border-radius);
    box-shadow:
        0 0 22px rgba(255, 0, 110, 0.65),
        0 0 44px rgba(0, 240, 255, 0.5),
        inset 0 0 32px rgba(255, 255, 255, 0.04);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    z-index: 0;
}

.card::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: var(--rainbow-linear);
    background-size: 200% auto;
    animation: rainbow-flow 4s linear infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-hover);
}

/* --- 見出し: レインボーテキスト + 強烈な多重グロー --- */
h2 {
    font-family: 'Orbitron', var(--font-family);
    background: var(--rainbow-linear);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.05em;
    animation: rainbow-flow 4s linear infinite;
    filter: var(--rainbow-glow);
    border-left: 4px solid transparent;
    border-image: var(--rainbow-linear) 1;
    padding-left: 0.6em;
}

h3, .my-name {
    color: var(--gaming-text);
}

/* --- 本文 --- */
p {
    color: var(--gaming-text);
}

/* --- 一般リンク: レインボーテキスト + 多重グロー --- */
a {
    background: var(--rainbow-linear);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: filter 0.3s ease, opacity 0.3s ease;
    animation: rainbow-flow 5s linear infinite;
    filter:
        drop-shadow(0 0 4px rgba(255, 0, 110, 0.5))
        drop-shadow(0 0 8px rgba(0, 240, 255, 0.35));
}

a:hover {
    filter:
        brightness(1.4)
        drop-shadow(0 0 6px rgba(255, 0, 110, 0.8))
        drop-shadow(0 0 12px rgba(0, 240, 255, 0.6))
        drop-shadow(0 0 20px rgba(157, 78, 221, 0.5));
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* カード内段落リンク (色は親リンクスタイルそのまま、下線だけ調整) */
.card p a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* --- リンクリスト: card と同じく li にレインボー枠、a はテキスト clip --- */
/* common.css の .links-list li a は border / background を持つので、 */
/* 枠機能を li に移し、a 側の border / background はリセットする (統一手法) */
.links-list li {
    position: relative;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    border: 3px solid transparent;
    background: rgba(15, 15, 30, 0.85);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 0;
    box-shadow:
        0 0 16px rgba(255, 0, 110, 0.55),
        0 0 32px rgba(0, 240, 255, 0.4);
}

/* パフォーマンス最適化: li は数が多いので、枠の rainbow-flow アニメは廃止 (静止レインボー枠だけ残す)。 */
/* 動きは card::before / ロゴ / h2 / 本文リンク等の主要要素に集約 */
.links-list li::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: var(--rainbow-linear);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.links-list li:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 24px rgba(255, 0, 110, 0.95),
        0 0 48px rgba(0, 240, 255, 0.8),
        0 0 72px rgba(157, 78, 221, 0.6);
}

/* パフォーマンス最適化: li が多数あるので、a 文字の rainbow-flow と多重 drop-shadow は削除。 */
/* 静的レインボー文字 (background-clip:text) のみで色濃度は維持 */
.links-list li a {
    display: block;
    padding: 12px 15px;
    margin: 0;
    border: none;
    background: var(--rainbow-linear);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
    font-weight: 500;
    transition: filter 0.3s ease;
}

.links-list li a:hover {
    filter:
        brightness(1.4)
        drop-shadow(0 0 6px rgba(255, 0, 110, 0.8))
        drop-shadow(0 0 12px rgba(0, 240, 255, 0.6))
        drop-shadow(0 0 20px rgba(157, 78, 221, 0.5));
    text-decoration: none;
}

/* --- プロフィール画像: 単色 border + hue-rotate で緩やかに 7 色循環 + レインボー多重グロー --- */
.profile-header img {
    border: 5px solid #ff006e;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.2),
        0 0 28px rgba(255, 0, 110, 1.0),
        0 0 56px rgba(0, 240, 255, 0.75),
        0 0 84px rgba(157, 78, 221, 0.6);
    animation: rainbow-hue 2s linear infinite;
}

.profile-header .my-name {
    font-family: 'Orbitron', var(--font-family);
    background: var(--rainbow-linear);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.08em;
    animation: rainbow-flow 3s linear infinite;
    filter: var(--rainbow-glow);
}

/* --- クレジット表記 --- */
.copyright {
    color: var(--gaming-text-sub);
}

/* --- フッター: レインボー上線 + 強グロー --- */
.site-footer {
    background: linear-gradient(0deg, rgba(10, 10, 20, 0.95), rgba(10, 10, 20, 0.7));
    border-top: 3px solid transparent;
    border-image: var(--rainbow-linear) 1;
    box-shadow:
        0 -4px 24px rgba(157, 78, 221, 0.35),
        0 -8px 40px rgba(0, 240, 255, 0.25);
    color: var(--gaming-text-sub);
}

.footer-link {
    color: var(--gaming-text-sub);
    background: none;
    -webkit-text-fill-color: var(--gaming-text-sub);
    animation: none;
    filter: none;
}

.footer-link:hover {
    color: var(--gaming-text);
    -webkit-text-fill-color: var(--gaming-text);
    text-shadow:
        0 0 6px rgba(255, 0, 110, 0.6),
        0 0 12px rgba(0, 240, 255, 0.4);
}