/* =========================================
   Ottoman Gear Empire Specific Styles
   ========================================= */

:root {
    --color-og-bg: #0d0a08;
    --color-og-bg-light: #1a1410;
    --color-og-brass: #b5a642;
    --color-og-brass-dark: #665c26;
    --color-og-gold: #c5a059;
    --color-og-copper: #b87333;
    --color-og-orange: #ff7b00;
    --color-og-red: #8b0000;
    --color-og-text: #e8dcc4;
}

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

/* 共通ユーティリティ（Abiesレイアウト互換） */
.dark-og-bg { background-color: rgba(26, 20, 16, 0.9); }
.text-og-brass { color: var(--color-og-brass) !important; text-shadow: 0 0 10px rgba(181, 166, 66, 0.4); }
.text-og-gold { color: var(--color-og-gold) !important; text-shadow: 0 0 10px rgba(197, 160, 89, 0.4); }
.text-og-copper { color: var(--color-og-copper) !important; }
.text-og-orange { color: var(--color-og-orange) !important; text-shadow: 0 0 15px rgba(255, 123, 0, 0.6); }

.og-theme .section-title {
    color: var(--color-og-brass);
    border-bottom-color: var(--color-og-brass-dark);
    font-family: 'Cinzel', serif;
}
.og-theme .section-title::before {
    color: var(--color-og-copper);
}

/* 背景演出（歯車と蒸気） */
.og-gear-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 899;
    background-image:
        radial-gradient(circle at 10% 20%, transparent 20%, rgba(181, 166, 66, 0.03) 21%, transparent 22%),
        radial-gradient(circle at 80% 70%, transparent 30%, rgba(184, 115, 51, 0.03) 31%, transparent 32%);
    background-size: 300px 300px;
}
/* 蒸気。以前は height:50vh の帯を -100% まで動かしていたため、
   蒸気が画面中央あたりで箱ごと消えて「途中で途切れる」ように見えた。
   inset:0 で画面全体を覆い、上下端では opacity 0 にしてループを隠す。 */
.og-steam-fx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="15"/></filter><circle cx="50" cy="150" r="40" fill="white" filter="url(%23blur)" opacity="0.05"/><circle cx="150" cy="180" r="60" fill="white" filter="url(%23blur)" opacity="0.05"/></svg>');
    background-repeat: repeat-x;
    background-size: 60vmax 60vmax;
    background-position: center bottom;
    animation: steamRise 24s linear infinite;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
@keyframes steamRise {
    0%   { transform: translateY(35%)  scale(1);   opacity: 0; }
    20%  { opacity: 0.35; }
    80%  { opacity: 0.35; }
    100% { transform: translateY(-55%) scale(1.4); opacity: 0; }
}

/* Hero Section */
.og-hero .hero-bg {
    filter: brightness(0.6) sepia(0.3) hue-rotate(-15deg);
}
.hero-overlay-og {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(13, 10, 8, 0.3) 0%, rgba(13, 10, 8, 1) 100%);
    z-index: 1;
}
.og-border {
    border-top: 1px solid var(--color-og-brass);
    border-bottom: 1px solid var(--color-og-brass);
    padding: 10px 0;
}
.orange-scroll .line { background-color: var(--color-og-orange); }

/* Basic Info (Abies互換) */
.og-table {
    background: rgba(26, 20, 16, 0.8) !important;
    border: 1px solid var(--color-og-brass-dark) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}
.og-table th { color: var(--color-og-gold) !important; border-bottom: 1px solid rgba(181, 166, 66, 0.2); }
.og-table td { border-bottom: 1px solid rgba(181, 166, 66, 0.2); }
.og-card {
    background: rgba(26, 20, 16, 0.8) !important;
    border: 1px solid var(--color-og-brass-dark) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.8);
    transition: 0.3s;
}
.og-card:hover {
    border-color: var(--color-og-brass) !important;
    box-shadow: 0 0 20px rgba(181, 166, 66, 0.3), inset 0 0 10px rgba(255, 123, 0, 0.1);
    transform: translateY(-5px);
}

