// Screens B: Dream result, Tarot, Mypage, Paid menu, Counselor profile.

// ─── A reusable tarot card illustration.
function TarotCard({ t, name, label, flipped = false, w = 64, h = 96 }) {
  if (flipped) return (
    <div style={{ width: w, height: h, borderRadius: 6, background: `linear-gradient(135deg, ${t.accent}, ${t.accentDeep})`, position: 'relative', boxShadow: `0 6px 14px ${t.accent}40`, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 5, border: `1px solid ${t.goldSoft}`, borderRadius: 4 }}/>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: t.latinFont, fontSize: 24, color: t.goldSoft, fontWeight: 500 }}>M</div>
    </div>
  );
  return (
    <div style={{
      width: w, height: h, borderRadius: 6,
      background: `linear-gradient(180deg, #fff9f1, ${t.cardBg})`,
      boxShadow: `0 6px 16px rgba(180,130,160,0.25), inset 0 0 0 1px ${t.goldSoft}`,
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '6px 4px',
    }}>
      <div style={{ position: 'absolute', inset: 3, border: `0.5px solid ${t.gold}`, borderRadius: 4, opacity: 0.6 }}/>
      <div style={{ fontFamily: t.latinFont, fontSize: 9, color: t.gold, letterSpacing: '0.2em', marginTop: 2 }}>{name.roman}</div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }}>
        <svg width="34" height="46" viewBox="0 0 40 50">
          {name.glyph === 'sun' && <g>
            <circle cx="20" cy="25" r="9" fill={t.gold} opacity="0.6"/>
            {[...Array(8)].map((_,i)=>(<line key={i} x1="20" y1="25" x2={20 + Math.cos(i*Math.PI/4)*18} y2={25 + Math.sin(i*Math.PI/4)*18} stroke={t.gold} strokeWidth="0.8"/>))}
          </g>}
          {name.glyph === 'moon' && <g>
            <circle cx="20" cy="25" r="11" fill="none" stroke={t.gold} strokeWidth="0.8"/>
            <path d="M 13 18 A 12 12 0 0 0 13 32 A 8 8 0 0 1 13 18 Z" fill={t.gold} opacity="0.5"/>
            <circle cx="15" cy="10" r="1" fill={t.gold}/>
            <circle cx="28" cy="40" r="1" fill={t.gold}/>
          </g>}
          {name.glyph === 'star' && <g>
            <path d="M 20 8 L 22 22 L 36 22 L 24 30 L 28 44 L 20 36 L 12 44 L 16 30 L 4 22 L 18 22 Z" fill="none" stroke={t.gold} strokeWidth="0.8"/>
            <path d="M 20 12 L 22 24 L 32 24 L 24 30 L 26 40 L 20 34 L 14 40 L 16 30 L 8 24 L 18 24 Z" fill={t.gold} opacity="0.4"/>
          </g>}
        </svg>
      </div>
      <div style={{ fontFamily: t.titleFont, fontSize: 9, color: t.ink, letterSpacing: '0.1em', textAlign: 'center', lineHeight: 1.2 }}>{name.jp}</div>
    </div>
  );
}

