(() => {
const { Button, Icon, Badge, Input, SlantSection, SocialLinks } = window.TinyWooDesignSystem_fe221f;
const I = window.TW_INHALT;
const D = I.daiganoid || {};
const featured = I.games.find(g => g.featured) || I.games[0];

const H2 = ({ children, color, style }) => <h2 className="tw-heading" style={{ fontSize: 'var(--fs-h1)', transform: 'rotate(-3deg)', transformOrigin: 'left', color, ...style }}>{children}</h2>;
const Kicker = ({ children }) => <span className="tw-pixel" style={{ fontSize: 13, color: 'var(--sky-400)' }}>{children}</span>;
const card = { background: 'var(--surface-card)', border: '4px solid var(--ink)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-pop)', padding: 24, display: 'flex', flexDirection: 'column', gap: 18 };
const grid2 = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,340px),1fr))', gap: 28, alignItems: 'start' };

// Buchstaben-Explosion fuer Ueberschriften/Texte der Games-Seite ausserhalb der Kaesten (Maus drueckt weg, Klick/Tap sprengt).
const BLAST_ON = true;          // false = aus
const BLAST_REDUCED = false;    // true = aus, wenn das System "weniger Bewegung" meldet (z.B. Windows-Animationen aus)
const blastOff = () => !BLAST_ON || (BLAST_REDUCED && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
const SR_ONLY = { position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, border: 0, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' };

/** Ein gemeinsamer rAF-Loop fuer alle Blast-Texte. Jeder Buchstabe federt zu seinem Ziel (vom Zeiger weggedrueckt,
 *  angehoben, verdreht); der Loop laeuft nur, solange sich etwas bewegt. Positionen in Seitenkoordinaten, beim Betreten gemessen. */
const blast = (() => {
  const groups = new Set();
  let raf = 0, last = 0, listening = false;
  const reach = (g) => Math.max(100, g.size * 3.2);
  const push = (g) => Math.max(10, g.size * 0.55) * g.power;

  const tick = (now) => {
    const steps = Math.max(1, Math.min(4, Math.round((now - last) / 16.7)));
    last = now;
    let any = false;
    for (const g of groups) {
      if (!g.awake) continue;
      let moving = g.active;
      const R = reach(g), P = push(g);
      for (const L of g.letters) {
        let tx = 0, ty = 0, tr = 0, ts = 1;
        if (g.active) {
          const dx = L.cx - g.px, dy = L.cy - g.py, d = Math.hypot(dx, dy) || 1, f = Math.max(0, 1 - d / R) ** 2;
          if (f > 0) { tx = dx / d * f * P; ty = dy / d * f * P - f * P * 0.5; tr = L.spin * f * 40 * g.power; ts = 1 + f * 0.25 * g.power; }
        }
        for (let i = 0; i < steps; i++) {
          L.vx = (L.vx + (tx - L.x) * 0.09) * 0.8; L.x += L.vx;
          L.vy = (L.vy + (ty - L.y) * 0.09) * 0.8; L.y += L.vy;
          L.vr = (L.vr + (tr - L.r) * 0.09) * 0.8; L.r += L.vr;
          L.vs = (L.vs + (ts - L.s) * 0.09) * 0.8; L.s += L.vs;
        }
        const e = Math.abs(L.vx) + Math.abs(L.vy) + Math.abs(L.vr) * 0.1 + Math.abs(L.vs) * 10
          + Math.abs(tx - L.x) + Math.abs(ty - L.y) + Math.abs(tr - L.r) * 0.1 + Math.abs(ts - L.s) * 10;
        if (e < 0.05) { L.x = tx; L.y = ty; L.r = tr; L.s = ts; L.vx = L.vy = L.vr = L.vs = 0; } else moving = true;
        const t = (L.x || L.y || L.r || L.s !== 1) ? `translate(${L.x.toFixed(1)}px,${L.y.toFixed(1)}px) rotate(${L.r.toFixed(1)}deg) scale(${L.s.toFixed(3)})` : '';
        if (t !== L.t) { L.t = t; L.el.style.transform = t; }
      }
      g.awake = moving;
      if (moving) any = true;
    }
    raf = any ? requestAnimationFrame(tick) : 0;
  };
  const wake = (g) => { g.awake = true; if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } };

  // Ruhelage messen (aktuelle Verschiebung abziehen; Drehen/Skalieren um die Mitte verschiebt die Mitte nicht).
  const measure = (g) => {
    const sx = window.scrollX, sy = window.scrollY;
    g.size = parseFloat(getComputedStyle(g.el).fontSize) || 16;
    for (const L of g.letters) { const b = L.el.getBoundingClientRect(); L.cx = b.left + b.width / 2 + sx - L.x; L.cy = b.top + b.height / 2 + sy - L.y; }
    const b = g.el.getBoundingClientRect();
    g.box = { l: b.left + sx, t: b.top + sy, r: b.right + sx, b: b.bottom + sy };
  };
  const calm = (g) => { if (g.active) { g.active = false; wake(g); } };
  const calmAll = () => { groups.forEach(calm); listen(false); };
  function onMove(e) {
    let still = false;
    for (const g of groups) {
      if (!g.active) continue;
      const R = reach(g), B = g.box;
      if (e.pageX < B.l - R || e.pageX > B.r + R || e.pageY < B.t - R || e.pageY > B.b + R) { calm(g); continue; }
      g.px = e.pageX; g.py = e.pageY; still = true; wake(g);
    }
    if (!still) listen(false);
  }
  function listen(on) {
    if (on === listening) return;
    listening = on;
    const f = on ? 'addEventListener' : 'removeEventListener';
    window[f]('pointermove', onMove, { passive: true });
    document.documentElement[f]('mouseleave', calmAll);
  }
  const enter = (g, e) => {
    if (!g.active) { measure(g); g.active = true; }
    g.px = e.pageX; g.py = e.pageY;
    listen(true); wake(g);
  };
  const explode = (g, e) => {
    enter(g, e);
    const P = push(g);
    for (const L of g.letters) {
      const dx = L.cx - g.px, dy = L.cy - g.py, d = Math.hypot(dx, dy) || 1, f = 1 / (1 + d / (g.size * 2));
      const k = P * 0.7 * f * (0.6 + Math.random() * 0.8);
      L.vx += dx / d * k; L.vy += dy / d * k - P * 0.3 * f;
      L.vr += (Math.random() - 0.5) * 50 * g.power * f; L.vs += 0.08 * g.power * f;
    }
  };
  const add = (el, power) => {
    const g = { el, power, active: false, awake: false, px: 0, py: 0, size: 16, box: null,
      letters: [...el.querySelectorAll('[data-l]')].map((n) => ({ el: n, x: 0, y: 0, r: 0, s: 1, vx: 0, vy: 0, vr: 0, vs: 0, cx: 0, cy: 0, t: '', spin: (Math.random() < 0.5 ? -1 : 1) * (0.5 + Math.random() * 0.5) })) };
    const onEnter = (e) => enter(g, e);
    const onDown = (e) => explode(g, e);
    const onUp = (e) => { if (e.pointerType !== 'mouse') calm(g); };       // Finger weg: Buchstaben zurueckfedern lassen
    el.addEventListener('pointerenter', onEnter);
    el.addEventListener('pointerdown', onDown);
    el.addEventListener('pointerup', onUp);
    el.addEventListener('pointercancel', onUp);
    groups.add(g);
    return () => {
      groups.delete(g);
      el.removeEventListener('pointerenter', onEnter);
      el.removeEventListener('pointerdown', onDown);
      el.removeEventListener('pointerup', onUp);
      el.removeEventListener('pointercancel', onUp);
      if (![...groups].some((o) => o.active)) listen(false);
    };
  };
  return { add };
})();

/** Text, dessen Buchstaben einzeln auf den Zeiger reagieren. Woerter bleiben am Stueck (kein neuer Umbruch),
 *  \n = neue Zeile, Screenreader lesen den Klartext. power: Staerke (1 = voll). */
function Blast({ text, power = 1 }) {
  const ref = React.useRef(null);
  const off = React.useMemo(blastOff, []);
  React.useEffect(() => (off || !ref.current ? undefined : blast.add(ref.current, power)), [text, power, off]);
  if (off || !text) return text || null;
  const word = (w, i) => (
    <React.Fragment key={i}>{i > 0 && ' '}<span style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
      {[...w].map((c, j) => <span key={j} data-l="" style={{ display: 'inline-block' }}>{c}</span>)}
    </span></React.Fragment>
  );
  return (
    <span ref={ref} style={{ cursor: 'default' }}>
      <span style={SR_ONLY}>{text}</span>
      <span aria-hidden="true">{String(text).split('\n').map((line, n) => <React.Fragment key={n}>{n > 0 && <br />}{line.split(' ').map(word)}</React.Fragment>)}</span>
    </span>
  );
}

const mailAddr = (I.links.email || []).join('@');

function EmailButton() {
  const [shown, setShown] = React.useState(false);
  if (!mailAddr) return null;
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
      <Button variant="sky" icon={<Icon name="mail" size={20} />} onClick={() => { setShown(true); location.href = `mailto:${mailAddr}`; }}>Email</Button>
      {shown && <span style={{ fontSize: 17, color: 'var(--text-strong)', userSelect: 'all', overflowWrap: 'anywhere' }}>{mailAddr}</span>}
    </div>
  );
}

