/* ══════════════════════════════════════════════════════════════
   THE GILGAMESH PROTOCOL — 3D Game Styles (Arabic / RTL)
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
  --gold: #c9a84c;
  --gold-dim: #8b6b35;
  --gold-bright: #e8b830;
  --gold-glow: rgba(201,168,76,0.3);
  --red: #e94560;
  --red-dim: #7a1829;
  --green: #00ff88;
  --green-dim: #005c38;
  --bg: #050508;
  --bg2: #0a0a0f;
  --bg3: #161622;
  --bg4: #1c1c2e;
  --text: #e0e1dd;
  --text-dim: #83877f;
  --glass: rgba(10,10,20,0.85);
  --glass-border: rgba(201,168,76,0.15);
  --glass-light: rgba(255,255,255,0.04);
  --font-display: 'Amiri', serif;
  --font-body: 'Noto Naskh Arabic', sans-serif;
  --font-mono: monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; font-family:var(--font-body); color:var(--text); background:var(--bg); touch-action:none; }

/* ── Canvas ────────────────────────────────────────────────── */
#game-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:0;
  display:block; outline:none;
}

/* ── Overlays Base ─────────────────────────────────────────── */
.overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  z-index:100; background:rgba(0,0,0,0.8);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.game-overlay { z-index:90; background:rgba(0,0,0,0.7); }

/* ── Title Screen ──────────────────────────────────────────── */
.title-content {
  text-align:center; max-width:600px; padding:40px;
  animation: fadeInUp 1s ease-out;
}
.title-cuneiform {
  font-size:3rem; color:var(--gold-dim); margin-bottom:16px;
  text-shadow:0 0 30px var(--gold-glow); letter-spacing:12px;
  animation: pulse-glow 3s ease-in-out infinite;
}
.title-main {
  font-family:var(--font-display); font-size:3.5rem; font-weight:700;
  color:var(--gold); margin-bottom:8px;
  text-shadow:0 0 40px var(--gold-glow);
}
.title-sub {
  font-size:1.4rem; color:var(--gold-dim); letter-spacing:6px; margin-bottom:24px; font-family: 'Cinzel', serif;
}
.title-divider {
  width:120px; height:2px; margin:0 auto 24px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.title-desc {
  font-size:1.1rem; color:var(--text-dim); line-height:1.6; margin-bottom:40px;
}
.title-controls-hint {
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  font-size:0.85rem; color:var(--text-dim); margin-top:24px;
}
.title-controls-hint div { display:flex; align-items:center; gap:6px; }
kbd {
  display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.8rem;
  background:var(--bg3); border:1px solid var(--glass-border);
  color:var(--gold); font-family:var(--font-mono); font-weight:700;
  direction: ltr; unicode-bidi: embed;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; border:none; border-radius:8px; cursor:pointer;
  font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  color:var(--bg); background:linear-gradient(135deg,var(--gold-dim),var(--gold));
  box-shadow:0 0 30px var(--gold-glow); transition:all 0.3s ease;
}
.btn-primary:hover {
  transform:translateY(-2px); box-shadow:0 0 50px var(--gold-glow);
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border:1px solid var(--gold-dim); border-radius:8px;
  cursor:pointer; font-family:var(--font-body); font-size:0.9rem;
  font-weight:600; color:var(--gold); background:transparent; transition:all 0.3s ease;
}
.btn-ghost:hover { background:rgba(201,168,76,0.1); border-color:var(--gold); }
.btn-close {
  width:36px; height:36px; border:1px solid var(--glass-border); border-radius:50%;
  background:transparent; color:var(--text-dim); cursor:pointer;
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; flex-shrink:0;
}
.btn-close:hover { background:var(--red-dim); color:var(--red); border-color:var(--red); }
.btn-tool {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border:1px solid var(--glass-border); border-radius:8px;
  background:var(--glass-light); color:var(--text-dim); cursor:pointer;
  font-size:0.85rem; font-weight:600; transition:all 0.2s;
  font-family: var(--font-body);
}
.btn-tool:hover { background:rgba(201,168,76,0.1); color:var(--gold); border-color:var(--gold-dim); }
.btn-tool.active { background:rgba(201,168,76,0.15); color:var(--gold); border-color:var(--gold); }

/* ── Blocker ───────────────────────────────────────────────── */
.blocker-content { text-align:center; }
.blocker-content h2 {
  font-family:var(--font-display); font-size:2rem; color:var(--gold); margin-bottom:12px;
}
.blocker-content p { color:var(--text-dim); font-size:1.1rem; }

/* ── Mobile Controls ───────────────────────────────────────── */
#mobile-controls {
  position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:40;
}
#joystick-zone {
  position:absolute; bottom:20px; right:20px; width:150px; height:150px; pointer-events:auto;
}
#mobile-look-zone {
  position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:auto; z-index:-1;
}
.mobile-btn {
  position:absolute; width:56px; height:56px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px); pointer-events:auto;
}
.mobile-btn:active { background:rgba(201,168,76,0.2); border-color:var(--gold); }
.interact-btn { bottom:40px; left:40px; width:64px; height:64px; background:rgba(201,168,76,0.2); border-color:var(--gold); }
.inventory-btn { top:20px; left:20px; }
.board-btn { top:20px; left:90px; }

