/*__IIFE_WRAPPED__*/
;(function(){
// screens-auth.jsx — Splash / Auth(メール認証コード) / Onboarding(名前) / Pairing
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;
const { useApp, Icon, Btn, Charm, Field, Amulet } = window;
const ME_FALLBACK = 'あなた';

/* ambient soft blobs (mood ③) */
function Blobs({ opacity = 1 }) {
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', opacity }}>
      <div style={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', top: -60, left: -70,
        background: 'radial-gradient(circle, oklch(0.82 0.06 18 / .55), transparent 70%)', filter: 'blur(8px)' }} />
      <div style={{ position: 'absolute', width: 300, height: 300, borderRadius: '50%', top: 40, right: -110,
        background: 'radial-gradient(circle, oklch(0.84 0.05 150 / .5), transparent 70%)', filter: 'blur(10px)' }} />
      <div style={{ position: 'absolute', width: 260, height: 260, borderRadius: '50%', bottom: -70, left: 30,
        background: 'radial-gradient(circle, oklch(0.82 0.05 305 / .42), transparent 70%)', filter: 'blur(10px)' }} />
    </div>
  );
}

function Wordmark({ size = 56 }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div className="wm" style={{ fontSize: size, fontWeight: 400, color: 'var(--ink)', letterSpacing: '.01em', lineHeight: 1 }}>
        <span style={{ fontStyle: 'italic' }}>a</span>mulet
      </div>
      <div style={{ fontSize: 12, letterSpacing: '.42em', color: 'var(--ink-faint)', marginTop: 9, paddingLeft: '.42em', fontWeight: 500 }}>アミュレット</div>
    </div>
  );
}

function Eyebrowy({ children }) {
  return <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10.5, letterSpacing: '.22em', color: 'var(--amethyst)', fontWeight: 600 }}>{children}</div>;
}