function ContactForm() {
  const [f, setF] = React.useState({ name: '', email: '', message: '' });
  const [state, setState] = React.useState('idle');
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const ok = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.message.trim().length > 5;
  const send = async e => {
    e.preventDefault();
    if (!ok || state === 'sending') return;
    setState('sending');
    try {
      const r = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: I.links.kontaktFormKey, subject: `Tiny Woo website: ${f.name}`, from_name: 'Tiny Woo website', name: f.name, email: f.email, message: f.message }) });
      const j = await r.json();
      setState(j.success ? 'sent' : 'error');
      if (j.success) setF({ name: '', email: '', message: '' });
    } catch (err) {
      setState('error');
    }
  };
  return (
    <form onSubmit={send} style={card}>
      <Kicker>Contact</Kicker>
      <Input label="Name" value={f.name} onChange={set('name')} maxLength={80} />
      <Input label="Your email" type="email" value={f.email} onChange={set('email')} maxLength={120} />
      <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span className="tw-pixel" style={{ fontSize: 12, color: 'var(--gray-300)' }}>Message</span>
        <textarea value={f.message} onChange={set('message')} rows={6} maxLength={4000} style={{ resize: 'vertical', padding: '14px 18px', borderRadius: 'var(--radius-lg)', border: '3px solid var(--ink)', background: 'var(--blue-950)', boxShadow: 'inset 0 3px 0 rgba(0,0,0,.35)', color: 'var(--gray-50)', fontFamily: 'var(--font-body)', fontSize: 16, outline: 'none' }} />
      </label>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button type="submit" icon={<Icon name="send" size={20} />} disabled={!ok || state === 'sending'}>{state === 'sending' ? 'Sending…' : 'Send'}</Button>
        {state === 'sent' && <span className="tw-pixel" style={{ fontSize: 13, color: 'var(--lime-400)' }}>Message sent. Thanks!</span>}
        {state === 'error' && <span className="tw-pixel" style={{ fontSize: 13, color: 'var(--cherry-400)' }}>Sending failed. Try again later.</span>}
      </div>
    </form>
  );
}

