/* ============================================================
   theme.css — index.html ベースの統一デザインテーマ
   主要ページのナビ/フッター/カード/カラートークンを共通化
   ============================================================ */

:root {
    --red:   #ff4654;
    --blue:  #00d4ff;
    --gold:  #ffd700;
    --bg:    #070a0d;
    --bg1:   #0d1117;
    --bg2:   #111820;
    --glass: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.09);
    --text:  #f0f6ff;
    --muted: rgba(240,246,255,0.65);
    --r: 18px;
    --ease: cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ─── BASE ─── */
.theme-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ─── AMBIENT BLOBS (背景アクセント) ─── */
.theme-ambient {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.theme-ambient .blob {
    position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15;
    animation: themeBlobFloat 18s ease-in-out infinite;
}
.theme-ambient .blob-1 { width: 700px; height: 700px; background: var(--red);    top: -200px; left: -200px; animation-delay: 0s; }
.theme-ambient .blob-2 { width: 600px; height: 600px; background: var(--blue);   bottom: -150px; right: -150px; animation-delay: -9s; }
.theme-ambient .blob-3 { width: 400px; height: 400px; background: #8b5fbf; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -5s; }
@keyframes themeBlobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-40px) scale(1.06); }
    66%     { transform: translate(-30px,30px) scale(0.95); }
}

/* ─── NAVIGATION (index.html 準拠) ─── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0 28px;
    height: 72px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s var(--ease);
}
.nav.scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.2rem; font-weight: 800; color: var(--text);
    text-decoration: none; letter-spacing: -0.03em;
}
.nav-logo-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--red), #c0392b);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff;
    box-shadow: 0 0 18px rgba(255,70,84,0.45);
}
.nav-ver {
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
    color: var(--muted); margin-top: 2px;
}
.nav-links {
    display: flex; align-items: center; gap: 2px; list-style: none;
    margin: 0; padding: 0;
    flex-wrap: nowrap;
}
.nav-links > li { flex: 0 0 auto; }
.nav-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px;
    color: var(--muted); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--glass); }
.nav-links a.active { color: var(--text); }
.nav-btn-premium {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 7px 14px !important; border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.08)) !important;
    border: 1px solid rgba(255,215,0,0.25) !important;
    color: var(--gold) !important;
    font-size: 0.875rem; font-weight: 600 !important;
    white-space: nowrap;
    transition: all 0.25s var(--ease) !important;
}
.nav-btn-premium:hover { background: rgba(255,215,0,0.22) !important; box-shadow: 0 0 20px rgba(255,215,0,0.2) !important; }
.nav-badge-free {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
    background: rgba(255,215,0,0.2); color: var(--gold);
    padding: 2px 6px; border-radius: 5px;
}
.nav-btn-admin {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 7px 12px !important; border-radius: 10px !important;
    background: rgba(255,70,84,0.12) !important; border: 1px solid rgba(255,70,84,0.25) !important;
    color: var(--red) !important; font-weight: 600 !important; font-size: 0.875rem;
    white-space: nowrap;
    text-decoration: none;
}
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.nav-burger span { width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: all 0.3s; display: block; }

/* ─── FOOTER (index.html 準拠) ─── */
.footer {
    position: relative; z-index: 1;
    border-top: 1px solid var(--glass-border);
    background: rgba(7,10,13,0.85); backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.footer-inner {
    max-width: 1100px; margin: 0 auto; padding: 64px 2rem 40px;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; text-decoration: none; }
.footer-logo-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--red), #c0392b);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: #fff;
}
.footer-logo span { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
.footer-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.footer-status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.78rem; color: #00d4a0; font-weight: 500;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #00d4a0; box-shadow: 0 0 7px #00d4a0; animation: themePulseDot 2s ease-in-out infinite; }
@keyframes themePulseDot { 0%,100%{opacity:1} 50%{opacity:.3} }
.footer-col h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.footer-col a { color: rgba(240,246,255,0.55); text-decoration: none; font-size: 0.875rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-discord {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; margin-top: 8px;
    background: rgba(88,101,242,0.12); border: 1px solid rgba(88,101,242,0.22);
    color: #7289da; text-decoration: none; font-size: 0.875rem; font-weight: 600;
    transition: all 0.2s;
}
.footer-discord:hover { background: rgba(88,101,242,0.22); }
.footer-bottom {
    max-width: 1100px; margin: 0 auto; padding: 20px 2rem 32px;
    border-top: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 0.8rem; color: var(--muted); margin: 0; }
.footer-built { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }

/* ─── GLASS CARD (汎用) ─── */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--r);
    padding: 28px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
    position: relative; overflow: hidden;
}
.glass-card:hover {
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
    .nav-links a { padding: 6px 10px; font-size: 0.82rem; }
    .nav-btn-premium, .nav-btn-admin { padding: 6px 11px !important; font-size: 0.82rem !important; }
}
@media (max-width: 1024px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-links.open {
        display: flex; position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; gap: 6px; padding: 16px;
        background: rgba(10,10,10,0.95); backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--glass-border);
    }
    .nav-links.open a { width: 100%; justify-content: flex-start; }
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}