/* ════════ SPLASH ════════ */
const SPLASH_LINES = ['ようこそ！', 'はじめよう🐾', '会えてうれしい', '本音、聞かせてね'];
function SplashScreen() {
  const { go, live } = useApp();
  const [lineIdx, setLineIdx] = useStateA(0);
  useEffectA(() => {
    const id = setInterval(() => setLineIdx(i => (i + 1) % SPLASH_LINES.length), 2600);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ height: '100%', position: 'relative', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <Blobs />
      <div style={{ flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 34px' }}>
        <div style={{ animation: 'sway 6s ease-in-out infinite', transformOrigin: 'center 70%' }}>
          <Charm size={88} />
        </div>
        <div style={{ height: 30 }} />
        <Wordmark size={60} />
        <div style={{ height: 26 }} />
        <p style={{
          textAlign: 'center', fontSize: 17, lineHeight: 1.9, color: 'var(--ink-soft)',
          fontWeight: 500, maxWidth: 280, textWrap: 'balance',
        }}>
          言えない本音を、<br />AIが最高の思い出に変える
        </p>
      </div>
      <div style={{ position: 'relative', padding: '0 26px 30px', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
        {/* 犬（プラン生成ローディングと同じLottieBox）が吹き出しでお出迎え。
             犬は右端に固定し、メッセージ長が変わっても位置が動かないよう吹き出しは左へ伸ばす */}
        <div style={{ position: 'relative', width: '100%', height: 132, marginBottom: 2 }}>
          {/* 吹き出し: 右下の犬を指す。right固定でテキストは左へ伸びる */}
          <div style={{ position: 'absolute', right: 110, bottom: 42 }}>
            <div style={{
              position: 'relative',
              background: '#fff', borderRadius: 16, padding: '9px 15px',
              boxShadow: '0 6px 18px rgba(61,54,44,.16)', border: '1px solid var(--line)',
              fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 14.5, color: 'var(--ink)',
              whiteSpace: 'nowrap',
            }}>
              <span key={lineIdx} style={{ display: 'inline-block', animation: 'floatup .35s ease both' }}>
                {SPLASH_LINES[lineIdx]}
              </span>
              {/* 犬（右）を指す吹き出しのしっぽ */}
              <div style={{
                position: 'absolute', right: -5, bottom: 13, width: 12, height: 12, background: '#fff',
                borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
                transform: 'rotate(-45deg)',
              }} />
            </div>
          </div>
          {/* 犬: 右端固定 */}
          <window.LottieBox src="/assets/dog_blue.json" viewBox="560 120 640 820"
            style={{ position: 'absolute', right: 14, bottom: 0, width: 104, height: 132 }} />
        </div>
        <Btn variant="amethyst" size="lg" full onClick={() => {
          if (live.user) { go(live.userDoc?.coupleId ? 'home' : 'pairing', {}, { replace: true }); }
          else go('auth', {}, { replace: true });
        }}>はじめる</Btn>
        <p style={{ margin: 0, fontSize: 12.5, color: 'var(--ink-faint)', textAlign: 'center' }}>
          メールアドレスだけで始められます（パスワード不要）
        </p>
      </div>
    </div>
  );
}

/* ════════ AUTH — メール + 6桁認証コード ════════ */
/* AuthScreen の外で定義（内側で定義すると再レンダーごとに input がリマウントされる） */
function AuthShell({ children, title, sub, overlay }) {
  return (
    <div style={{ height: '100%', position: 'relative', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <Blobs opacity={0.6} />
      <div style={{ position: 'relative', paddingTop: 70, paddingBottom: 6, textAlign: 'center' }}>
        <Charm size={40} />
      </div>
      <div className="noscroll" style={{ flex: 1, overflowY: 'auto', position: 'relative', padding: '14px 26px 30px' }}>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, color: 'var(--ink)', margin: '6px 0 4px' }}>{title}</h1>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.7, margin: '0 0 22px' }}>{sub}</p>
        {children}
      </div>
      {overlay}
    </div>
  );
}

/* 審査員用テストログインの案内ダイアログ（ボトムシート） */
function JudgeLoginDialog({ open, busy, onClose, onConfirm }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 60, background: 'rgba(40,34,28,.32)', backdropFilter: 'blur(2px)', display: 'flex', alignItems: 'flex-end', animation: 'risefade .25s' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: 'var(--paper)', borderRadius: '26px 26px 0 0', padding: '14px 22px 30px', boxShadow: '0 -10px 40px rgba(0,0,0,.18)', animation: 'floatup .3s ease', maxHeight: '82%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <div style={{ width: 40, height: 4, borderRadius: 9, background: 'var(--line-2)', margin: '0 auto 16px', flexShrink: 0 }} />
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, color: 'var(--ink)', flexShrink: 0 }}>テストユーザーで体験する</div>
        <div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 3, marginBottom: 14, flexShrink: 0 }}>審査員のみなさま向けの入り口です</div>
        <div className="noscroll" style={{ overflowY: 'auto', flex: 1 }}>
          <p style={{ margin: '0 0 14px', fontSize: 13, lineHeight: 1.9, color: 'var(--ink-soft)' }}>
            このボタンを押すと、共有のテストユーザー（<b style={{ color: 'var(--ink)' }}>test@example.com</b>）としてログインした状態になります。メール認証は不要で、すぐに機能をお試しいただけます。
          </p>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, background: 'color-mix(in srgb, var(--gold) 14%, var(--paper))', border: '1px solid color-mix(in oklch, var(--gold) 34%, transparent)', borderRadius: 14, padding: '12px 14px' }}>
            <span style={{ fontSize: 15, lineHeight: 1.4 }}>⚠️</span>
            <span style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.8 }}>
              このテストユーザーは<b style={{ color: 'var(--ink)' }}>他の審査員の方と共有</b>されており、誰でも内容を自由に編集できます。表示が乱れていた場合は申し訳ございません。
            </span>
          </div>
          <p style={{ margin: '14px 0 0', fontSize: 12.5, lineHeight: 1.9, color: 'var(--ink-soft)' }}>
            まっさらな状態でお試しになりたい場合は、この画面を閉じて<b style={{ color: 'var(--ink)' }}>ご自身のメールアドレス</b>でログインいただくと、完全に新規のユーザーとして開始できます。そちらもぜひお試しください。
          </p>
        </div>
        <div style={{ paddingTop: 16, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Btn variant="amethyst" full size="lg" disabled={busy} onClick={onConfirm}>
            {busy ? 'ログイン中…' : 'テストユーザーでログイン'}
          </Btn>
          <Btn variant="ghost" full size="md" disabled={busy} onClick={onClose}>閉じる</Btn>
        </div>
      </div>
    </div>
  );
}