// ─── 6. Dream result ──────────────────────────────────────────
function ScreenDreamResult({ 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={ICONS.share} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      }/>
      <div style={{ padding: '0 14px 90px', overflowY: 'auto', height: 'calc(100% - 50px)' }}>
        {/* Diploma-style card */}
        <Bordered t={t} padding={18} style={{ background: `linear-gradient(180deg, #fff8ee 0%, ${t.cardBg} 50%, #eee0ee 100%)`, position: 'relative' }}>
          {/* corner ornaments */}
          {[[10,10,'tl'],[null,10,'tr'],[10,null,'bl'],[null,null,'br']].map(([l,top,k],i) => (
            <svg key={i} width="20" height="20" viewBox="0 0 20 20" style={{
              position: 'absolute',
              top: top == null ? 'auto' : top, bottom: top == null ? 10 : 'auto',
              left: l == null ? 'auto' : l, right: l == null ? 10 : 'auto',
              transform: i === 1 ? 'scaleX(-1)' : i === 2 ? 'scaleY(-1)' : i === 3 ? 'scale(-1)' : 'none',
            }}>
              <path d="M 2 2 L 12 2 M 2 2 L 2 12 M 2 6 L 6 6 L 6 2" stroke={t.gold} strokeWidth="0.7" fill="none"/>
            </svg>
          ))}
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: t.latinFont, fontSize: 11, color: t.gold, letterSpacing: '0.35em', fontStyle: 'italic' }}>Dream Diagnosis</div>
            <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 19, color: t.ink, letterSpacing: '0.2em', marginTop: 4 }}>診断結果</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center', marginTop: 4 }}>
              <span style={{ flex: 1, height: 0.5, background: t.gold, opacity: 0.5, maxWidth: 50 }}/>
              <Sparkle color={t.gold} size={9}/>
              <span style={{ flex: 1, height: 0.5, background: t.gold, opacity: 0.5, maxWidth: 50 }}/>
            </div>
          </div>
          {/* sections */}
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { icon: '✿', title: '夢の要約', body: '落ち着いた草原を歩いていて、\nキレイな景色を見つける夢を見ました。' },
              { icon: '☾', title: '心理状態', body: '心が安定していて、優しい安らぎを\n求めている状態です。\n新しい自分に出会う準備が整っています。' },
              { icon: '✦', title: '夢が示すサイン', body: 'これから良いご縁が広がる暗示です。\n自分の気持ちに正直になることで、\n幸運のチャンスを引き寄せます。' },
              { icon: '✿', title: '今日からできる開運アドバイス', body: '自分の"好き"な空間を大切に。\n部屋に花を飾る、寝具を整えるなど、\n心地よさを大切にしてみて♡' },
            ].map((s,i) => (
              <div key={i} style={{
                background: i % 2 === 0 ? '#fef0f1' : '#f0e7f8',
                borderRadius: 12, padding: '10px 12px',
                boxShadow: `inset 0 0 0 1px ${t.border}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                  <span style={{ color: t.accent }}>{s.icon}</span>
                  <span style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.05em' }}>{s.title}</span>
                </div>
                <div style={{ fontSize: 10, color: t.inkSoft, lineHeight: 1.7, whiteSpace: 'pre-line' }}>{s.body}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12, textAlign: 'center', fontSize: 9.5, color: t.gold, fontFamily: t.titleFont, letterSpacing: '0.1em' }}>
            あなたの未来は、もっともっと輝きますように。
          </div>
        </Bordered>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <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"/></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" strokeLinejoin="round" strokeLinecap="round"/></svg> シェアする
          </CTAButton>
        </div>
        <div style={{
          marginTop: 12, padding: 12, borderRadius: t.cardRadius,
          background: `linear-gradient(135deg, ${t.cardBgAlt}, ${t.cardBg})`,
          boxShadow: `inset 0 0 0 1px ${t.border}`,
        }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, lineHeight: 1.6, textAlign: 'center' }}>
            夢の意味を占い師に詳しく鑑定してもらう
          </div>
          <div style={{ fontSize: 9.5, color: t.inkSoft, textAlign: 'center', marginTop: 3 }}>あなたの夢には特別なメッセージが</div>
          <div style={{ textAlign: 'center', marginTop: 8 }}>
            <CTAButton t={t} small>相談してみる</CTAButton>
          </div>
        </div>
      </div>
    </Phone>
  );
}

// ─── 7. Tarot ─────────────────────────────────────────────────
function ScreenTarot({ t }) {
  const cards = [
    { jp: '太陽', roman: 'THE SUN', glyph: 'sun', pos: '現在' },
    { jp: '月', roman: 'THE MOON', glyph: 'moon', pos: '障害' },
    { jp: '星', roman: 'THE STAR', glyph: 'star', pos: '近未来' },
  ];
  return (
    <Phone t={t} nav="これからを占う">
      <TopBar t={t} title="タロット占い" subtitle="TAROT READING" back/>
      <div style={{ padding: '0 14px 90px', overflowY: 'auto', height: 'calc(100% - 60px)' }}>
        <div style={{ textAlign: 'center', color: t.inkSoft, fontSize: 10.5, lineHeight: 1.7, marginBottom: 14 }}>
          相談カテゴリ「恋愛」<br/>
          引いたカードがあなたの今を映します
        </div>
        {/* Cards row */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 14, position: 'relative' }}>
          {cards.map((c,i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{ fontFamily: t.latinFont, fontSize: 10, color: t.gold, letterSpacing: '0.2em' }}>{['PAST','BLOCK','FUTURE'][i]}</div>
              <div style={{ fontFamily: t.titleFont, fontSize: 10, color: t.ink, letterSpacing: '0.1em', marginTop: -3 }}>{c.pos}</div>
              <TarotCard t={t} name={c}/>
            </div>
          ))}
        </div>
        {/* Interpretations */}
        {cards.map((c,i) => (
          <Bordered key={i} t={t} padding={12} style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, letterSpacing: '0.06em' }}>{c.pos}</div>
              <div style={{ fontFamily: t.latinFont, fontSize: 10, color: t.gold, letterSpacing: '0.18em' }}>{c.jp} · {c.roman}</div>
            </div>
            <div style={{ fontSize: 10, color: t.inkSoft, lineHeight: 1.8 }}>
              {[
                'あなたの素直な気持ちが、自然と周りを照らしている時期。明るさが武器になります。',
                '少しだけ感情が揺れやすい時。本心と向き合う時間を作るとすっと楽になります。',
                'これから願いがゆっくり叶っていく兆し。焦らず、心の声を信じて。',
              ][i]}
            </div>
          </Bordered>
        ))}
        {/* CTA */}
        <div style={{
          marginTop: 10, padding: 12, borderRadius: t.cardRadius,
          background: `linear-gradient(135deg, ${t.cardBgAlt}, ${t.cardBg})`,
          boxShadow: `inset 0 0 0 1px ${t.border}`,
          textAlign: 'center',
        }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, lineHeight: 1.6 }}>
            このカードを占い師に詳しく見てもらう
          </div>
          <div style={{ marginTop: 8 }}><CTAButton t={t} small>詳しく鑑定する</CTAButton></div>
        </div>
      </div>
    </Phone>
  );
}

// ─── 8. Mypage ────────────────────────────────────────────────
function ScreenMypage({ t }) {
  const items = [
    { icon: 'history', label: '鑑定履歴', sub: 'これまでの結果' },
    { icon: 'bookmark', label: '保存した結果', sub: 'お気に入りをまとめて' },
    { icon: 'bell', label: '通知設定', sub: '通知のタイミング' },
    { icon: 'calendar', label: '誕生日設定', sub: '生年月日の登録・変更' },
    { icon: 'bell', label: 'お知らせ', sub: '最新情報を確認' },
    { icon: 'question', label: '使い方', sub: 'ヘルプとよくある質問' },
  ];
  return (
    <Phone t={t} nav="マイページ">
      <TopBar t={t} title="マイページ" action={
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d={ICONS.settings} stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" strokeLinecap="round"/></svg>
      }/>
      <div style={{ padding: '0 14px 90px', overflowY: 'auto', height: 'calc(100% - 50px)' }}>
        {/* Profile card */}
        <Bordered t={t} padding={14} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BrandDisc t={t} size={56}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 14, color: t.ink, letterSpacing: '0.05em' }}>星野 さくら さん</div>
            <div style={{ fontSize: 10, color: t.inkSoft, marginTop: 3 }}>1992.05.20 生まれ</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 5 }}>
              <span style={{ background: t.chip, color: t.inkSoft, fontSize: 9, padding: '2px 8px', borderRadius: 999 }}>おうし座</span>
              <span style={{ background: t.chip, color: t.inkSoft, fontSize: 9, padding: '2px 8px', borderRadius: 999 }}>A型</span>
            </div>
          </div>
        </Bordered>
        <div style={{ textAlign: 'center', marginTop: 8 }}>
          <CTAButton t={t} secondary small>プロフィールを編集</CTAButton>
        </div>

        {/* Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
          {items.map(it => (
            <div key={it.label} style={{
              background: t.cardBg, borderRadius: t.cardRadius,
              padding: '12px 12px 10px',
              boxShadow: `0 2px 8px rgba(180,130,160,0.06), inset 0 0 0 1px ${t.border}`,
            }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: t.cardBgAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 6 }}>
                <svg width="16" height="16" viewBox="0 0 24 24"><path d={ICONS[it.icon]} stroke={t.accentDeep} strokeWidth="1.4" fill="none" strokeLinejoin="round" strokeLinecap="round"/></svg>
              </div>
              <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.05em' }}>{it.label}</div>
              <div style={{ fontSize: 9, color: t.inkSoft, marginTop: 3, lineHeight: 1.5 }}>{it.sub}</div>
            </div>
          ))}
        </div>

        {/* Paid banner */}
        <div style={{
          marginTop: 14, padding: 12, borderRadius: t.cardRadius,
          background: `linear-gradient(135deg, ${t.chip}, ${t.cardBgAlt})`,
          boxShadow: `inset 0 0 0 1px ${t.border}`,
        }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.04em', textAlign: 'center' }}>
            占い師による個別鑑定はこちら
          </div>
          <div style={{ fontSize: 9.5, color: t.inkSoft, textAlign: 'center', marginTop: 3 }}>
            あなたの悩みに寄り添い、丁寧に鑑定します
          </div>
          <div style={{ textAlign: 'center', marginTop: 8 }}><CTAButton t={t} small>鑑定メニューを見る</CTAButton></div>
        </div>
      </div>
    </Phone>
  );
}

// ─── 9. Paid menu ─────────────────────────────────────────────
function ScreenPaidMenu({ t }) {
  const cats = [
    { label: '恋愛鑑定', sub: '片想い・恋人関係・転機のことなど', motif: 'heart', popular: true },
    { label: '復縁鑑定', sub: '復縁の可能性を最適なアプローチで', motif: 'moon', popular: false },
    { label: '相性鑑定', sub: '気になるお相手との相性を鑑定', motif: 'star', popular: false },
    { label: '仕事・転職鑑定', sub: '仕事の悩み・キャリア・転職の時期', motif: 'briefcase', popular: false },
    { label: '人生総合鑑定', sub: '人生の流れ・使命・今後の方向性', motif: 'compass', popular: true },
  ];
  return (
    <Phone t={t} nav="占い師に相談" paid>
      <TopBar t={t} title="占い師に相談する" subtitle="あなたの悩みに寄り添う鑑定" action={
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d={ICONS.question} stroke="currentColor" strokeWidth="1.5"/></svg>
      }/>
      <div style={{ padding: '4px 14px 90px', overflowY: 'auto', height: 'calc(100% - 60px)' }}>
        {/* Guidance banner */}
        <div style={{
          padding: '12px 14px', borderRadius: t.cardRadius,
          background: `linear-gradient(120deg, #fff3df, #fce4d6 70%, ${t.cardBgAlt})`,
          boxShadow: `inset 0 0 0 1px ${t.gold}40`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: `linear-gradient(135deg, ${t.gold}, ${t.goldSoft})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d={ICONS.star} stroke="#fff" strokeWidth="1.4" fill="none" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 9, color: t.gold, fontFamily: t.latinFont, letterSpacing: '0.2em' }}>PERSONAL READING</div>
            <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, marginTop: 1, letterSpacing: '0.04em' }}>
              悩みに合わせて占い師を選べます
            </div>
          </div>
          <div style={{ fontSize: 9, color: t.inkSoft }}>見る ›</div>
        </div>
        {/* Categories */}
        <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, margin: '16px 4px 8px', letterSpacing: '0.06em' }}>
          ✦ 人気の鑑定メニュー
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {cats.map(c => (
            <div key={c.label} style={{
              background: t.cardBg, borderRadius: t.cardRadius,
              padding: '12px 12px', display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: `0 2px 8px rgba(180,130,160,0.05), inset 0 0 0 1px ${t.border}`,
              position: 'relative',
            }}>
              <div style={{
                width: 42, height: 42, 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}40`,
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24"><path d={ICONS[c.motif]} stroke={t.accentDeep} strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 12, color: t.ink, letterSpacing: '0.05em' }}>{c.label}</div>
                  {c.popular && <span style={{ background: '#fce4ec', color: t.accentDeep, fontSize: 8, padding: '1px 6px', borderRadius: 999, fontWeight: 600 }}>人気</span>}
                </div>
                <div style={{ fontSize: 9, color: t.inkSoft, marginTop: 2, lineHeight: 1.5 }}>{c.sub}</div>
                <div style={{ fontFamily: t.latinFont, fontSize: 12, color: t.accentDeep, fontWeight: 600, marginTop: 4 }}>¥3,000 <span style={{ color: t.inkSoft, fontSize: 9 }}>/ 20分</span></div>
              </div>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ color: t.inkMuted }}><path d={ICONS.chevron} stroke="currentColor" strokeWidth="1.5"/></svg>
            </div>
          ))}
        </div>
        <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.inkSoft, margin: '14px 4px 6px', letterSpacing: '0.06em' }}>
          その他のメニュー
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {['人間関係の悩み', '夢の個別鑑定', 'タロット詳細鑑定'].map(x => (
            <div key={x} style={{ padding: '7px 12px', borderRadius: 999, background: t.surfaceStrong, fontSize: 10.5, color: t.ink, boxShadow: `inset 0 0 0 1px ${t.border}` }}>{x}</div>
          ))}
        </div>
      </div>
    </Phone>
  );
}