const ytId = url => { const m = (url || '').match(/(?:youtu\.be\/|[?&]v=|embed\/|shorts\/)([\w-]{11})/); return m ? m[1] : null; };

function Trailer({ url, title, style }) {
  const [on, setOn] = React.useState(false);
  const id = ytId(url);
  if (!id) return null;
  return (
    <div style={{ position: 'relative', aspectRatio: '16 / 9', borderRadius: 'var(--radius-xl)', border: '5px solid var(--ink)', boxShadow: 'var(--shadow-pop-lg)', overflow: 'hidden', background: 'var(--ink)', ...style }}>
      {on
        ? <iframe src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&rel=0`} title={`${title} trailer`} allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} />
        : <button type="button" onClick={() => setOn(true)} aria-label={`Play ${title} trailer`} style={{ position: 'absolute', inset: 0, padding: 0, border: 0, cursor: 'pointer', background: `var(--ink) center / cover no-repeat url(https://i.ytimg.com/vi/${id}/hqdefault.jpg)` }}>
            <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 84, height: 84, borderRadius: '50%', border: '4px solid var(--ink)', background: 'var(--grad-sun)', boxShadow: 'var(--shadow-pop)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' }}><Icon name="play" size={38} /></span>
          </button>}
    </div>
  );
}

function FactList({ rows }) {
  return (
    <dl style={{ margin: 0, display: 'grid', gridTemplateColumns: 'max-content 1fr', gap: '10px 20px', alignItems: 'baseline' }}>
      {rows.map(([k, v]) => <React.Fragment key={k}><dt className="tw-pixel" style={{ fontSize: 12, color: 'var(--sky-400)' }}>{k}</dt><dd style={{ margin: 0, fontSize: 17, color: 'var(--text-strong)', overflowWrap: 'anywhere' }}>{v}</dd></React.Fragment>)}
    </dl>
  );
}