function AuthScreen() {
  const { go, toast } = useApp();
  // stage: 'email' メアド入力 / 'code' 6桁コード入力
  const [stage, setStage] = useStateA('email');
  const [email, setEmail] = useStateA('');
  const [code, setCode] = useStateA('');
  const [busy, setBusy] = useStateA(false);
  const [aboutOpen, setAboutOpen] = useStateA(false); // 「このアプリについて」ダイアログ
  const [judgeOpen, setJudgeOpen] = useStateA(false); // 審査員用テストログインの案内ダイアログ

  // 審査員用: test@example.com（サーバー側でコード000000固定・メール送信なし）で即ログイン
  const testLogin = async () => {
    setBusy(true);
    try {
      await Amulet.requestEmailCode('test@example.com'); // メールは飛ばない
      await Amulet.verifyEmailCode('test@example.com', '000000');
      go('home', {}, { replace: true });
    } catch (e) {
      console.error(e);
      toast(Amulet.friendlyError(e));
    } finally { setBusy(false); setJudgeOpen(false); }
  };

  const send = async () => {
    if (!/^\S+@\S+\.\S+$/.test(email)) { toast('メールアドレスの形式を確認してください'); return; }
    setBusy(true);
    try {
      await Amulet.requestEmailCode(email.trim().toLowerCase());
      setCode('');
      setStage('code');
    } catch (e) {
      console.error(e);
      toast(Amulet.friendlyError(e));
    } finally { setBusy(false); }
  };

  const verify = async () => {
    const c = code.replace(/\D/g, '');
    if (c.length !== 6) { toast('6桁のコードを入力してください'); return; }
    setBusy(true);
    try {
      await Amulet.verifyEmailCode(email.trim().toLowerCase(), c);
      // サインイン成功 → app.jsx の自動ルーティングに任せず明示遷移。
      // サインイン画面には戻せないので履歴を置き換える
      go('onboarding', {}, { replace: true });
    } catch (e) {
      console.error(e);
      toast(Amulet.friendlyError(e));
    } finally { setBusy(false); }
  };

  if (stage === 'code') {
    return (
      <AuthShell title="コードを入力" sub={`${email} 宛に6桁の認証コードを送りました。`}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="認証コード" icon="lock" placeholder="000000" type="tel"
            value={code} onChange={(v) => setCode(v.replace(/\D/g, '').slice(0, 6))} />
        </div>
        <div style={{ marginTop: 22 }}>
          <Btn variant="amethyst" size="lg" full disabled={busy} onClick={verify}>{busy ? '確認中…' : 'サインイン'}</Btn>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18 }}>
          <button onClick={() => setStage('email')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-soft)', fontSize: 13.5, fontFamily: 'var(--font-ui)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 3 }}>
            メールアドレスを変える
          </button>
          <button onClick={send} disabled={busy} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--amethyst)', fontSize: 13.5, fontFamily: 'var(--font-ui)', fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 3 }}>
            コードを再送
          </button>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 20, background: 'color-mix(in srgb, var(--gold) 14%, var(--paper))', border: '1px solid color-mix(in oklch, var(--gold) 34%, transparent)', borderRadius: 14, padding: '12px 14px' }}>
          <span style={{ fontSize: 15, lineHeight: 1.4 }}>📩</span>
          <span style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
            <b style={{ color: 'var(--ink)' }}>迷惑メール（スパム）フォルダに届くことがよくあります。</b>
            受信トレイに見当たらないときは、必ず迷惑メールフォルダもご確認ください。コードの有効期限は10分です。
          </span>
        </div>
      </AuthShell>
    );
  }

  return (
    <AuthShell title="はじめまして" sub="メールアドレスに6桁の認証コードを送ります。パスワードはありません。"
      overlay={<>
        <window.AboutAppDialog open={aboutOpen} onClose={() => setAboutOpen(false)} />
        <JudgeLoginDialog open={judgeOpen} busy={busy} onClose={() => setJudgeOpen(false)} onConfirm={testLogin} />
      </>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Field label="メールアドレス" icon="link" placeholder="you@example.com" type="email" value={email} onChange={setEmail} />
      </div>
      <div style={{ marginTop: 22 }}>
        <Btn variant="amethyst" size="lg" full disabled={busy} onClick={send}>{busy ? '送信中…' : 'コードを送る'}</Btn>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 22, background: 'color-mix(in srgb, var(--amethyst) 8%, var(--paper))', border: '1px solid color-mix(in oklch, var(--amethyst) 20%, transparent)', borderRadius: 14, padding: '12px 14px' }}>
        <Icon name="lock" size={16} style={{ color: 'color-mix(in oklch, var(--amethyst) 62%, var(--ink))', flexShrink: 0, marginTop: 1 }} />
        <span style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
          初めての方も、2回目以降の方も同じ手順です。アカウントは自動でつくられ、パスワードを保存することはありません。
        </span>
      </div>
      <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--ink-faint)', lineHeight: 1.7, marginTop: 22 }}>
        Amulet はハッカソンのプロトタイプです。続けることで
        <button type="button" onClick={() => setAboutOpen(true)}
          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', font: 'inherit', color: 'var(--amethyst)', fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 2 }}>
          このアプリについて
        </button>
        に同意したものとみなされます（タップで内容を表示）
      </p>

      {/* ── 審査員用入り口 ── */}
      <div style={{ marginTop: 30, paddingTop: 22, borderTop: '1px dashed var(--line-2)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, marginBottom: 12 }}>
          <Icon name="sparkle" size={13} style={{ color: 'var(--gold)' }} />
          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10.5, letterSpacing: '.2em', color: 'var(--ink-faint)', fontWeight: 600 }}>
            FOR JUDGES ・ 審査員のみなさまへ
          </span>
        </div>
        <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.75, margin: '0 0 14px' }}>
          ログインの手間なくすぐお試しいただけます。<br />下のボタンで共有のテストユーザーとして体験できます。
        </p>
        <Btn variant="soft" size="lg" full icon="sparkle" disabled={busy} onClick={() => setJudgeOpen(true)}>
          テストユーザーでログイン
        </Btn>
      </div>
    </AuthShell>
  );
}

