/* ═══════════════════════════════════════════════════
   styles.css — نظرية اللعبة — Unified Stylesheet
   ═══════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }


/* ═══════════════════ index.html ═══════════════════ */

body.page-index {
    --ink: #0d0d0d;
    --paper: #f5f0e8;
    --cream: #ede7d6;
    --gold: #b8860b;
    --gold-light: #d4a017;
    --rust: #8b2500;
    --slate: #2c3e50;
    --forest: #1a4a2a;
    --muted: #6b6354;
    --border: #c8bfa8;
    --highlight: #fdf3dc;
  }

body.page-index {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* HEADER */
body.page-index header {
    background: var(--forest);
    color: #f5f0e8;
    padding: 70px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-index header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.02) 40px,
      rgba(255,255,255,0.02) 41px
    );
  }

body.page-index .header-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
  }

body.page-index header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto 20px;
    position: relative;
  }

body.page-index header p.subtitle {
    color: #bbb;
    font-size: 16px;
    font-weight: 300;
    max-width: 650px;
    margin: 0 auto 25px;
    position: relative;
  }

body.page-index .lecturer {
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 400;
    margin: 0 auto 20px;
    position: relative;
    letter-spacing: 1px;
  }

body.page-index .wiki-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    padding: 4px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    margin-right: 8px;
    transition: all 0.3s;
    vertical-align: middle;
  }

body.page-index .wiki-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--gold-light);
    color: var(--gold-light);
  }

body.page-index .wiki-btn:hover .wiki-icon {
    fill: var(--gold-light);
  }

body.page-index .wiki-icon {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: fill 0.3s;
  }

body.page-index .lesson-count {
    display: inline-block;
    padding: 6px 22px;
    border: 1px solid rgba(212,160,23,0.4);
    color: var(--gold-light);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    position: relative;
  }

body.page-index .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
  }

/* INTRO BOX */
body.page-index .intro {
    background: var(--forest);
    color: #f5f0e8;
    padding: 40px;
    margin: 50px auto;
    max-width: 900px;
    position: relative;
  }

body.page-index .intro::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--gold);
  }

body.page-index .intro h2 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-index .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

body.page-index .intro-item {
    text-align: center;
  }

body.page-index .intro-icon {
    font-size: 28px;
    margin-bottom: 10px;
  }

body.page-index .intro-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--gold-light);
  }

body.page-index .intro-item p {
    font-size: 14px;
    color: #bbb;
    line-height: 1.7;
  }

/* LESSONS LIST */
body.page-index .lessons-section {
    padding: 30px 0 50px;
  }

body.page-index .lesson-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    padding: 35px 0;
    transition: background 0.3s;
    position: relative;
  }

body.page-index .lesson-card:first-child {
    border-top: 1px solid var(--border);
  }

body.page-index .lesson-card:hover {
    background: var(--highlight);
    margin: 0 -30px;
    padding: 35px 30px;
  }

body.page-index .card-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

body.page-index .lesson-num {
    font-family: 'Amiri', serif;
    font-size: 56px;
    color: var(--forest);
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
  }

body.page-index .lesson-card:hover .lesson-num {
    color: var(--gold);
  }

body.page-index .card-content {
    flex: 1;
  }

body.page-index .card-category {
    font-size: 12px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: 500;
  }

body.page-index .card-content h2 {
    font-family: 'Amiri', serif;
    font-size: 24px;
    color: var(--slate);
    margin-bottom: 6px;
    line-height: 1.5;
  }

body.page-index .lesson-card:hover .card-content h2 {
    color: var(--forest);
  }

body.page-index .card-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 14px;
    font-weight: 300;
  }

body.page-index .card-description {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 16px;
  }

body.page-index .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

body.page-index .tag {
    display: inline-block;
    font-size: 12px;
    padding: 3px 14px;
    background: var(--cream);
    border: 1px solid var(--border);
    color: var(--muted);
    letter-spacing: 0.5px;
  }

body.page-index .lesson-card:hover .tag {
    background: #fff;
    border-color: var(--gold);
    color: var(--forest);
  }

body.page-index .card-arrow {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--cream);
    transition: all 0.3s;
  }

body.page-index .lesson-card:hover .card-arrow {
    color: var(--gold);
    left: -8px;
  }

/* DOWNLOAD ICONS */
.card-downloads {
    display: flex;
    gap: 10px;
    padding: 8px 0 0;
    justify-content: flex-end;
  }

body.page-index .card-downloads {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }

.card-downloads a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--cream);
    color: var(--muted);
    transition: all 0.25s;
  }

.card-downloads a:hover {
    background: var(--forest);
    color: #fff;
    border-color: var(--forest);
  }

.card-downloads a svg {
    flex-shrink: 0;
  }

.lesson-downloads {
    margin-bottom: 30px;
  }

/* SECTION DIVIDERS */
body.page-index .part-divider {
    background: var(--slate);
    color: #f5f0e8;
    padding: 30px 40px;
    margin: 10px 0 0;
    text-align: center;
    position: relative;
  }

body.page-index .part-divider::before, body.page-index .part-divider::after {
    content: '—';
    color: var(--gold-light);
    margin: 0 12px;
  }

body.page-index .part-divider span {
    font-family: 'Amiri', serif;
    font-size: 20px;
    position: relative;
  }

/* FOOTER */
body.page-index footer {
    background: var(--ink);
    color: #666;
    text-align: center;
    padding: 30px;
    font-size: 13px;
  }

/* RESPONSIVE */
@media (max-width: 700px) {
  body.page-index .intro-grid { grid-template-columns: 1fr; gap: 16px; }
  body.page-index .intro { padding: 25px; }
  body.page-index .card-inner { gap: 16px; }
  body.page-index .lesson-num { font-size: 40px; min-width: 50px; }
  body.page-index .card-content h2 { font-size: 20px; }
  body.page-index .card-arrow { display: none; }
  body.page-index .lesson-card:hover {
      margin: 0 -16px;
      padding: 35px 16px;
    }
  body.page-index .container { padding: 0 16px; }
}


/* ═══════════════ INDEX PAGE MODALS ═══════════════ */

body.page-index .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-index .modal-overlay.active { display: flex; }

body.page-index .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-index .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-index .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-index .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-index .modal-close:hover { color: #fff; }

body.page-index .modal-body {
    overflow-y: auto;
    padding: 30px;
    font-family: 'Amiri', serif;
    line-height: 2;
  }

/* ═══════════════════ 1- lesson-game-theory-society.html ═══════════════════ */

body.page-1 {
    --ink: #0d0d0d;
    --paper: #f5f0e8;
    --cream: #ede7d6;
    --gold: #b8860b;
    --gold-light: #d4a017;
    --rust: #8b2500;
    --slate: #2c3e50;
    --forest: #1a4a2a;
    --muted: #6b6354;
    --border: #c8bfa8;
    --highlight: #fdf3dc;
  }

body.page-1 {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* HEADER */
body.page-1 header {
    background: var(--forest);
    color: #f5f0e8;
    padding: 60px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-1 header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.02) 40px,
      rgba(255,255,255,0.02) 41px
    );
  }

body.page-1 .header-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 500;
    margin-bottom: 20px;
  }

body.page-1 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 700;
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto 20px;
    position: relative;
  }

body.page-1 header p.subtitle {
    color: #bbb;
    font-size: 15px;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
  }

body.page-1 .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
  }

/* OBJECTIVES */
body.page-1 .objectives {
    background: var(--forest);
    color: #f5f0e8;
    padding: 40px;
    margin: 50px auto;
    max-width: 900px;
    border-radius: 2px;
    position: relative;
  }

body.page-1 .objectives::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--gold);
  }

body.page-1 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-1 .objectives ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

body.page-1 .objectives ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
  }

body.page-1 .objectives ul li::before {
    content: '◆';
    color: var(--gold);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
  }

/* SECTION */
body.page-1 .section {
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
  }

body.page-1 .section-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
  }

body.page-1 .section-num {
    font-family: 'Amiri', serif;
    font-size: 72px;
    color: #2e7d32;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
  }

body.page-1 .section-title h2 {
    font-family: 'Amiri', serif;
    font-size: 28px;
    color: var(--slate);
    margin-bottom: 6px;
    line-height: 1.4;
  }

body.page-1 .section-title p {
    font-size: 13px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

body.page-1 p.body-text {
    margin-bottom: 18px;
    color: #2a2a2a;
  }

/* CALLOUT */
body.page-1 .callout {
    border-right: 4px solid var(--gold);
    background: var(--highlight);
    padding: 20px 25px;
    margin: 30px 0;
    font-family: 'Amiri', serif;
    font-size: 20px;
    line-height: 1.8;
    color: var(--slate);
  }

/* INFO BOX */
body.page-1 .info-box {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 25px 30px;
    margin: 25px 0;
    border-radius: 2px;
  }

body.page-1 .info-box h4 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

body.page-1 .info-box p { font-size: 15px; margin-bottom: 10px; }

body.page-1 .info-box p:last-child { margin-bottom: 0; }

/* THEORIES GRID */
body.page-1 .theories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 30px 0;
  }

body.page-1 .theory-card {
    background: var(--paper);
    padding: 28px 22px;
    transition: background 0.3s;
  }

body.page-1 .theory-card:hover { background: var(--highlight); }

body.page-1 .theory-num {
    font-family: 'Amiri', serif;
    font-size: 40px;
    color: #2e7d32;
    line-height: 1;
    margin-bottom: 10px;
  }

body.page-1 .theory-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 10px;
  }

body.page-1 .theory-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

body.page-1 .theory-card.highlight-card { background: var(--forest); }

body.page-1 .theory-card.highlight-card .theory-num { color: rgba(255,255,255,0.8); }

body.page-1 .theory-card.highlight-card h3 { color: var(--gold-light); }

body.page-1 .theory-card.highlight-card p { color: #ccc; }

/* GAME COMPONENTS */
body.page-1 .components-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 25px 0;
  }

body.page-1 .comp-card {
    background: var(--paper);
    padding: 30px 25px;
    text-align: center;
  }

body.page-1 .comp-icon { font-size: 32px; margin-bottom: 14px; }

body.page-1 .comp-card h3 { font-family: 'Amiri', serif; font-size: 22px; color: var(--slate); margin-bottom: 10px; }

body.page-1 .comp-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* BENEFITS */
body.page-1 .benefits-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 25px 0;
  }

body.page-1 .benefit-card {
    background: var(--paper);
    padding: 28px 22px;
  }

body.page-1 .benefit-num {
    font-family: 'Amiri', serif;
    font-size: 48px;
    color: #2e7d32;
    opacity: 1;
    line-height: 1;
    margin-bottom: 8px;
  }

body.page-1 .benefit-card h3 { font-size: 16px; font-weight: 700; color: var(--forest); margin-bottom: 10px; }

body.page-1 .benefit-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* PRINCIPLE */
body.page-1 .principle {
    background: var(--slate);
    color: #f5f0e8;
    padding: 45px;
    margin: 40px 0;
    text-align: center;
    position: relative;
  }

body.page-1 .principle::before, body.page-1 .principle::after {
    content: '"';
    font-family: 'Amiri', serif;
    font-size: 120px;
    color: rgba(255,255,255,0.05);
    position: absolute;
    line-height: 1;
  }

body.page-1 .principle::before { top: 10px; right: 20px; }

body.page-1 .principle::after { bottom: -20px; left: 20px; transform: scaleX(-1); }

body.page-1 .principle p {
    font-family: 'Amiri', serif;
    font-size: 24px;
    line-height: 1.7;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
  }

body.page-1 .principle .source {
    font-size: 13px;
    color: var(--gold-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }

/* MARRIAGE GAME TABLE */
body.page-1 .game-table { width: 100%; border-collapse: collapse; margin: 25px 0; }

body.page-1 .game-table th {
    background: var(--slate);
    color: #eee;
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: right;
  }

body.page-1 .game-table th:first-child { background: var(--paper); color: var(--muted); }

body.page-1 .game-table th.f-th { background: var(--rust); }

body.page-1 .game-table td {
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--cream);
    line-height: 1.7;
    vertical-align: top;
  }

body.page-1 .game-table tr:nth-child(even) td { background: var(--highlight); }

body.page-1 .game-table td:first-child { font-weight: 700; color: var(--muted); font-size: 13px; }

/* SUPERSTRUCTURES */
body.page-1 .super-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 30px 0;
  }

body.page-1 .super-card {
    background: var(--paper);
    padding: 30px 22px;
  }

body.page-1 .super-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 14px;
    font-weight: 700;
  }

