// screens-final-detail.jsx — Sub-screens: offer detail, withdraw, mini-games.
// All use FINAL helpers (FBrand, FTickerStrip, FLadderRow, ftTheme, finr, tn).

const FINAL_DETAIL = {

  // ── OFFER DETAIL ──────────────────────────────────────────────
  OfferDetail({ dark }) {
    const t = ftTheme(dark);
    const o = FOFFERS[0]; // Zerodha — has done states
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 8px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <i className="fa-solid fa-arrow-left" style={{ color:t.ink, fontSize:14 }} />
          <div style={{ fontSize:11, color:t.ink2, fontWeight:600 }}>Offer · #ZD12K</div>
          <i className="fa-solid fa-share-nodes" style={{ color:t.ink, fontSize:14 }} />
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:120 }} className="ph-scroll">
          {/* Hero brand */}
          <div style={{ padding:'14px 20px 18px', borderBottom:`1px solid ${t.line}` }}>
            <div style={{ display:'flex', alignItems:'flex-start', gap:14 }}>
              <FBrand t={t} name={o.brand} size={64} />
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                  <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:700, color:t.ink, letterSpacing:-0.4 }}>{o.brand}</div>
                  <span style={{ padding:'2px 6px', background:`${t.warn}1A`, color:t.warn, fontSize:10, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>2× BOOST</span>
                </div>
                <div style={{ fontSize:12, color:t.ink2, marginTop:2 }}>India's #1 stockbroker · {o.cat}</div>
                <div style={{ fontSize:11, color:t.ink3, marginTop:8, display:'flex', gap:10 }}>
                  <span><i className="fa-regular fa-clock" style={{ marginRight:4 }} />~{o.time} min</span>
                  <span><i className="fa-solid fa-users" style={{ marginRight:4 }} />4,212 today</span>
                  <span style={{ color:t.warn, fontFamily:t.fontMono, ...tn }}><i className="fa-solid fa-bolt" style={{ marginRight:3 }} />5h 42m left</span>
                </div>
              </div>
            </div>

            {/* Big payout */}
            <div style={{ marginTop:16, display:'flex', alignItems:'baseline', gap:10 }}>
              <div style={{ fontFamily:t.fontDisplay, fontSize:38, fontWeight:700, color:t.accent, letterSpacing:-1.2, ...tn }}>+{finr(o.amt)}</div>
              <div style={{ fontSize:12, color:t.ink3, textDecoration:'line-through', ...tn }}>was {finr(o.amt/2)}</div>
              <div style={{ marginLeft:'auto', fontSize:11, color:t.ink2 }}>up to</div>
            </div>
          </div>

          {/* Full ladder — vertical, the centerpiece */}
          <FSec t={t} label="Earn in 3 stages">
            <div style={{ margin:'0 16px', padding:18, background:t.surface, border:`1px solid ${t.line}`, borderRadius:14 }}>
              {o.ladder.map((s, i, arr) => {
                const here = !s.done && (i === 0 || arr[i-1].done);
                return (
                  <div key={i} style={{ display:'flex', gap:14, paddingBottom: i < arr.length-1 ? 18 : 0, position:'relative' }}>
                    {/* Connector line */}
                    {i < arr.length-1 && <div style={{ position:'absolute', left:13, top:30, bottom:0, width:2, background: s.done ? t.accent : t.line }} />}
                    {/* Node */}
                    <div style={{ width:28, height:28, borderRadius:999, background: s.done ? t.accent : here ? t.surface : t.surface2, border: s.done ? 'none' : `2px solid ${here ? t.accent : t.line}`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, zIndex:1 }}>
                      {s.done ? <i className="fa-solid fa-check" style={{ color:t.accentInk, fontSize:11 }} /> : <span style={{ fontSize:11, fontWeight:800, color: here ? t.accent : t.ink3, ...tn }}>{i+1}</span>}
                    </div>
                    {/* Body */}
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
                        <div style={{ fontFamily:t.fontDisplay, fontSize:14, fontWeight:600, color: s.done ? t.ink2 : t.ink, letterSpacing:-0.2, textDecoration: s.done ? 'line-through' : 'none' }}>{s.l}</div>
                        <div style={{ fontFamily:t.fontDisplay, fontSize:15, fontWeight:700, color: s.done ? t.accent : here ? t.ink : t.ink3, ...tn }}>+{finr(s.v)}</div>
                      </div>
                      <div style={{ fontSize:11, color:t.ink2, marginTop:2 }}>
                        {s.done ? 'Completed · paid to wallet' : here ? 'Tap to start now' : 'Locked · finish above first'}
                      </div>
                      {here && (
                        <button style={{ marginTop:10, height:34, padding:'0 14px', borderRadius:8, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:12, fontFamily:t.fontBody }}>Start step {i+1}</button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </FSec>

          {/* Live ticker — what others are earning right now */}
          <FSec t={t} label="People earning Zerodha now">
            <FTickerStrip t={t} rows={4} />
          </FSec>

          {/* Terms */}
          <FSec t={t} label="Terms">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <ul style={{ margin:0, paddingLeft:18, fontSize:11.5, color:t.ink2, lineHeight:1.7 }}>
                <li>Open a free demat account using the partner link.</li>
                <li>Verify PAN + Aadhaar within 7 days of sign up.</li>
                <li>Place at least one trade of any segment in 30 days.</li>
                <li>₹1,250 unlocks after broker confirms account & first trade.</li>
                <li>One reward per user · existing users not eligible.</li>
              </ul>
            </div>
          </FSec>
        </div>

        {/* Sticky CTA */}
        <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'12px 16px 28px', background:t.bg, borderTop:`1px solid ${t.line}`, display:'flex', gap:10 }}>
          <button style={{ height:48, padding:'0 18px', borderRadius:10, background:'transparent', border:`1px solid ${t.line}`, color:t.ink, fontWeight:600, fontSize:13, fontFamily:t.fontBody }}><i className="fa-solid fa-bookmark" /></button>
          <button className="f-shine-wrap" style={{ flex:1, height:48, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:14, fontFamily:t.fontBody }}>Continue · earn ₹1,000 next</button>
        </div>
      </div>
    );
  },

  // ── WITHDRAW ──────────────────────────────────────────────────
  Withdraw({ dark }) {
    const t = ftTheme(dark);
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 8px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <i className="fa-solid fa-arrow-left" style={{ color:t.ink, fontSize:14 }} />
          <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:600, color:t.ink, letterSpacing:-0.3 }}>Withdraw</div>
          <div style={{ width:14 }} />
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:120 }} className="ph-scroll">
          {/* Big amount entry */}
          <div style={{ padding:'24px 20px 16px', textAlign:'center' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink2, textTransform:'uppercase' }}>Amount</div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:60, fontWeight:600, color:t.ink, letterSpacing:-2.4, marginTop:6, ...tn }}>₹500</div>
            <div style={{ fontSize:11, color:t.ink2, marginTop:4 }}>Available · ₹1,184</div>
            <div style={{ display:'flex', gap:6, justifyContent:'center', marginTop:14 }}>
              {['₹100','₹500','₹1,000','Max'].map((a,i) => (
                <div key={i} style={{ padding:'6px 12px', borderRadius:999, background: i===1 ? t.ink : t.surface, border: i===1 ? 'none' : `1px solid ${t.line}`, color: i===1 ? t.bg : t.ink, fontSize:11.5, fontWeight:600, ...tn }}>{a}</div>
              ))}
            </div>
          </div>

          {/* To bank */}
          <FSec t={t} label="To">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:40, height:40, borderRadius:8, background:`${t.info}1A`, color:t.info, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <i className="fa-solid fa-building-columns" style={{ fontSize:14 }} />
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontFamily:t.fontDisplay, fontSize:14, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>HDFC Bank · ••2389</div>
                <div style={{ fontSize:11, color:t.ink2, marginTop:1 }}>Aarav Kapoor · Default</div>
              </div>
              <div style={{ fontSize:11.5, color:t.accent, fontWeight:700 }}>Change</div>
            </div>
          </FSec>

          {/* Method ladder */}
          <FSec t={t} label="Speed">
            <div style={{ margin:'0 16px', display:'flex', flexDirection:'column', gap:8 }}>
              {[
                { l:'IMPS · Instant',    sub:'Free · arrives in seconds', sel:true },
                { l:'UPI · Direct',      sub:'Free · ~30 seconds' },
                { l:'NEFT · Standard',   sub:'Free · within 2 hours' },
              ].map((m, i) => (
                <div key={i} style={{ padding:'12px 14px', background:t.surface, border: m.sel ? `1.5px solid ${t.accent}` : `1px solid ${t.line}`, borderRadius:10, display:'flex', alignItems:'center', gap:12 }}>
                  <div style={{ width:18, height:18, borderRadius:999, border: m.sel ? `5px solid ${t.accent}` : `1.5px solid ${t.line}`, background: m.sel ? t.surface : 'transparent' }} />
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{m.l}</div>
                    <div style={{ fontSize:10.5, color:t.ink2, marginTop:1 }}>{m.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </FSec>

          {/* Summary */}
          <FSec t={t} label="Summary">
            <div style={{ margin:'0 16px', padding:'12px 14px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              {[
                { k:'You withdraw',   v:'₹500.00' },
                { k:'IMPS fee',       v:'₹0.00', muted:true },
                { k:'TDS · 0%',       v:'₹0.00', muted:true },
              ].map((r, i) => (
                <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'6px 0' }}>
                  <div style={{ fontSize:12, color: r.muted ? t.ink3 : t.ink2 }}>{r.k}</div>
                  <div style={{ fontFamily:t.fontMono, fontSize:12, color: r.muted ? t.ink3 : t.ink, ...tn }}>{r.v}</div>
                </div>
              ))}
              <div style={{ height:1, background:t.line, margin:'8px 0' }} />
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:700, color:t.ink }}>To bank</div>
                <div style={{ fontFamily:t.fontDisplay, fontSize:15, fontWeight:700, color:t.accent, ...tn }}>₹500.00</div>
              </div>
            </div>
          </FSec>

          {/* Live withdrawal ticker — social proof */}
          <FSec t={t} label="Recent withdrawals">
            <FTickerStrip t={t} rows={4} />
          </FSec>
        </div>

        <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'12px 16px 28px', background:t.bg, borderTop:`1px solid ${t.line}` }}>
          <button className="f-shine-wrap" style={{ width:'100%', height:50, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:14, display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <i className="fa-solid fa-lock" style={{ fontSize:11 }} />Confirm · ₹500 to HDFC
          </button>
        </div>
      </div>
    );
  },

  // ── STREAK MINI-GAME ──────────────────────────────────────────
  Streak({ dark }) {
    const t = ftTheme(dark);
    const days = [5, 10, 15, 20, 30, 50, 100, 25, 35, 45, 60, 80, 120, 200];
    const today = 6;
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 8px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <i className="fa-solid fa-arrow-left" style={{ color:t.ink, fontSize:14 }} />
          <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:600, color:t.ink, letterSpacing:-0.3 }}>Daily streak</div>
          <i className="fa-solid fa-circle-info" style={{ color:t.ink2, fontSize:14 }} />
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:120 }} className="ph-scroll">
          {/* Hero — current streak with flame */}
          <div style={{ padding:'14px 20px 0', textAlign:'center' }}>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', background:`${t.warn}1A`, borderRadius:999 }}>
              <i className="fa-solid fa-fire f-flame" style={{ color:t.warn, fontSize:13 }} />
              <span style={{ fontSize:11, fontWeight:700, color:t.warn, letterSpacing:0.4 }}>7-DAY STREAK · ACTIVE</span>
            </div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:44, fontWeight:700, color:t.ink, letterSpacing:-1.2, marginTop:14, ...tn }}>+₹100</div>
            <div style={{ fontSize:12, color:t.ink2, marginTop:2 }}>Today's reward · D7 unlocked at midnight</div>
          </div>

          {/* Ladder · days as nodes */}
          <FSec t={t} label="14-day ladder · grows each day">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:6 }}>
                {days.map((amt, i) => {
                  const done = i < today, here = i === today;
                  return (
                    <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
                      <div style={{ width:'100%', aspectRatio:'1', borderRadius:8, background: here ? t.accent : done ? `${t.accent}1A` : t.surface2, border: here ? 'none' : done ? `1px solid ${t.accent}40` : `1px solid ${t.line}`, display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
                        {done ? <i className="fa-solid fa-check" style={{ color:t.accent, fontSize:12 }} /> : <span style={{ fontFamily:t.fontDisplay, fontSize: here ? 13 : 11, fontWeight:700, color: here ? t.accentInk : t.ink, ...tn }}>₹{amt}</span>}
                        {here && <div className="f-pop-in" style={{ position:'absolute', top:-3, right:-3, width:12, height:12, borderRadius:999, background:t.warn, color:'#FFF', display:'flex', alignItems:'center', justifyContent:'center' }}><i className="fa-solid fa-fire f-flame" style={{ fontSize:6 }} /></div>}
                      </div>
                      <div style={{ fontSize:8.5, color: here ? t.accent : t.ink3, fontWeight: here ? 700 : 500 }}>D{i+1}</div>
                    </div>
                  );
                })}
              </div>
              <div style={{ marginTop:14, padding:'10px 12px', background:`${t.coin}10`, border:`1px solid ${t.coin}40`, borderRadius:8, display:'flex', alignItems:'center', gap:10 }}>
                <i className="fa-solid fa-trophy" style={{ color:t.coin, fontSize:14 }} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:11.5, fontWeight:700, color:t.ink, letterSpacing:-0.1 }}>Hit Day 14 → Bonus ₹500</div>
                  <div style={{ fontSize:10, color:t.ink2, marginTop:1 }}>7 days to go · don't break the chain</div>
                </div>
              </div>
            </div>
          </FSec>

          {/* Live ticker · others claiming */}
          <FSec t={t} label="People claiming streak now">
            <FTickerStrip t={t} rows={4} />
          </FSec>

          <FSec t={t} label="Streak protection">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:36, height:36, borderRadius:8, background:`${t.violet}1A`, color:t.violet, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <i className="fa-solid fa-shield" style={{ fontSize:14 }} />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>1 freeze available</div>
                <div style={{ fontSize:11, color:t.ink2, marginTop:1 }}>Skip a day, keep your streak. Renews monthly.</div>
              </div>
            </div>
          </FSec>
        </div>

        <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'12px 16px 28px', background:t.bg, borderTop:`1px solid ${t.line}` }}>
          <button className="f-shine-wrap" style={{ width:'100%', height:50, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:14, display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            <i className="fa-solid fa-fire f-flame" />Claim Day 7 · +₹100
          </button>
        </div>
      </div>
    );
  },

  // ── SPIN MINI-GAME ────────────────────────────────────────────
  Spin({ dark }) {
    const t = ftTheme(dark);
    const segs = [
      { v:'₹5',   c:t.surface2 },
      { v:'₹10',  c:`${t.accent}30` },
      { v:'₹50',  c:t.accent },
      { v:'₹2',   c:t.surface2 },
      { v:'₹100', c:t.coin },
      { v:'₹20',  c:`${t.violet}30` },
      { v:'₹500', c:t.violet },
      { v:'₹15',  c:`${t.warn}30` },
    ];
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 8px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <i className="fa-solid fa-arrow-left" style={{ color:t.ink, fontSize:14 }} />
          <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:600, color:t.ink, letterSpacing:-0.3 }}>Lucky Spin</div>
          <i className="fa-solid fa-circle-info" style={{ color:t.ink2, fontSize:14 }} />
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:120 }} className="ph-scroll">
          <div style={{ padding:'14px 20px 0', textAlign:'center' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink2, textTransform:'uppercase' }}>3 spins left today</div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:600, color:t.ink, letterSpacing:-0.4, marginTop:4 }}>Spin to win up to ₹500</div>
          </div>

          {/* Wheel — proper SVG circle, no gaps */}
          <div style={{ padding:'18px 0 6px', display:'flex', justifyContent:'center', position:'relative' }}>
            <div style={{ width:260, height:260, position:'relative' }}>
              <svg className="f-spin-slow" viewBox="0 0 100 100" style={{ width:'100%', height:'100%', filter:`drop-shadow(0 6px 14px ${dark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.18)'})` }}>
                {segs.map((s, i) => {
                  const n = segs.length;
                  const a1 = (i / n) * 2 * Math.PI - Math.PI / 2;
                  const a2 = ((i+1) / n) * 2 * Math.PI - Math.PI / 2;
                  const r = 48;
                  const x1 = 50 + r * Math.cos(a1);
                  const y1 = 50 + r * Math.sin(a1);
                  const x2 = 50 + r * Math.cos(a2);
                  const y2 = 50 + r * Math.sin(a2);
                  const am = (a1 + a2) / 2;
                  const tx = 50 + 30 * Math.cos(am);
                  const ty = 50 + 30 * Math.sin(am);
                  const rotDeg = (am * 180 / Math.PI) + 90;
                  const lightSeg = s.c === t.surface2 || s.c === `${t.accent}30` || s.c === `${t.violet}30` || s.c === `${t.warn}30`;
                  const txtColor = lightSeg ? t.ink : '#FFF';
                  return (
                    <g key={i}>
                      <path d={`M 50 50 L ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2} Z`} fill={s.c} stroke="#FFFFFF" strokeWidth="0.4" />
                      <text x={tx} y={ty} textAnchor="middle" dominantBaseline="central" transform={`rotate(${rotDeg} ${tx} ${ty})`} style={{ fontFamily:t.fontDisplay, fontWeight:700, fontSize:6.5, fill:txtColor }}>{s.v}</text>
                    </g>
                  );
                })}
                <circle cx="50" cy="50" r="48.5" fill="none" stroke={t.surface3} strokeWidth="3" />
              </svg>
              {/* Center hub */}
              <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:70, height:70, borderRadius:999, background:t.surface3, color:'#FFF', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', border:`4px solid ${t.bg}`, fontFamily:t.fontDisplay }}>
                <i className="fa-solid fa-bolt f-bolt" style={{ color:t.coin, fontSize:18 }} />
                <div style={{ fontSize:9, fontWeight:700, marginTop:2, letterSpacing:0.4 }}>SPIN</div>
              </div>
              {/* Pointer */}
              <div style={{ position:'absolute', top:-8, left:'50%', transform:'translateX(-50%)', width:0, height:0, borderLeft:'10px solid transparent', borderRight:'10px solid transparent', borderTop:`16px solid ${t.warn}`, filter:'drop-shadow(0 2px 4px rgba(0,0,0,0.2))', zIndex:2 }} />
            </div>
          </div>

          {/* Recent spins · ladder of last 5 */}
          <FSec t={t} label="Your last 5 spins">
            <div style={{ margin:'0 16px', padding:'10px 14px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                {[10, 5, 50, 20, 100].map((amt, i) => (
                  <React.Fragment key={i}>
                    <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:3 }}>
                      <div style={{ width:'100%', padding:'8px 0', borderRadius:7, background: amt >= 50 ? `${t.accent}1A` : t.surface2, border: amt >= 50 ? `1px solid ${t.accent}40` : `1px solid ${t.line}`, fontFamily:t.fontDisplay, fontWeight:700, fontSize:12, color: amt >= 50 ? t.accent : t.ink, textAlign:'center', ...tn }}>₹{amt}</div>
                      <div style={{ fontSize:8, color:t.ink3 }}>{['5d','4d','3d','2d','1d'][i]}</div>
                    </div>
                  </React.Fragment>
                ))}
              </div>
            </div>
          </FSec>

          {/* Live ticker */}
          <FSec t={t} label="Big wins · last hour">
            <FTickerStrip t={t} rows={4} />
          </FSec>
        </div>

        <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'12px 16px 28px', background:t.bg, borderTop:`1px solid ${t.line}` }}>
          <button className="f-shine-wrap" style={{ width:'100%', height:50, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:14 }}>Spin now · 3 left</button>
        </div>
      </div>
    );
  },
};

window.FINAL_DETAIL = FINAL_DETAIL;