---
// This is an Astro component that properly leverages SSR and islands
---

<!-- Use Astro's islands architecture for better performance -->
<!-- Only hydrate the interactive app component when needed -->
<div id="app-root">
  <slot name="app-content" />
</div>

<style>
  #app-root {
    min-height: 100vh;
    width: 100%;
  }
  
  /* Progressive enhancement styles */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
</style>

<script>
  // Client-side progressive enhancement
  document.addEventListener('DOMContentLoaded', () => {
    // Add any progressive enhancement here
    console.log('BSC Score App initialized');
  });
</script>