body.page-1 .tag-early { background: #e8f5e9; color: #2e7d32; }

body.page-1 .tag-mid { background: #fff8e1; color: #f57f17; }

body.page-1 .tag-late { background: #fce4ec; color: #c62828; }

body.page-1 .super-card h3 { font-family: 'Amiri', serif; font-size: 20px; color: var(--slate); margin-bottom: 14px; }

body.page-1 .super-card ul { list-style: none; }

body.page-1 .super-card ul li {
    font-size: 13px;
    color: var(--muted);
    padding: 5px 0;
    border-bottom: 1px solid var(--cream);
    display: flex;
    gap: 8px;
    line-height: 1.6;
  }

body.page-1 .super-card ul li::before {
    content: '›';
    color: var(--gold);
    flex-shrink: 0;
    font-weight: 700;
  }

body.page-1 .super-card .dating-label {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 2px;
  }

body.page-1 .dl-1 { background: #e8f5e9; color: #2e7d32; }

body.page-1 .dl-2 { background: #fff8e1; color: #f57f17; }

body.page-1 .dl-3 { background: #fce4ec; color: #c62828; }

/* FERTILITY MAP PLACEHOLDER */
body.page-1 .map-box {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 35px;
    margin: 25px 0;
    border-radius: 2px;
  }

body.page-1 .map-title { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; text-align: center; }

body.page-1 .map-legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 25px; }

body.page-1 .legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

body.page-1 .legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

body.page-1 .dot-high { background: #c62828; }

body.page-1 .dot-mid { background: #f57f17; }

body.page-1 .dot-low { background: #1565c0; }

body.page-1 .dot-crisis { background: #1a237e; }

body.page-1 .regions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--border);
  }

body.page-1 .region-card {
    padding: 20px 15px;
    text-align: center;
  }

body.page-1 .region-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }

body.page-1 .region-rate { font-family: 'Amiri', serif; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 6px; }

body.page-1 .region-note { font-size: 12px; color: var(--muted); line-height: 1.5; }

body.page-1 .rc-africa { background: #ffebee; }

body.page-1 .rc-africa h4 { color: #c62828; }

body.page-1 .rc-africa .region-rate { color: #c62828; }

body.page-1 .rc-israel { background: #e8f5e9; }

body.page-1 .rc-israel h4 { color: #2e7d32; }

body.page-1 .rc-israel .region-rate { color: #2e7d32; }

body.page-1 .rc-west { background: #e3f2fd; }

body.page-1 .rc-west h4 { color: #1565c0; }

body.page-1 .rc-west .region-rate { color: #1565c0; }

body.page-1 .rc-korea { background: #ede7f6; }

body.page-1 .rc-korea h4 { color: #4527a0; }

body.page-1 .rc-korea .region-rate { color: #4527a0; }

/* SUMMARY */
body.page-1 .summary {
    background: var(--ink);
    color: #eee;
    padding: 40px;
    margin: 50px 0;
    border-radius: 2px;
  }

body.page-1 .summary h3 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-1 .summary-items { display: flex; flex-direction: column; gap: 12px; }

body.page-1 .s-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
  }

body.page-1 .s-badge {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-1 .s-badge.g { background: #1a3a1a; color: #7dbd7d; }

body.page-1 .s-badge.r { background: #3a1a1a; color: #bd7d7d; }

body.page-1 .s-badge.y { background: #3a3200; color: #d4a017; }

body.page-1 .s-item p { font-size: 14px; line-height: 1.7; }

body.page-1 footer {
    background: var(--ink);
    color: #666;
    text-align: center;
    padding: 30px;
    font-size: 13px;
    margin-top: 0;
  }

@media (max-width: 700px) {
  body.page-1 .theories-grid, body.page-1 .components-row, body.page-1 .benefits-row, body.page-1 .super-grid, body.page-1 .regions-grid { grid-template-columns: 1fr; }
  body.page-1 .objectives ul { grid-template-columns: 1fr; }
  body.page-1 .objectives { padding: 25px; }
}

/* TRANSCRIPT MODAL */
body.page-1 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-1 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-1 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-1 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-1 .modal-overlay.active { display: flex; }

body.page-1 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-1 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-1 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-1 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-1 .modal-close:hover { color: #fff; }

body.page-1 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-1 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-1 .modal-tab:hover { color: #ccc; }

body.page-1 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-1 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-1 .modal-body .transcript-panel { display: none; }

body.page-1 .modal-body .transcript-panel.active { display: block; }

body.page-1 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-1 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-1 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-1 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-1 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-1 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-1 .modal-body { padding: 20px; }
  body.page-1 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-1 .transcript-btn span { display: none; }
}


/* ═══════════════════ 2- lesson-game-theory-schools.html ═══════════════════ */

body.page-2 {
    --ink: #0d0d0d;
    --paper: #f4f1ec;
    --cream: #ebe4d4;
    --gold: #9a7b1a;
    --gold-light: #c9a227;
    --rust: #7a2200;
    --slate: #1e2d3d;
    --teal: #0f3d3d;
    --muted: #6a6050;
    --border: #cbbfa6;
    --highlight: #fdf6e3;
  }

body.page-2 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

body.page-2 header {
    background: var(--teal);
    color: #f4f1ec;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-2 header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -60deg, transparent, transparent 50px,
      rgba(255,255,255,0.015) 50px, rgba(255,255,255,0.015) 51px
    );
  }

body.page-2 .header-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 500;
    margin-bottom: 18px;
  }

body.page-2 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(26px, 5vw, 46px);
    line-height: 1.4;
    max-width: 820px;
    margin: 0 auto 18px;
    position: relative;
  }

body.page-2 header p.subtitle {
    color: #aaa;
    font-size: 15px;
    font-weight: 300;
    max-width: 620px;
    margin: 0 auto;
  }

body.page-2 .container { max-width: 900px; margin: 0 auto; padding: 0 30px; }

/* OBJECTIVES */
body.page-2 .objectives {
    background: var(--teal);
    color: #f4f1ec;
    padding: 40px;
    margin: 50px auto;
    max-width: 900px;
    position: relative;
  }

body.page-2 .objectives::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--gold-light);
  }

body.page-2 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-2 .objectives ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

body.page-2 .objectives ul li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; line-height: 1.6;
  }

body.page-2 .objectives ul li::before {
    content: '◆'; color: var(--gold-light);
    font-size: 9px; margin-top: 6px; flex-shrink: 0;
  }

/* SECTION */
body.page-2 .section { padding: 50px 0; border-bottom: 1px solid var(--border); }

body.page-2 .section-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }

body.page-2 .section-num {
    font-family: 'Amiri', serif;
    font-size: 72px; color: #2e7d32;
    line-height: 1; flex-shrink: 0; font-weight: 700;
  }

body.page-2 .section-title h2 {
    font-family: 'Amiri', serif;
    font-size: 27px; color: var(--slate);
    margin-bottom: 6px; line-height: 1.4;
  }

body.page-2 .section-title p {
    font-size: 13px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-2 p.body-text { margin-bottom: 18px; color: #282828; }

body.page-2 .callout {
    border-right: 4px solid var(--gold);
    background: var(--highlight);
    padding: 20px 25px; margin: 30px 0;
    font-family: 'Amiri', serif;
    font-size: 20px; line-height: 1.8; color: var(--slate);
  }

body.page-2 .info-box {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 25px 30px; margin: 25px 0;
  }

body.page-2 .info-box h4 {
    font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

body.page-2 .info-box p { font-size: 15px; margin-bottom: 10px; }

body.page-2 .info-box p:last-child { margin-bottom: 0; }

/* GOALS GRID */
body.page-2 .goals-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .goal-card { background: var(--paper); padding: 28px 22px; }

body.page-2 .goal-num {
    font-family: 'Amiri', serif; font-size: 48px;
    color: #2e7d32; line-height: 1; margin-bottom: 10px;
  }

body.page-2 .goal-card h3 { font-size: 16px; font-weight: 700; color: var(--teal); margin-bottom: 10px; }

body.page-2 .goal-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

body.page-2 .goal-card.failed { background: #fff5f5; }

body.page-2 .goal-card.failed h3 { color: var(--rust); }

/* PLAYERS TABLE */
body.page-2 .players-wrap { margin: 28px 0; overflow-x: auto; }

body.page-2 .players-table { width: 100%; border-collapse: collapse; }

body.page-2 .players-table th {
    padding: 13px 18px; font-size: 13px;
    letter-spacing: 1px; text-align: right; font-weight: 700;
  }

body.page-2 .players-table th:first-child { background: var(--cream); color: var(--muted); width: 130px; }

body.page-2 .th-ideal { background: var(--teal); color: #eee; }

body.page-2 .th-real { background: var(--rust); color: #eee; }

body.page-2 .players-table td {
    padding: 12px 18px; font-size: 14px;
    border-bottom: 1px solid var(--cream);
    line-height: 1.7; vertical-align: top;
  }

body.page-2 .players-table tr:nth-child(even) td { background: var(--highlight); }

body.page-2 .players-table td:first-child {
    font-weight: 700; color: var(--teal);
    font-size: 13px; background: var(--cream) !important;
  }

body.page-2 .tag-player {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 2px; margin-left: 5px;
    letter-spacing: 1px;
  }

body.page-2 .tag-key { background: var(--teal); color: #eee; }

body.page-2 .tag-minor { background: var(--cream); color: var(--muted); border: 1px solid var(--border); }

/* POWER RANKING */
body.page-2 .power-rank {
    display: grid; grid-template-columns: 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .rank-row {
    display: grid; grid-template-columns: 44px 140px 1fr;
    background: var(--paper); align-items: center;
    padding: 14px 20px; gap: 16px;
  }

body.page-2 .rank-num {
    font-family: 'Amiri', serif; font-size: 26px;
    font-weight: 700; line-height: 1; text-align: center;
  }

body.page-2 .rank-row.r1 .rank-num { color: var(--teal); }

body.page-2 .rank-row.r2 .rank-num { color: var(--gold); }

body.page-2 .rank-row.r3 .rank-num { color: var(--muted); }

body.page-2 .rank-row.r4 .rank-num { color: #ccc; }

body.page-2 .rank-name { font-size: 15px; font-weight: 700; color: var(--slate); }

body.page-2 .rank-why { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* CONVERGENCE */
body.page-2 .convergence-box {
    background: var(--slate); color: #eee;
    padding: 40px; margin: 32px 0;
    text-align: center; position: relative;
  }

body.page-2 .convergence-box h3 {
    font-family: 'Amiri', serif;
    font-size: 22px; color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-2 .conv-items {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 12px;
  }

body.page-2 .conv-item {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 22px; font-size: 14px;
    border-radius: 2px;
  }

body.page-2 .conv-arrow {
    font-size: 28px; color: rgba(255,255,255,0.15);
    margin: 18px 0;
  }

body.page-2 .conv-result {
    background: var(--rust);
    padding: 16px 30px;
    font-family: 'Amiri', serif;
    font-size: 18px; line-height: 1.7;
    display: inline-block;
    margin-top: 5px;
  }

/* SUPERSTRUCTURE */
body.page-2 .metrics-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .metric-card { background: var(--paper); padding: 28px 22px; text-align: center; }

body.page-2 .metric-icon { font-size: 30px; margin-bottom: 12px; }

body.page-2 .metric-card h3 { font-family: 'Amiri', serif; font-size: 22px; color: var(--teal); margin-bottom: 10px; }

body.page-2 .metric-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

body.page-2 .metric-status {
    margin-top: 14px; font-size: 12px; font-weight: 700;
    padding: 5px 14px; display: inline-block; letter-spacing: 1px;
  }

body.page-2 .st-rise { background: #e8f5e9; color: #2e7d32; }

body.page-2 .st-fall { background: #fce4ec; color: #c62828; }

/* COMPARE */
body.page-2 .era-compare {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .era-card { background: var(--paper); padding: 28px 24px; }

body.page-2 .era-label {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 700;
    padding: 4px 12px; display: inline-block;
    margin-bottom: 16px;
  }

body.page-2 .era-label.past { background: #e8f5e9; color: #1b5e20; }

body.page-2 .era-label.now { background: #fce4ec; color: #b71c1c; }

body.page-2 .era-card h3 { font-family: 'Amiri', serif; font-size: 20px; color: var(--slate); margin-bottom: 14px; }

body.page-2 .era-card ul { list-style: none; }

body.page-2 .era-card ul li {
    font-size: 14px; color: var(--muted);
    padding: 6px 0; border-bottom: 1px solid var(--cream);
    display: flex; gap: 8px; line-height: 1.6;
  }

body.page-2 .era-card ul li::before { content: '›'; color: var(--gold); font-weight: 700; flex-shrink: 0; }

/* IDENTITY GAMES */
body.page-2 .identity-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .id-card { background: var(--paper); padding: 26px 22px; }

body.page-2 .id-card h3 {
    font-size: 15px; font-weight: 700;
    color: var(--teal); margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
  }

body.page-2 .id-game {
    display: flex; align-items: flex-start;
    gap: 10px; margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--cream); font-size: 14px; line-height: 1.6;
  }

body.page-2 .id-game::before {
    content: '◈'; color: var(--gold);
    font-size: 12px; flex-shrink: 0; margin-top: 2px;
  }

body.page-2 .id-fear {
    margin-top: 14px; font-size: 13px;
    color: var(--rust); font-style: italic;
    padding-right: 10px; border-right: 2px solid var(--rust);
  }

/* PRINCIPLE */
body.page-2 .principle {
    background: var(--slate); color: #f4f1ec;
    padding: 45px; margin: 40px 0; text-align: center; position: relative;
  }

body.page-2 .principle::before, body.page-2 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 120px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1;
  }

body.page-2 .principle::before { top: 10px; right: 20px; }

body.page-2 .principle::after { bottom: -20px; left: 20px; transform: scaleX(-1); }

body.page-2 .principle p {
    font-family: 'Amiri', serif; font-size: 23px;
    line-height: 1.7; margin-bottom: 14px; position: relative; z-index: 1;
  }

body.page-2 .principle .source {
    font-size: 13px; color: var(--gold-light);
    letter-spacing: 2px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* REFORM BOX */
body.page-2 .reform-steps {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-2 .reform-card { background: var(--paper); padding: 26px 22px; }

body.page-2 .reform-tag {
    font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 700;
    padding: 3px 10px; display: inline-block;
    margin-bottom: 12px;
  }

body.page-2 .rt-old { background: #fce4ec; color: #b71c1c; }

body.page-2 .rt-new { background: #e8f5e9; color: #1b5e20; }

body.page-2 .reform-card h4 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 10px; }

body.page-2 .reform-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* SUMMARY */
body.page-2 .summary {
    background: var(--ink); color: #eee;
    padding: 40px; margin: 50px 0;
  }

body.page-2 .summary h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: var(--gold-light); margin-bottom: 20px;
  }

body.page-2 .summary-items { display: flex; flex-direction: column; gap: 12px; }

body.page-2 .s-item {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 15px; background: rgba(255,255,255,0.05);
  }

body.page-2 .s-badge {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-2 .s-badge.g { background: #1a3a1a; color: #7dbd7d; }

body.page-2 .s-badge.r { background: #3a1a1a; color: #bd7d7d; }

body.page-2 .s-badge.y { background: #3a3200; color: #d4a017; }

body.page-2 .s-item p { font-size: 14px; line-height: 1.7; }

body.page-2 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 28px;
    font-size: 13px;
  }

@media (max-width: 700px) {
  body.page-2 .goals-grid, body.page-2 .metrics-row, body.page-2 .era-compare, body.page-2 .identity-grid, body.page-2 .reform-steps { grid-template-columns: 1fr; }
  body.page-2 .rank-row { grid-template-columns: 36px 1fr; }
  body.page-2 .rank-why { display: none; }
  body.page-2 .objectives ul { grid-template-columns: 1fr; }
  body.page-2 .objectives { padding: 25px; }
}

/* TRANSCRIPT MODAL */
body.page-2 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-2 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-2 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-2 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-2 .modal-overlay.active { display: flex; }

body.page-2 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-2 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-2 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-2 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-2 .modal-close:hover { color: #fff; }

body.page-2 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-2 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-2 .modal-tab:hover { color: #ccc; }

body.page-2 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-2 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-2 .modal-body .transcript-panel { display: none; }

body.page-2 .modal-body .transcript-panel.active { display: block; }

body.page-2 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-2 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-2 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-2 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-2 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-2 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-2 .modal-body { padding: 20px; }
  body.page-2 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-2 .transcript-btn span { display: none; }
}


/* ═══════════════════ 3- lesson-game-theory-rich-poor-dad.html ═══════════════════ */

body.page-3 {
    --ink:        #0e0e0e;
    --paper:      #f5f1e9;
    --cream:      #eae1cc;
    --gold:       #9a7b1a;
    --gold-lt:    #c9a227;
    --rust:       #7a2200;
    --slate:      #1e2d3d;
    --forest:     #133a1e;
    --brown:      #3a1a00;
    --muted:      #6a6050;
    --border:     #cbbfa6;
    --hl:         #fdf7e4;
  }

body.page-3 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-3 header {
    background: var(--slate);
    color: #f5f1e9;
    padding: 60px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-3 header::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      -55deg, transparent, transparent 48px,
      rgba(255,255,255,0.018) 48px, rgba(255,255,255,0.018) 49px
    );
    pointer-events: none;
  }

body.page-3 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px;
  }

body.page-3 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 800px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-3 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 600px; margin: 0 auto;
    position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-3 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-3 .objectives {
    background: var(--forest);
    color: #f5f1e9;
    padding: 38px 42px;
    margin: 48px auto;
    max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-3 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt);
    margin-bottom: 18px;
  }

body.page-3 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-3 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-3 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-3 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-3 .sec:last-of-type { border-bottom: none; }

body.page-3 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-3 .sec-n {
    font-family: 'Amiri', serif;
    font-size: 68px; color: #2e7d32;
    line-height: 1; flex-shrink: 0; font-weight: 700;
    user-select: none;
  }

body.page-3 .sec-t h2 {
    font-family: 'Amiri', serif;
    font-size: 25px; color: var(--slate);
    margin-bottom: 5px; line-height: 1.4;
  }

body.page-3 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-3 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-3 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-3 .ibox {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-3 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-3 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-3 .ibox p:last-child { margin-bottom: 0; }

/* ─── THREE THEORIES GRID ─── */
body.page-3 .theories {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 26px 0;
  }

body.page-3 .th-card { background: var(--paper); padding: 26px 20px; }

body.page-3 .th-num {
    font-family: 'Amiri', serif;
    font-size: 42px; color: #2e7d32;
    line-height: 1; margin-bottom: 8px;
  }

body.page-3 .th-card h3 {
    font-size: 16px; font-weight: 700;
    color: var(--slate); margin-bottom: 8px;
  }

body.page-3 .th-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

body.page-3 .th-card .ref {
    margin-top: 12px; font-size: 12px;
    color: var(--gold); font-style: italic;
  }

/* ─── MARSHMALLOW ─── */
body.page-3 .marsh-wrap {
    background: var(--slate); color: #eee;
    padding: 32px 36px; margin: 28px 0;
  }

body.page-3 .marsh-wrap h3 {
    font-family: 'Amiri', serif;
    font-size: 20px; color: var(--gold-lt);
    margin-bottom: 8px;
  }

body.page-3 .marsh-desc {
    font-size: 14px; color: #bbb;
    margin-bottom: 20px; line-height: 1.7;
  }

body.page-3 .marsh-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.08);
    margin-bottom: 18px;
  }

body.page-3 .mc { background: rgba(255,255,255,0.04); padding: 16px 18px; }

body.page-3 .mc h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }

body.page-3 .mc.yes h4 { color: #7dbd7d; }

body.page-3 .mc.no  h4 { color: #bd7d7d; }

body.page-3 .mc ul { list-style: none; }

body.page-3 .mc ul li {
    font-size: 13px; color: #ccc;
    padding: 4px 0; line-height: 1.55;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; gap: 7px;
  }

body.page-3 .mc.yes li::before { content: '+'; color: #7dbd7d; font-weight: 700; flex-shrink: 0; }

body.page-3 .mc.no  li::before { content: '−'; color: #bd7d7d; font-weight: 700; flex-shrink: 0; }

body.page-3 .marsh-reframe {
    background: rgba(201,162,39,0.14);
    border-right: 3px solid var(--gold-lt);
    padding: 14px 18px;
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

body.page-3 .marsh-reframe strong { color: var(--gold-lt); }

/* ─── CORRELATION WARNING ─── */
body.page-3 .corr-box {
    background: var(--rust); color: #fdf0e8;
    padding: 32px 36px; margin: 28px 0; text-align: center;
  }

body.page-3 .corr-box h3 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: #ffd; margin-bottom: 14px;
  }

body.page-3 .corr-box p { font-size: 15px; line-height: 1.8; max-width: 680px; margin: 0 auto; }

/* ─── PARENTING COMPARE ─── */
body.page-3 .par-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .par-card { background: var(--paper); padding: 26px 22px; }

body.page-3 .par-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px;
    margin-bottom: 14px;
  }

body.page-3 .rich-b { background: #e8f5e9; color: #1b5e20; }

body.page-3 .poor-b { background: #fce4ec; color: #b71c1c; }

body.page-3 .par-card h3 {
    font-family: 'Amiri', serif;
    font-size: 19px; color: var(--slate); margin-bottom: 14px;
  }

body.page-3 .diff {
    background: var(--cream);
    padding: 13px 15px; margin-bottom: 10px;
    border-right: 3px solid transparent;
  }

body.page-3 .diff.r { border-right-color: #2e7d32; }

body.page-3 .diff.p { border-right-color: #c62828; }

body.page-3 .diff h4 {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 1px; font-weight: 700; margin-bottom: 5px;
  }

body.page-3 .diff.r h4 { color: #2e7d32; }

body.page-3 .diff.p h4 { color: #c62828; }

body.page-3 .diff p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-3 .par-outcome {
    margin-top: 14px; padding: 11px 14px;
    font-size: 13.5px; line-height: 1.65;
    font-weight: 500;
  }

body.page-3 .ro { background: #e8f5e9; color: #1b5e20; }

body.page-3 .po { background: #fce4ec; color: #b71c1c; }

/* ─── PRINCIPLE ─── */
body.page-3 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-3 .principle::before, body.page-3 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-3 .principle::before { top: 6px; right: 18px; }

body.page-3 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-3 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-3 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── HIERARCHY ─── */
body.page-3 .hier {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .hier-card { background: var(--paper); padding: 26px 22px; }

body.page-3 .hier-card h3 {
    font-size: 14px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 700;
    padding: 9px 14px; display: inline-block;
    margin-bottom: 14px;
  }

body.page-3 .hc-rich h3 { background: var(--forest); color: #eee; }

body.page-3 .hc-poor h3 { background: var(--brown); color: #eee; }

body.page-3 .hier-card ul { list-style: none; }

body.page-3 .hier-card ul li {
    font-size: 14px; color: var(--muted);
    padding: 7px 0; border-bottom: 1px solid var(--cream);
    display: flex; gap: 8px; line-height: 1.6; align-items: flex-start;
  }

body.page-3 .hier-card ul li::before {
    content: '›'; font-weight: 700; flex-shrink: 0;
  }

body.page-3 .hc-rich li::before { color: #2e7d32; }

body.page-3 .hc-poor li::before { color: #c62828; }

/* ─── MOBILITY ─── */
body.page-3 .mob-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .mob-card { background: var(--paper); padding: 22px 16px; text-align: center; }

body.page-3 .mob-card h3 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-3 .mob-card p { font-size: 12.5px; color: var(--muted); line-height: 1.65; }

body.page-3 .mob-risk {
    display: inline-block; margin-top: 10px;
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; letter-spacing: 1px;
  }

body.page-3 .rk-h { background: #fce4ec; color: #b71c1c; }

body.page-3 .rk-m { background: #fff8e1; color: #e65100; }

/* ─── REVOLUTION FLOW ─── */
body.page-3 .rev-flow {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .rev-step {
    background: var(--paper);
    display: grid; grid-template-columns: 52px 1fr;
  }

body.page-3 .rev-n {
    background: var(--slate); color: #eee;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 22px; font-weight: 700;
  }

body.page-3 .rev-c { padding: 15px 20px; }

body.page-3 .rev-c h4 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px; }

body.page-3 .rev-c p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-3 .rev-step.spark .rev-n { background: var(--rust); }

body.page-3 .rev-step.spark .rev-c h4 { color: var(--rust); }

/* ─── SEEDS BOX ─── */
body.page-3 .seeds {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .seed-card { background: var(--paper); padding: 24px 20px; text-align: center; }

body.page-3 .seed-n {
    font-family: 'Amiri', serif; font-size: 44px;
    color: #2e7d32; line-height: 1; margin-bottom: 8px;
  }

body.page-3 .seed-card h3 { font-size: 16px; font-weight: 700; color: var(--rust); margin-bottom: 8px; }

body.page-3 .seed-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ─── EXAMPLES ─── */
body.page-3 .ex-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-3 .ex-card { background: var(--paper); padding: 22px 18px; }

body.page-3 .ex-tag {
    display: inline-block; font-size: 11px;
    font-weight: 700; padding: 3px 9px;
    background: var(--cream); color: var(--muted);
    border: 1px solid var(--border);
    margin-bottom: 10px; letter-spacing: 1px;
  }

body.page-3 .ex-card h4 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-3 .ex-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ─── SOCIAL MOBILITY BOX ─── */
body.page-3 .mobility-insight {
    background: var(--forest); color: #eee;
    padding: 32px 36px; margin: 28px 0;
  }

body.page-3 .mobility-insight h3 {
    font-family: 'Amiri', serif;
    font-size: 20px; color: var(--gold-lt);
    margin-bottom: 14px;
  }

body.page-3 .mobility-insight p { font-size: 14.5px; line-height: 1.8; margin-bottom: 10px; }

body.page-3 .mobility-insight p:last-child { margin-bottom: 0; }

/* ─── GAME RESET ─── */
body.page-3 .reset-box {
    background: var(--ink); color: #eee;
    padding: 36px; margin: 28px 0; text-align: center;
  }

body.page-3 .reset-box h3 {
    font-family: 'Amiri', serif;
    font-size: 24px; color: var(--gold-lt);
    margin-bottom: 14px;
  }

body.page-3 .reset-box p { font-size: 15px; line-height: 1.8; max-width: 680px; margin: 0 auto 10px; }

/* ─── SUMMARY ─── */
body.page-3 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-3 .summary h3 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt);
    margin-bottom: 18px;
  }

body.page-3 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-3 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-3 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-3 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-3 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-3 .by { background: #332e00; color: #d4a017; }

body.page-3 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-3 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px;
    font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-3 .theories, body.page-3 .par-grid, body.page-3 .hier, body.page-3 .mob-grid, body.page-3 .seeds, body.page-3 .ex-grid { grid-template-columns: 1fr; }
  body.page-3 .marsh-cols { grid-template-columns: 1fr; }
  body.page-3 .objectives ul { grid-template-columns: 1fr; }
  body.page-3 .objectives { padding: 26px 22px; }
  body.page-3 .rev-step { grid-template-columns: 40px 1fr; }
}

/* TRANSCRIPT MODAL */
body.page-3 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-3 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-3 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-3 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-3 .modal-overlay.active { display: flex; }

body.page-3 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-3 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-3 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-3 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-3 .modal-close:hover { color: #fff; }

body.page-3 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-3 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-3 .modal-tab:hover { color: #ccc; }

body.page-3 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-3 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-3 .modal-body .transcript-panel { display: none; }

body.page-3 .modal-body .transcript-panel.active { display: block; }

body.page-3 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-3 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-3 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-3 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-3 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-3 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-3 .modal-body { padding: 20px; }
  body.page-3 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-3 .transcript-btn span { display: none; }
}


/* ═══════════════════ 4- lesson-game-theory-immigration.html ═══════════════════ */

body.page-4 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --teal:     #0e3535;
    --indigo:   #1a1a3a;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
  }

body.page-4 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-4 header {
    background: var(--indigo);
    color: #f5f1e9;
    padding: 62px 0 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-4 header::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      -50deg, transparent, transparent 52px,
      rgba(255,255,255,0.015) 52px, rgba(255,255,255,0.015) 53px
    );
    pointer-events: none;
  }

body.page-4 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index:1;
  }

body.page-4 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-4 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 620px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-4 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-4 .objectives {
    background: var(--teal); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-4 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-4 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-4 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-4 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-4 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-4 .sec:last-of-type { border-bottom: none; }

body.page-4 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-4 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-4 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-4 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-4 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-4 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-4 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-4 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-4 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-4 .ibox p:last-child { margin-bottom: 0; }

/* ─── GROUPS TABLE ─── */
body.page-4 .groups-wrap { margin: 28px 0; overflow-x: auto; }

body.page-4 .groups-table { width: 100%; border-collapse: collapse; }

body.page-4 .groups-table th {
    padding: 12px 16px; font-size: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
    font-weight: 700; text-align: right;
  }

body.page-4 .th-g { background: var(--teal); color: #eee; }

body.page-4 .th-s { background: var(--slate); color: #eee; }

body.page-4 .th-c { background: var(--cream); color: var(--muted); }

body.page-4 .groups-table td {
    padding: 11px 16px; font-size: 14px;
    border-bottom: 1px solid var(--cream);
    line-height: 1.65; vertical-align: top;
  }

body.page-4 .groups-table tr:nth-child(even) td { background: var(--hl); }

body.page-4 .groups-table td:first-child {
    font-weight: 700; color: var(--teal); background: var(--cream) !important;
    font-size: 13px;
  }

body.page-4 .dot-g { display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:6px; }

body.page-4 .dg { background: #2e7d32; }

body.page-4 .dy { background: #e65100; }

body.page-4 .dr { background: #b71c1c; }

/* ─── PARADOX BOX ─── */
body.page-4 .paradox {
    background: var(--indigo); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-4 .paradox h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-4 .para-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.08);
  }

body.page-4 .para-col { background: rgba(255,255,255,0.04); padding: 18px 20px; }

body.page-4 .para-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }

body.page-4 .col-good h4 { color: #7dbd7d; }

body.page-4 .col-bad  h4 { color: #bd7d7d; }

body.page-4 .para-col ul { list-style: none; }

body.page-4 .para-col ul li {
    font-size: 13px; color: #ccc;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; gap: 8px; line-height: 1.55;
  }

body.page-4 .col-good li::before { content: '✓'; color: #7dbd7d; font-weight: 700; flex-shrink: 0; }

body.page-4 .col-bad  li::before { content: '✗'; color: #bd7d7d; font-weight: 700; flex-shrink: 0; }

body.page-4 .para-verdict {
    margin-top: 18px; padding: 14px 18px;
    background: rgba(201,162,39,0.14);
    border-right: 3px solid var(--gold-lt);
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

body.page-4 .para-verdict strong { color: var(--gold-lt); }

/* ─── CASINO METAPHOR ─── */
body.page-4 .casino {
    background: var(--rust); color: #fdf0e8;
    padding: 34px 40px; margin: 28px 0; text-align: center;
  }

body.page-4 .casino h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: #ffd; margin-bottom: 14px;
  }

body.page-4 .casino p { font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto; }

/* ─── STRATEGY COMPARE ─── */
body.page-4 .strat-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-4 .strat-card { background: var(--paper); padding: 26px 22px; }

body.page-4 .strat-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-4 .sb-lose { background: #fce4ec; color: #b71c1c; }

body.page-4 .sb-win { background: #e8f5e9; color: #1b5e20; }

body.page-4 .strat-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-4 .strat-item {
    background: var(--cream); padding: 12px 15px;
    margin-bottom: 9px; font-size: 14px;
    line-height: 1.65; color: var(--muted);
    border-right: 3px solid transparent;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-4 .strat-item::before { font-weight: 700; flex-shrink: 0; }

body.page-4 .si-lose .strat-item { border-right-color: #c62828; }

body.page-4 .si-lose .strat-item::before { content: '—'; color: #c62828; }

body.page-4 .si-win  .strat-item { border-right-color: #2e7d32; }

body.page-4 .si-win  .strat-item::before { content: '+'; color: #2e7d32; }

body.page-4 .strat-outcome {
    margin-top: 14px; padding: 11px 14px;
    font-size: 14px; line-height: 1.65; font-weight: 600;
  }

body.page-4 .so-lose { background: #fce4ec; color: #b71c1c; }

body.page-4 .so-win { background: #e8f5e9; color: #1b5e20; }

/* ─── PRINCIPLE ─── */
body.page-4 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-4 .principle::before, body.page-4 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-4 .principle::before { top: 6px; right: 18px; }

body.page-4 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-4 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-4 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── HISTORY FLOW ─── */
body.page-4 .hist-flow {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-4 .hist-step {
    background: var(--paper);
    display: grid; grid-template-columns: 52px 1fr;
  }

body.page-4 .hist-n {
    background: var(--slate); color: #eee;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 22px; font-weight: 700;
  }

body.page-4 .hist-c { padding: 15px 20px; }

body.page-4 .hist-c h4 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px; }

body.page-4 .hist-c p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-4 .hist-step.key .hist-n { background: var(--teal); }

body.page-4 .hist-step.key .hist-c h4 { color: var(--teal); }

/* ─── DEMOGRAPHICS BOX ─── */
body.page-4 .demo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-4 .demo-card { background: var(--paper); padding: 24px 20px; text-align: center; }

body.page-4 .demo-card h3 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-4 .demo-pct {
    font-family: 'Amiri', serif; font-size: 40px;
    font-weight: 700; line-height: 1.1; margin-bottom: 8px;
  }

body.page-4 .demo-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }

body.page-4 .demo-tag {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 9px; margin-bottom: 10px; letter-spacing: 1px;
    background: var(--cream); color: var(--muted);
    border: 1px solid var(--border);
  }

/* ─── FACTORS BOX ─── */
body.page-4 .factors {
    background: var(--teal); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-4 .factors h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-4 .factor-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: rgba(255,255,255,0.08); margin-bottom: 2px;
  }

body.page-4 .factor-item {
    background: rgba(255,255,255,0.04);
    padding: 15px 18px;
  }

body.page-4 .factor-item h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 6px; }

body.page-4 .factor-item p { font-size: 13px; color: #ccc; line-height: 1.6; }

/* ─── PREDICTION BOX ─── */
body.page-4 .prediction {
    background: var(--ink); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-4 .prediction h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-4 .pred-items { display: flex; flex-direction: column; gap: 10px; }

body.page-4 .pred-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px; background: rgba(255,255,255,0.05);
  }

body.page-4 .pred-n {
    width: 30px; height: 30px;
    background: var(--rust); color: #eee;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
  }

body.page-4 .pred-item p { font-size: 14px; line-height: 1.75; }

/* ─── SUMMARY ─── */
body.page-4 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-4 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-4 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-4 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-4 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-4 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-4 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-4 .by { background: #332e00; color: #d4a017; }

body.page-4 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-4 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-4 .para-cols, body.page-4 .strat-grid, body.page-4 .demo-grid { grid-template-columns: 1fr; }
  body.page-4 .factor-row { grid-template-columns: 1fr; }
  body.page-4 .objectives ul { grid-template-columns: 1fr; }
  body.page-4 .objectives { padding: 26px 22px; }
  body.page-4 .hist-step { grid-template-columns: 40px 1fr; }
}

/* TRANSCRIPT MODAL */
body.page-4 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-4 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-4 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-4 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-4 .modal-overlay.active { display: flex; }

body.page-4 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-4 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-4 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-4 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-4 .modal-close:hover { color: #fff; }

body.page-4 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-4 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-4 .modal-tab:hover { color: #ccc; }

body.page-4 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-4 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-4 .modal-body .transcript-panel { display: none; }

body.page-4 .modal-body .transcript-panel.active { display: block; }

body.page-4 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-4 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-4 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-4 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-4 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-4 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-4 .modal-body { padding: 20px; }
  body.page-4 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-4 .transcript-btn span { display: none; }
}


/* ═══════════════════ 5- lesson-game-theory-world-game.html ═══════════════════ */

body.page-5 {
    --ink:      #0e0e0e;
    --paper:    #f4f0e6;
    --cream:    #e8dfc8;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --deep:     #12202c;
    --sand:     #3d2e0a;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
    --rise:     #1a3a1a;
    --fall:     #3a1a00;
  }

body.page-5 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-5 header {
    background: var(--deep);
    color: #f4f0e6;
    padding: 62px 0 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-5 header::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      -45deg, transparent, transparent 55px,
      rgba(255,255,255,0.012) 55px, rgba(255,255,255,0.012) 56px
    );
    pointer-events: none;
  }

body.page-5 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index:1;
  }

body.page-5 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-5 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-5 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-5 .objectives {
    background: var(--sand); color: #f4f0e6;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-5 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-5 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-5 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-5 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-5 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-5 .sec:last-of-type { border-bottom: none; }

body.page-5 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-5 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-5 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-5 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-5 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-5 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-5 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-5 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-5 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-5 .ibox p:last-child { margin-bottom: 0; }

/* ─── IBN KHALDUN BOX ─── */
body.page-5 .khaldun {
    background: var(--sand); color: #f4f0e6;
    padding: 36px 42px; margin: 28px 0;
    position: relative; overflow: hidden;
  }

body.page-5 .khaldun::before {
    content: 'ع'; font-family: 'Amiri', serif;
    font-size: 200px; color: rgba(255,255,255,0.04);
    position: absolute; top: -30px; left: 20px;
    line-height: 1; user-select: none; pointer-events: none;
  }

body.page-5 .khaldun h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: var(--gold-lt); margin-bottom: 16px;
    position: relative; z-index: 1;
  }

body.page-5 .khaldun p {
    font-size: 15px; line-height: 1.85; margin-bottom: 10px;
    position: relative; z-index: 1;
  }

body.page-5 .khaldun p:last-child { margin-bottom: 0; }

body.page-5 .khaldun .attr {
    font-size: 13px; color: var(--gold-lt);
    margin-top: 16px; font-style: italic;
    position: relative; z-index: 1;
  }

/* ─── THREE METRICS ─── */
body.page-5 .metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-5 .metric-card { background: var(--paper); padding: 28px 22px; text-align: center; }

body.page-5 .metric-ar {
    font-family: 'Amiri', serif; font-size: 36px;
    color: var(--gold-lt); line-height: 1; margin-bottom: 10px;
  }

body.page-5 .metric-card h3 {
    font-size: 18px; font-weight: 700;
    color: var(--slate); margin-bottom: 10px;
  }

body.page-5 .metric-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

body.page-5 .metric-card .sub-en {
    font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold);
    margin-top: 8px;
  }

/* ─── RISE/FALL COMPARE ─── */
body.page-5 .rf-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-5 .rf-card { background: var(--paper); padding: 26px 22px; }

body.page-5 .rf-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-5 .rb-rise { background: #e8f5e9; color: #1b5e20; }

body.page-5 .rb-fall { background: #fce4ec; color: #b71c1c; }

body.page-5 .rf-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-5 .rf-item {
    background: var(--cream); padding: 11px 14px;
    margin-bottom: 8px; font-size: 14px;
    line-height: 1.65; display: flex; gap: 9px; align-items: flex-start;
  }

body.page-5 .rf-item::before { font-weight: 700; flex-shrink: 0; font-size: 13px; }

body.page-5 .rise-items .rf-item { border-right: 3px solid #2e7d32; }

body.page-5 .rise-items .rf-item::before { content: '+'; color: #2e7d32; }

body.page-5 .fall-items .rf-item { border-right: 3px solid #c62828; }

body.page-5 .fall-items .rf-item::before { content: '−'; color: #c62828; }

/* ─── HISTORICAL EXAMPLES ─── */
body.page-5 .examples-flow {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-5 .ex-step {
    background: var(--paper);
    display: grid; grid-template-columns: 52px 180px 1fr;
    align-items: stretch;
  }

body.page-5 .ex-n {
    background: var(--deep); color: #eee;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 20px; font-weight: 700;
  }

body.page-5 .ex-who {
    background: var(--cream); padding: 14px 16px;
    display: flex; flex-direction: column; justify-content: center;
  }

body.page-5 .ex-who h4 { font-size: 14px; font-weight: 700; color: var(--slate); margin-bottom: 4px; }

body.page-5 .ex-who span { font-size: 12px; color: var(--muted); }

body.page-5 .ex-what { padding: 14px 18px; }

body.page-5 .ex-what p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-5 .ex-what strong { color: var(--slate); }

body.page-5 .ex-step.surprise .ex-n { background: var(--rust); }

/* ─── STAGES OF EMPIRE ─── */
body.page-5 .stages {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-5 .stage {
    background: var(--paper);
    display: grid; grid-template-columns: 56px 1fr;
  }

body.page-5 .stage-n {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 15px;
    font-weight: 700; writing-mode: vertical-rl;
    text-orientation: mixed; padding: 14px 0;
    letter-spacing: 2px;
  }

body.page-5 .stage-c { padding: 16px 20px; }

body.page-5 .stage-c h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }

body.page-5 .stage-c p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-5 .s1 .stage-n { background: var(--rise); color: #a8d5a8; }

body.page-5 .s1 .stage-c h4 { color: var(--rise); }

body.page-5 .s2 .stage-n { background: var(--gold); color: #fff8e1; }

body.page-5 .s2 .stage-c h4 { color: var(--gold); }

body.page-5 .s3 .stage-n { background: var(--slate); color: #aac; }

body.page-5 .s3 .stage-c h4 { color: var(--slate); }

body.page-5 .s4 .stage-n { background: var(--rust); color: #fde; }

body.page-5 .s4 .stage-c h4 { color: var(--rust); }

body.page-5 .s5 .stage-n { background: var(--deep); color: #aab; }

body.page-5 .s5 .stage-c h4 { color: var(--deep); }

/* ─── SECRET SOCIETIES ─── */
body.page-5 .secret {
    background: var(--deep); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-5 .secret h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-5 .secret-cols {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: rgba(255,255,255,0.06);
  }

body.page-5 .sc { background: rgba(255,255,255,0.03); padding: 18px 16px; }

body.page-5 .sc h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 10px; }

body.page-5 .sc p { font-size: 13px; color: #bbb; line-height: 1.7; }

body.page-5 .secret-verdict {
    margin-top: 18px; padding: 14px 18px;
    background: rgba(122,34,0,0.3);
    border-right: 3px solid var(--rust);
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

/* ─── WORLD GAME ─── */
body.page-5 .world-game {
    background: var(--slate); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-5 .world-game h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 8px;
  }

body.page-5 .wg-desc {
    font-size: 14px; color: #bbb; margin-bottom: 20px; line-height: 1.7;
  }

body.page-5 .wg-teams {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: rgba(255,255,255,0.08); margin-bottom: 18px;
  }

body.page-5 .wg-team { background: rgba(255,255,255,0.04); padding: 16px 14px; text-align: center; }

body.page-5 .wg-team h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

body.page-5 .wg-team .rank {
    font-family: 'Amiri', serif; font-size: 32px;
    font-weight: 700; line-height: 1;
  }

body.page-5 .wg-team p { font-size: 12px; color: #aaa; margin-top: 6px; line-height: 1.5; }

body.page-5 .t-rich h4 { color: #ffd; }

body.page-5 .t-rich .rank { color: #ffd; }

body.page-5 .t-poor h4 { color: #7dbd7d; }

body.page-5 .t-poor .rank { color: #7dbd7d; }

body.page-5 .t-mid h4 { color: #aaa; }

body.page-5 .t-mid .rank { color: #aaa; }

body.page-5 .t-zero h4 { color: #bd7d7d; }

body.page-5 .t-zero .rank { color: #7dbd7d; }

body.page-5 .wg-lesson {
    padding: 14px 18px;
    background: rgba(201,162,39,0.14);
    border-right: 3px solid var(--gold-lt);
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

body.page-5 .wg-lesson strong { color: var(--gold-lt); }

/* ─── CYCLE DIAGRAM ─── */
body.page-5 .cycle {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0; margin: 28px 0; align-items: center;
  }

body.page-5 .cy-step {
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 20px 16px; text-align: center;
  }

body.page-5 .cy-step h4 { font-family: 'Amiri', serif; font-size: 16px; color: var(--slate); margin-bottom: 6px; }

body.page-5 .cy-step p { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

body.page-5 .cy-arrow {
    text-align: center; font-size: 20px;
    color: var(--gold); padding: 0 4px; flex-shrink: 0;
  }

/* ─── PRINCIPLE ─── */
body.page-5 .principle {
    background: var(--slate); color: #f4f0e6;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-5 .principle::before, body.page-5 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-5 .principle::before { top: 6px; right: 18px; }

body.page-5 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-5 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-5 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── PREDICTIONS ─── */
body.page-5 .pred-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-5 .pred-card { background: var(--paper); padding: 24px 20px; text-align: center; }

body.page-5 .pred-card .flag {
    font-family: 'Amiri', serif; font-size: 38px;
    color: var(--gold-lt); line-height: 1; margin-bottom: 10px;
  }

body.page-5 .pred-card h3 { font-size: 16px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-5 .pred-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }

body.page-5 .pred-reason {
    margin-top: 12px; font-size: 12px; font-weight: 700;
    padding: 4px 10px; display: inline-block;
    background: var(--cream); color: var(--muted);
    border: 1px solid var(--border); letter-spacing: 1px;
  }

/* ─── LEADER BOX ─── */
body.page-5 .leader-box {
    background: var(--rise); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-5 .leader-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 14px;
  }

body.page-5 .leader-box p { font-size: 15px; line-height: 1.8; margin-bottom: 10px; }

body.page-5 .leader-box p:last-child { margin-bottom: 0; }

body.page-5 .leader-types {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  }

body.page-5 .lt {
    background: rgba(255,255,255,0.1);
    padding: 6px 16px; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.15);
  }

/* ─── SUMMARY ─── */
body.page-5 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-5 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-5 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-5 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-5 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-5 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-5 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-5 .by { background: #332e00; color: #d4a017; }

body.page-5 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-5 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-5 .metrics, body.page-5 .rf-grid, body.page-5 .secret-cols, body.page-5 .pred-grid, body.page-5 .wg-teams { grid-template-columns: 1fr; }
  body.page-5 .objectives ul { grid-template-columns: 1fr; }
  body.page-5 .objectives { padding: 26px 22px; }
  body.page-5 .ex-step { grid-template-columns: 40px 1fr; }
  body.page-5 .ex-who { display: none; }
  body.page-5 .stage { grid-template-columns: 40px 1fr; }
  body.page-5 .stage-n { writing-mode: horizontal-tb; }
  body.page-5 .cycle { grid-template-columns: 1fr; }
  body.page-5 .cy-arrow { transform: rotate(90deg); }
}

/* TRANSCRIPT MODAL */
body.page-5 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-5 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-5 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-5 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-5 .modal-overlay.active { display: flex; }

body.page-5 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-5 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-5 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-5 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-5 .modal-close:hover { color: #fff; }

body.page-5 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-5 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-5 .modal-tab:hover { color: #ccc; }

body.page-5 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-5 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-5 .modal-body .transcript-panel { display: none; }

body.page-5 .modal-body .transcript-panel.active { display: block; }

body.page-5 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-5 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-5 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-5 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-5 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-5 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-5 .modal-body { padding: 20px; }
  body.page-5 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-5 .transcript-btn span { display: none; }
}


/* ═══════════════════ 6- lesson-game-theory-worlds-bank.html ═══════════════════ */

body.page-6 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --empire:   #2a1a08;
    --navy:     #0a1f35;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
  }

body.page-6 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-6 header {
    background: var(--empire);
    color: #f5f1e9;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-6 header::before {
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(
        45deg, transparent, transparent 60px,
        rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
      ),
      repeating-linear-gradient(
        -45deg, transparent, transparent 60px,
        rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
      );
    pointer-events: none;
  }

body.page-6 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index: 1;
  }

body.page-6 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-6 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-6 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-6 .objectives {
    background: var(--navy); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-6 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-6 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-6 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-6 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-6 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-6 .sec:last-of-type { border-bottom: none; }

body.page-6 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-6 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-6 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-6 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-6 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-6 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-6 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-6 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-6 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-6 .ibox p:last-child { margin-bottom: 0; }

/* ─── OPENING PARADOX ─── */
body.page-6 .paradox-box {
    background: var(--navy); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-6 .paradox-box h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-6 .p-items { display: flex; flex-direction: column; gap: 10px; }

body.page-6 .p-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 16px; background: rgba(255,255,255,0.05);
  }

body.page-6 .p-num {
    width: 28px; height: 28px;
    background: rgba(201,162,39,0.2); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
  }

body.page-6 .p-item p { font-size: 14px; line-height: 1.75; }

body.page-6 .p-item strong { color: var(--gold-lt); }

/* ─── EMPIRE TIMELINE ─── */
body.page-6 .timeline {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-6 .tl-step {
    background: var(--paper);
    display: grid; grid-template-columns: 80px 1fr;
  }

body.page-6 .tl-date {
    background: var(--empire); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 15px;
    font-weight: 700; padding: 14px 8px; text-align: center;
    line-height: 1.3;
  }

body.page-6 .tl-content { padding: 15px 20px; }

body.page-6 .tl-content h4 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px; }

body.page-6 .tl-content p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-6 .tl-step.pivot .tl-date { background: var(--rust); }

body.page-6 .tl-step.pivot .tl-content h4 { color: var(--rust); }

body.page-6 .tl-step.key   .tl-date { background: var(--navy); }

body.page-6 .tl-step.key   .tl-content h4 { color: var(--navy); }

/* ─── PRINCIPLE ─── */
body.page-6 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-6 .principle::before, body.page-6 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-6 .principle::before { top: 6px; right: 18px; }

body.page-6 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-6 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-6 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── THREE PILLARS ─── */
body.page-6 .pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-6 .pillar { background: var(--paper); padding: 28px 22px; }

body.page-6 .pillar-n {
    font-family: 'Amiri', serif; font-size: 48px;
    color: #2e7d32; line-height: 1; margin-bottom: 8px;
  }

body.page-6 .pillar h3 { font-size: 16px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-6 .pillar p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

body.page-6 .pillar .tag {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 9px; margin-bottom: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
  }

body.page-6 .t1 { background: #fff3e0; color: #e65100; }

body.page-6 .t2 { background: #e3f2fd; color: #0d47a1; }

body.page-6 .t3 { background: #fce4ec; color: #880e4f; }

/* ─── GLORIOUS REVOLUTION BOX ─── */
body.page-6 .glorious {
    background: var(--navy); color: #eee;
    padding: 34px 40px; margin: 28px 0;
  }

body.page-6 .glorious h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-6 .gl-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.07); margin-bottom: 16px;
  }

body.page-6 .gl-col { background: rgba(255,255,255,0.04); padding: 16px 18px; }

body.page-6 .gl-col h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 10px; }

body.page-6 .gl-col ul { list-style: none; }

body.page-6 .gl-col ul li {
    font-size: 13.5px; color: #ccc;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 8px; line-height: 1.55;
  }

body.page-6 .gl-col ul li::before { content: '›'; color: var(--gold-lt); font-weight: 700; flex-shrink: 0; }

body.page-6 .gl-result {
    background: rgba(201,162,39,0.12); border-right: 3px solid var(--gold-lt);
    padding: 14px 18px; font-size: 14px; color: #ddd; line-height: 1.75;
  }

body.page-6 .gl-result strong { color: var(--gold-lt); }

/* ─── BANK OF ENGLAND ─── */
body.page-6 .bank-box {
    background: var(--empire); color: #eee;
    padding: 32px 38px; margin: 28px 0; text-align: center;
  }

body.page-6 .bank-box h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 14px;
  }

body.page-6 .bank-box p { font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto 10px; }

body.page-6 .bank-box p:last-child { margin-bottom: 0; }

/* ─── EXTRACTION MACHINE ─── */
body.page-6 .extract-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-6 .ex-card { background: var(--paper); padding: 26px 22px; }

body.page-6 .ex-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-6 .eb-in { background: #fce4ec; color: #880e4f; }

body.page-6 .eb-cn { background: #fff3e0; color: #bf360c; }

body.page-6 .ex-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-6 .ex-row {
    background: var(--cream); padding: 12px 15px;
    margin-bottom: 9px; font-size: 14px;
    line-height: 1.65; color: var(--muted);
    border-right: 3px solid var(--rust);
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-6 .ex-row::before {
    content: '›'; color: var(--rust); font-weight: 700; flex-shrink: 0;
  }

/* ─── ELITE COOPERATION ─── */
body.page-6 .elites {
    background: var(--slate); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-6 .elites h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 16px;
  }

body.page-6 .elite-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: rgba(255,255,255,0.08);
  }

body.page-6 .el-item { background: rgba(255,255,255,0.04); padding: 16px 18px; }

body.page-6 .el-item h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 8px; }

body.page-6 .el-item p { font-size: 13px; color: #ccc; line-height: 1.65; }

/* ─── OFC MAP ─── */
body.page-6 .ofc-box {
    background: var(--cream); border: 1px solid var(--border);
    padding: 26px 30px; margin: 28px 0;
  }

body.page-6 .ofc-box h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 16px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-6 .ofc-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

body.page-6 .ofc-item {
    background: var(--paper); border: 1px solid var(--border);
    padding: 12px 14px; text-align: center;
  }

body.page-6 .ofc-item h5 { font-size: 13px; font-weight: 700; color: var(--slate); margin-bottom: 4px; }

body.page-6 .ofc-item p { font-size: 12px; color: var(--muted); line-height: 1.5; }

body.page-6 .ofc-note {
    margin-top: 14px; padding: 12px 16px;
    background: rgba(122,34,0,0.06); border-right: 3px solid var(--rust);
    font-size: 14px; color: var(--muted); line-height: 1.7;
  }

/* ─── CYCLE BOX ─── */
body.page-6 .cycle {
    background: var(--rust); color: #fdf0e8;
    padding: 34px 40px; margin: 28px 0; text-align: center;
  }

body.page-6 .cycle h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: #ffd; margin-bottom: 14px;
  }

body.page-6 .cycle p { font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto 10px; }

body.page-6 .cycle p:last-child { margin-bottom: 0; }

/* ─── QUESTION BOX ─── */
body.page-6 .q-box {
    background: var(--empire); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-6 .q-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 16px;
  }

body.page-6 .q-box p { font-size: 14.5px; line-height: 1.8; margin-bottom: 12px; }

body.page-6 .q-box p:last-child { margin-bottom: 0; }

body.page-6 .q-box .q-text {
    font-family: 'Amiri', serif; font-size: 19px;
    color: #ddd; padding: 14px 18px;
    background: rgba(255,255,255,0.05);
    border-right: 3px solid var(--gold-lt);
    margin-bottom: 16px; line-height: 1.7;
  }

/* ─── SUMMARY ─── */
body.page-6 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-6 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-6 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-6 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-6 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-6 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-6 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-6 .by { background: #332e00; color: #d4a017; }

body.page-6 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-6 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-6 .gl-cols, body.page-6 .extract-cols, body.page-6 .elite-row, body.page-6 .pillars { grid-template-columns: 1fr; }
  body.page-6 .ofc-grid { grid-template-columns: repeat(2, 1fr); }
  body.page-6 .objectives ul { grid-template-columns: 1fr; }
  body.page-6 .objectives { padding: 26px 22px; }
  body.page-6 .tl-step { grid-template-columns: 65px 1fr; }
}

/* TRANSCRIPT MODAL */
body.page-6 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-6 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-6 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-6 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-6 .modal-overlay.active { display: flex; }

body.page-6 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-6 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-6 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-6 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-6 .modal-close:hover { color: #fff; }

body.page-6 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-6 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-6 .modal-tab:hover { color: #ccc; }

body.page-6 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-6 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-6 .modal-body .transcript-panel { display: none; }

body.page-6 .modal-body .transcript-panel.active { display: block; }

body.page-6 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-6 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-6 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-6 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-6 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-6 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-6 .modal-body { padding: 20px; }
  body.page-6 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-6 .transcript-btn span { display: none; }
}


/* ═══════════════════ 7- lesson-game-theory-americas-game.html ═══════════════════ */

body.page-7 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --usa:      #1a1a3a;
    --empire:   #2a1a08;
    --soviet:   #3a1a00;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
  }

body.page-7 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-7 header {
    background: var(--usa);
    color: #f5f1e9;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-7 header::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 38px,
      rgba(255,255,255,0.015) 38px, rgba(255,255,255,0.015) 39px
    );
    pointer-events: none;
  }

body.page-7 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index: 1;
  }

body.page-7 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-7 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-7 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-7 .objectives {
    background: var(--usa); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-7 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-7 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-7 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-7 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-7 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-7 .sec:last-of-type { border-bottom: none; }

body.page-7 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-7 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-7 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-7 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-7 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-7 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-7 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-7 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-7 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-7 .ibox p:last-child { margin-bottom: 0; }

/* ─── PRINCIPLE ─── */
body.page-7 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-7 .principle::before, body.page-7 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-7 .principle::before { top: 6px; right: 18px; }

body.page-7 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-7 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-7 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── BRIT LIMITS ─── */
body.page-7 .limits {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-7 .lim-card { background: var(--paper); padding: 26px 20px; }

body.page-7 .lim-n {
    font-family: 'Amiri', serif; font-size: 48px;
    color: #2e7d32; line-height: 1; margin-bottom: 8px;
  }

body.page-7 .lim-card h3 { font-size: 15px; font-weight: 700; color: var(--rust); margin-bottom: 8px; }

body.page-7 .lim-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

body.page-7 .lim-card .fix {
    margin-top: 12px; padding: 10px 12px;
    background: #e8f5e9; color: #1b5e20;
    font-size: 13px; line-height: 1.6;
    border-right: 3px solid #2e7d32;
  }

body.page-7 .lim-card .fix::before { content: 'الحل الأمريكي: '; font-weight: 700; }

/* ─── NATION MODELS ─── */
body.page-7 .nation-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-7 .nation-card { background: var(--paper); padding: 22px 16px; }

body.page-7 .nation-tag {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 3px 9px; margin-bottom: 10px;
    letter-spacing: 1.5px; text-transform: uppercase;
  }

body.page-7 .nt-1 { background: #fff3e0; color: #e65100; }

body.page-7 .nt-2 { background: #e3f2fd; color: #0d47a1; }

body.page-7 .nt-3 { background: #f3e5f5; color: #6a1b9a; }

body.page-7 .nt-4 { background: #e8f5e9; color: #1b5e20; }

body.page-7 .nation-card h3 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-7 .nation-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }

body.page-7 .nation-card .eg { font-size: 11px; color: var(--gold); margin-top: 8px; font-style: italic; }

/* ─── GAME TRAITS ─── */
body.page-7 .game-traits {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-7 .gt-card { background: var(--paper); padding: 24px 20px; text-align: center; }

body.page-7 .gt-card h3 { font-size: 16px; font-weight: 700; color: var(--usa); margin-bottom: 8px; }

body.page-7 .gt-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ─── BRETTON WOODS ─── */
body.page-7 .bw-box {
    background: var(--usa); color: #eee;
    padding: 34px 40px; margin: 28px 0;
  }

body.page-7 .bw-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-7 .bw-items { display: flex; flex-direction: column; gap: 10px; }

body.page-7 .bw-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 16px; background: rgba(255,255,255,0.05);
  }

body.page-7 .bw-n {
    min-width: 28px; height: 28px;
    background: rgba(201,162,39,0.2); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
  }

body.page-7 .bw-item p { font-size: 14px; line-height: 1.75; }

body.page-7 .bw-item strong { color: var(--gold-lt); }

/* ─── DOLLAR TIMELINE ─── */
body.page-7 .timeline {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-7 .tl-step {
    background: var(--paper);
    display: grid; grid-template-columns: 86px 1fr;
  }

body.page-7 .tl-date {
    background: var(--usa); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 15px;
    font-weight: 700; padding: 14px 8px; text-align: center;
    line-height: 1.3;
  }

body.page-7 .tl-content { padding: 15px 20px; }

body.page-7 .tl-content h4 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px; }

body.page-7 .tl-content p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

body.page-7 .tl-step.pivot .tl-date { background: var(--rust); }

body.page-7 .tl-step.pivot .tl-content h4 { color: var(--rust); }

body.page-7 .tl-step.crisis .tl-date { background: #880e4f; }

body.page-7 .tl-step.crisis .tl-content h4 { color: #880e4f; }

/* ─── CHINA DEAL ─── */
body.page-7 .china-deal {
    background: var(--empire); color: #eee;
    padding: 34px 40px; margin: 28px 0;
  }

body.page-7 .china-deal h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-7 .cd-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.08);
    margin-bottom: 16px;
  }

body.page-7 .cd-col { background: rgba(255,255,255,0.04); padding: 16px 18px; }

body.page-7 .cd-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; }

body.page-7 .cd-give h4 { color: #7dbd7d; }

body.page-7 .cd-get  h4 { color: var(--gold-lt); }

body.page-7 .cd-col ul { list-style: none; }

body.page-7 .cd-col ul li {
    font-size: 13.5px; color: #ccc;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 8px; line-height: 1.55;
  }

body.page-7 .cd-give li::before { content: '→'; color: #7dbd7d; flex-shrink: 0; }

body.page-7 .cd-get  li::before { content: '$'; color: var(--gold-lt); flex-shrink: 0; font-weight: 700; }

body.page-7 .cd-punchline {
    background: rgba(201,162,39,0.12); border-right: 3px solid var(--gold-lt);
    padding: 14px 18px; font-size: 14.5px; color: #ddd; line-height: 1.75;
  }

body.page-7 .cd-punchline strong { color: var(--gold-lt); }

/* ─── PRICE HIERARCHY ─── */
body.page-7 .price-hier {
    display: flex; flex-direction: column; gap: 2px;
    margin: 28px 0;
  }

body.page-7 .ph-row {
    display: grid; grid-template-columns: 120px 1fr 140px;
    align-items: stretch;
  }

body.page-7 .ph-level {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 12px; text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #fff;
  }

body.page-7 .ph-desc { padding: 14px 20px; background: var(--paper); border: 1px solid var(--border); border-right: none; border-left: none; }

body.page-7 .ph-desc h4 { font-size: 14px; font-weight: 700; color: var(--slate); margin-bottom: 4px; }

body.page-7 .ph-desc p { font-size: 13px; color: var(--muted); line-height: 1.6; }

body.page-7 .ph-who {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 12px; text-align: center;
    font-size: 14px; font-weight: 700; color: var(--slate);
    background: var(--cream); border: 1px solid var(--border);
  }

body.page-7 .lv1 { background: #b71c1c; }

/* finance */
body.page-7 .lv2 { background: #1565c0; }

/* knowledge */
body.page-7 .lv3 { background: #2e7d32; }

/* manufacturing */
body.page-7 .lv4 { background: #5d4037; }

/* resources */
/* ─── RESET BOX ─── */
body.page-7 .reset-box {
    background: var(--rust); color: #fdf0e8;
    padding: 34px 40px; margin: 28px 0; text-align: center;
  }

body.page-7 .reset-box h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: #ffd; margin-bottom: 14px;
  }

body.page-7 .reset-box p { font-size: 15px; line-height: 1.85; max-width: 700px; margin: 0 auto 10px; }

body.page-7 .reset-box p:last-child { margin-bottom: 0; }

/* ─── SUMMARY ─── */
body.page-7 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-7 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-7 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-7 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-7 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-7 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-7 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-7 .by { background: #332e00; color: #d4a017; }

body.page-7 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-7 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-7 .limits, body.page-7 .nation-grid, body.page-7 .game-traits { grid-template-columns: 1fr; }
  body.page-7 .cd-cols { grid-template-columns: 1fr; }
  body.page-7 .objectives ul { grid-template-columns: 1fr; }
  body.page-7 .objectives { padding: 26px 22px; }
  body.page-7 .tl-step { grid-template-columns: 65px 1fr; }
  body.page-7 .ph-row { grid-template-columns: 80px 1fr 100px; }
}

/* TRANSCRIPT MODAL */
body.page-7 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-7 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-7 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-7 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-7 .modal-overlay.active { display: flex; }

body.page-7 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-7 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-7 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-7 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-7 .modal-close:hover { color: #fff; }

body.page-7 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-7 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-7 .modal-tab:hover { color: #ccc; }

body.page-7 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-7 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-7 .modal-body .transcript-panel { display: none; }

body.page-7 .modal-body .transcript-panel.active { display: block; }

body.page-7 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-7 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-7 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-7 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-7 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-7 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-7 .modal-body { padding: 20px; }
  body.page-7 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-7 .transcript-btn span { display: none; }
}


/* ═══════════════════ 8- lesson-game-theory-communism.html ═══════════════════ */

body.page-8 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --red:      #8b1a1a;
    --slate:    #1e2d3d;
    --charcoal: #1a1a1a;
    --soviet:   #4a0e0e;
    --deep:     #0d1f0d;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
  }

body.page-8 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-8 header {
    background: var(--soviet);
    color: #f5f1e9;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-8 header::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      -55deg, transparent, transparent 48px,
      rgba(255,255,255,0.018) 48px, rgba(255,255,255,0.018) 49px
    );
    pointer-events: none;
  }

body.page-8 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index: 1;
  }

body.page-8 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-8 header .sub {
    color: #aaa; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-8 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-8 .objectives {
    background: var(--charcoal); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-8 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-8 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-8 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-8 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-8 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-8 .sec:last-of-type { border-bottom: none; }

body.page-8 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-8 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-8 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-8 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-8 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-8 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-8 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-8 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-8 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-8 .ibox p:last-child { margin-bottom: 0; }

/* ─── CHINA PARADOX ─── */
body.page-8 .paradox {
    background: var(--deep); color: #eee;
    padding: 36px 40px; margin: 28px 0;
  }

body.page-8 .paradox h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-8 .p-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.08); margin-bottom: 14px;
  }

body.page-8 .p-col { background: rgba(255,255,255,0.04); padding: 16px 18px; }

body.page-8 .p-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 8px; }

body.page-8 .p-col.before h4 { color: #e88; }

body.page-8 .p-col.after  h4 { color: #8e8; }

body.page-8 .p-col p { font-size: 13.5px; color: #ccc; line-height: 1.65; }

body.page-8 .p-question {
    background: rgba(201,162,39,0.12); border-right: 3px solid var(--gold-lt);
    padding: 14px 18px; font-size: 14.5px;
    font-family: 'Amiri', serif; color: #ddd; line-height: 1.7;
  }

/* ─── ENEMIES GRID ─── */
body.page-8 .enemies {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-8 .enemy-card { background: var(--paper); padding: 24px 18px; text-align: center; }

body.page-8 .enemy-n {
    font-family: 'Amiri', serif; font-size: 42px;
    color: #2e7d32; line-height: 1; margin-bottom: 6px;
  }

body.page-8 .enemy-card h3 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-8 .enemy-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ─── CONVERGENCE TABLE ─── */
body.page-8 .conv-wrap { margin: 28px 0; overflow-x: auto; }

body.page-8 .conv-table { width: 100%; border-collapse: collapse; }

body.page-8 .conv-table th {
    padding: 12px 16px; font-size: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
    font-weight: 700; text-align: right;
  }

body.page-8 .th-issue { background: var(--slate); color: #eee; }

body.page-8 .th-cap { background: #1a2e1a; color: #8e8; }

body.page-8 .th-com { background: var(--soviet); color: #e88; }

body.page-8 .conv-table td {
    padding: 11px 16px; font-size: 14px;
    border-bottom: 1px solid var(--cream);
    line-height: 1.65; vertical-align: top;
  }

body.page-8 .conv-table tr:nth-child(even) td { background: var(--hl); }

body.page-8 .conv-table td:first-child {
    font-weight: 700; color: var(--slate); background: var(--cream) !important;
    font-size: 13px;
  }

body.page-8 .agree { color: #2e7d32; font-weight: 600; }

body.page-8 .disagree { color: #b71c1c; font-weight: 600; }

/* ─── PRINCIPLE ─── */
body.page-8 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-8 .principle::before, body.page-8 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-8 .principle::before { top: 6px; right: 18px; }

body.page-8 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-8 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-8 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── SPECTRUM BOX ─── */
body.page-8 .spectrum {
    background: var(--charcoal); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-8 .spectrum h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-8 .spec-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 14px; margin-bottom: 12px;
    padding: 12px 16px; background: rgba(255,255,255,0.05);
  }

body.page-8 .spec-left { font-size: 13.5px; color: #e88; font-weight: 600; text-align: right; }

body.page-8 .spec-arrow { color: var(--gold-lt); font-size: 16px; flex-shrink: 0; }

body.page-8 .spec-right { font-size: 13.5px; color: #8e8; font-weight: 600; }

body.page-8 .spec-note {
    margin-top: 14px; padding: 12px 16px;
    background: rgba(201,162,39,0.1);
    border-right: 3px solid var(--gold-lt);
    font-size: 14px; color: #ddd; line-height: 1.7;
  }

/* ─── REVOLUTIONS 1848 ─── */
body.page-8 .hist-box {
    background: var(--soviet); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-8 .hist-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 16px;
  }

body.page-8 .hist-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.1);
  }

body.page-8 .hist-cell { background: rgba(255,255,255,0.05); padding: 14px 16px; }

body.page-8 .hist-cell h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 7px; }

body.page-8 .hist-cell p { font-size: 13px; color: #ccc; line-height: 1.65; }

body.page-8 .hist-result {
    margin-top: 14px; padding: 14px 16px;
    background: rgba(255,255,255,0.07);
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

/* ─── THREE STRATAGEMS ─── */
body.page-8 .stratagems {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-8 .strat-row {
    background: var(--paper);
    display: grid; grid-template-columns: 60px 1fr;
  }

body.page-8 .strat-n {
    background: var(--soviet); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Amiri', serif; font-size: 26px; font-weight: 700;
  }

body.page-8 .strat-c { padding: 16px 22px; }

body.page-8 .strat-c h4 { font-size: 15px; font-weight: 700; color: var(--rust); margin-bottom: 6px; }

body.page-8 .strat-c p { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ─── MARX ANOMALIES ─── */
body.page-8 .anomalies {
    background: var(--charcoal); color: #eee;
    padding: 32px 38px; margin: 28px 0;
  }

body.page-8 .anomalies h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-8 .anom-items { display: flex; flex-direction: column; gap: 10px; }

body.page-8 .anom-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; background: rgba(255,255,255,0.06);
  }

body.page-8 .anom-q {
    width: 30px; height: 30px; flex-shrink: 0;
    background: rgba(201,162,39,0.2); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; font-family: 'Amiri', serif;
  }

body.page-8 .anom-item p { font-size: 14px; line-height: 1.75; }

body.page-8 .anom-item strong { color: var(--gold-lt); }

/* ─── BOLSHEVIK EVIDENCE ─── */
body.page-8 .evidence {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-8 .ev-card { background: var(--paper); padding: 24px 22px; }

body.page-8 .ev-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-8 .eb-r { background: #fce4ec; color: #880e4f; }

body.page-8 .eb-w { background: #e3f2fd; color: #0d47a1; }

body.page-8 .ev-card h3 {
    font-family: 'Amiri', serif; font-size: 18px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-8 .ev-item {
    background: var(--cream); padding: 11px 14px;
    margin-bottom: 8px; font-size: 13.5px;
    line-height: 1.65; color: var(--muted);
    border-right: 3px solid var(--rust);
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-8 .ev-item::before { content: '›'; color: var(--rust); font-weight: 700; flex-shrink: 0; }

body.page-8 .ev-verdict {
    margin-top: 12px; padding: 10px 13px;
    font-size: 13.5px; font-weight: 600; line-height: 1.65;
  }

body.page-8 .vr { background: #fce4ec; color: #b71c1c; }

body.page-8 .vb { background: #e3f2fd; color: #0d47a1; }

/* ─── CHINA EVOLUTION ─── */
body.page-8 .china-flow {
    display: flex; flex-direction: column;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-8 .ch-step {
    background: var(--paper);
    display: grid; grid-template-columns: 90px 1fr;
  }

body.page-8 .ch-label {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    padding: 14px 8px; text-align: center; line-height: 1.4;
  }

body.page-8 .lm { background: var(--soviet); color: #fdd; }

body.page-8 .ll { background: #1a3a1a; color: #9e9; }

body.page-8 .lm2 { background: #1a1a3a; color: #99e; }

body.page-8 .lc { background: var(--charcoal); color: var(--gold-lt); }

body.page-8 .ch-step div:last-child { padding: 14px 20px; }

body.page-8 .ch-step div:last-child h4 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px; }

body.page-8 .ch-step div:last-child p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* ─── SUMMARY ─── */
body.page-8 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-8 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-8 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-8 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-8 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-8 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-8 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-8 .by { background: #332e00; color: #d4a017; }

body.page-8 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-8 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-8 .p-row, body.page-8 .evidence, body.page-8 .hist-grid { grid-template-columns: 1fr; }
  body.page-8 .enemies { grid-template-columns: repeat(2, 1fr); }
  body.page-8 .objectives ul { grid-template-columns: 1fr; }
  body.page-8 .objectives { padding: 26px 22px; }
  body.page-8 .strat-row { grid-template-columns: 45px 1fr; }
  body.page-8 .ch-step { grid-template-columns: 70px 1fr; }
  body.page-8 .spec-row { grid-template-columns: 1fr; }
  body.page-8 .spec-arrow { display: none; }
}

/* TRANSCRIPT MODAL */
body.page-8 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-8 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-8 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-8 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-8 .modal-overlay.active { display: flex; }

body.page-8 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-8 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-8 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-8 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-8 .modal-close:hover { color: #fff; }

body.page-8 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-8 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-8 .modal-tab:hover { color: #ccc; }

body.page-8 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-8 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-8 .modal-body .transcript-panel { display: none; }

body.page-8 .modal-body .transcript-panel.active { display: block; }

body.page-8 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-8 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-8 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-8 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-8 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-8 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-8 .modal-body { padding: 20px; }
  body.page-8 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-8 .transcript-btn span { display: none; }
}


/* ═══════════════════ 9- lesson-game-theory-iran-war.html ═══════════════════ */

body.page-9 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --sand:     #2a1f0a;
    --olive:    #1a280a;
    --navy:     #0a1525;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
    --red-dk:   #6b0000;
    --teal:     #062020;
  }

body.page-9 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-9 header {
    background: var(--sand);
    color: #f5f1e9;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-9 header::before {
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(
        -40deg, transparent, transparent 55px,
        rgba(255,255,255,0.014) 55px, rgba(255,255,255,0.014) 56px
      );
    pointer-events: none;
  }

body.page-9 .h-alert {
    display: inline-block;
    background: var(--rust); color: #fde;
    font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 700;
    padding: 5px 16px; margin-bottom: 18px;
    position: relative; z-index: 1;
  }

body.page-9 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index: 1;
  }

body.page-9 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-9 header .sub {
    color: #aaa; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-9 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-9 .objectives {
    background: var(--navy); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-9 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-9 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-9 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-9 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-9 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-9 .sec:last-of-type { border-bottom: none; }

body.page-9 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-9 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-9 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-9 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-9 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-9 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-9 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-9 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-9 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-9 .ibox p:last-child { margin-bottom: 0; }

/* ─── SHIA BOX ─── */
body.page-9 .shia-box {
    background: var(--teal); color: #eee;
    padding: 34px 38px; margin: 28px 0;
  }

body.page-9 .shia-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 16px;
  }

body.page-9 .shia-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,0.08); margin-bottom: 14px;
  }

body.page-9 .shia-col { background: rgba(255,255,255,0.05); padding: 15px 18px; }

body.page-9 .shia-col h4 { font-size: 13px; font-weight: 700; color: var(--gold-lt); margin-bottom: 8px; }

body.page-9 .shia-col p { font-size: 13.5px; color: #ccc; line-height: 1.7; }

body.page-9 .shia-key {
    padding: 13px 16px; background: rgba(255,255,255,0.06);
    border-right: 3px solid var(--gold-lt);
    font-size: 14.5px; font-family: 'Amiri', serif; color: #ddd; line-height: 1.7;
  }

/* ─── PRINCIPLE ─── */
body.page-9 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-9 .principle::before, body.page-9 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-9 .principle::before { top: 6px; right: 18px; }

body.page-9 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-9 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-9 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── STRAITS BOX ─── */
body.page-9 .straits {
    background: var(--navy); color: #eee;
    padding: 34px 38px; margin: 28px 0;
  }

body.page-9 .straits h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 16px;
  }

body.page-9 .straits-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: rgba(255,255,255,0.08); margin-bottom: 14px;
  }

body.page-9 .sg-item { background: rgba(255,255,255,0.05); padding: 15px 16px; text-align: center; }

body.page-9 .sg-item h4 { font-size: 13px; color: var(--gold-lt); margin-bottom: 6px; font-weight: 700; }

body.page-9 .sg-n {
    font-family: 'Amiri', serif; font-size: 34px;
    font-weight: 700; line-height: 1.1; margin-bottom: 6px;
  }

body.page-9 .sg-item p { font-size: 12.5px; color: #bbb; line-height: 1.55; }

body.page-9 .straits-note {
    padding: 13px 16px; background: rgba(255,0,0,0.1);
    border-right: 3px solid #c44;
    font-size: 14px; color: #ddd; line-height: 1.7;
  }

/* ─── GCC VULNERABILITY ─── */
body.page-9 .gcc-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-9 .gcc-card { background: var(--paper); padding: 24px 18px; text-align: center; }

body.page-9 .gcc-n {
    font-family: 'Amiri', serif; font-size: 38px;
    font-weight: 700; color: var(--rust); line-height: 1; margin-bottom: 6px;
  }

body.page-9 .gcc-card h3 { font-size: 14px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }

body.page-9 .gcc-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

body.page-9 .gcc-tag {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 3px 8px; margin-bottom: 10px;
    letter-spacing: 1px; text-transform: uppercase;
    background: var(--cream); color: var(--muted);
    border: 1px solid var(--border);
  }

/* ─── ASYMMETRY ─── */
body.page-9 .asym {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-9 .asym-card { background: var(--paper); padding: 26px 22px; }

body.page-9 .asym-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-9 .ab-us { background: #e3f2fd; color: #0d47a1; }

body.page-9 .ab-ir { background: #fff3e0; color: #bf360c; }

body.page-9 .asym-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-9 .asym-row {
    background: var(--cream); padding: 11px 14px;
    margin-bottom: 8px; font-size: 13.5px;
    line-height: 1.65; color: var(--muted);
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-9 .asym-row::before { font-weight: 700; flex-shrink: 0; }

body.page-9 .a-us .asym-row { border-right: 3px solid #0d47a1; }

body.page-9 .a-us .asym-row::before { content: '$'; color: #0d47a1; }

body.page-9 .a-ir .asym-row { border-right: 3px solid #bf360c; }

body.page-9 .a-ir .asym-row::before { content: '◆'; color: #bf360c; font-size: 10px; margin-top: 4px; }

body.page-9 .asym-verdict {
    margin-top: 12px; padding: 11px 14px;
    font-size: 13.5px; font-weight: 600; line-height: 1.65;
  }

body.page-9 .av-us { background: #e3f2fd; color: #0d47a1; }

body.page-9 .av-ir { background: #fff3e0; color: #bf360c; }

/* ─── COST BOX ─── */
body.page-9 .cost-box {
    background: var(--red-dk); color: #fde;
    padding: 32px 38px; margin: 28px 0; text-align: center;
  }

body.page-9 .cost-box h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: #ffd; margin-bottom: 16px;
  }

body.page-9 .cost-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

body.page-9 .cost-item {
    background: rgba(255,255,255,0.08);
    padding: 16px; text-align: center;
  }

body.page-9 .cost-item h4 { font-size: 13px; color: #ffd; margin-bottom: 8px; font-weight: 700; }

body.page-9 .cost-n {
    font-family: 'Amiri', serif; font-size: 30px;
    font-weight: 700; line-height: 1.1; margin-bottom: 6px; color: #ffc;
  }

body.page-9 .cost-item p { font-size: 12.5px; color: #ecc; line-height: 1.55; }

/* ─── WATER DATA ─── */
body.page-9 .water-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-9 .water-card { background: var(--paper); padding: 20px 14px; text-align: center; }

body.page-9 .water-n {
    font-family: 'Amiri', serif; font-size: 28px;
    font-weight: 700; line-height: 1.1; margin-bottom: 4px;
  }

body.page-9 .water-card h3 { font-size: 13px; font-weight: 700; color: var(--slate); margin-bottom: 4px; }

body.page-9 .water-card p { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

body.page-9 .wc-red    .water-n { color: #b71c1c; }

body.page-9 .wc-orange .water-n { color: #e65100; }

body.page-9 .wc-yellow .water-n { color: #b8860b; }

body.page-9 .wc-green  .water-n { color: #2e7d32; }

body.page-9 .water-note {
    background: var(--cream); border: 1px solid var(--border);
    padding: 14px 18px; margin: 14px 0;
    font-size: 14px; color: var(--muted); line-height: 1.7;
  }

/* ─── PLANS ─── */
body.page-9 .plans {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-9 .plan-card { background: var(--paper); padding: 26px 22px; }

body.page-9 .plan-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-9 .pb-us { background: #e3f2fd; color: #0d47a1; }

body.page-9 .pb-ir { background: #fff3e0; color: #bf360c; }

body.page-9 .plan-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-9 .plan-step {
    background: var(--cream); padding: 12px 15px;
    margin-bottom: 9px; font-size: 14px;
    line-height: 1.65; color: var(--muted);
    display: flex; gap: 10px; align-items: flex-start;
  }

body.page-9 .plan-n {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
    margin-top: 2px;
  }

body.page-9 .pn-us { background: #0d47a1; color: #fff; }

body.page-9 .pn-ir { background: #bf360c; color: #fff; }

body.page-9 .plan-goal {
    margin-top: 14px; padding: 12px 15px;
    font-size: 14px; font-weight: 700; line-height: 1.65;
  }

body.page-9 .pg-us { background: #e3f2fd; color: #0d47a1; border-right: 3px solid #0d47a1; }

body.page-9 .pg-ir { background: #fff3e0; color: #bf360c; border-right: 3px solid #bf360c; }

/* ─── QUESTIONS ─── */
body.page-9 .questions {
    background: var(--sand); color: #eee;
    padding: 34px 38px; margin: 28px 0;
  }

body.page-9 .questions h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-9 .q-items { display: flex; flex-direction: column; gap: 10px; }

body.page-9 .q-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px 16px; background: rgba(255,255,255,0.06);
  }

body.page-9 .q-n {
    width: 28px; height: 28px; flex-shrink: 0;
    background: rgba(201,162,39,0.2); color: var(--gold-lt);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; font-family: 'Amiri', serif;
  }

body.page-9 .q-item p { font-size: 14px; line-height: 1.75; }

/* ─── SUMMARY ─── */
body.page-9 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-9 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-9 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-9 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-9 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-9 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-9 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-9 .by { background: #332e00; color: #d4a017; }

body.page-9 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-9 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-9 .shia-cols, body.page-9 .asym, body.page-9 .plans, body.page-9 .cost-cols { grid-template-columns: 1fr; }
  body.page-9 .straits-grid, body.page-9 .gcc-grid, body.page-9 .water-grid { grid-template-columns: repeat(2, 1fr); }
  body.page-9 .objectives ul { grid-template-columns: 1fr; }
  body.page-9 .objectives { padding: 26px 22px; }
}

/* TRANSCRIPT MODAL */
body.page-9 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-9 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-9 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-9 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-9 .modal-overlay.active { display: flex; }

body.page-9 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-9 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-9 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-9 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-9 .modal-close:hover { color: #fff; }

body.page-9 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-9 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-9 .modal-tab:hover { color: #ccc; }

body.page-9 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-9 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-9 .modal-body .transcript-panel { display: none; }

body.page-9 .modal-body .transcript-panel.active { display: block; }

body.page-9 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-9 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-9 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-9 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-9 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-9 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-9 .modal-body { padding: 20px; }
  body.page-9 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-9 .transcript-btn span { display: none; }
}


/* ═══════════════════ 10- lesson-game-theory-asymmetry.html ═══════════════════ */

body.page-10 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --charcoal: #141414;
    --empire:   #0d1a2a;
    --under:    #1a0d00;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
    --olive:    #1c2a10;
  }

body.page-10 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-10 header {
    background: var(--charcoal);
    color: #f5f1e9;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-10 header::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      60deg, transparent, transparent 52px,
      rgba(255,255,255,0.012) 52px, rgba(255,255,255,0.012) 53px
    );
    pointer-events: none;
  }

body.page-10 .h-label {
    font-size: 11px; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 16px; position: relative; z-index: 1;
  }

body.page-10 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 44px);
    line-height: 1.45; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
  }

body.page-10 header .sub {
    color: #999; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

/* ─── LAYOUT ─── */
body.page-10 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-10 .objectives {
    background: var(--empire); color: #f5f1e9;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-10 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 21px; color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-10 .objectives ul {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  }

body.page-10 .objectives ul li {
    font-size: 14.5px; line-height: 1.65;
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-10 .objectives ul li::before {
    content: '◆'; color: var(--gold-lt);
    font-size: 8px; flex-shrink: 0; margin-top: 7px;
  }

/* ─── SECTION ─── */
body.page-10 .sec { padding: 48px 0; border-bottom: 1px solid var(--border); }

body.page-10 .sec:last-of-type { border-bottom: none; }

body.page-10 .sec-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

body.page-10 .sec-n {
    font-family: 'Amiri', serif; font-size: 68px;
    color: #2e7d32; line-height: 1;
    flex-shrink: 0; font-weight: 700; user-select: none;
  }

body.page-10 .sec-t h2 {
    font-family: 'Amiri', serif; font-size: 25px;
    color: var(--slate); margin-bottom: 5px; line-height: 1.4;
  }

body.page-10 .sec-t p {
    font-size: 12px; color: var(--gold);
    text-transform: uppercase; letter-spacing: 2px;
  }

body.page-10 .body { margin-bottom: 17px; color: #252525; }

/* ─── CALLOUT ─── */
body.page-10 .callout {
    border-right: 4px solid var(--gold);
    background: var(--hl);
    padding: 18px 22px; margin: 28px 0;
    font-family: 'Amiri', serif;
    font-size: 19.5px; line-height: 1.8; color: var(--slate);
  }

/* ─── INFO BOX ─── */
body.page-10 .ibox {
    background: var(--cream); border: 1px solid var(--border);
    padding: 22px 28px; margin: 22px 0;
  }

body.page-10 .ibox h4 {
    font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--rust);
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
  }

body.page-10 .ibox p { font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }

body.page-10 .ibox p:last-child { margin-bottom: 0; }

/* ─── PRINCIPLE ─── */
body.page-10 .principle {
    background: var(--slate); color: #f5f1e9;
    padding: 42px; margin: 36px 0; text-align: center;
    position: relative; overflow: hidden;
  }

body.page-10 .principle::before, body.page-10 .principle::after {
    content: '"'; font-family: 'Amiri', serif;
    font-size: 110px; color: rgba(255,255,255,0.04);
    position: absolute; line-height: 1; user-select: none;
  }

body.page-10 .principle::before { top: 6px; right: 18px; }

body.page-10 .principle::after { bottom: -22px; left: 18px; transform: scaleX(-1); }

body.page-10 .principle p {
    font-family: 'Amiri', serif; font-size: 22px;
    line-height: 1.75; margin-bottom: 12px; position: relative; z-index: 1;
  }

body.page-10 .principle .src {
    font-size: 12px; color: var(--gold-lt);
    letter-spacing: 2.5px; text-transform: uppercase;
    position: relative; z-index: 1;
  }

/* ─── HISTORY EXAMPLES ─── */
body.page-10 .examples {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-10 .ex-card { background: var(--paper); padding: 22px 16px; text-align: center; }

body.page-10 .ex-era {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
  }

body.page-10 .ex-card h3 { font-size: 14.5px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }

body.page-10 .ex-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

body.page-10 .ex-arrow {
    font-family: 'Amiri', serif; font-size: 22px;
    color: var(--rust); margin: 8px 0;
  }

/* ─── THREE PILLARS TABLE ─── */
body.page-10 .pillars-wrap { margin: 28px 0; overflow-x: auto; }

body.page-10 .pillars-table { width: 100%; border-collapse: collapse; }

body.page-10 .pillars-table th {
    padding: 13px 16px; font-size: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
    font-weight: 700; text-align: right;
  }

body.page-10 .th-pillar { background: var(--empire); color: #eee; }

body.page-10 .th-strength { background: var(--olive); color: #cec; }

body.page-10 .th-weakness { background: var(--rust); color: #fde; }

body.page-10 .th-result { background: var(--charcoal); color: var(--gold-lt); }

body.page-10 .pillars-table td {
    padding: 13px 16px; font-size: 14px;
    border-bottom: 1px solid var(--cream);
    line-height: 1.65; vertical-align: top;
  }

body.page-10 .pillars-table tr:nth-child(even) td { background: var(--hl); }

body.page-10 .pillars-table td:first-child {
    font-weight: 700; color: var(--slate);
    background: var(--cream) !important;
    font-size: 13.5px;
  }

/* ─── EOC GRID ─── */
body.page-10 .eoc-box {
    background: var(--olive); color: #eee;
    padding: 34px 38px; margin: 28px 0;
  }

body.page-10 .eoc-box h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-10 .eoc-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px; background: rgba(255,255,255,0.08);
  }

body.page-10 .eoc-item { background: rgba(255,255,255,0.05); padding: 20px 18px; text-align: center; }

body.page-10 .eoc-n {
    font-family: 'Amiri', serif; font-size: 52px;
    color: rgba(201,162,39,0.3); line-height: 1; margin-bottom: 8px;
  }

body.page-10 .eoc-item h4 { font-size: 16px; font-weight: 700; color: var(--gold-lt); margin-bottom: 8px; }

body.page-10 .eoc-item p { font-size: 13px; color: #ccc; line-height: 1.65; }

body.page-10 .eoc-test {
    margin-top: 14px; padding: 13px 16px;
    background: rgba(201,162,39,0.1); border-right: 3px solid var(--gold-lt);
    font-size: 14.5px; color: #ddd; line-height: 1.7;
    font-family: 'Amiri', serif;
  }

/* ─── COMPARISON COLS ─── */
body.page-10 .compare {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-10 .cmp-card { background: var(--paper); padding: 26px 22px; }

body.page-10 .cmp-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-10 .cb-emp { background: #e3f2fd; color: #0d47a1; }

body.page-10 .cb-und { background: #fff3e0; color: #bf360c; }

body.page-10 .cmp-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-10 .cmp-row {
    background: var(--cream); padding: 11px 14px;
    margin-bottom: 8px; font-size: 14px;
    line-height: 1.65; color: var(--muted);
    display: flex; gap: 9px; align-items: flex-start;
  }

body.page-10 .cmp-row.good { border-right: 3px solid #2e7d32; }

body.page-10 .cmp-row.good::before { content: '+'; color: #2e7d32; font-weight: 700; flex-shrink: 0; }

body.page-10 .cmp-row.bad { border-right: 3px solid var(--rust); }

body.page-10 .cmp-row.bad::before { content: '−'; color: var(--rust); font-weight: 700; flex-shrink: 0; }

body.page-10 .cmp-verdict {
    margin-top: 12px; padding: 11px 14px;
    font-size: 13.5px; font-weight: 600; line-height: 1.65;
  }

body.page-10 .cv-emp { background: #e3f2fd; color: #0d47a1; }

body.page-10 .cv-und { background: #fff3e0; color: #bf360c; }

/* ─── SIEGE VS GUERRILLA ─── */
body.page-10 .war-types {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: var(--border);
    border: 1px solid var(--border); margin: 28px 0;
  }

body.page-10 .wt-card { background: var(--paper); padding: 26px 22px; }

body.page-10 .wt-badge {
    display: inline-block; font-size: 11px;
    font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 4px 12px; margin-bottom: 14px;
  }

body.page-10 .wt-siege { background: #e3f2fd; color: #0d47a1; }

body.page-10 .wt-guerr { background: #fff3e0; color: #bf360c; }

body.page-10 .wt-card h3 {
    font-family: 'Amiri', serif; font-size: 19px;
    color: var(--slate); margin-bottom: 14px;
  }

body.page-10 .wt-step {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; background: var(--cream);
    margin-bottom: 8px; font-size: 14px; color: var(--muted); line-height: 1.65;
  }

body.page-10 .wt-n {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  }

body.page-10 .wn-s { background: #0d47a1; color: #fff; }

body.page-10 .wn-g { background: #bf360c; color: #fff; }

body.page-10 .wt-logic {
    margin-top: 12px; padding: 11px 14px;
    font-size: 14px; font-style: italic;
    color: var(--muted); border-top: 1px solid var(--border);
    line-height: 1.7;
  }

/* ─── BACKFIRE BOX ─── */
body.page-10 .backfire {
    background: var(--empire); color: #eee;
    padding: 34px 38px; margin: 28px 0;
  }

body.page-10 .backfire h3 {
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-10 .bf-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 14px; margin-bottom: 10px;
    padding: 12px 16px; background: rgba(255,255,255,0.05);
  }

body.page-10 .bf-left { font-size: 13.5px; color: #e99; font-weight: 600; }

body.page-10 .bf-arrow { color: var(--gold-lt); font-size: 18px; flex-shrink: 0; }

body.page-10 .bf-right { font-size: 13.5px; color: #9c9; font-weight: 600; text-align: left; }

body.page-10 .bf-note {
    margin-top: 14px; padding: 12px 16px;
    background: rgba(201,162,39,0.1);
    border-right: 3px solid var(--gold-lt);
    font-size: 14px; color: #ddd; line-height: 1.75;
  }

/* ─── CONSCIOUSNESS BOX ─── */
body.page-10 .conscious {
    background: var(--charcoal); color: #eee;
    padding: 38px; margin: 36px 0; text-align: center;
  }

body.page-10 .conscious h3 {
    font-family: 'Amiri', serif; font-size: 22px;
    color: var(--gold-lt); margin-bottom: 14px;
  }

body.page-10 .conscious p {
    font-size: 15px; line-height: 1.9; max-width: 700px;
    margin: 0 auto 12px; color: #ccc;
  }

body.page-10 .conscious .c-key {
    display: inline-block; margin-top: 16px;
    padding: 14px 28px; background: rgba(201,162,39,0.12);
    border: 1px solid var(--gold);
    font-family: 'Amiri', serif; font-size: 20px;
    color: var(--gold-lt); line-height: 1.55;
  }

/* ─── SUMMARY ─── */
body.page-10 .summary {
    background: var(--ink); color: #eee;
    padding: 38px; margin: 48px 0;
  }

body.page-10 .summary h3 {
    font-family: 'Amiri', serif; font-size: 21px;
    color: var(--gold-lt); margin-bottom: 18px;
  }

body.page-10 .s-items { display: flex; flex-direction: column; gap: 10px; }

body.page-10 .s-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 13px; background: rgba(255,255,255,0.05);
  }

body.page-10 .s-badge {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
  }

body.page-10 .bg { background: #1a3a1a; color: #7dbd7d; }

body.page-10 .br { background: #3a1a1a; color: #bd7d7d; }

body.page-10 .by { background: #332e00; color: #d4a017; }

body.page-10 .s-item p { font-size: 14px; line-height: 1.75; }

body.page-10 footer {
    background: var(--ink); color: #555;
    text-align: center; padding: 24px; font-size: 12.5px;
  }

@media (max-width: 680px) {
  body.page-10 .examples { grid-template-columns: repeat(2, 1fr); }
  body.page-10 .compare, body.page-10 .war-types { grid-template-columns: 1fr; }
  body.page-10 .eoc-row { grid-template-columns: 1fr; }
  body.page-10 .bf-row { grid-template-columns: 1fr; }
  body.page-10 .bf-arrow { display: none; }
  body.page-10 .objectives ul { grid-template-columns: 1fr; }
  body.page-10 .objectives { padding: 26px 22px; }
}

/* TRANSCRIPT MODAL */
body.page-10 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-10 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-10 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-10 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-10 .modal-overlay.active { display: flex; }

body.page-10 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-10 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-10 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-10 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-10 .modal-close:hover { color: #fff; }

body.page-10 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-10 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-10 .modal-tab:hover { color: #ccc; }

body.page-10 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-10 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-10 .modal-body .transcript-panel { display: none; }

body.page-10 .modal-body .transcript-panel.active { display: block; }

body.page-10 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-10 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-10 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-10 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-10 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-10 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-10 .modal-body { padding: 20px; }
  body.page-10 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-10 .transcript-btn span { display: none; }
}


/* ═══════════════════ 11- lesson-game-theory-war.html ═══════════════════ */

body.page-11 {
    --ink: #0d0d0d;
    --paper: #f5f0e8;
    --cream: #ede7d6;
    --gold: #b8860b;
    --gold-light: #d4a017;
    --rust: #8b2500;
    --slate: #2c3e50;
    --muted: #6b6354;
    --border: #c8bfa8;
    --highlight: #fdf3dc;
  }

body.page-11 {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* HEADER */
body.page-11 header {
    background: var(--slate);
    color: #f5f0e8;
    padding: 60px 0 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-11 header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,0.02) 30px,
      rgba(255,255,255,0.02) 31px
    );
  }

body.page-11 .header-label {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 500;
    margin-bottom: 20px;
  }

body.page-11 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto 20px;
    position: relative;
  }

body.page-11 header p.subtitle {
    color: #bbb;
    font-size: 15px;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
  }

/* LAYOUT */
body.page-11 .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
  }

/* OBJECTIVES BOX */
body.page-11 .objectives {
    background: var(--slate);
    color: #f5f0e8;
    padding: 40px;
    margin: 50px auto;
    max-width: 900px;
    border-radius: 2px;
    position: relative;
  }

body.page-11 .objectives::before {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--gold);
  }

body.page-11 .objectives h2 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-11 .objectives ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

body.page-11 .objectives ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
  }

body.page-11 .objectives ul li::before {
    content: '◆';
    color: var(--gold);
    font-size: 10px;
    margin-top: 5px;
    flex-shrink: 0;
  }

/* THREE QUESTIONS */
body.page-11 .three-q {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    margin: 50px 0;
    border: 1px solid var(--border);
  }

body.page-11 .q-card {
    background: var(--paper);
    padding: 35px 25px;
    text-align: center;
    position: relative;
    transition: background 0.3s;
  }

body.page-11 .q-card:hover { background: var(--highlight); }

body.page-11 .q-num {
    font-family: 'Amiri', serif;
    font-size: 56px;
    color: #2e7d32;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 700;
  }

body.page-11 .q-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--rust);
    margin-bottom: 12px;
    line-height: 1.5;
  }

body.page-11 .q-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
  }

body.page-11 .q-answer {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 2px;
  }

body.page-11 .yes { background: #1a3a1a; color: #7dbd7d; }

body.page-11 .no { background: #3a1a1a; color: #bd7d7d; }

/* SECTION */
body.page-11 .section {
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
  }

body.page-11 .section-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
  }

body.page-11 .section-num {
    font-family: 'Amiri', serif;
    font-size: 72px;
    color: #2e7d32;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
  }

body.page-11 .section-title h2 {
    font-family: 'Amiri', serif;
    font-size: 28px;
    color: var(--slate);
    margin-bottom: 6px;
    line-height: 1.4;
  }

body.page-11 .section-title p {
    font-size: 13px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

body.page-11 p.body-text {
    margin-bottom: 18px;
    color: #2a2a2a;
  }

/* CALLOUT */
body.page-11 .callout {
    border-right: 4px solid var(--gold);
    background: var(--highlight);
    padding: 20px 25px;
    margin: 30px 0;
    font-family: 'Amiri', serif;
    font-size: 20px;
    line-height: 1.8;
    color: var(--slate);
  }

/* INFO BOX */
body.page-11 .info-box {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 25px 30px;
    margin: 25px 0;
    border-radius: 2px;
  }

body.page-11 .info-box h4 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

body.page-11 .info-box p { font-size: 15px; margin-bottom: 10px; }

body.page-11 .info-box p:last-child { margin-bottom: 0; }

/* LADDER */
body.page-11 .ladder {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    margin: 30px 0;
    align-items: stretch;
  }

body.page-11 .ladder-col { display: flex; flex-direction: column; gap: 2px; }

body.page-11 .ladder-col h3 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 20px;
    text-align: center;
    font-weight: 700;
  }

body.page-11 .ladder-col.us h3 { background: var(--slate); color: #eee; }

body.page-11 .ladder-col.iran h3 { background: var(--rust); color: #eee; }

body.page-11 .ladder-step {
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
  }

body.page-11 .ladder-col.us .ladder-step { background: rgba(44,62,80,0.07); }

body.page-11 .ladder-col.iran .ladder-step { background: rgba(139,37,0,0.07); }

body.page-11 .ladder-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

body.page-11 .ladder-col.us .ladder-step-num { background: var(--slate); color: #fff; }

body.page-11 .ladder-col.iran .ladder-step-num { background: var(--rust); color: #fff; }

body.page-11 .ladder-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    gap: 2px;
  }

body.page-11 .arrow-up {
    width: 2px;
    flex: 1;
    background: repeating-linear-gradient(
      to top, var(--gold) 0px, var(--gold) 8px, transparent 8px, transparent 14px
    );
    position: relative;
  }

body.page-11 .arrow-up::before {
    content: '▲';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-size: 12px;
  }

/* PLAYERS GRID */
body.page-11 .players-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 30px 0;
  }

body.page-11 .player-card {
    background: var(--paper);
    padding: 30px;
  }

body.page-11 .player-name {
    font-family: 'Amiri', serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
  }

body.page-11 .player-card:nth-child(1) .player-name { color: var(--slate); }

body.page-11 .player-card:nth-child(2) .player-name { color: var(--rust); }

body.page-11 .player-card:nth-child(3) .player-name { color: var(--gold); }

body.page-11 .player-card:nth-child(4) .player-name { color: #1a5c1a; }

body.page-11 .player-goal {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 15px;
  }

body.page-11 .player-card ul { list-style: none; }

body.page-11 .player-card ul li {
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cream);
    color: #3a3a3a;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
  }

body.page-11 .player-card ul li::before {
    content: '—';
    color: var(--border);
    flex-shrink: 0;
    font-size: 12px;
    margin-top: 2px;
  }

/* KEY PRINCIPLE */
body.page-11 .principle {
    background: var(--slate);
    color: #f5f0e8;
    padding: 45px;
    margin: 40px 0;
    text-align: center;
    position: relative;
  }

body.page-11 .principle::before, body.page-11 .principle::after {
    content: '"';
    font-family: 'Amiri', serif;
    font-size: 120px;
    color: rgba(255,255,255,0.05);
    position: absolute;
    line-height: 1;
  }

body.page-11 .principle::before { top: 10px; right: 20px; }

body.page-11 .principle::after { bottom: -20px; left: 20px; transform: scaleX(-1); }

body.page-11 .principle p {
    font-family: 'Amiri', serif;
    font-size: 26px;
    line-height: 1.7;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
  }

body.page-11 .principle .source {
    font-size: 13px;
    color: var(--gold-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }

/* PREDICTIONS */
body.page-11 .predictions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 30px 0;
  }

body.page-11 .pred-card {
    background: var(--paper);
    padding: 30px 20px;
    text-align: center;
  }

body.page-11 .pred-num { font-family: 'Amiri', serif; font-size: 40px; color: #2e7d32; line-height: 1; margin-bottom: 12px; }

body.page-11 .pred-q { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 15px; }

body.page-11 .pred-a { font-size: 28px; font-family: 'Amiri', serif; font-weight: 700; }

body.page-11 .pred-a.yes-a { color: #2e6b2e; }

body.page-11 .pred-a.no-a { color: var(--rust); }

body.page-11 .pred-a.tbd { color: var(--gold); }

body.page-11 .pred-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* FACTORS */
body.page-11 .factors-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 25px 0;
  }

body.page-11 .factor {
    background: var(--paper);
    padding: 25px 20px;
    text-align: center;
  }

body.page-11 .factor-icon { font-size: 28px; margin-bottom: 12px; }

body.page-11 .factor h4 { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 8px; }

body.page-11 .factor p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* COMPARISON TABLE */
body.page-11 .compare-table { width: 100%; border-collapse: collapse; margin: 25px 0; }

body.page-11 .compare-table th {
    background: var(--slate);
    color: #eee;
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: right;
  }

body.page-11 .compare-table th:first-child { background: var(--paper); color: var(--muted); }

body.page-11 .compare-table th.iran-th { background: var(--rust); }

body.page-11 .compare-table td {
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--cream);
    vertical-align: top;
    line-height: 1.7;
  }

body.page-11 .compare-table tr:nth-child(even) td { background: var(--highlight); }

body.page-11 .compare-table td:first-child { font-weight: 700; color: var(--muted); font-size: 13px; }

/* COST PYRAMID */
body.page-11 .pyramid-wrap {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 35px;
    margin: 25px 0;
    text-align: center;
  }

body.page-11 .pyramid-title { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; }

body.page-11 .pyramid { display: flex; flex-direction: column; align-items: center; gap: 3px; }

body.page-11 .p-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

body.page-11 .p1 { width: 100%; background: #1a3a5c; border-radius: 2px 2px 0 0; }

body.page-11 .p2 { width: 82%; background: #2c5282; }

body.page-11 .p3 { width: 64%; background: #2b6cb0; }

body.page-11 .p4 { width: 46%; background: var(--gold); color: var(--ink); border-radius: 0 0 2px 2px; }

body.page-11 .pyramid-note { margin-top: 15px; font-size: 13px; color: var(--muted); }

/* FOOTER */
body.page-11 footer {
    background: var(--ink);
    color: #666;
    text-align: center;
    padding: 30px;
    font-size: 13px;
    margin-top: 80px;
  }

/* SUMMARY BOX */
body.page-11 .summary {
    background: var(--ink);
    color: #eee;
    padding: 40px;
    margin: 50px 0;
    border-radius: 2px;
  }

body.page-11 .summary h3 {
    font-family: 'Amiri', serif;
    font-size: 22px;
    color: var(--gold-light);
    margin-bottom: 20px;
  }

body.page-11 .summary-items { display: flex; flex-direction: column; gap: 12px; }

body.page-11 .s-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
  }

body.page-11 .s-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

body.page-11 .s-badge.y { background: #1a3a1a; color: #7dbd7d; }

body.page-11 .s-badge.n { background: #3a1a1a; color: #bd7d7d; }

body.page-11 .s-badge.t { background: #3a3200; color: #d4a017; }

body.page-11 .s-item p { font-size: 14px; line-height: 1.7; }

@media (max-width: 700px) {
  body.page-11 .three-q, body.page-11 .predictions { grid-template-columns: 1fr; }
  body.page-11 .players-grid, body.page-11 .factors-row { grid-template-columns: 1fr; }
  body.page-11 .ladder { grid-template-columns: 1fr; }
  body.page-11 .ladder-mid { display: none; }
  body.page-11 .objectives ul { grid-template-columns: 1fr; }
  body.page-11 .objectives { padding: 25px; }
}

/* TRANSCRIPT MODAL */
body.page-11 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-11 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-11 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-11 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-11 .modal-overlay.active { display: flex; }

body.page-11 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-11 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-11 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-11 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-11 .modal-close:hover { color: #fff; }

body.page-11 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-11 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-11 .modal-tab:hover { color: #ccc; }

body.page-11 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-11 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-11 .modal-body .transcript-panel { display: none; }

body.page-11 .modal-body .transcript-panel.active { display: block; }

body.page-11 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-11 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-11 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-11 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-11 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-11 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-11 .modal-body { padding: 20px; }
  body.page-11 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-11 .transcript-btn span { display: none; }
}


/* ═══════════════════ 12- lesson-game-theory-eschatology.html ═══════════════════ */

body.page-12 {
    --ink:      #0e0e0e;
    --paper:    #f5f1e9;
    --cream:    #eae1cc;
    --gold:     #9a7b1a;
    --gold-lt:  #c9a227;
    --rust:     #7a2200;
    --slate:    #1e2d3d;
    --charcoal: #141414;
    --deep:     #08080f;
    --mystic:   #120820;
    --sacred:   #1a0e00;
    --prophecy: #001a0a;
    --muted:    #6a6050;
    --border:   #cbbfa6;
    --hl:       #fdf7e4;
  }

body.page-12 {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    line-height: 1.9;
    direction: rtl;
  }

/* ─── HEADER ─── */
body.page-12 header {
    background: var(--mystic);
    color: #f0eae8;
    padding: 65px 0 55px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

body.page-12 header::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(160,120,40,0.08) 0%, transparent 70%),
      repeating-linear-gradient(-45deg, transparent, transparent 70px, rgba(255,255,255,0.009) 70px, rgba(255,255,255,0.009) 71px);
    pointer-events: none;
  }

body.page-12 .h-label {
    font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold-lt); font-weight: 600; margin-bottom: 16px;
    position: relative; z-index: 1;
  }

body.page-12 header h1 {
    font-family: 'Amiri', serif;
    font-size: clamp(24px, 4.5vw, 42px);
    line-height: 1.5; max-width: 820px;
    margin: 0 auto 16px; position: relative; z-index: 1;
    letter-spacing: 0.3px;
  }

body.page-12 header .sub {
    color: #988; font-size: 15px; font-weight: 300;
    max-width: 640px; margin: 0 auto; position: relative; z-index: 1;
  }

body.page-12 .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* ─── OBJECTIVES ─── */
body.page-12 .objectives {
    background: var(--deep); color: #f0eae8;
    padding: 38px 42px; margin: 48px auto; max-width: 900px;
    border-right: 5px solid var(--gold-lt);
  }

body.page-12 .objectives h2 { font-family:'Amiri',serif; font-size:21px; color:var(--gold-lt); margin-bottom:18px; }

body.page-12 .objectives ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }

body.page-12 .objectives ul li { font-size:14.5px; line-height:1.65; display:flex; gap:9px; align-items:flex-start; }

body.page-12 .objectives ul li::before { content:'◆'; color:var(--gold-lt); font-size:8px; flex-shrink:0; margin-top:7px; }

/* ─── SECTION ─── */
body.page-12 .sec { padding:48px 0; border-bottom:1px solid var(--border); }

body.page-12 .sec:last-of-type { border-bottom:none; }

body.page-12 .sec-hd { display:flex; align-items:flex-start; gap:18px; margin-bottom:28px; }

body.page-12 .sec-n { font-family:'Amiri',serif; font-size:68px; color:#2e7d32; line-height:1; flex-shrink:0; font-weight:700; user-select:none; }

body.page-12 .sec-t h2 { font-family:'Amiri',serif; font-size:25px; color:var(--slate); margin-bottom:5px; line-height:1.4; }

body.page-12 .sec-t p { font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:2px; }

body.page-12 .body { margin-bottom:17px; color:#252525; }

body.page-12 .callout {
    border-right:4px solid var(--gold); background:var(--hl);
    padding:18px 22px; margin:28px 0;
    font-family:'Amiri',serif; font-size:19.5px; line-height:1.8; color:var(--slate);
  }

body.page-12 .ibox {
    background:var(--cream); border:1px solid var(--border);
    padding:22px 28px; margin:22px 0;
  }

body.page-12 .ibox h4 { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--rust); margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--border); }

body.page-12 .ibox p { font-size:14.5px; margin-bottom:9px; line-height:1.75; }

body.page-12 .ibox p:last-child { margin-bottom:0; }

body.page-12 .principle {
    background:var(--slate); color:#f5f1e9;
    padding:42px; margin:36px 0; text-align:center; position:relative; overflow:hidden;
  }

body.page-12 .principle::before, body.page-12 .principle::after { content:'"'; font-family:'Amiri',serif; font-size:110px; color:rgba(255,255,255,0.04); position:absolute; line-height:1; user-select:none; }

body.page-12 .principle::before { top:6px; right:18px; }

body.page-12 .principle::after { bottom:-22px; left:18px; transform:scaleX(-1); }

body.page-12 .principle p { font-family:'Amiri',serif; font-size:22px; line-height:1.75; margin-bottom:12px; position:relative; z-index:1; }

body.page-12 .principle .src { font-size:12px; color:var(--gold-lt); letter-spacing:2.5px; text-transform:uppercase; position:relative; z-index:1; }

/* ─── PREDICTIONS ─── */
body.page-12 .preds {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:2px; background:var(--border); border:1px solid var(--border); margin:28px 0;
  }

body.page-12 .pred-card { background:var(--paper); padding:24px 18px; }

body.page-12 .pred-n { font-family:'Amiri',serif; font-size:48px; color:#2e7d32; line-height:1; margin-bottom:6px; }

body.page-12 .pred-card h3 { font-size:15px; font-weight:700; color:var(--slate); margin-bottom:8px; }

body.page-12 .pred-card p { font-size:13px; color:var(--muted); line-height:1.65; }

body.page-12 .pred-tag {
    display:inline-block; font-size:10px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:3px 9px; margin-bottom:10px; border:1px solid var(--border);
    background:var(--cream); color:var(--muted);
  }

/* ─── FORMULA ─── */
body.page-12 .formula-box {
    background:var(--deep); color:#eee;
    padding:38px; margin:28px 0; text-align:center;
  }

body.page-12 .formula-box h3 { font-family:'Amiri',serif; font-size:20px; color:var(--gold-lt); margin-bottom:22px; }

body.page-12 .formula {
    display:flex; align-items:center; justify-content:center;
    gap:14px; flex-wrap:wrap; margin-bottom:20px;
  }

body.page-12 .f-term {
    background:rgba(255,255,255,0.07); padding:14px 22px; text-align:center;
  }

body.page-12 .f-term .fn { font-family:'Amiri',serif; font-size:26px; color:var(--gold-lt); line-height:1; }

body.page-12 .f-term .fl { font-size:12px; color:#aaa; margin-top:4px; }

body.page-12 .f-op { font-size:26px; color:rgba(201,162,39,0.5); font-weight:300; }

body.page-12 .f-note {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px;
    background:rgba(255,255,255,0.06); margin-top:14px;
  }

body.page-12 .fn-item { background:rgba(255,255,255,0.04); padding:12px 14px; text-align:center; }

body.page-12 .fn-item h4 { font-size:12px; font-weight:700; color:var(--gold-lt); margin-bottom:5px; }

body.page-12 .fn-item p { font-size:12px; color:#bbb; line-height:1.55; }

/* ─── NARRATIVE LADDER ─── */
body.page-12 .ladder { margin:28px 0; display:flex; flex-direction:column; gap:2px; }

body.page-12 .rung {
    display:grid; grid-template-columns:80px 1fr; background:var(--border);
  }

body.page-12 .rung-n {
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; padding:14px 8px; text-align:center; line-height:1.4;
  }

body.page-12 .rn1 { background:#1a1a3a; color:#99b; }

body.page-12 .rn2 { background:#2a1a0a; color:#ca8; }

body.page-12 .rn3 { background:#1a0a2a; color:#b9a; }

body.page-12 .rng-body { background:var(--paper); padding:14px 20px; }

body.page-12 .rng-body h4 { font-size:14.5px; font-weight:700; color:var(--slate); margin-bottom:5px; }

body.page-12 .rng-body p { font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ─── ESCHA CARDS ─── */
body.page-12 .escha-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:2px;
    background:var(--border); border:1px solid var(--border); margin:28px 0;
  }

body.page-12 .escha-card { background:var(--paper); padding:22px 20px; }

body.page-12 .escha-badge {
    display:inline-block; font-size:10px; font-weight:700;
    letter-spacing:2px; text-transform:uppercase;
    padding:4px 11px; margin-bottom:12px;
  }

body.page-12 .eb-z { background:#e8e0d0; color:#6b5a00; }

body.page-12 .eb-j { background:#e8d8d8; color:#6b0000; }

body.page-12 .eb-c { background:#d8e0e8; color:#003060; }

body.page-12 .eb-i { background:#d8e8d8; color:#005020; }

body.page-12 .eb-s { background:#e8d8d0; color:#502000; }

body.page-12 .eb-k { background:#d8d8e8; color:#200060; }

body.page-12 .eb-o { background:#e8e0e8; color:#500050; }

body.page-12 .escha-card h3 { font-family:'Amiri',serif; font-size:18px; color:var(--slate); margin-bottom:10px; }

body.page-12 .escha-item {
    font-size:13px; line-height:1.65; color:var(--muted);
    padding:8px 12px; background:var(--cream); margin-bottom:6px;
    border-right:3px solid var(--border);
    display:flex; gap:8px; align-items:flex-start;
  }

body.page-12 .escha-item::before { content:'›'; font-weight:700; flex-shrink:0; color:var(--gold); }

body.page-12 .escha-key {
    margin-top:10px; padding:9px 12px;
    background:rgba(0,0,0,0.04); border:1px solid var(--border);
    font-size:12.5px; color:var(--rust); font-weight:600; line-height:1.6;
  }

/* ─── EXTREMISM BOX ─── */
body.page-12 .extreme {
    background:var(--sacred); color:#eee;
    padding:34px 38px; margin:28px 0;
  }

body.page-12 .extreme h3 { font-family:'Amiri',serif; font-size:20px; color:var(--gold-lt); margin-bottom:16px; }

body.page-12 .ext-cols { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(255,255,255,0.08); margin-bottom:14px; }

body.page-12 .ext-col { background:rgba(255,255,255,0.05); padding:15px 18px; }

body.page-12 .ext-col h4 { font-size:13px; font-weight:700; color:var(--gold-lt); margin-bottom:8px; }

body.page-12 .ext-col p { font-size:13.5px; color:#ccc; line-height:1.7; }

body.page-12 .ext-note {
    padding:13px 16px; background:rgba(201,162,39,0.1); border-right:3px solid var(--gold-lt);
    font-size:14px; color:#ddd; line-height:1.75; font-family:'Amiri',serif;
  }

/* ─── CONVERGENCE TABLE ─── */
body.page-12 .conv-wrap { margin:28px 0; overflow-x:auto; }

body.page-12 .conv-table { width:100%; border-collapse:collapse; }

body.page-12 .conv-table th {
    padding:12px 16px; font-size:12px; letter-spacing:1.5px;
    text-transform:uppercase; font-weight:700; text-align:right;
  }

body.page-12 .th-pt { background:var(--mystic); color:#eee; }

body.page-12 .th-j { background:#3a0000; color:#fcc; }

body.page-12 .th-c { background:#00204a; color:#cdf; }

body.page-12 .th-i { background:#003020; color:#cfd; }

body.page-12 .th-r { background:#200030; color:#dcf; }

body.page-12 .conv-table td {
    padding:11px 16px; font-size:13.5px;
    border-bottom:1px solid var(--cream); line-height:1.65; vertical-align:top;
  }

body.page-12 .conv-table tr:nth-child(even) td { background:var(--hl); }

body.page-12 .conv-table td:first-child { font-weight:700; color:var(--slate); background:var(--cream) !important; font-size:13px; }

body.page-12 .agree { color:#1a5c1a; font-weight:600; font-size:12.5px; }

body.page-12 .neutral { color:#5c5c1a; font-weight:600; font-size:12.5px; }

body.page-12 .disagree { color:#5c1a1a; font-size:12.5px; }

/* ─── PREDICTIONS FINAL ─── */
body.page-12 .final-preds {
    background:var(--prophecy); color:#eee;
    padding:36px 40px; margin:28px 0;
  }

body.page-12 .final-preds h3 { font-family:'Amiri',serif; font-size:21px; color:var(--gold-lt); margin-bottom:18px; }

body.page-12 .fp-items { display:flex; flex-direction:column; gap:9px; }

body.page-12 .fp-item {
    display:flex; gap:14px; align-items:flex-start;
    padding:13px 16px; background:rgba(255,255,255,0.05);
  }

body.page-12 .fp-n {
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; background:rgba(201,162,39,0.2); color:var(--gold-lt);
  }

body.page-12 .fp-item p { font-size:13.5px; line-height:1.75; }

/* ─── TRAP BOX ─── */
body.page-12 .trap {
    background:var(--charcoal); color:#eee;
    padding:34px 38px; margin:28px 0;
  }

body.page-12 .trap h3 { font-family:'Amiri',serif; font-size:20px; color:var(--gold-lt); margin-bottom:16px; }

body.page-12 .trap-cols { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(255,255,255,0.08); margin-bottom:14px; }

body.page-12 .trap-col { background:rgba(255,255,255,0.05); padding:16px 18px; }

body.page-12 .trap-col h4 { font-size:13px; font-weight:700; margin-bottom:8px; }

body.page-12 .trap-col.stay h4 { color:#e88; }

body.page-12 .trap-col.go   h4 { color:#8e8; }

body.page-12 .trap-col p { font-size:13.5px; color:#ccc; line-height:1.7; }

body.page-12 .trap-note {
    padding:13px 16px; background:rgba(180,0,0,0.15);
    border-right:3px solid #c44;
    font-size:14.5px; font-family:'Amiri',serif; color:#ddd; line-height:1.7;
  }

/* ─── SUMMARY ─── */
body.page-12 .summary { background:var(--ink); color:#eee; padding:38px; margin:48px 0; }

body.page-12 .summary h3 { font-family:'Amiri',serif; font-size:21px; color:var(--gold-lt); margin-bottom:18px; }

body.page-12 .s-items { display:flex; flex-direction:column; gap:10px; }

body.page-12 .s-item {
    display:flex; align-items:flex-start; gap:14px;
    padding:13px; background:rgba(255,255,255,0.05);
  }

body.page-12 .s-badge { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

body.page-12 .bg { background:#1a3a1a; color:#7dbd7d; }

body.page-12 .br { background:#3a1a1a; color:#bd7d7d; }

body.page-12 .by { background:#332e00; color:#d4a017; }

body.page-12 .s-item p { font-size:14px; line-height:1.75; }

body.page-12 footer { background:var(--ink); color:#555; text-align:center; padding:24px; font-size:12.5px; }

@media (max-width:680px) {
  body.page-12 .preds, body.page-12 .escha-grid, body.page-12 .trap-cols, body.page-12 .ext-cols, body.page-12 .f-note { grid-template-columns:1fr; }
  body.page-12 .rung { grid-template-columns:65px 1fr; }
  body.page-12 .objectives ul { grid-template-columns:1fr; }
  body.page-12 .objectives { padding:26px 22px; }
  body.page-12 .formula { gap:8px; }
  body.page-12 .conv-table { font-size:12px; }
}

/* TRANSCRIPT MODAL */
body.page-12 .transcript-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9998;
    background: var(--forest);
    color: var(--gold-light);
    border: 2px solid var(--gold);
    padding: 14px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
  }

body.page-12 .transcript-btn:hover {
    background: var(--gold);
    color: var(--forest);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.4);
  }

body.page-12 .transcript-btn svg { width: 20px; height: 20px; fill: currentColor; }

body.page-12 .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

body.page-12 .modal-overlay.active { display: flex; }

body.page-12 .modal-box {
    background: var(--paper);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

body.page-12 .modal-header {
    background: var(--forest);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-shrink: 0;
  }

body.page-12 .modal-header h3 {
    font-family: 'Amiri', serif;
    color: var(--gold-light);
    font-size: 20px;
    margin: 0;
  }

body.page-12 .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
  }

body.page-12 .modal-close:hover { color: #fff; }

body.page-12 .modal-tabs {
    display: flex;
    background: var(--slate);
    flex-shrink: 0;
  }

body.page-12 .modal-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
  }

body.page-12 .modal-tab:hover { color: #ccc; }

body.page-12 .modal-tab.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,0.05);
  }

body.page-12 .modal-body {
    overflow-y: auto;
    padding: 35px 40px;
    flex: 1;
  }

body.page-12 .modal-body .transcript-panel { display: none; }

body.page-12 .modal-body .transcript-panel.active { display: block; }

body.page-12 .modal-body[dir="ltr"] { direction: ltr; text-align: left; }

body.page-12 .modal-body[dir="rtl"] { direction: rtl; text-align: right; }

body.page-12 .transcript-h2 {
    font-family: 'Amiri', serif;
    font-size: 26px;
    color: var(--forest);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }

body.page-12 .transcript-h3 {
    font-family: 'Amiri', serif;
    font-size: 20px;
    color: var(--slate);
    margin: 25px 0 15px;
  }

body.page-12 .transcript-h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rust);
    margin: 20px 0 10px;
  }

body.page-12 .transcript-p {
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 14px;
  }

@media (max-width: 600px) {
  body.page-12 .modal-body { padding: 20px; }
  body.page-12 .transcript-btn { bottom: 20px; left: 20px; padding: 12px 18px; font-size: 13px; }
  body.page-12 .transcript-btn span { display: none; }
}