/* ════════ ONBOARDING — 名前の登録 ════════ */
function OnboardingScreen() {
  const { go, back, live, toast } = useApp();
  const [name, setName] = useStateA(live.userDoc?.name || '');
  const [busy, setBusy] = useStateA(false);

  const save = async () => {
    const v = name.trim();
    if (!v) { toast('名前を入力してください'); return; }
    setBusy(true);
    try {
      await Amulet.saveName(v.slice(0, 20));
      // ペア成立済み＝設定からの名前編集。呼び出し元（設定）へ戻す。
      // 初回登録なら次はペアリングで、この画面には戻せない。
      if (live.userDoc?.coupleId) back();
      else go('pairing', {}, { replace: true });
    } catch (e) {
      console.error(e);
      toast(Amulet.friendlyError(e));
    } finally { setBusy(false); }
  };

  return (
    <div style={{ height: '100%', position: 'relative', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <Blobs opacity={0.55} />
      <div className="noscroll" style={{ flex: 1, overflowY: 'auto', position: 'relative', padding: '90px 26px 30px' }}>
        <Eyebrowy>STEP — PROFILE</Eyebrowy>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, color: 'var(--ink)', margin: '10px 0 6px' }}>なんて呼べばいい？</h1>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.7, margin: '0 0 24px' }}>
          この名前はパートナーにも表示されます。<br />ニックネームでも大丈夫。
        </p>
        <Field label="あなたの名前" icon="edit" placeholder="みなと" value={name} onChange={setName} />
        <div style={{ marginTop: 22 }}>
          <Btn variant="amethyst" size="lg" full disabled={busy} onClick={save}>{busy ? '保存中…' : 'これでOK'}</Btn>
        </div>
      </div>
    </div>
  );
}

