src/lib/components/NarrativeDisplay.svelte

<script lang="ts">
  export let narrative: string;
  export let isVisible: boolean = true;
</script>

{#if isVisible && narrative}
  <div class="narrative-display">
    <div class="narrative-content">
      <p>{narrative}</p>
    </div>
  </div>
{/if}

<style>
  .narrative-display {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    animation: fadeIn 0.5s ease-in;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .narrative-content {
    max-width: 800px;
    margin: 0 auto;
  }

  .narrative-content p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  @media (max-width: 768px) {
    .narrative-display {
      padding: 1rem 1.5rem;
    }

    .narrative-content p {
      font-size: 1rem;
    }
  }
</style>