function FeaturedGame({ onNav }) {
  if (!featured) return null;
  return (
    <SlantSection tone="deep" angle={-4} innerStyle={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,340px),1fr))', gap: 48, alignItems: 'center' }}>
      <div style={{ position: 'relative' }}>
        {ytId(featured.trailer)
          ? <Trailer url={featured.trailer} title={featured.title} style={{ transform: 'rotate(-2.5deg)' }} />
          : <img src={featured.image} alt={featured.title} style={{ width: '100%', display: 'block', borderRadius: 'var(--radius-xl)', border: '5px solid var(--ink)', boxShadow: 'var(--shadow-pop-lg)', transform: 'rotate(-2.5deg)' }} />}
        {featured.status && <div style={{ position: 'absolute', top: -14, right: 20, transform: 'rotate(8deg)' }}><Badge tone="cherry">{featured.status}</Badge></div>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Kicker>Featured</Kicker>
        <H2>{featured.title}</H2>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55 }}>{featured.text || featured.tagline}</p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{(featured.tags || []).map(t => <Badge key={t} tone="outline">{t}</Badge>)}</div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {featured.link && <Button icon={<Icon name="steam" brand size={20} />} href={featured.link}>{featured.linkText || 'Play'}</Button>}
          <Button variant="ghost" onClick={() => onNav('games')}>All games</Button>
        </div>
      </div>
    </SlantSection>
  );
}

function ArcadeTeaser({ onNav }) {
  return (
    <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-9) var(--gutter)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,320px),1fr))', gap: 48, alignItems: 'center' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Kicker>Arcade · Play right here</Kicker>
        <H2 color="var(--orange-400)">{D.titel || 'Daiganoid'}</H2>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55 }}>{D.text || ''}</p>
        <div><Button variant="lime" icon={<Icon name="gamepad-2" size={20} />} onClick={() => onNav('arcade')}>Open arcade</Button></div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}><DaiganoidTeaser onNav={onNav} /></div>
    </section>
  );
}

function Community() {
  return (
    <SlantSection tone="raised" angle={3} edge="orange" innerStyle={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, textAlign: 'center' }}>
      <H2 style={{ transform: 'rotate(-2deg)', transformOrigin: 'center' }}>{I.texte.communityTitel}</H2>
      <p style={{ margin: 0, fontSize: 17, maxWidth: 520, lineHeight: 1.55 }}>{I.texte.communityText}</p>
      <SocialLinks links={I.socials} style={{ justifyContent: 'center' }} />
    </SlantSection>
  );
}