/* ════════ PAIRING ════════ */
function PairingScreen() {
  const { go, back, live, toast } = useApp();
  const [linked, setLinked] = useStateA(false);
  const [partnerName, setPartnerName] = useStateA('');
  const [copied, setCopied] = useStateA(false);
  const [code, setCode] = useStateA('');
  const [myCode, setMyCode] = useStateA(null);
  const [busy, setBusy] = useStateA(false);
  const wasUnpaired = useRefA(!live.userDoc?.coupleId);

  // 自分の招待コードを発行
  useEffectA(() => {
    if (!live.user) return;
    let dead = false;
    Amulet.createInvite()
      .then(r => { if (!dead) setMyCode(r.code); })
      .catch(e => {
        // すでにペア済みなどは静かにスキップ
        console.warn('createInvite:', e.message);
      });
    return () => { dead = true; };
  }, [live.user]);

  // パートナーが自分のコードを使った → userDoc.coupleId が立つ（双方向反映）
  useEffectA(() => {
    if (wasUnpaired.current && live.userDoc?.coupleId && !linked) {
      Amulet.fetchPartner(live.userDoc.coupleId)
        .then(p => setPartnerName(p?.name || ''))
        .finally(() => setLinked(true));
    }
  }, [live.userDoc?.coupleId]);

  useEffectA(() => {
    if (!linked) return;
    // ペア成立後にペアリング画面へ戻れても意味がないので履歴を置き換える
    const t = setTimeout(() => go('home', {}, { replace: true }), 2300);
    return () => clearTimeout(t);
  }, [linked]);

  const redeem = async () => {
    const v = code.trim().toUpperCase();
    if (v.length < 4) { toast('招待コードを入力してください'); return; }
    setBusy(true);
    try {
      const r = await Amulet.redeemInvite(v);
      setPartnerName(r.partnerName || '');
      setLinked(true);
    } catch (e) {
      console.error(e);
      toast(Amulet.friendlyError(e));
    } finally { setBusy(false); }
  };

  const copy = () => {
    if (!myCode) return;
    navigator.clipboard?.writeText(myCode).catch(() => {});
    setCopied(true); setTimeout(() => setCopied(false), 1500);
  };
  const share = () => {
    const text = `Amulet で一緒にデートを計画しよう。招待コード: ${myCode}`;
    if (navigator.share) navigator.share({ text }).catch(() => {});
    else { navigator.clipboard?.writeText(text).catch(() => {}); toast('招待文をコピーしました'); }
  };

  if (linked) {
    const myName = live.userDoc?.name || ME_FALLBACK;
    return (
      <div style={{ height: '100%', background: 'var(--bg)', position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 26 }}>
        <Blobs />
        <div style={{ position: 'relative', animation: 'risefade .8s both' }}>
          <svg width="160" height="90" viewBox="0 0 160 90">
            <circle cx="62" cy="45" r="30" fill="none" stroke="var(--me)" strokeWidth="5" style={{ animation: 'pinpop .7s both' }} />
            <circle cx="98" cy="45" r="30" fill="none" stroke="var(--partner)" strokeWidth="5" style={{ animation: 'pinpop .7s .2s both' }} />
            <circle cx="80" cy="45" r="4" fill="var(--amethyst)" style={{ animation: 'risefade .6s .7s both' }} />
          </svg>
        </div>
        <div style={{ position: 'relative', textAlign: 'center', animation: 'risefade .8s .3s both' }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, color: 'var(--ink)' }}>ふたりが、つながりました</div>
          <div style={{ color: 'var(--ink-soft)', fontSize: 14.5, marginTop: 8 }}>{myName} ＆ {partnerName || 'パートナー'}</div>
        </div>
      </div>
    );
  }

  const codeChars = (myCode || '······').split('');

  return (
    <div style={{ height: '100%', background: 'var(--bg)', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <Blobs opacity={0.55} />
      <div className="noscroll" style={{ flex: 1, overflowY: 'auto', position: 'relative', padding: '76px 26px 30px' }}>
        <Eyebrowy>STEP — PAIRING</Eyebrowy>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 28, color: 'var(--ink)', margin: '10px 0 6px' }}>パートナーと、お守りを結ぶ</h1>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.7, margin: '0 0 24px' }}>
          どちらかの招待コードを相手が入力すると、ふたりのAmuletがひとつになります。
        </p>

        {/* my code */}
        <div style={{ background: 'var(--surface)', borderRadius: 22, padding: 22, border: '1px solid var(--line)', boxShadow: '0 14px 30px -24px rgba(61,54,44,.5)' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-soft)', marginBottom: 12 }}>あなたの招待コード{!myCode && '（発行中…）'}</div>
          <div style={{ display: 'flex', gap: 9, justifyContent: 'center', marginBottom: 18 }}>
            {codeChars.map((c, i) => (
              <div key={i} style={{
                width: 40, height: 52, borderRadius: 12, background: 'var(--paper)',
                border: '1.5px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-serif)', fontSize: 26, color: myCode ? 'var(--ink)' : 'var(--ink-faint)', fontWeight: 500,
              }}>{c}</div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Btn variant="soft" full icon="copy" onClick={copy} disabled={!myCode}>
              {copied ? 'コピーしました' : 'コピー'}
            </Btn>
            <Btn variant="soft" full icon="share" onClick={share} disabled={!myCode}>シェア</Btn>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-faint)', textAlign: 'center', marginTop: 12 }}>
            相手がコードを入力すると、この画面が自動で切り替わります
          </div>
        </div>

        <div style={{ textAlign: 'center', color: 'var(--ink-faint)', fontSize: 12.5, margin: '22px 0 14px', fontWeight: 600 }}>— または、相手のコードを入力 —</div>

        <Field placeholder="パートナーの招待コード" value={code} onChange={setCode} icon="lock" />
        <div style={{ marginTop: 14 }}>
          <Btn variant="amethyst" size="lg" full disabled={busy} onClick={redeem}>{busy ? '確認中…' : 'ペアリングする'}</Btn>
        </div>

        <div style={{ textAlign: 'center', marginTop: 22 }}>
          <button onClick={back} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-soft)', fontSize: 14, fontFamily: 'var(--font-ui)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 3 }}>
            あとでやる（ひとりで使い始める）
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen, AuthScreen, OnboardingScreen, PairingScreen, Blobs, Wordmark });

})();