/* Summary (Abies互換) */
.og-summary {
    position: relative;
    padding: 100px 0;
}
.og-summary .summary-bg { filter: brightness(0.4) sepia(0.2); }
.og-summary .summary-overlay { background: linear-gradient(var(--color-og-bg), rgba(13,10,8,0.7), var(--color-og-bg)); }
.og-textbox {
    background: rgba(26, 20, 16, 0.8) !important;
    border: 1px solid var(--color-og-brass-dark) !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

/* History (Abies互換) */
.og-timeline .timeline::before {
    background-color: var(--color-og-brass-dark) !important;
}
.og-timeline .year { color: var(--color-og-orange) !important; font-family: 'Cinzel', serif; }
.og-timeline .event { border-left-color: var(--color-og-brass-dark) !important; }

/* Politics (Abies互換) */
.politics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}
.og-theme .party-card {
    flex: 1;
    min-width: 300px;
    padding: 30px;
    background: rgba(26, 20, 16, 0.8);
    border: 1px solid var(--color-og-brass-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: 0.3s;
}
.og-theme .party-card:hover {
    border-color: var(--color-og-brass);
    box-shadow: 0 0 20px rgba(181, 166, 66, 0.3);
    transform: translateY(-5px);
}
.party-list {
    list-style: none;
    margin-top: 15px;
    line-height: 1.8;
}
.og-theme .party-list li::before { content: '⚙'; color: var(--color-og-brass); margin-right: 8px; }
/* Capital / Tech (Abies互換) */
.capital-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    border: 1px solid var(--color-og-brass-dark);
    background: rgba(26, 20, 16, 0.6);
}
.capital-image {
    flex: 1;
    min-width: 300px;
    border-right: 2px solid var(--color-og-brass-dark);
    box-shadow: 0 0 20px rgba(181, 166, 66, 0.3);
    overflow: hidden;
}
.capital-image img {
    width: 100%;
    height: auto;
    display: block;
}
.capital-text {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}
.capital-list {
    list-style: none;
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.capital-list li {
    padding: 10px;
    background: rgba(181, 166, 66, 0.1);
    border-left: 3px solid var(--color-og-brass);
}
.og-theme .capital-list li::before { content: '⚙'; color: var(--color-og-brass); margin-right: 8px; }
/* Military (Abies互換) */
.og-military {
    position: relative;
    padding: 100px 0;
}
.og-military .military-card {
    background: rgba(26, 20, 16, 0.8) !important;
    border: 1px solid var(--color-og-brass-dark) !important;
}
.og-military .military-card:hover { border-color: var(--color-og-brass) !important; }
.og-military .mil-content h3 { color: var(--color-og-gold); border-bottom: 1px solid var(--color-og-brass-dark); padding-bottom: 10px; }

/* Diplomacy Conflict Card (Abies互換) */
.conflict-card {
    display: flex;
    flex-wrap: wrap;
    background: rgba(26, 20, 16, 0.9);
    border: 1px solid var(--color-og-copper);
    margin-top: 50px;
    overflow: hidden;
}
.conflict-img {
    flex: 1;
    min-width: 300px;
    background-size: cover;
    background-position: center;
    min-height: 300px;
}
.conflict-text {
    flex: 1;
    min-width: 300px;
    padding: 40px;
}

/* Evaluation (Ideology) */
.evaluation-section-og {
    background-image: url('../images/hero_ottoman-jpg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    padding: 150px 0;
    text-align: center;
}
.evaluation-section-og::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 10, 8, 0.8);
}
.evaluation-section-og .container { position: relative; z-index: 2; }
.evaluation-section-og .huge-title { font-size: 3rem; color: var(--color-og-orange); text-shadow: 0 0 20px rgba(255,123,0,0.8); font-family: 'Noto Serif JP', serif; }

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