/* =========================================
   Great Britain Theme Specific Styles (Youjo Senki Style)
   ========================================= */

.gb-theme {
    --color-bg-base: #050505;
    --color-bg-darker: #111111;
    --color-bg-mid: #1a1a1a;
    --color-gold: #d4af37;
    --color-gold-dim: #997a00;
    --color-blue: #0055ff;
    --color-emerald: #00ffaa;
    --color-text: #e0e0e0;
    --font-heading: 'Cinzel', serif;
}

.gb-theme {
    background-color: var(--color-bg-base);
    color: var(--color-text);
    font-family: 'Noto Serif JP', serif;
}

/* 魔法の霧と粒子の背景エフェクト */
.gb-magic-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 899;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.1"/></svg>');
    opacity: 0.15;
    mix-blend-mode: screen;
    /* 0% と 100% が同じ状態なので linear だと折り返しで速度が急変する */
    animation: fogMove 60s ease-in-out infinite;
    will-change: transform;
}

.gb-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    opacity: 0.4;
    background-image: radial-gradient(1px 1px at 20% 30%, var(--color-emerald), rgba(0,0,0,0)),
                      radial-gradient(1.5px 1.5px at 60% 70%, var(--color-blue), rgba(0,0,0,0)),
                      radial-gradient(2px 2px at 80% 40%, var(--color-gold), rgba(0,0,0,0));
    background-size: 150px 150px;
    animation: particleFloat 24s linear infinite;
    will-change: background-position;
}

@keyframes fogMove {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.2) translate(-2%, 2%); }
    100% { transform: scale(1) translate(0, 0); }
}

/* 移動量はタイル幅 150px の整数倍。
   以前は 100px / -100px などが混ざっており、ループのたびに
   粒子の配置が飛んで「途切れる」ように見えていた。 */
@keyframes particleFloat {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 150px -300px, -150px 300px, 300px -150px; }
}

/* ユーティリティクラス */
.text-gb-gold { color: var(--color-gold) !important; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
.text-gb-blue { color: var(--color-blue) !important; text-shadow: 0 0 10px rgba(0, 85, 255, 0.5); }
.text-gb-emerald { color: var(--color-emerald) !important; text-shadow: 0 0 10px rgba(0, 255, 170, 0.5); }

.gb-border { border-color: var(--color-gold) !important; }

/* Hero Section */
.gb-hero .hero-bg {
    filter: brightness(0.6) contrast(1.2);
}
.hero-overlay-gb {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 20%, var(--color-bg-base) 90%);
    z-index: 1;
}
.gb-hero .scroll-indicator .line {
    background-color: var(--color-gold);
}
.gb-hero .scroll-indicator p {
    color: var(--color-gold);
}

.hero-quote {
    font-size: 1.2rem;
    color: var(--color-emerald);
    border-left: 2px solid var(--color-gold);
    padding-left: 20px;
    text-align: left;
    text-shadow: 0 0 10px rgba(0, 255, 170, 0.5);
    background: rgba(0,0,0,0.5);
    padding: 15px 25px;
    margin-top: 20px;
    display: inline-block;
}

/* テーブル・カードの共通スタイル (オーバーライド) */
.gb-theme .section-title {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold-dim);
}
.gb-theme .section-title::before {
    color: var(--color-blue);
}

.gb-table {
    border-color: var(--color-gold-dim) !important;
    background: rgba(17, 17, 17, 0.8) !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}
.gb-table th {
    color: var(--color-gold) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.gb-table td {
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.gb-card {
    border: 1px solid var(--color-gold-dim) !important;
    background: rgba(17, 17, 17, 0.8) !important;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}
.gb-card:hover {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
}

.gb-textbox {
    border-color: var(--color-gold-dim);
    background: rgba(17, 17, 17, 0.8);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* セクション背景 */
.section-bg-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
    opacity: 0.4;
}
.section-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(var(--color-bg-base), rgba(5, 5, 5, 0.8), var(--color-bg-base));
    z-index: 1;
}

/* 歴史タイムライン */
.gb-theme .timeline {
    border-left: 2px solid var(--color-gold);
    padding-left: 30px;
    margin-left: 20px;
    max-width: 760px;
    margin-right: auto;
}
/* style.css の中央線は GB では border-left が担うので消す */
.gb-theme .timeline::before {
    display: none;
}
.gb-theme .timeline-item {
    display: block;
    margin-bottom: 40px;
    position: relative;
}
.gb-theme .timeline-item .year,
.gb-theme .timeline-item .event {
    width: auto;
    text-align: left;
}
.gb-theme .timeline-item .event {
    border-left: none;
    padding-left: 0;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: var(--color-bg-base);
    border: 2px solid var(--color-gold);
    border-radius: 50%;
}
.timeline-item .year {
    color: var(--color-blue);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 魔法技術 */
.split-section {
    display: flex;
    gap: 50px;
    align-items: center;
    background: rgba(17,17,17,0.5);
    border: 1px solid #333;
    padding: 40px;
}
.split-img {
    flex: 1;
    border: 1px solid var(--color-gold);
}
.split-img img {
    width: 100%;
    display: block;
}
.split-text {
    flex: 1;
}
.magic-list {
    list-style: none;
}
.magic-list li {
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
.magic-list li::before {
    content: '♦';
    position: absolute;
    left: 0;
    color: var(--color-emerald);
}

/* 魔法省セクション */
.ministry-section {
    position: relative;
    padding: 150px 0;
    text-align: center;
}
.ministry-content {
    position: relative;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--color-blue);
    padding: 50px;
    box-shadow: 0 0 30px rgba(0, 85, 255, 0.3);
    max-width: 800px;
    margin: 0 auto;
}

/* グリッドカード (自然環境・外交・軍事) */
.gb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* 理念セクション */
.ideology-hero-gb {
    position: relative;
    padding: 200px 0;
    text-align: center;
    border-top: 1px solid #333;
}
.ideology-text {
    position: relative;
    z-index: 3;
    font-size: 2.5rem;
    color: var(--color-emerald);
    text-shadow: 0 0 20px rgba(0, 255, 170, 0.8);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .split-section {
        flex-direction: column;
    }
}

/* -----------------------------------------------------------
   background-attachment: fixed はモバイル (iOS Safari / Android)
   では固定されないか極端に重くなり、背景が拡大されたまま
   ガタつく。タッチ端末では通常スクロールに戻す。
   ----------------------------------------------------------- */
@media (max-width: 900px), (hover: none) {
    .gb-theme .section-bg-image {
        background-attachment: scroll;
    }
}