@media (pointer: coarse) {
  .pc-only { display:none !important; }
  .mobile-only { display:flex !important; }
}
@media (pointer: fine) {
  #mobile-controls { display:none !important; }
}

/* ── Intro ─────────────────────────────────────────────────── */
.intro-content { max-width:700px; text-align:center; padding:40px; }
.intro-text {
  font-size:1.2rem; color:var(--text); line-height:2; min-height:200px;
  margin-bottom:30px; font-family: var(--font-display);
}
.intro-text .intro-line {
  opacity:0; animation:fadeInUp 0.8s ease-out forwards;
  margin-bottom:12px;
}

/* ── HUD ───────────────────────────────────────────────────── */
#hud { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50; }
#hud > * { pointer-events:auto; }

/* Crosshair */
#crosshair {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.crosshair-dot {
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,0.7); position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.crosshair-ring {
  width:24px; height:24px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.25);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  transition:all 0.2s ease;
}
#crosshair.active .crosshair-ring {
  width:32px; height:32px;
  border-color:var(--gold); box-shadow:0 0 12px var(--gold-glow);
}
#crosshair.active .crosshair-dot { background:var(--gold); box-shadow:0 0 6px var(--gold); }

/* Interact Prompt */
.hud-prompt {
  position:absolute; bottom:25%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; border-radius:8px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); font-size:1rem; color:var(--text);
  animation:fadeInUp 0.3s ease-out;
}
.hud-prompt kbd { font-size:0.9rem; padding:4px 10px; }

/* Location Name */
.hud-location {
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  padding:8px 24px; border-radius:20px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  color:var(--gold); pointer-events:none; transition:opacity 0.5s;
}

/* Evidence Counter */
.hud-counter {
  position:absolute; top:20px; left:20px; /* changed from right to left for RTL */
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:8px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); font-family:var(--font-mono);
  font-size:0.9rem; color:var(--gold); pointer-events:none;
}
.hud-counter svg { color:var(--gold-dim); }

/* Compass */
#compass {
  position:absolute; bottom:20px; left:20px; /* RTL */
  width:50px; height:50px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
#compass-needle {
  font-family:var(--font-display); font-size:0.9rem; font-weight:700;
  color:var(--gold); transition:transform 0.1s;
}

/* Notification */
#notification-area { position:absolute; top:70px; left:20px; width:320px; pointer-events:none; } /* RTL */
.game-notification {
  padding:12px 18px; margin-bottom:8px; border-radius:10px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); pointer-events:auto;
  animation:slideInLeft 0.4s ease-out, fadeOut 0.5s ease-in 3.5s forwards; /* slideInLeft for RTL */
}
.game-notification h4 {
  font-family:var(--font-display); font-size:1rem; color:var(--gold);
  margin-bottom:4px;
}
.game-notification p { font-size:0.85rem; color:var(--text-dim); line-height:1.4; }
.game-notification.breakthrough { border-color:rgba(0,255,136,0.3); }
.game-notification.breakthrough h4 { color:var(--green); }

/* ── Glass Panel ───────────────────────────────────────────── */
.panel-glass {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:16px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 25px 50px rgba(0,0,0,0.5), 0 0 40px var(--gold-glow);
  overflow:hidden; animation:scaleIn 0.3s ease-out;
}
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--glass-border);
}
.panel-header h2 {
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  color:var(--gold);
}
.panel-header-actions { display:flex; align-items:center; gap:12px; }
.badge-gold {
  padding:4px 12px; border-radius:20px; font-size:0.8rem; font-weight:700;
  color:var(--gold); background:rgba(201,168,76,0.1); border:1px solid var(--gold-dim);
}

