/**
 * 投票システム カスタムCSS
 * 
 * 注意: 基本スタイルはTailwind CSS CDNを使用します。
 * このファイルには、Tailwindでカバーできないカスタムスタイルのみを記述します。
 */

/* Screen Reader Only - SEO用にh1タグを残しつつ非表示 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================
   Cyber Atmosphere Background
   ========================================== */
body {
    background: 
        /* Stars (パーティクル風) */
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 40%, white, transparent),
        radial-gradient(1px 1px at 33% 60%, white, transparent),
        radial-gradient(1px 1px at 66% 20%, white, transparent),
        radial-gradient(2px 2px at 10% 80%, white, transparent),
        radial-gradient(1px 1px at 40% 90%, white, transparent),
        /* Grid Pattern */
        linear-gradient(0deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        /* Radial Gradient Base */
        radial-gradient(circle at center, rgba(10, 25, 47, 0.9) 0%, #0A192F 100%);
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        50px 50px,
        50px 50px,
        100% 100%;
    background-position: 
        0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
        0 0,
        0 0,
        center;
    animation: starfield 20s linear infinite;
}

@keyframes starfield {
    0% {
        background-position: 
            0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
            0 0,
            0 0,
            center;
    }
    100% {
        background-position: 
            100px 100px, -100px 200px, 200px -100px, -200px 100px, 100px -200px, -100px -100px, 200px 200px, -200px -200px, 100px 100px,
            50px 50px,
            50px 50px,
            center;
    }
}

/* カウントダウンタイマー用のアニメーション */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    50% {
        opacity: 0.8;
        text-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    }
}

.countdown-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* モーダル表示用のオーバーレイ */
.modal-overlay {
    backdrop-filter: blur(4px);
}

/* 投票ボタンのホバーエフェクト（強化） */
.vote-button {
    position: relative;
    overflow: hidden;
}

.vote-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.vote-button:hover::before {
    width: 300px;
    height: 300px;
}

/* 練習生カードのグローエフェクト */
.trainee-card {
    position: relative;
}

.trainee-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.5rem;
    opacity: 0;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.5);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.trainee-card:hover::after {
    opacity: 1;
}

/* ランキングの順位変動アイコン */
.rank-change-up {
    color: #ef4444; /* red-500 */
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

.rank-change-down {
    color: #10b981; /* green-500 */
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

.rank-change-same {
    color: #6b7280; /* gray-500 */
}

.rank-change-new {
    color: #fbbf24; /* amber-400 */
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
    animation: pulse-glow 2s ease-in-out infinite;
}

/* 画像プレースホルダー（画像表示OFF時） */
.image-placeholder {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

/* スムーズなスクロール */
html {
    scroll-behavior: smooth;
}

/* ボトムナビゲーションのアクティブ状態 */
.active-nav {
    color: #D4FF00 !important;
}

.active-nav svg {
    filter: drop-shadow(0 0 4px rgba(212, 255, 0, 0.5));
}

/* ボトムナビゲーションのホバーエフェクト */
nav a {
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #D4FF00;
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active-nav::after {
    width: 60%;
}

/* 表彰台レイアウト */
.podium-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .podium-container {
        gap: 1rem;
    }
}

.podium-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.podium-first {
    transform: scale(1.3);
    margin-bottom: 0;
}

.podium-second {
    transform: scale(1.1);
    margin-bottom: 0;
}

.podium-third {
    transform: scale(1.0);
    margin-bottom: 0;
}

.podium-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.podium-first:hover {
    transform: scale(1.35);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.5);
}

.podium-second:hover {
    transform: scale(1.15);
}

.podium-third:hover {
    transform: scale(1.05);
}

/* モバイル最適化 */
@media (max-width: 640px) {
    .trainee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    /* ボトムナビゲーションの下にコンテンツが隠れないように */
    main {
        padding-bottom: 96px; /* スマホではボトムナビの高さ分を確保 */
    }
    
    /* ボトムナビゲーションの表示を確実にする（スマホ対応） */
    /* WP Fastest Cache除外設定済みのため、最小限の!importantのみ */
    #bottom-navigation {
        display: flex !important;
        z-index: 99999 !important;
    }
    
    /* ヒーロー画像の強制表示（スマホ対応） */
    #hero-banner,
    #hero-banner-fallback {
        display: block !important;
        visibility: visible !important;
    }
    
    /* 表彰台は横並びを維持（flex-nowrapで強制） */
    .podium-container {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }
    
    /* スマホ時はサイズを縮小 */
    .podium-first {
        transform: scale(1.15);
    }
    
    .podium-second {
        transform: scale(1.05);
    }
    
    .podium-third {
        transform: scale(1.0);
    }
    
    .podium-card {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .podium-first:hover,
    .podium-second:hover,
    .podium-third:hover {
        transform: scale(1.05);
    }
}

/* タブボタンのアクティブ状態（ランキング画面） */
.tab-button.border-\[#00E5FF\] {
    position: relative;
}

.tab-button.border-\[#00E5FF\]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00E5FF, transparent);
    animation: slide-in 0.3s ease;
}

@keyframes slide-in {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* ==========================================
   Toast Message Styles
   ========================================== */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #1a2f4f;
    color: #FFFFFF;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    max-width: 90%;
    width: auto;
    min-width: 300px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid #00E5FF;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-error {
    border-color: #ef4444;
    background: #1a1a2e;
}

.toast-error::before {
    content: '⚠️ ';
    margin-right: 8px;
}

.toast-success {
    border-color: #10b981;
    background: #1a2f4f;
}

.toast-success::before {
    content: '✓ ';
    margin-right: 8px;
}

.toast-info {
    border-color: #00E5FF;
    background: #1a2f4f;
}

.toast-info::before {
    content: 'ℹ️ ';
    margin-right: 8px;
}

/* ==========================================
   Loading Spinner Animation
   ========================================== */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}