// ─── 10. Counselor profile ────────────────────────────────────
function ScreenCounselor({ t }) {
  return (
    <Phone t={t} nav="占い師に相談" paid>
      <TopBar t={t} title="占い師プロフィール" back action={
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d={ICONS.heart} stroke="currentColor" strokeWidth="1.5"/></svg>
      }/>
      <div style={{ padding: '0 14px 90px', overflowY: 'auto', height: 'calc(100% - 50px)' }}>
        {/* Avatar + name */}
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: 92, height: 92, borderRadius: '50%',
            margin: '4px auto 0',
            background: `radial-gradient(circle at 50% 30%, #fff, ${t.cardBgAlt} 70%, #d8b8d8)`,
            boxShadow: `0 4px 12px ${t.accent}30, inset 0 0 0 2px ${t.gold}60`,
            position: 'relative', overflow: 'hidden',
          }}>
            {/* simple portrait silhouette */}
            <svg viewBox="0 0 92 92" width="92" height="92">
              <defs>
                <radialGradient id={`hair-${t.key}`} cx="50%" cy="40%" r="60%">
                  <stop offset="0%" stopColor="#7a4c52"/>
                  <stop offset="100%" stopColor="#4e2e34"/>
                </radialGradient>
              </defs>
              <ellipse cx="46" cy="38" rx="20" ry="22" fill="#f7d9c4"/>
              <path d="M 24 40 Q 22 18 46 14 Q 70 18 68 42 Q 64 30 46 28 Q 28 30 24 40 Z" fill={`url(#hair-${t.key})`}/>
              <path d="M 30 92 Q 30 60 46 60 Q 62 60 62 92 Z" fill="#e8a8b8"/>
              <path d="M 38 38 q 2 -2 5 0 M 49 38 q 2 -2 5 0" stroke="#4e2e34" strokeWidth="0.8" fill="none"/>
              <path d="M 42 46 q 4 2 8 0" stroke="#b56079" strokeWidth="0.8" fill="none"/>
            </svg>
          </div>
          <div style={{ marginTop: 6, fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 17, color: t.ink, letterSpacing: '0.1em' }}>
            月乃 ゆら <span style={{ fontSize: 10, color: t.inkSoft, marginLeft: 4 }}>先生</span>
          </div>
          <div style={{ fontSize: 10, color: t.inkSoft, marginTop: 3 }}>恋愛・復縁・相性</div>
        </div>
        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, marginTop: 12 }}>
          {[['鑑定歴','12年'],['相談件数','3,256件'],['評価','4.9']].map(([l,v],i) => (
            <div key={i} style={{ background: t.surfaceStrong, borderRadius: 12, padding: '8px 0', textAlign: 'center', boxShadow: `inset 0 0 0 1px ${t.border}` }}>
              <div style={{ fontSize: 9, color: t.inkSoft }}>{l}</div>
              <div style={{ fontFamily: t.latinFont, fontSize: 14, color: t.ink, fontWeight: 600, marginTop: 1 }}>{v}</div>
            </div>
          ))}
        </div>
        {/* Specialties */}
        <div style={{ marginTop: 14 }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.06em', marginBottom: 6 }}>得意なご相談</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['恋愛','復縁','片想い','結婚','相性','不倫'].map(x => (
              <span key={x} style={{ padding: '4px 10px', borderRadius: 999, background: t.chip, color: t.inkSoft, fontSize: 10 }}>{x}</span>
            ))}
          </div>
        </div>
        {/* Style */}
        <Bordered t={t} padding={12} style={{ marginTop: 12 }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.06em', marginBottom: 4 }}>鑑定スタイル</div>
          <div style={{ fontSize: 10.5, color: t.inkSoft, lineHeight: 1.7 }}>
            優しく包み込むような鑑定で、心の奥にある想いに光を当て、より良い未来への道を一緒に見つけます。
          </div>
        </Bordered>
        {/* Review */}
        <div style={{ marginTop: 12 }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.06em', marginBottom: 6 }}>お客様の声</div>
          <Bordered t={t} padding={12}>
            <div style={{ color: t.gold, fontSize: 11, letterSpacing: '0.1em' }}>★★★★★ <span style={{ color: t.inkSoft, fontSize: 9 }}>5.0</span></div>
            <div style={{ fontSize: 10.5, color: t.ink, lineHeight: 1.7, marginTop: 4 }}>
              とても優しくて、話しているだけで涙が出ました。具体的なアドバイスをいただいて、自分を取り戻せました!
            </div>
          </Bordered>
        </div>
        {/* Plans */}
        <div style={{ marginTop: 14 }}>
          <div style={{ fontFamily: t.titleFont, fontWeight: t.titleWeight, fontSize: 11, color: t.ink, letterSpacing: '0.06em', marginBottom: 6 }}>料金プラン</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 }}>
            {[['お試し鑑定','20分','¥3,000', false],['おすすめ鑑定','30分','¥5,000', true],['じっくり鑑定','60分','¥9,000', false]].map(([l,m,p,on],i) => (
              <div key={i} style={{
                background: on ? `linear-gradient(160deg, ${t.cardBg}, ${t.chip})` : t.surfaceStrong,
                borderRadius: 12, padding: '10px 4px', textAlign: 'center',
                boxShadow: on ? `0 4px 12px ${t.accent}25, inset 0 0 0 1.5px ${t.accent}` : `inset 0 0 0 1px ${t.border}`,
                position: 'relative',
              }}>
                {on && <div style={{ position: 'absolute', top: -7, left: '50%', transform: 'translateX(-50%)', background: t.accentDeep, color: '#fff', fontSize: 8, padding: '1px 8px', borderRadius: 999, letterSpacing: '0.06em' }}>おすすめ</div>}
                <div style={{ fontSize: 9, color: t.inkSoft }}>{l}</div>
                <div style={{ fontFamily: t.latinFont, fontSize: 9, color: t.inkSoft, marginTop: 2 }}>{m}</div>
                <div style={{ fontFamily: t.latinFont, fontSize: 13, color: t.ink, fontWeight: 600, marginTop: 4 }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 14, textAlign: 'center' }}>
          <CTAButton t={t} style={{ width: '100%' }}>この先生に相談する</CTAButton>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { TarotCard, ScreenDreamResult, ScreenTarot, ScreenMypage, ScreenPaidMenu, ScreenCounselor });