/* ── Inventory ─────────────────────────────────────────────── */
.inventory-panel { width:90%; max-width:800px; max-height:80vh; }
.inventory-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px; padding:20px 24px; overflow-y:auto; max-height:60vh;
}
.inv-card {
  background:var(--glass-light); border:1px solid var(--glass-border);
  border-radius:10px; overflow:hidden; cursor:pointer;
  transition:all 0.2s; position:relative;
}
.inv-card:hover { border-color:var(--gold-dim); transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.inv-card img { width:100%; height:100px; object-fit:cover; }
.inv-card-placeholder {
  width:100%; height:100px; display:flex; align-items:center; justify-content:center;
  background:var(--bg3); color:var(--text-dim);
}
.inv-card-info { padding:8px 10px; }
.inv-card-tag {
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700;
  color:var(--gold-dim);
}
.inv-card-name { font-size:0.85rem; font-weight:600; color:var(--text); margin-top:2px; }
.inv-card.new::after {
  content:'جديد'; position:absolute; top:6px; left:6px; /* RTL */
  padding:2px 6px; border-radius:4px; font-size:0.65rem; font-weight:800;
  background:var(--red); color:white;
}
.inv-card-empty {
  border-style:dashed; opacity:0.3; pointer-events:none;
}
.inv-card-empty .inv-card-placeholder { font-size:1.5rem; }

/* ── Evidence Board ────────────────────────────────────────── */
.board-panel { width:95%; max-width:1200px; height:85vh; display:flex; flex-direction:column; }
.board-layout { flex:1; display:grid; grid-template-columns:250px 1fr; gap:0; overflow:hidden; } /* RTL sidebar on right */
.board-cork {
  position:relative; overflow:hidden;
  background:#9a7b45;
  background-image:
    radial-gradient(ellipse at 20% 50%,rgba(139,107,53,0.6) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(164,133,72,0.4) 0%,transparent 40%),
    radial-gradient(ellipse at 50% 80%,rgba(120,90,40,0.5) 0%,transparent 45%);
  box-shadow:inset 0 0 60px rgba(0,0,0,0.4);
}
#board-strings-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.board-card {
  position:absolute; width:160px; cursor:grab; user-select:none; z-index:5;
  transition:box-shadow 0.2s;
}
.board-card:hover { z-index:10; box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.board-card.dragging { cursor:grabbing; z-index:20; box-shadow:0 16px 40px rgba(0,0,0,0.5); }
.board-card.selected { outline:2px solid var(--gold); outline-offset:2px; }
.board-card-pin {
  width:16px; height:16px; border-radius:50%; margin:0 auto -6px;
  background:radial-gradient(circle at 35% 35%,#ff6b6b,#c9223d 70%,#7a1829);
  box-shadow:0 2px 4px rgba(0,0,0,0.4); position:relative; z-index:6;
}
.board-card-body {
  background:#f5f0e6; border-radius:4px; overflow:hidden;
  box-shadow:2px 3px 8px rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.08);
}
.board-card-body img { width:100%; height:90px; object-fit:cover; }
.board-card-label { padding:6px 8px; }
.board-card-label small {
  font-family:var(--font-mono); font-size:0.65rem; color:#8b6b35;
  font-weight:700;
}
.board-card-label p { font-size:0.8rem; font-weight:600; color:#2c2418; margin-top:2px; }
.board-card.connected { outline:2px solid var(--green); outline-offset:2px; }
.board-sidebar {
  padding:16px; border-left:1px solid var(--glass-border);
  background:var(--bg3); overflow-y:auto;
}
.board-sidebar h3 {
  font-family:var(--font-display); font-size:1.1rem; color:var(--gold);
  margin-bottom:12px;
}
.board-suspect {
  display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:8px; cursor:pointer; margin-bottom:6px;
  transition:background 0.2s; border:1px solid transparent;
}
.board-suspect:hover { background:var(--glass-light); border-color:var(--glass-border); }
.board-suspect img { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.board-suspect-name { font-size:0.9rem; font-weight:600; }
.board-suspect-role { font-size:0.75rem; color:var(--text-dim); }
.board-toolbar {
  display:flex; gap:8px; padding:12px 16px;
  border-top:1px solid var(--glass-border); background:var(--bg2);
}

/* ── Examine Modal ─────────────────────────────────────────── */
.examine-panel { width:90%; max-width:700px; }
.examine-layout { display:grid; grid-template-columns:1fr 1fr; }
.examine-image-wrap { overflow:hidden; }
.examine-image-wrap img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.examine-info { padding:24px; display:flex; flex-direction:column; }
.examine-tag {
  font-family:var(--font-mono); font-size:0.8rem; font-weight:700;
  color:var(--gold); margin-bottom:8px;
}
.examine-info h2 {
  font-family:var(--font-display); font-size:1.6rem; color:var(--text);
  margin-bottom:12px;
}
.examine-info p { font-size:0.95rem; color:var(--text-dim); line-height:1.6; flex:1; }
.examine-notes {
  margin-top:16px; padding:12px; border-radius:8px;
  background:rgba(201,168,76,0.05); border:1px solid var(--glass-border);
}
.examine-notes h4 { font-size:0.9rem; color:var(--gold); margin-bottom:6px; }
.examine-notes p { font-size:0.85rem; color:var(--gold-dim); white-space:pre-line; line-height: 1.5; }
.btn-collect { margin-top:16px; width:100%; justify-content:center; }

/* ── Dialogue ──────────────────────────────────────────────── */
.dialogue-panel { width:90%; max-width:600px; padding:24px; }
.dialogue-character { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.dialogue-character img { width:60px; height:60px; border-radius:10px; object-fit:cover; border:2px solid var(--glass-border); }
.dialogue-character h3 { font-family:var(--font-display); font-size:1.3rem; color:var(--gold); }
.dialogue-divider {
  height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
  margin-bottom:16px;
}
.dialogue-text {
  font-size:1.1rem; line-height:1.8; color:var(--text); margin-bottom:20px;
  min-height:60px;
}
.dialogue-choices { display:flex; flex-direction:column; gap:8px; }
.dialogue-choice {
  padding:12px 16px; border:1px solid var(--glass-border); border-radius:8px;
  background:var(--glass-light); color:var(--text); cursor:pointer;
  font-size:0.95rem; text-align:right; transition:all 0.2s; font-family: var(--font-body);
}
.dialogue-choice:hover { background:rgba(201,168,76,0.1); border-color:var(--gold-dim); color:var(--gold); }
.dialogue-confrontation {
  margin-top:16px; padding:16px; border-radius:10px;
  background:rgba(233,69,96,0.05); border:1px solid var(--red-dim);
}
.dialogue-confrontation h4 { font-size:0.9rem; color:var(--red); margin-bottom:10px; }
.confrontation-grid { display:flex; gap:8px; flex-wrap:wrap; }
.confrontation-item {
  width:60px; height:60px; border-radius:8px; cursor:pointer;
  border:2px solid var(--glass-border); overflow:hidden; transition:all 0.2s;
}
.confrontation-item:hover { border-color:var(--red); box-shadow:0 0 12px rgba(233,69,96,0.3); }
.confrontation-item img { width:100%; height:100%; object-fit:cover; }

/* ── Cipher Puzzle ─────────────────────────────────────────── */
.cipher-panel { width:90%; max-width:700px; }
.cipher-content { padding:24px; }
.cipher-tablet {
  text-align:center; padding:30px; margin-bottom:24px; border-radius:12px;
  background:linear-gradient(135deg,#3a2d0e,#5c4716,#3a2d0e);
  border:2px solid var(--gold-dim);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.4), 0 0 20px var(--gold-glow);
}
.cipher-cuneiform {
  font-size:2rem; color:var(--gold); letter-spacing:4px;
  text-shadow:0 0 10px var(--gold-glow);
}
.cuneiform-group { cursor:help; transition:color 0.2s; }
.cuneiform-group:hover { color:var(--gold-bright); text-shadow:0 0 20px var(--gold-glow); }
.cuneiform-sep { color:var(--gold-dim); margin:0 4px; }
.cipher-hint { font-size:0.9rem; color:var(--gold-dim); margin-top:12px; }
.cipher-workspace h4 {
  font-family:var(--font-display); font-size:1.1rem; color:var(--gold);
  margin-bottom:12px; margin-top:20px;
}
.cipher-inputs { display:flex; gap:12px; justify-content:center; }
.cipher-input {
  width:50px; height:50px; text-align:center; border-radius:8px;
  border:2px solid var(--glass-border); background:var(--bg3);
  color:var(--gold); font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
  transition:border-color 0.2s;
}
.cipher-input:focus { border-color:var(--gold); box-shadow:0 0 12px var(--gold-glow); outline:none; }
.cipher-input.correct { border-color:var(--green); color:var(--green); background:rgba(0,255,136,0.05); }
.cipher-input.wrong { border-color:var(--red); animation:shake 0.5s; }
#cipher-result {
  margin-top:20px; padding:16px; border-radius:10px; text-align:center; font-size: 1.1rem;
}
#cipher-result.success {
  background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.2); color:var(--green);
}
#cipher-result.failure {
  background:rgba(233,69,96,0.05); border:1px solid var(--red-dim); color:var(--red);
}

