smart-rgb/frontend/pages/+Head.tsx

// Import fonts CSS as raw string to inline in HTML
import fontsCss from "./fonts.css?inline";
import oswaldWoff2 from "@fontsource-variable/oswald/files/oswald-latin-wght-normal.woff2?url";

export default function HeadDefault() {
  return (
    <>
      <meta charSet="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      {/* Preload critical Oswald font for faster title rendering */}
      <link rel="preload" href={oswaldWoff2} as="font" type="font/woff2" crossOrigin="anonymous" />

      {/* Inlined font definitions - processed by Vite at build time */}
      <style dangerouslySetInnerHTML={{ __html: fontsCss }} />

      {/* Global styles for initial render */}
      <style>{`
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        html,
        body {
          width: 100%;
          height: 100%;
          overflow: hidden;
          background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
          font-family: Arial, sans-serif;
          position: relative;
        }

        body::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          filter: blur(4px) brightness(0.85);
          transform: scale(1.05);
          z-index: -2;
        }

        body::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.3);
          backdrop-filter: blur(1px);
          z-index: -1;
        }

        #game-canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100vw !important;
          height: 100vh !important;
          display: block;
          background: #000;
          z-index: 0;
        }
      `}</style>
    </>
  );
}