function Footer({ onNav }) {
  return (
    <footer style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '56px var(--gutter) 260px', display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', alignItems: 'center' }}>
      <span className="tw-pixel" style={{ fontSize: 12, color: 'var(--gray-400)' }}>{I.texte.footer}</span>
      <span className="tw-pixel" style={{ fontSize: 12, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
        <a href="#press" onClick={e => { e.preventDefault(); onNav('press'); }}>Press kit</a>
        <a href="#about" onClick={e => { e.preventDefault(); onNav('about'); }}>Contact</a>
      </span>
    </footer>
  );
}

// Grosses Panel: Bild ueber volle Breite, darunter Text (links) + Fakten/Buttons (rechts).
function GameRow({ g, flip, onNav }) {
  const tilt = flip ? 1.5 : -1.5;
  const absaetze = g.beschreibung || [g.text || g.tagline];
  const fakten = (g.presse && g.presse.fakten || []).filter(([k]) => k !== 'Price');
  return (
    <SlantSection tone={flip ? 'raised' : 'deep'} angle={flip ? 3 : -3} edge={flip ? 'orange' : 'sun'} style={{ padding: 'var(--space-10) 0' }} innerStyle={{ maxWidth: 1320, display: 'flex', flexDirection: 'column', gap: 72 }}>
      <div style={{ position: 'relative' }}>
        {ytId(g.trailer)
          ? <Trailer url={g.trailer} title={g.title} style={{ transform: `rotate(${tilt}deg)` }} />
          : <img src={g.image} alt={g.title} style={{ width: '100%', display: 'block', aspectRatio: '16 / 9', objectFit: 'cover', borderRadius: 'var(--radius-xl)', border: '6px solid var(--ink)', boxShadow: 'var(--shadow-pop-lg), var(--shadow-float)', transform: `rotate(${tilt}deg)` }} />}
        {g.status && <div style={{ position: 'absolute', top: -22, [flip ? 'left' : 'right']: 36, transform: `rotate(${-tilt * 5}deg) scale(1.5)`, transformOrigin: flip ? 'left top' : 'right top' }}><Badge tone="cherry">{g.status}</Badge></div>}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '40px 64px', alignItems: 'flex-start' }}>
        <div style={{ flex: '2 1 520px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <H2><Blast text={g.title} /></H2>
          {g.tagline && <p className="tw-heading" style={{ margin: 0, fontSize: 'var(--fs-h3, 24px)', lineHeight: 1.25, color: 'var(--sun-400)' }}><Blast text={g.tagline} /></p>}
          {absaetze.map((t, i) => <p key={i} style={{ margin: 0, fontSize: i === 0 ? 24 : 20, lineHeight: 1.5, whiteSpace: 'pre-line', color: i === 0 ? 'var(--text-strong)' : undefined, fontWeight: i === 0 ? 700 : undefined }}><Blast text={t} power={0.7} /></p>)}
        </div>
        <div style={{ ...card, flex: '1 1 320px', minWidth: 0, gap: 22 }}>
          <Kicker>At a glance</Kicker>
          {fakten.length > 0 && <FactList rows={fakten} />}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{(g.tags || []).map(t => <Badge key={t} tone="outline">{t}</Badge>)}</div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {g.link && <Button icon={<Icon name="steam" brand size={20} />} href={g.link}>{g.linkText || 'Play'}</Button>}
            <Button variant="ghost" icon={<Icon name="newspaper" size={20} />} onClick={() => onNav('press')}>Press kit</Button>
          </div>
        </div>
      </div>
      {g.cast && <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {g.castTitel && <Kicker><Blast text={g.castTitel} power={0.8} /></Kicker>}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,260px),1fr))', gap: 24 }}>
          {g.cast.map(([name, t], i) => (
            <div key={name} style={{ ...card, gap: 12, transform: `rotate(${i % 2 ? 1.2 : -1.2}deg)` }}>
              <span className="tw-heading" style={{ fontSize: 'var(--fs-h3)', lineHeight: 1.05, color: 'var(--sun-400)' }}>{name}</span>
              <span style={{ fontSize: 18, lineHeight: 1.5, whiteSpace: 'pre-line' }}>{t}</span>
            </div>
          ))}
        </div>
      </div>}
      {g.ablauf && <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {g.ablaufTitel && <Kicker><Blast text={g.ablaufTitel} power={0.8} /></Kicker>}
        <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,230px),1fr))', gap: 20 }}>
          {g.ablauf.map((schritt, i) => {
            const [titel, t] = Array.isArray(schritt) ? schritt : [null, schritt];
            return (
              <li key={i} style={{ ...card, gap: 10, transform: `rotate(${i % 2 ? 1 : -1}deg)` }}>
                <span className="tw-pixel" style={{ fontSize: 28, color: 'var(--sun-400)' }}>{i + 1}</span>
                {titel && <span className="tw-heading" style={{ fontSize: 'var(--fs-h4)', color: 'var(--text-strong)' }}>{titel}</span>}
                <span style={{ fontSize: 18, lineHeight: 1.5 }}>{t}</span>
              </li>
            );
          })}
        </ol>
      </div>}
      {/* nebeneinander steht die hohe "At a glance"-Karte rechts -> Luecke links halbieren; einspaltig (schmal) kein Versatz */}
      {(g.features || g.kicker) && <div style={{ display: 'flex', flexWrap: 'wrap', gap: '48px 64px', alignItems: 'center', marginTop: g.cast || g.ablauf ? 0 : 'clamp(-84px, calc(1000px - 100vw), 0px)' }}>
        {g.features && <div style={{ flex: '1 1 420px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
          {g.featuresIntro && <p style={{ margin: '0 0 8px', fontSize: 20, lineHeight: 1.55 }}><Blast text={g.featuresIntro} power={0.7} /></p>}
          {g.featuresTitel && <h3 className="tw-heading" style={{ margin: '8px 0 0', fontSize: 'var(--fs-h2)', lineHeight: 1.05, transform: 'rotate(-2deg)', transformOrigin: 'left' }}><Blast text={g.featuresTitel} /></h3>}
          <ul style={{ margin: 0, paddingLeft: 24, fontSize: 18, lineHeight: 1.55, display: 'flex', flexDirection: 'column', gap: 8 }}>{g.features.map(t => <li key={t}><Blast text={t} power={0.7} /></li>)}</ul>
          {g.zwischenzeile && <p style={{ margin: '8px 0', fontSize: 22, lineHeight: 1.4, fontWeight: 700, color: 'var(--text-strong)' }}><Blast text={g.zwischenzeile} power={0.8} /></p>}
          {g.features2Titel && <h3 className="tw-heading" style={{ margin: '8px 0 0', fontSize: 'var(--fs-h2)', lineHeight: 1.05, transform: 'rotate(-2deg)', transformOrigin: 'left' }}><Blast text={g.features2Titel} /></h3>}
          {g.features2 && <ul style={{ margin: 0, paddingLeft: 24, fontSize: 18, lineHeight: 1.55, display: 'flex', flexDirection: 'column', gap: 8 }}>{g.features2.map(t => <li key={t}><Blast text={t} power={0.7} /></li>)}</ul>}
          {g.featuresSchluss && <p className="tw-heading" style={{ margin: '8px 0 0', fontSize: 'var(--fs-h3)', lineHeight: 1.15, color: 'var(--sun-400)', transform: 'rotate(-2deg)', transformOrigin: 'left' }}><Blast text={g.featuresSchluss} /></p>}
        </div>}
        {g.kicker && (Array.isArray(g.kicker)
          ? <div style={{ flex: '1 1 380px', minWidth: 0, background: 'linear-gradient(180deg, var(--lime-400) 0%, #5CCF34 55%, var(--lime-600) 100%)', color: 'var(--ink)', border: '5px solid var(--ink)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-pop-lg)', padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 14, transform: `rotate(${-tilt * 1.3}deg)` }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}><Icon name="steam" brand size={36} /><span className="tw-heading" style={{ fontSize: 'var(--fs-h3)', lineHeight: 1.1 }}>{g.kicker[0]}</span></span>
              <span style={{ fontSize: 19, lineHeight: 1.5, fontWeight: 700 }}>{g.kicker[1]}</span>
            </div>
          : <div style={{ flex: '1 1 380px', minWidth: 0, background: 'linear-gradient(180deg, var(--lime-400) 0%, #5CCF34 55%, var(--lime-600) 100%)', color: 'var(--ink)', border: '5px solid var(--ink)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-pop-lg)', padding: '28px 32px', display: 'flex', alignItems: 'center', gap: 20, transform: 'translate(-20px, -220px) rotate(-5deg)' }}>
              <Icon name="steam" brand size={80} />
              <span style={{ fontSize: 22, lineHeight: 1.45, fontWeight: 700 }}>{g.kicker}</span>
            </div>)}
      </div>}
      {g.nachsatz && <p style={{ margin: 0, fontSize: 20, lineHeight: 1.55 }}><Blast text={g.nachsatz} power={0.7} /></p>}
      {g.hinweis && <p className="tw-pixel" style={{ margin: 0, fontSize: 12, color: 'var(--gray-400)', textAlign: 'center' }}><Blast text={g.hinweis} power={0.7} /></p>}
    </SlantSection>
  );
}

