// Screens A: Onboarding, Home, Menu, Today result, Dream input.
// Each screen is a function that takes `{ t }` (theme) and returns a
// component tree placed inside a <Phone>. All visuals are pure CSS/SVG.

// ─── Tiny illustration: the brand-logo "M" disc.
function BrandDisc({ t, size = 84 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `radial-gradient(circle at 35% 35%, #fff 0%, #fce8ee 45%, #e6d6f5 100%)`,
      boxShadow: `0 4px 14px ${t.accent}30, inset 0 0 0 1px ${t.gold}40`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg width={size*0.9} height={size*0.9} viewBox="0 0 100 100">
        <defs>
          <linearGradient id={`mg-${t.key}-${size}`} x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor={t.gold}/>
            <stop offset=".5" stopColor={t.accent}/>
            <stop offset="1" stopColor={t.accentDeep}/>
          </linearGradient>
        </defs>
        <text x="50" y="68" textAnchor="middle" fontFamily={t.titleFont} fontSize="62" fontWeight="500" fill={`url(#mg-${t.key}-${size})`} fontStyle="italic">M</text>
        <path d="M 80 18 L 82 26 L 90 28 L 82 30 L 80 38 L 78 30 L 70 28 L 78 26 Z" fill={t.gold}/>
        <circle cx="20" cy="30" r="1.2" fill={t.gold}/>
        <circle cx="86" cy="48" r="1.2" fill={t.gold}/>
        <circle cx="18" cy="68" r="1" fill={t.gold}/>
      </svg>
    </div>
  );
}

// ─── 1. Onboarding ─────────────────────────────────────────────
function ScreenOnboarding({ t }) {
  return (
    <Phone t={t} nav={null}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '24px 26px 30px', textAlign: 'center', position: 'relative' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, paddingBottom: 20 }}>
          <BrandDisc t={t} size={104}/>
          <div>
            <div style={{ fontFamily: t.latinFont, fontSize: 13, color: t.gold, letterSpacing: '0.32em', textTransform: 'uppercase' }}>Mirise</div>
            <div style={{
              fontFamily: t.titleFont, fontWeight: t.titleWeight,
              fontSize: 22, color: t.ink, letterSpacing: t.titleTracking,
              marginTop: 4, lineHeight: 1.5,
            }}>やさしい光に、<br/>そっと耳をすませて</div>
          </div>
          <div style={{ color: t.inkSoft, fontSize: 11, lineHeight: 1.8, maxWidth: 240 }}>
            毎日の占いと占い師が、<br/>あなたの今日とこれからを<br/>やさしく照らします。
          </div>
        </div>
        {/* DOB picker mock */}
        <div style={{ width: '100%' }}>
          <Bordered t={t} padding={14}>
            <div style={{ fontFamily: t.titleFont, fontSize: 12, color: t.inkSoft, letterSpacing: '0.1em', marginBottom: 10, textAlign: 'center' }}>あなたの生年月日</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
              {[['1992','年'],['05','月'],['20','日']].map(([n,u],i)=>(
                <div key={i} style={{
                  flex: 1, background: t.surfaceStrong, borderRadius: 12,
                  padding: '8px 0', textAlign: 'center',
                  boxShadow: `inset 0 0 0 1px ${t.border}`,
                }}>
                  <div style={{ fontFamily: t.latinFont, fontSize: 22, fontWeight: 500, color: t.ink, lineHeight: 1 }}>{n}</div>
                  <div style={{ fontSize: 9, color: t.inkMuted, marginTop: 3 }}>{u}</div>
                </div>
              ))}
            </div>
          </Bordered>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
            <CTAButton t={t} style={{ width: '100%' }}>はじめる</CTAButton>
            <div style={{ fontSize: 10, color: t.inkMuted, marginTop: 4 }}>通知をオンにすると毎朝の運勢が届きます</div>
          </div>
        </div>
      </div>
    </Phone>
  );
}