/* ── Accusation ────────────────────────────────────────────── */
.accusation-panel { width:90%; max-width:650px; max-height:85vh; overflow-y:auto; }
.accusation-content { padding:24px; }
.accusation-section { margin-bottom:24px; }
.accusation-section h3 {
  font-family:var(--font-display); font-size:1.2rem; color:var(--gold); margin-bottom:12px;
}
.accusation-options { display:flex; flex-direction:column; gap:8px; }
.acc-option {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--glass-border); border-radius:8px;
  cursor:pointer; transition:all 0.2s; font-size:0.95rem;
}
.acc-option:hover { background:rgba(201,168,76,0.05); border-color:var(--gold-dim); }
.acc-option input[type="radio"] { accent-color:var(--gold); margin-left:10px; }
.acc-suspect {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--glass-border); border-radius:8px;
  cursor:pointer; transition:all 0.2s;
}
.acc-suspect:hover { background:rgba(201,168,76,0.05); border-color:var(--gold-dim); }
.acc-suspect.selected { background:rgba(201,168,76,0.1); border-color:var(--gold); }
.acc-suspect img { width:40px; height:40px; border-radius:6px; object-fit:cover; }
.acc-suspect-name { font-size:0.95rem; font-weight:600; }
.btn-accuse { width:100%; justify-content:center; margin-top:8px; }