function GamesPage({ onNav }) {
  return (
    <>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '48px var(--gutter) 24px' }}>
        <H2 style={{ fontSize: 'var(--fs-hero)' }}>Games</H2>
      </section>
      {I.games.map((g, k) => <GameRow key={g.title} g={g} flip={k % 2 === 1} onNav={onNav} />)}
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-9) var(--gutter) 0' }}>
        <div style={{ border: '4px dashed var(--border-strong)', borderRadius: 'var(--radius-xl)', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 220, transform: 'rotate(-1deg)' }}>
          <span className="tw-pixel" style={{ fontSize: 16, color: 'var(--gray-400)' }}>Next game · loading…</span>
        </div>
      </section>
    </>
  );
}

// Die Arcade-Seite (ArcadePage) liegt in js/site-arcade.jsx.

function AboutPage() {
  return (
    <section style={{ maxWidth: 760, margin: '0 auto', padding: '48px var(--gutter) 0', display: 'flex', flexDirection: 'column', gap: 22 }}>
      <H2 style={{ fontSize: 'var(--fs-hero)' }}>About</H2>
      {I.texte.about.map((b, i) =>
        b.h ? <h3 key={i} className="tw-heading" style={{ margin: '8px 0 0', fontSize: 'var(--fs-h2, 26px)', color: 'var(--text-strong)' }}>{b.h}</h3>
        : b.liste ? <ul key={i} style={{ margin: 0, paddingLeft: 24, fontSize: 17, lineHeight: 1.6, display: 'flex', flexDirection: 'column', gap: 6 }}>{b.liste.map((t, j) => <li key={j}>{t}</li>)}</ul>
        : b.schluss ? <p key={i} style={{ margin: '8px 0 0', fontSize: 19, lineHeight: 1.6, fontWeight: 700, color: 'var(--text-strong)' }}>{b.schluss}</p>
        : <p key={i} style={{ margin: 0, fontSize: 17, lineHeight: 1.6 }}>{b.p}</p>
      )}
      <SocialLinks links={I.socials} />
      <ContactForm />
    </section>
  );
}