// ─── 2. Home ────────────────────────────────────────────────────
function ScreenHome({ t }) {
  return (
    <Phone t={t} nav="今日を占う">
      <div style={{ padding: '0 16px 90px', overflowY: 'auto', height: '100%' }}>
        {/* Header — greeting */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 4px 14px' }}>
          <div style={{ color: t.ink }}>
            <svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 16, color: t.ink, letterSpacing: t.titleTracking }}>おはようございます</div>
            <div style={{ fontSize: 9, color: t.inkSoft, marginTop: 2 }}>今日も素敵な1日になりますように</div>
          </div>
          <div style={{ position: 'relative', color: t.ink }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5L6 16zm3 4a3 3 0 0 0 6 0" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
            <span style={{ position: 'absolute', top: -2, right: -2, width: 6, height: 6, borderRadius: '50%', background: t.accent }}/>
          </div>
        </div>

        {/* Hero — one-line fortune */}
        <Bordered t={t} padding={20} style={{ textAlign: 'center', background: `linear-gradient(160deg, #fff7ec, ${t.cardBg} 60%, #f5e6f5)` }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.gold, letterSpacing: '0.3em', marginBottom: 8 }}>今日の一言運勢</div>
          <Sparkle size={10} color={t.gold} style={{ position: 'absolute', top: 14, left: 18 }}/>
          <Sparkle size={8} color={t.gold} style={{ position: 'absolute', top: 18, right: 24 }}/>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 14, lineHeight: 1.9, color: t.ink, letterSpacing: '0.04em' }}>
            あなたのやさしさが<br/>
            誰かの心を明るくします。<br/>
            自分も大切に過ごして♡
          </div>
        </Bordered>

        {/* Lucky color + number */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
          <Bordered t={t} padding={12} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, #fff, #f0c8d8 60%, #d9a0c0)', boxShadow: `0 0 0 1px ${t.border}` }}/>
            <div>
              <div style={{ fontSize: 9, color: t.inkSoft, letterSpacing: '0.1em' }}>ラッキーカラー</div>
              <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, marginTop: 2 }}>ラベンダーピンク</div>
            </div>
          </Bordered>
          <Bordered t={t} padding={12} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 38, height: 38, borderRadius: '50%', background: `linear-gradient(135deg, ${t.goldSoft}, ${t.gold})`, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: t.latinFont, fontSize: 22, fontWeight: 600, lineHeight: 1 }}>7</div>
            <div>
              <div style={{ fontSize: 9, color: t.inkSoft, letterSpacing: '0.1em' }}>ラッキーナンバー</div>
              <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, marginTop: 2 }}>セブン</div>
            </div>
          </Bordered>
        </div>

        {/* おすすめ占い */}
        <div style={{ marginTop: 18 }}>
          <SectionHead t={t} label="おすすめ占い" action="すべて見る ›"/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {[
              { icon: 'star', label: '今日占い', sub: '毎日の運勢を\nチェック', bg: '#fbe4ec' },
              { icon: 'tarot', label: 'タロット占い', sub: '今と未来を\n占う', bg: '#ede4f6' },
              { icon: 'heart', label: '相性占い', sub: '気になる人との\n相性をみる', bg: '#fce4e0' },
            ].map(c => (
              <div key={c.label} style={{
                background: c.bg, borderRadius: t.cardRadius,
                padding: '12px 8px', textAlign: 'center',
                boxShadow: `inset 0 0 0 1px ${t.border}`,
              }}>
                <div style={{ width: 32, height: 32, margin: '0 auto 6px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill={t.accent} opacity="0.85"><path d={ICONS[c.icon]} stroke={t.accentDeep} strokeWidth="0.6" strokeLinejoin="round"/></svg>
                </div>
                <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.04em' }}>{c.label}</div>
                <div style={{ fontSize: 8.5, color: t.inkSoft, marginTop: 3, whiteSpace: 'pre-line', lineHeight: 1.5 }}>{c.sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 保存したい小さな診断 */}
        <div style={{ marginTop: 16 }}>
          <SectionHead t={t} label="保存したい小さな診断" action="すべて見る ›"/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
            {[
              { motif: 'cup', label: '今日の恋愛\nワンポイント診断', g: 'linear-gradient(160deg,#fce4ec,#f1d4e6)' },
              { motif: 'bottle', label: 'あなたの魅力\n発見', g: 'linear-gradient(160deg,#f0e3f7,#e0d3f0)' },
              { motif: 'mail', label: '今のあなたに\n必要なメッセージ', g: 'linear-gradient(160deg,#fde9d8,#f8d7c8)' },
            ].map((c,i) => (
              <div key={i} style={{
                background: c.g, borderRadius: t.cardRadius,
                padding: '12px 6px 10px', textAlign: 'center',
                boxShadow: `inset 0 0 0 1px ${t.border}`,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {c.motif === 'cup' && <svg width="30" height="30" viewBox="0 0 30 30" fill="none"><path d="M9 7h12v6a6 6 0 0 1-12 0V7z" stroke={t.accentDeep} strokeWidth="1"/><path d="M15 19v4M11 23h8" stroke={t.accentDeep} strokeWidth="1" strokeLinecap="round"/><path d="M14 10c1-2 3-2 4 0" stroke={t.gold} strokeWidth="0.8" fill="none"/></svg>}
                  {c.motif === 'bottle' && <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M11 4h6v3l2 3v12a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3V10l2-3V4z" stroke={t.accentDeep} strokeWidth="1"/><path d="M9 17h10" stroke={t.gold} strokeWidth="0.7"/></svg>}
                  {c.motif === 'mail' && <svg width="30" height="22" viewBox="0 0 30 22" fill="none"><rect x="2" y="3" width="26" height="16" rx="2" stroke={t.accentDeep} strokeWidth="1"/><path d="M3 5l12 8 12-8" stroke={t.accentDeep} strokeWidth="1"/><path d="M22 7l3-1m-22 1l3-1" stroke={t.gold} strokeWidth="0.7"/></svg>}
                </div>
                <div style={{ fontSize: 8.5, color: t.ink, marginTop: 4, whiteSpace: 'pre-line', lineHeight: 1.5, fontFamily: t.bodyFont, fontWeight: 500 }}>{c.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Phone>
  );
}

// ─── 3. Menu ────────────────────────────────────────────────────
function ScreenMenu({ t }) {
  const today = [
    { icon: 'sun', label: '今日占い', sub: '今日の運勢を\nチェック' },
    { icon: 'cloud', label: '近未来占い', sub: '3ヶ月先の\nヒント' },
    { icon: 'heart', label: '相性占い', sub: '気になる人との\nつながり' },
    { icon: 'star', label: '開運日占い', sub: '良い日を\nお知らせ' },
    { icon: 'compass', label: '人生占い', sub: '人生の流れと\n方向性' },
    { icon: 'sparkle', label: '総合占い', sub: 'あなたの今を\n総合診断' },
  ];
  return (
    <Phone t={t} nav="今日を占う">
      <TopBar t={t} title="占いメニュー"/>
      {/* Segmented control */}
      <div style={{ padding: '0 16px 12px' }}>
        <div style={{
          background: t.cardBgAlt, borderRadius: 999, padding: 4,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4,
          boxShadow: `inset 0 0 0 1px ${t.border}`,
        }}>
          {['今日を占う', 'これからを占う', 'マイページ'].map((s,i) => (
            <div key={s} style={{
              textAlign: 'center', padding: '8px 0',
              borderRadius: 999,
              background: i === 0 ? `linear-gradient(135deg, ${t.accent}, ${t.accentDeep})` : 'transparent',
              color: i === 0 ? '#fff' : t.inkSoft,
              fontFamily: t.bodyFont, fontWeight: 600, fontSize: 11,
              boxShadow: i === 0 ? `0 4px 12px ${t.accent}40` : 'none',
            }}>{s}</div>
          ))}
        </div>
      </div>
      <div style={{ padding: '4px 16px 90px', overflowY: 'auto', height: 'calc(100% - 100px)' }}>
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <div style={{ fontFamily: t.latinFont, fontSize: 11, color: t.gold, letterSpacing: '0.3em' }}>FOR TODAY</div>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 14, color: t.ink, marginTop: 4, letterSpacing: t.titleTracking }}>今日のためにそっと開く占い</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {today.map((c,i) => (
            <div key={c.label} style={{
              background: i % 2 ? t.cardBgAlt : t.cardBg,
              borderRadius: t.cardRadius, padding: '18px 14px',
              boxShadow: `0 2px 10px rgba(180,130,160,0.08), inset 0 0 0 1px ${t.border}`,
              display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
              position: 'relative',
            }}>
              <div style={{
                width: 46, height: 46, borderRadius: '50%',
                background: `radial-gradient(circle at 35% 30%, #fff, ${t.cardBgAlt})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: `inset 0 0 0 1px ${t.gold}30`, marginBottom: 8,
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24"><path d={ICONS[c.icon]} stroke={t.accentDeep} strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 13, color: t.ink, letterSpacing: '0.05em' }}>{c.label}</div>
              <div style={{ fontSize: 9, color: t.inkSoft, marginTop: 4, lineHeight: 1.6, whiteSpace: 'pre-line' }}>{c.sub}</div>
              {i === 0 && <span style={{ position: 'absolute', top: 8, right: 10, fontFamily: t.latinFont, fontSize: 9, color: t.gold, letterSpacing: '0.2em' }}>POPULAR</span>}
            </div>
          ))}
        </div>
      </div>
    </Phone>
  );
}

// ─── 4. Today result ────────────────────────────────────────────
function ScreenTodayResult({ t }) {
  return (
    <Phone t={t} nav="今日を占う">
      <TopBar t={t} title="今日占いの結果" back action={
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      }/>
      <div style={{ padding: '0 14px 90px', overflowY: 'auto', height: 'calc(100% - 50px)' }}>
        {/* Score */}
        <Bordered t={t} padding={18} style={{ textAlign: 'center', background: `linear-gradient(180deg, #fff5ee, ${t.cardBg})` }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.gold, letterSpacing: '0.3em' }}>今日の運勢スコア</div>
          <div style={{ position: 'relative', marginTop: 6 }}>
            <Sparkle color={t.gold} size={14} style={{ position: 'absolute', top: 0, left: 50 }}/>
            <Sparkle color={t.gold} size={10} style={{ position: 'absolute', top: 12, right: 60 }}/>
            <div style={{ fontFamily: t.latinFont, fontSize: 64, fontWeight: 500, color: t.accentDeep, lineHeight: 1, letterSpacing: '0.02em' }}>
              86<span style={{ fontSize: 16, color: t.inkSoft }}>/100</span>
            </div>
          </div>
          <div style={{ marginTop: 8, display: 'flex', justifyContent: 'center', gap: 3, color: t.gold }}>
            {[1,2,3,4].map(i => <span key={i}>★</span>)}
            <span style={{ color: t.goldSoft }}>★</span>
          </div>
        </Bordered>
        {/* Stat row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, marginTop: 12 }}>
          {[
            { label: '恋愛運', val: 85, icon: 'heart' },
            { label: '仕事運', val: 78, icon: 'briefcase' },
            { label: '金運', val: 90, icon: 'gift' },
            { label: '人間関係', val: 82, icon: 'user' },
          ].map(s => (
            <div key={s.label} style={{
              background: t.surfaceStrong, borderRadius: 12,
              padding: '10px 4px', textAlign: 'center',
              boxShadow: `inset 0 0 0 1px ${t.border}`,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" style={{ color: t.accent }}><path d={ICONS[s.icon]} stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <div style={{ fontSize: 9, color: t.inkSoft, marginTop: 2 }}>{s.label}</div>
              <div style={{ fontFamily: t.latinFont, fontSize: 17, fontWeight: 600, color: t.ink, lineHeight: 1.1 }}>{s.val}</div>
            </div>
          ))}
        </div>
        {/* Message card */}
        <Bordered t={t} padding={14} style={{ marginTop: 12 }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.gold, letterSpacing: '0.2em', textAlign: 'center', marginBottom: 8, position: 'relative' }}>
            <span style={{ background: t.cardBg, padding: '0 10px', position: 'relative', zIndex: 1 }}>✦ 今日のメッセージ ✦</span>
            <GoldRule color={t.gold} style={{ position: 'absolute', top: '50%', left: 0, zIndex: 0 }}/>
          </div>
          <div style={{ fontFamily: t.titleFont, fontSize: 11.5, lineHeight: 2, color: t.ink, letterSpacing: '0.04em' }}>
            穏やかな気持ちで1日を過ごすことで、<br/>
            良いご縁が広がる日になりそう。<br/>
            小さな幸せに気づけるあなたは<br/>
            とても魅力的です♡
          </div>
        </Bordered>
        {/* Lucky actions */}
        <Bordered t={t} padding={14} style={{ marginTop: 10 }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.gold, letterSpacing: '0.2em', textAlign: 'center', marginBottom: 10 }}>✦ 開運アクション ✦</div>
          {[
            'ラベンダー系の小物を身につける',
            '朝日を浴びて深呼吸する',
            '感謝の気持ちを言葉にする',
          ].map((a,i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '4px 0', fontSize: 11, color: t.ink, lineHeight: 1.6 }}>
              <span style={{ color: t.accent, marginTop: 1 }}>✿</span>
              <span>{a}</span>
            </div>
          ))}
        </Bordered>
        {/* Save/Share */}
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <CTAButton t={t} secondary style={{ flex: 1 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d={ICONS.bookmark} stroke="currentColor" strokeWidth="1.5" fill="none"/></svg> 保存する
          </CTAButton>
          <CTAButton t={t} secondary style={{ flex: 1 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d={ICONS.share} stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg> シェアする
          </CTAButton>
        </div>
        {/* Paid CTA */}
        <div style={{
          marginTop: 14, padding: 12, borderRadius: t.cardRadius,
          background: `linear-gradient(135deg, ${t.cardBgAlt}, ${t.cardBg})`,
          boxShadow: `inset 0 0 0 1px ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: 'linear-gradient(135deg,#f8d8c0,#e8b8b8)',
            flexShrink: 0,
          }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 10.5, color: t.ink, lineHeight: 1.5 }}>
              もっと詳しく見てもらいたい方へ<br/>
              <span style={{ fontSize: 9, color: t.inkSoft }}>占い師に今日のテーマを相談してみませんか?</span>
            </div>
          </div>
          <CTAButton t={t} small>詳しく見る</CTAButton>
        </div>
      </div>
    </Phone>
  );
}

// ─── 5. Dream input ─────────────────────────────────────────────
function ScreenDreamInput({ t }) {
  const moods = ['不安', 'もやもや', '嬉しい', '切ない', '懐かしい'];
  const dreams = ['空を飛ぶ夢', '追いかけられる夢', '元恋人の夢', '水の夢', '歯が抜ける夢', '知らない場所の夢'];
  return (
    <Phone t={t} nav="これからを占う">
      <TopBar t={t} title="夢占い" subtitle="DREAM DIAGNOSIS" back/>
      <div style={{ padding: '4px 16px 90px', overflowY: 'auto', height: 'calc(100% - 60px)' }}>
        <div style={{ textAlign: 'center', marginBottom: 14, color: t.inkSoft, fontSize: 10.5, lineHeight: 1.7 }}>
          見た夢を教えてください。<br/>
          夢のことばを、やさしく読み解きます。
        </div>
        {/* Mood */}
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.ink, marginBottom: 6, letterSpacing: '0.08em' }}>夢を見たときの気分</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {moods.map((m,i) => (
              <div key={m} style={{
                padding: '6px 12px', borderRadius: 999,
                background: i === 1 ? `linear-gradient(135deg,${t.accent},${t.accentDeep})` : t.surfaceStrong,
                color: i === 1 ? '#fff' : t.inkSoft,
                fontSize: 11, fontWeight: 500,
                boxShadow: i === 1 ? `0 3px 8px ${t.accent}30` : `inset 0 0 0 1px ${t.border}`,
              }}>{m}</div>
            ))}
          </div>
        </div>
        {/* Textarea mock */}
        <div style={{ marginBottom: 12 }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.ink, marginBottom: 6, letterSpacing: '0.08em' }}>夢の内容</div>
          <div style={{
            background: t.surfaceStrong, borderRadius: 14,
            padding: '12px 14px', minHeight: 120,
            boxShadow: `inset 0 0 0 1px ${t.border}`,
            fontSize: 11, lineHeight: 1.7, color: t.ink,
          }}>
            白い花が一面に咲く野原を、<br/>
            裸足で歩いていました。<span style={{ display: 'inline-block', width: 1.5, height: 13, background: t.accent, marginLeft: 2, verticalAlign: 'middle' }}/>
            <div style={{ color: t.inkMuted, marginTop: 6, fontSize: 10 }}>500文字以内でご入力ください</div>
          </div>
        </div>
        {/* Suggestions */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontFamily: t.titleFont, fontSize: 11, color: t.ink, marginBottom: 6, letterSpacing: '0.08em' }}>よく見る夢から選ぶ</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {dreams.map(d => (
              <div key={d} style={{
                padding: '7px 12px', borderRadius: 999,
                background: t.cardBg, fontSize: 10.5, color: t.ink,
                boxShadow: `inset 0 0 0 1px ${t.border}`,
              }}>＋ {d}</div>
            ))}
          </div>
        </div>
        <CTAButton t={t} style={{ width: '100%' }}>診断をはじめる</CTAButton>
      </div>
    </Phone>
  );
}

Object.assign(window, { BrandDisc, ScreenOnboarding, ScreenHome, ScreenMenu, ScreenTodayResult, ScreenDreamInput });