/* fungames — Home page */

function HeroAnim() {
  // Animated architectural diffuser ring
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const tick = () => { setT(performance.now() / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // running multiplier sim
  const mult = 1 + (Math.sin(t * 0.6) * 0.5 + 0.5) * 7.4;
  const rotate = (t * 12) % 360;
  const rotate2 = (t * -7) % 360;

  return (
    <div style={{ width: '100%', height: 480, background: 'linear-gradient(160deg, #1F1F4B 0%, #14102E 50%, #2A1B0F 100%)', borderRadius: 'var(--r-card)', border: '1px solid var(--hairline)', boxShadow: 'var(--shadow-card)', position: 'relative', overflow: 'hidden' }}>
      {/* blueprint grid */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.18,
        backgroundImage: 'linear-gradient(to right, rgba(255,180,140,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,180,140,0.25) 1px, transparent 1px)',
        backgroundSize: '40px 40px' }} />

      {/* corner annotations */}
      <span style={{ position: 'absolute', top: 16, left: 20, fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.6)' }}>FIG. 01 · DIFFUSER ENGINE · SEED #4A82F1</span>
      <span style={{ position: 'absolute', top: 16, right: 20, fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.6)' }}>RTP 96.8% · FAIR · LIVE</span>
      <span style={{ position: 'absolute', bottom: 16, left: 20, fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.4)' }}>T+{(t).toFixed(2)}s</span>
      <span style={{ position: 'absolute', bottom: 16, right: 20, fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.4)' }}>24 OPS · 480 RNDS/MIN</span>

      <svg viewBox="0 0 800 480" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%', display: 'block', position: 'relative', zIndex: 1 }}>
        <defs>
          <radialGradient id="hg" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ffb38a" stopOpacity="0.85" />
            <stop offset="40%" stopColor="#ff7a3c" stopOpacity="0.5" />
            <stop offset="80%" stopColor="#7d2bb8" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#7f2a00" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="hg-stroke" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#ff7a3c" />
            <stop offset="100%" stopColor="#a78bfa" />
          </linearGradient>
        </defs>
        <g transform={`translate(400 240)`}>
          {/* outer ring set */}
          <g transform={`rotate(${rotate})`}>
            {[...Array(36)].map((_, i) => {
              const a = (i * 10) * Math.PI / 180;
              const isMajor = i % 6 === 0;
              return <line key={i} x1={Math.cos(a)*180} y1={Math.sin(a)*180} x2={Math.cos(a)*200} y2={Math.sin(a)*200} stroke={isMajor ? '#ffd9b8' : '#ff7a3c'} strokeOpacity={isMajor ? 0.95 : 0.4} strokeWidth={isMajor ? 1.6 : 0.8} />;
            })}
          </g>
          <circle r="200" fill="none" stroke="url(#hg-stroke)" strokeOpacity="0.5" />
          <circle r="180" fill="none" stroke="#a78bfa" strokeOpacity="0.18" />
          <circle r="140" fill="none" stroke="#ff7a3c" strokeOpacity="0.28" strokeDasharray="4 6" />

          {/* inner counter-rotating square */}
          <g transform={`rotate(${rotate2})`}>
            <rect x="-90" y="-90" width="180" height="180" rx="6" fill="none" stroke="#a7c8ff" strokeOpacity="0.5" strokeWidth="1" />
            <rect x="-60" y="-60" width="120" height="120" rx="6" fill="none" stroke="#ffb38a" strokeOpacity="0.6" strokeWidth="1" />
          </g>

          <circle r="100" fill="url(#hg)" />
          <circle r="50" fill="none" stroke="#fff1e5" strokeWidth="1.4" strokeOpacity="0.85" />
          <circle r="6" fill="#ffd9b8" />

          {/* live multiplier */}
          <text textAnchor="middle" y="12" fill="#fff1e5" fontFamily="Inter" fontSize="62" fontWeight="700" letterSpacing="-0.02em">
            {mult.toFixed(2)}×
          </text>
          <text textAnchor="middle" y="42" fill="#ffd9b8" fontFamily="Space Grotesk" fontSize="11" letterSpacing="0.24em">
            LIVE MULTIPLIER
          </text>
        </g>

        {/* Side data ticks */}
        <g fontFamily="Space Grotesk" fontSize="10" fill="#ffb38a" opacity="0.65" letterSpacing="0.16em">
          <text x="40" y="120">+ 1.00×</text>
          <text x="40" y="200">+ 2.50×</text>
          <text x="40" y="280">+ 5.00×</text>
          <text x="40" y="360">+ 10.0×</text>
          <text x="700" y="120" textAnchor="end" fill="#a7c8ff">σ 0.42</text>
          <text x="700" y="200" textAnchor="end" fill="#a7c8ff">μ 1.94</text>
          <text x="700" y="280" textAnchor="end" fill="#c4b5fd">VAR HIGH</text>
          <text x="700" y="360" textAnchor="end" fill="#c4b5fd">SEED LOCK</text>
        </g>
      </svg>
    </div>
  );
}

function LiveLog() {
  const events = React.useMemo(() => [
    { t: '14:42:09', op: 'OP-2841', evt: 'DIFFUSER · round complete', val: '8.42×', tag: 'cash', color: 'moss' },
    { t: '14:42:08', op: 'OP-1102', evt: 'VELOCITY · seed verified', val: '#A41F92', tag: 'rng', color: 'indigo' },
    { t: '14:42:06', op: 'OP-3320', evt: 'PLINKO · deploy v4.18', val: 'OK', tag: 'sys', color: 'moss' },
    { t: '14:42:05', op: 'OP-2841', evt: 'DIFFUSER · session opened', val: '+12 plr', tag: 'plr', color: 'ochre' },
    { t: '14:42:01', op: 'OP-0028', evt: 'AVIATOR · multiplier event', val: '128.4×', tag: 'evt', color: 'rust' },
    { t: '14:41:58', op: 'OP-1102', evt: 'MINES · GLI-19 audit pass', val: '✓', tag: 'aud', color: 'moss' },
    { t: '14:41:55', op: 'OP-9914', evt: 'WHEEL · cluster online', val: '8/8', tag: 'sys', color: 'indigo' },
    { t: '14:41:53', op: 'OP-2200', evt: 'GOAL · cashout streak', val: '14×', tag: 'plr', color: 'rust' },
  ], []);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const i = setInterval(() => setTick(x => x+1), 1800); return () => clearInterval(i); }, []);
  const colorMap = { moss: 'var(--moss)', indigo: 'var(--indigo)', rust: 'var(--rust)', ochre: 'var(--ochre)' };
  return (
    <div className="card">
      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div className="row items-center gap-sm">
          <span className="dot dot-live"></span>
          <span className="t-label" style={{ color: 'var(--ink)' }}>Engineering Log · Live</span>
        </div>
        <span className="t-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>tail -f /var/log/simplegames · {tick} updates</span>
      </div>
      <div style={{ maxHeight: 360, overflow: 'hidden' }}>
        {events.map((e, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 90px 1fr auto 60px', gap: 16, alignItems: 'center', padding: '11px 20px', borderBottom: i < events.length-1 ? '1px solid var(--hairline)' : 'none', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
            <span style={{ color: 'var(--ink-3)' }}>{e.t}</span>
            <span style={{ color: 'var(--ink-2)' }}>{e.op}</span>
            <span style={{ color: 'var(--ink)' }}>{e.evt}</span>
            <span style={{ color: colorMap[e.color], fontWeight: 600 }}>{e.val}</span>
            <span style={{ textTransform: 'uppercase', fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textAlign: 'right' }}>{e.tag}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HomePage() {
  const featured = GAMES.filter(g => ['diffuser','vault-drop','lock-pick','marbles','rugpull','vault-run'].includes(g.id));
  return (
    <div>
      {/* HERO */}
      <section className="section" style={{ paddingTop: 56, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.7} tone="warm" />
        <DotPattern style={{ opacity: 0.35 }} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="grid" style={{ gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'start' }}>
            <div>
              <div className="overline">
                <span className="t-label"><ShinyText>A B2B Game Engineering Studio · EST. 2019</ShinyText></span>
              </div>
              <h1 className="t-display" style={{ marginTop: 22 }}>
                Games engineered with <span style={{ color: 'var(--rust)' }}>architectural</span> precision.
              </h1>
              <p className="t-lede" style={{ marginTop: 24, maxWidth: 560 }}>
                simplegames.fun builds verifiably-fair, mathematically-rigorous casino titles for licensed operators. No flash, no neon — just clean mechanics and engineered restraint.
              </p>
              <div className="row gap-md" style={{ marginTop: 32 }}>
                <a className="btn btn-primary btn-arrow" href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}}>Explore the catalogue</a>
                <a className="btn btn-secondary" href="#about" onClick={(e)=>{e.preventDefault(); window.fgNavigate('about');}}>The methodology</a>
              </div>

              {/* Stat strip */}
              <div className="grid hl-t" style={{ gridTemplateColumns: 'repeat(4, 1fr)', marginTop: 56, paddingTop: 24 }}>
                {[
                  { k: 'Live titles', v: '16', sub: 'GLI-19 certified' },
                  { k: 'Operators', v: '480+', sub: 'across 14 markets' },
                  { k: 'Rounds / day', v: '4.2M', sub: 'rolling 30d avg' },
                  { k: 'Uptime', v: '99.998%', sub: 'last 365 days' },
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6, paddingRight: 24, borderRight: i < 3 ? '1px solid var(--hairline)' : 'none' }}>
                    <span className="t-label">{s.k}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em', color: 'var(--ink)' }}>{s.v}</span>
                    <span className="t-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.sub}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <HeroAnim />
              {/* Hero sub-card */}
              <div className="card card-pad" style={{ marginTop: 16 }}>
                <div className="row items-center justify-between">
                  <div>
                    <span className="t-label">Now serving · flagship title</span>
                    <h3 className="t-h3" style={{ marginTop: 6, marginBottom: 0 }}>Diffuser</h3>
                    <span className="t-mono" style={{ color: 'var(--ink-3)' }}>Crash · Risk · 96.8% RTP · Variable volatility</span>
                  </div>
                  <a className="btn btn-primary btn-arrow" href="#" onClick={(e)=>{e.preventDefault(); window.fgNavigateGame('diffuser');}}>View detail</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <section className="section-sm hl-t hl-b" style={{ background: 'var(--chalk)' }}>
        <div className="container">
          <LogoMarquee />
        </div>
      </section>

      {/* PILLARS */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 02 · Methodology</span>
              <h2 className="t-h1" style={{ marginTop: 6 }}>What architectural means here.</h2>
            </div>
            <p className="t-body" style={{ maxWidth: 360, marginBottom: 12 }}>Three principles govern every title we ship. Hold us to them.</p>
          </div>

          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { n: '01', tag: 'Provably Fair', color: 'rust',
                body: 'Hashed seed-pair RNG, published before each round. Operators and players can verify every outcome independently — no audit-day theatre.',
                icon: 'shield',
                visual: 'rng' },
              { n: '02', tag: 'Engineered Math', color: 'indigo',
                body: 'Every payout curve is modelled, simulated 10⁹ times, and stress-tested at the boundaries before a title leaves the workshop.',
                icon: 'graph',
                visual: 'math' },
              { n: '03', tag: 'Operator-First', color: 'moss',
                body: 'Tournaments, missions, jackpots and bonus engines ship as a separate engagement layer — wire them into any title without a code branch.',
                icon: 'cog',
                visual: 'ops' },
            ].map((p, i) => (
              <PillarCard key={i} p={p} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED TITLES */}
      <section className="section" style={{ background: 'var(--sandstone)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 03 · Featured Titles</span>
              <h2 className="t-h1" style={{ marginTop: 6 }}>Five playable demos from a {GAMES.length}-title catalogue.</h2>
            </div>
            <a className="btn btn-secondary btn-arrow" href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}}>View full catalogue</a>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {featured.map(g => <GameCard key={g.id} game={g} />)}
          </div>
        </div>
      </section>

      {/* LIVE LOG + ENGAGEMENT */}
      <section className="section">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
            <div>
              <div className="row items-end justify-between mb-lg" style={{ paddingBottom: 14, borderBottom: '1px solid var(--hairline)' }}>
                <div className="col gap-xs">
                  <span className="t-label">// 04 · Engineering Log</span>
                  <h2 className="t-h2" style={{ marginTop: 6 }}>What our network is doing right now.</h2>
                </div>
                <span className="t-mono" style={{ color: 'var(--ink-3)' }}>UTC · auto-refresh 1.8s</span>
              </div>
              <LiveLog />
            </div>
            <div>
              <div className="row items-end justify-between mb-lg" style={{ paddingBottom: 14, borderBottom: '1px solid var(--hairline)' }}>
                <div className="col gap-xs">
                  <span className="t-label">// 05 · Engagement</span>
                  <h3 className="t-h3" style={{ marginTop: 6 }}>Tools, not theatre.</h3>
                </div>
              </div>
              <div className="col gap-md">
                {[
                  { k: 'Tournaments', d: 'Operator-tunable leaderboards across any title.' },
                  { k: 'Missions', d: 'Step quests with deterministic completion criteria.' },
                  { k: 'Jackpot Engine', d: 'Pooled, sponsored or fixed — your call.' },
                  { k: 'Bonus Mechanics', d: 'Free rounds, cashback, retention curves.' },
                ].map((it, i) => (
                  <div key={i} className="card card-pad card-hover" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                      <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11, letterSpacing: '0.14em' }}>0{i+1}</span>
                      <h4 style={{ margin: '4px 0 4px', fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600 }}>{it.k}</h4>
                      <p className="t-body" style={{ margin: 0, fontSize: 13.5 }}>{it.d}</p>
                    </div>
                    <span style={{ color: 'var(--rust)', fontFamily: 'var(--font-mono)', fontSize: 14 }}>→</span>
                  </div>
                ))}
                <a className="btn btn-ghost btn-arrow" href="#engagement" onClick={(e)=>{e.preventDefault(); window.fgNavigate('engagement');}} style={{ alignSelf: 'flex-start' }}>Engagement overview</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--chalk)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
          <div className="dot-pattern" style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(255,237,231,0.22) 1px, transparent 1px)' }} />
        </div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="grid mb-xl" style={{ gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'center' }}>
            <div>
              <span className="t-label" style={{ color: 'rgba(255,237,231,0.6)' }}>// 06 · Integration topology</span>
              <h2 className="t-h1" style={{ color: 'var(--chalk)', marginTop: 12 }}>
                <ShinyText style={{ background: 'linear-gradient(110deg, rgba(255,237,231,0.55) 35%, var(--rust) 50%, rgba(255,237,231,0.55) 65%)', backgroundSize: '200% 100%', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>One API. Six surfaces. Audited end-to-end.</ShinyText>
              </h2>
              <p className="t-lede" style={{ color: 'rgba(255,237,231,0.7)', marginTop: 16, maxWidth: 560 }}>
                Single-API integration. Sandbox in 48 hours. Production in two weeks. We ship to operators in 14 jurisdictions.
              </p>
              <div className="row gap-md" style={{ marginTop: 28 }}>
                <a className="btn btn-primary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault(); window.fgNavigate('contact');}}>Request integration deck</a>
                <a className="btn btn-ghost" href="#" onClick={(e)=>e.preventDefault()} style={{ color: 'rgba(255,237,231,0.85)', borderColor: 'rgba(255,237,231,0.2)' }}>API Docs</a>
              </div>
            </div>
            <div><PulseBeams height={300} /></div>
          </div>

          <div className="grid hl-t" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 32, paddingTop: 32, alignItems: 'start' }}>
            <ChartCard />
            <div>
              <span className="t-label" style={{ color: 'rgba(255,237,231,0.6)' }}>// Network signal</span>
              <p className="t-body" style={{ color: 'rgba(255,237,231,0.75)', marginTop: 14 }}>
                Aggregated p50/p99 latency, error rate and concurrent sessions across all operator deployments. Refreshes every eight seconds.
              </p>
              <span className="t-mono" style={{ color: 'rgba(255,237,231,0.45)', fontSize: 11, letterSpacing: '0.14em', display: 'block', marginTop: 24 }}>NO DEMO ACCOUNT REQUIRED</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function PillarIcon({ kind, color }) {
  const stroke = { rust: '#B8450C', indigo: '#1E3A5F', moss: '#4F6B4A' }[color] || '#B8450C';
  if (kind === 'shield') return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M16 3 L28 7 V16 C28 23 22 28 16 30 C10 28 4 23 4 16 V7 Z" stroke={stroke} strokeWidth="1.5" />
      <path d="M11 16 L15 20 L22 12" stroke={stroke} strokeWidth="1.5" />
    </svg>
  );
  if (kind === 'graph') return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M3 28 H29" stroke={stroke} strokeWidth="1.5" />
      <path d="M3 28 V3" stroke={stroke} strokeWidth="1.5" />
      <path d="M6 24 L12 18 L17 22 L23 10 L28 5" stroke={stroke} strokeWidth="1.5" />
      <circle cx="23" cy="10" r="2" fill={stroke} />
    </svg>
  );
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="5" stroke={stroke} strokeWidth="1.5" />
      <path d="M16 4 V8 M16 24 V28 M4 16 H8 M24 16 H28 M7 7 L10 10 M22 22 L25 25 M22 10 L25 7 M7 25 L10 22" stroke={stroke} strokeWidth="1.5" />
    </svg>
  );
}

function GameCard({ game, large = false }) {
  const FM = window.Motion || window.FramerMotion || {};
  const motion = FM.motion;
  const Wrapper = motion ? motion.div : 'div';
  const motionProps = motion ? {
    whileHover: { y: -5 },
    whileTap: { scale: 0.985 },
    transition: { type: 'spring', stiffness: 320, damping: 26 },
  } : {};
  return (
    <Wrapper className="game-card" {...motionProps} onClick={() => window.fgNavigateGame(game.id)}>
      <div className="game-card-media" style={{ position: 'relative', width: '100%', aspectRatio: large ? '16 / 9' : '5 / 4', overflow: 'hidden' }}>
        <div className="media-zoom" style={{ position: 'absolute', inset: 0 }}>
          <GameTile game={game} />
        </div>
        <div className="media-warm" />
        <div className="media-tone" />
        {game.tag && (
          <span style={{ position: 'absolute', top: 14, right: 14, background: game.demoUrl ? 'rgba(79,107,74,0.94)' : 'rgba(250,247,241,0.94)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', color: game.demoUrl ? '#fff' : 'var(--ink)', padding: '5px 11px', borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', border: '1px solid ' + (game.demoUrl ? 'rgba(79,180,72,0.4)' : 'rgba(255,255,255,0.6)'), boxShadow: '0 2px 8px rgba(20,15,10,0.12)', zIndex: 3 }}>
            {game.tag}
          </span>
        )}
        {game.demoUrl && (
          <a href={game.demoUrl} target="_blank" rel="noopener noreferrer"
            onClick={(e) => e.stopPropagation()}
            style={{ position: 'absolute', bottom: 14, left: '50%', transform: 'translateX(-50%)', background: 'var(--rust)', color: '#fff', padding: '8px 20px', borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', textDecoration: 'none', border: 'none', cursor: 'pointer', zIndex: 3, boxShadow: '0 4px 16px rgba(184,69,12,0.35)', transition: 'transform 140ms, box-shadow 140ms' }}>
            ▶ Play Demo
          </a>
        )}
      </div>
      <div className="game-card-foot">
        <div style={{ minWidth: 0, flex: 1 }}>
          <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em' }}>{game.title}</h4>
          <span className="t-mono" style={{ fontSize: 11.5, color: 'var(--ink-3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', maxWidth: '100%' }}>{game.kind} · RTP {game.rtp}</span>
        </div>
        <span className="game-card-foot-arrow">→</span>
      </div>
    </Wrapper>
  );
}

Object.assign(window, { HomePage, GameCard, HeroAnim, LiveLog });