/* ── Ending ────────────────────────────────────────────────── */
.ending-content {
  text-align:center; max-width:600px; padding:40px;
  animation:fadeInUp 1s ease-out;
}
.ending-content h1 {
  font-family:var(--font-display); font-size:3rem;
  margin-bottom:20px;
}
.ending-content.success h1 { color:var(--green); text-shadow:0 0 30px rgba(0,255,136,0.3); }
.ending-content.partial h1 { color:var(--gold); text-shadow:0 0 30px var(--gold-glow); }
.ending-content.failure h1 { color:var(--red); text-shadow:0 0 30px rgba(233,69,96,0.3); }
.ending-content p { font-size:1.1rem; color:var(--text-dim); line-height:1.8; margin-bottom:20px; }

/* ── Breakthrough Popup ────────────────────────────────────── */
.breakthrough-popup {
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  z-index:95; padding:20px 30px; border-radius:14px;
  background:var(--glass); border:2px solid rgba(0,255,136,0.3);
  backdrop-filter:blur(20px); text-align:center; max-width:450px;
  box-shadow:0 0 60px rgba(0,255,136,0.15);
  animation:scaleIn 0.4s ease-out;
}
.breakthrough-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:200%; height:200%; border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,136,0.05) 0%,transparent 70%);
  pointer-events:none;
}
.breakthrough-icon { color:var(--green); margin-bottom:8px; animation:float 2s ease-in-out infinite; }
.breakthrough-popup h3 {
  font-family:var(--font-display); font-size:1.4rem; color:var(--green); margin-bottom:8px;
}
.breakthrough-popup p { font-size:0.9rem; color:var(--text-dim); line-height:1.5; margin-bottom:14px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:768px) {
  .examine-layout { grid-template-columns:1fr; }
  .examine-image-wrap img { min-height:200px; }
  .board-layout { grid-template-columns:1fr; }
  .board-sidebar { display:none; }
  .title-main { font-size:2.5rem; }
  .cipher-cuneiform { font-size:1.4rem; }
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeOut {
  from { opacity:1; }
  to { opacity:0; pointer-events:none; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to { opacity:1; transform:scale(1); }
}
@keyframes slideInLeft { /* Modified for RTL */
  from { opacity:0; transform:translateX(-100px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes pulse-glow {
  0%,100% { text-shadow:0 0 20px var(--gold-glow); }
  50% { text-shadow:0 0 40px var(--gold-glow), 0 0 60px rgba(201,168,76,0.15); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-4px); }
  40%,80% { transform:translateX(4px); }
}
.text-muted { color:var(--text-dim); font-size:0.85rem; }