function PressGame({ g }) {
  const P = g.presse || {};
  const shots = P.screenshots || [];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <H2>{g.title}</H2>
      <div style={grid2}>
        <div style={card}>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55 }}>{g.text || g.tagline}</p>
          {P.fakten && <FactList rows={P.fakten} />}
          {g.link && g.link !== '#' && <div><Button icon={<Icon name="steam" brand size={20} />} href={g.link}>{g.linkText || 'Store'}</Button></div>}
        </div>
        {ytId(g.trailer)
          ? <Trailer url={g.trailer} title={g.title} />
          : <img src={g.image} alt={g.title} style={{ width: '100%', display: 'block', borderRadius: 'var(--radius-xl)', border: '5px solid var(--ink)', boxShadow: 'var(--shadow-pop-lg)' }} />}
      </div>
      {shots.length > 0 && <>
        <Kicker>Screenshots · click to open full size</Kicker>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(min(100%,240px),1fr))', gap: 16 }}>
          {shots.map(s => <a key={s} href={s} target="_blank" rel="noopener"><img src={s} alt={`${g.title} screenshot`} loading="lazy" style={{ width: '100%', aspectRatio: '16 / 9', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-lg)', border: '3px solid var(--ink)', boxShadow: 'var(--shadow-pop-sm)' }} /></a>)}
        </div>
      </>}
    </div>
  );
}

function PressPage() {
  const P = I.presse || {};
  return (
    <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '48px var(--gutter) 0', display: 'flex', flexDirection: 'column', gap: 48 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <H2 style={{ fontSize: 'var(--fs-hero)' }}>Press</H2>
        {P.intro && <p style={{ margin: 0, fontSize: 19, lineHeight: 1.6, maxWidth: 760, color: 'var(--text-strong)' }}>{P.intro}</p>}
      </div>
      <div style={grid2}>
        <div style={card}>
          <Kicker>Studio</Kicker>
          {P.fakten && <FactList rows={P.fakten} />}
          <EmailButton />
        </div>
        <div style={card}>
          <Kicker>Downloads</Kicker>
          {(P.downloads || []).map(d => <div key={d.src}><Button variant="ghost" size="sm" icon={<Icon name="download" size={18} />} href={d.src} download>{d.label}</Button></div>)}
        </div>
      </div>
      {I.games.map(g => <PressGame key={g.title} g={g} />)}
    </section>
  );
}

Object.assign(window, { FeaturedGame, ArcadeTeaser, Community, Footer, GamesPage, AboutPage, PressPage });
})();