// screens.jsx — All major screens. Each takes (t, ctx) where t = theme,
// ctx = { stamps, lottery, huawei, user, ... }

// ────────────────────────── ONBOARDING ──────────────────────────
function ScreenSplash({ t }) {
  return (
    <PhoneFrame t={t}>
      <div style={{
        position:'absolute', inset:0,
        background: t.edge==='angular'
          ? `radial-gradient(circle at 50% 30%, ${t.accent}33, transparent 60%), ${t.bg}`
          : t.edge==='rounded'
          ? `radial-gradient(circle at 70% 20%, ${t.accent}55, transparent 55%), radial-gradient(circle at 20% 80%, ${t.accent3}44, transparent 60%), ${t.bg}`
          : t.bg,
      }}/>
      {/* Thin grid for esports */}
      {t.edge==='angular' && (
        <svg style={{ position:'absolute', inset:0, opacity:0.2 }} width="100%" height="100%">
          <defs><pattern id="sg" width="30" height="30" patternUnits="userSpaceOnUse">
            <path d="M30 0H0v30" stroke={t.accent2} strokeWidth="0.5" fill="none"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#sg)"/>
        </svg>
      )}
      <div style={{ position:'absolute', inset:0, padding:'80px 32px 120px',
        display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
        <div>
          {/* Real Terminal 21 Korat wordmark — color-inverted for dark bg */}
          <img
            src="assets/terminal21-korat-logo.png"
            alt="Terminal 21 Korat"
            style={{
              height: 38, width:'auto', display:'block',
              filter: t.mode === 'light'
                ? 'none'
                : 'invert(1) hue-rotate(180deg) brightness(1.15) contrast(0.95)',
              marginBottom: 18, opacity: t.mode === 'light' ? 1 : 0.92,
            }}
          />
          <SectionLabel t={t} color={t.accent2}>JUN 20 — 21 · 2026 · presents</SectionLabel>
          <div style={{ marginTop: 18 }}>
            <PocaLockup t={t} size={92}/>
            <h2 style={{
              fontFamily: t.fontMono, fontSize: 13, fontWeight: 500,
              letterSpacing: '0.18em', margin: '14px 0 0',
              textTransform: 'uppercase',
              color: t.accent,
            }}>GameFest 2026 · 7 floors</h2>
          </div>
          <p style={{ fontFamily: t.fontBody, fontSize: 15, color: t.textMute,
            marginTop: 18, lineHeight: 1.5, maxWidth: 280 }}>
            Stamp every floor. Catch every match. Earn your boarding pass through three days of cosplay, esports, and quests.
          </p>
        </div>
        <div>
          <button style={{
            width:'100%', height: 56,
            background: t.accent, color:'#fff', border:'none',
            borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 28 : 12,
            fontFamily: t.fontTitle, fontSize: 14, fontWeight: 700,
            letterSpacing: t.titleSpace,
            textTransform: t.titleCase==='upper' ? 'uppercase' : 'none',
            cursor:'pointer',
            clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)' : 'none',
            boxShadow: `0 8px 24px ${t.accent}66`,
          }}>Begin boarding ›</button>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:18 }}>
            <span style={{ fontFamily:t.fontMono, fontSize:10, color:t.textDim, letterSpacing:'0.12em' }}>
              7 FLOORS · 384 OCCUPANTS
            </span>
            <HuaweiBadge t={t}/>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function ScreenLogin({ t, huawei }) {
  const isAngular = t.edge==='angular';
  const isRounded = t.edge==='rounded';
  const r = isAngular ? 4 : isRounded ? 16 : 10;
  return (
    <PhoneFrame t={t}>
      <div style={{ padding:'40px 24px 28px', height:'100%', display:'flex',
        flexDirection:'column', background: t.bg, position:'relative', overflow:'hidden' }}>

        {/* Subtle ambient glow */}
        {!isAngular && (
          <div style={{ position:'absolute', top:-100, right:-100, width:300, height:300,
            background: `radial-gradient(circle, ${t.accent}22, transparent 65%)`, pointerEvents:'none' }}/>
        )}
        {isAngular && (
          <svg style={{ position:'absolute', inset:0, opacity:0.18, pointerEvents:'none' }} width="100%" height="100%">
            <defs><pattern id="lg-grid" width="36" height="36" patternUnits="userSpaceOnUse">
              <path d="M36 0H0v36" stroke={t.accent2} strokeWidth="0.4" fill="none"/></pattern></defs>
            <rect width="100%" height="100%" fill="url(#lg-grid)"/>
          </svg>
        )}

        {/* Top row — back + step */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', position:'relative' }}>
          <button style={{
            background: t.surface, border:`1px solid ${t.line2}`,
            color: t.text, width: 36, height: 36,
            borderRadius: isAngular ? 4 : '50%',
            display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', padding:0,
          }} aria-label="Back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M15 18l-6-6 6-6"/>
            </svg>
          </button>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            {[1,2,3].map(s=>(
              <div key={s} style={{
                width: s===2 ? 22 : 6, height: 4, borderRadius: 2,
                background: s===2 ? t.accent : s===1 ? t.accent2 : t.line2,
                opacity: s===3 ? 0.5 : 1,
              }}/>
            ))}
            <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textMute,
              letterSpacing:'0.16em', marginLeft: 8 }}>02 / 03</span>
          </div>
        </div>

        {/* Hero */}
        <div style={{ marginTop: 36, position:'relative' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom: 14 }}>
            <div style={{ width:34, height:34, borderRadius: isAngular ? 4 : '50%',
              background: `linear-gradient(135deg, ${t.accent}, ${t.accent3})`,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow: `0 6px 18px ${t.accent}55`,
              clipPath: isAngular ? 'polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)' : 'none',
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 12l2-2 7 7L21 4"/>
              </svg>
            </div>
            <SectionLabel t={t} color={t.accent2}>Boarding · sign in</SectionLabel>
          </div>
          <h1 style={{
            fontFamily: t.fontTitle, fontSize: 36, fontWeight: 700, margin: 0,
            color: t.text, lineHeight: 0.95, letterSpacing: t.titleSpace,
            textTransform: t.titleCase==='upper' ? 'uppercase' : 'none',
          }}>Print<br/>your pass</h1>
          <p style={{ fontFamily: t.fontBody, fontSize: 14, color: t.textMute,
            marginTop: 14, lineHeight: 1.55, maxWidth: 300 }}>
            Sign in to track stamps across all 7 floors and claim rewards at the prize terminal.
          </p>
        </div>

        {/* Auth stack */}
        <div style={{ marginTop: 28, flex: 1, position:'relative' }}>
          {/* HUAWEI primary */}
          {huawei && (
          <div style={{ position:'relative' }}>
            {/* Bonus floating tag */}
            <div style={{
              position:'absolute', top:-10, right: 14, zIndex: 2,
              background: t.accent2, color: t.bg, padding:'4px 9px',
              borderRadius: isAngular ? 2 : 100,
              fontFamily: t.fontMono, fontSize: 9, fontWeight: 800,
              letterSpacing:'0.08em', boxShadow:`0 4px 12px ${t.accent2}55`,
              clipPath: isAngular ? 'polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px))' : 'none',
            }}>+1 BONUS STAMP</div>

            <button style={{
              width:'100%', height: 60,
              background: `linear-gradient(135deg, ${t.surface} 0%, ${t.surface2} 100%)`,
              border: `1.5px solid ${t.huawei}`,
              borderRadius: r,
              display:'flex', alignItems:'center', justifyContent:'space-between',
              padding:'0 18px',
              color: t.text, fontFamily: t.fontBody, fontSize: 15, fontWeight: 600,
              cursor:'pointer', position:'relative',
              boxShadow: `0 8px 24px ${t.huawei}33, inset 0 0 0 1px ${t.huawei}11`,
              clipPath: isAngular ? 'polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px))' : 'none',
            }}>
              <span style={{ display:'flex', alignItems:'center', gap: 12 }}>
                <span style={{
                  background: '#fff',
                  width: 36, height: 36, borderRadius: isAngular ? 2 : 8,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  flexShrink: 0,
                  boxShadow: `0 0 0 1px ${t.huawei}33`,
                }}>
                  <img src="assets/huawei-logo.svg" alt="HUAWEI"
                    style={{ width: 24, height:'auto', display:'block' }}/>
                </span>
                <span style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:2 }}>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>Continue with HUAWEI ID</span>
                  <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textMute,
                    letterSpacing:'0.1em' }}>FASTEST · RECOMMENDED</span>
                </span>
              </span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={t.huawei} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 6l6 6-6 6"/>
              </svg>
            </button>
          </div>
          )}

          {/* Divider */}
          <div style={{ display:'flex', alignItems:'center', gap:10, margin: '22px 0 18px' }}>
            <div style={{ flex:1, height:1, background: t.line2 }}/>
            <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim,
              letterSpacing:'0.24em', fontWeight: 600 }}>OR</span>
            <div style={{ flex:1, height:1, background: t.line2 }}/>
          </div>

          {/* Email + Phone — refined icon-led tiles */}
          <div style={{ display:'flex', gap:10 }}>
            {[
              {label:'Email', sub:'name@mail.com', icon:(
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>
                </svg>
              )},
              {label:'Phone', sub:'+66 ···', icon:(
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="6" y="2" width="12" height="20" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/>
                </svg>
              )},
            ].map(opt => (
              <button key={opt.label} style={{
                flex:1, height: 56, background: t.surface,
                border:`1px solid ${t.line2}`,
                borderRadius: r,
                display:'flex', flexDirection:'column', alignItems:'flex-start', justifyContent:'center',
                padding:'0 14px', gap: 2,
                color: t.text, fontFamily: t.fontBody, fontSize:13, fontWeight:600, cursor:'pointer',
                clipPath: isAngular ? 'polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%)' : 'none',
              }}>
                <span style={{ display:'flex', alignItems:'center', gap: 8, color: t.text }}>
                  <span style={{ color: t.accent2, display:'flex' }}>{opt.icon}</span>
                  {opt.label}
                </span>
                <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textDim,
                  letterSpacing:'0.1em' }}>{opt.sub}</span>
              </button>
            ))}
          </div>

          {/* Guest pill */}
          <div style={{ marginTop: 22, display:'flex', justifyContent:'center' }}>
            <button style={{
              background: 'transparent', border:`1px dashed ${t.line}`,
              borderRadius: 100, padding:'8px 16px',
              color: t.textMute, fontFamily: t.fontMono, fontSize: 11, fontWeight: 600,
              letterSpacing:'0.1em', cursor:'pointer',
              display:'flex', alignItems:'center', gap: 8,
            }}>
              <span style={{ width: 6, height: 6, borderRadius:'50%', background: t.textDim }}/>
              Browse as guest →
            </button>
          </div>
        </div>

        {/* Footer */}
        <div style={{ position:'relative' }}>
          <p style={{ fontFamily: t.fontBody, fontSize: 10.5, color: t.textDim,
            lineHeight:1.6, textAlign:'center', margin: 0 }}>
            By signing in you agree to GameFest's <span style={{ color: t.textMute, textDecoration:'underline' }}>terms</span> and <span style={{ color: t.textMute, textDecoration:'underline' }}>privacy</span>.
            <br/>Data shared only with Terminal 21 and HUAWEI Thailand.
          </p>
        </div>
      </div>
    </PhoneFrame>
  );
}

// Path selection — three paths shown side-by-side w/ pass preview
function ScreenPathSelect({ t, selected = 'esports' }) {
  const PATH_LIST = [
    { id:'esports', label:'Esports Hunter',   sub:'Cyber neon · JRPG menu' },
    { id:'cosplay', label:'Cosplay Star',     sub:'Anime festival vibes' },
    { id:'casual',  label:'Casual Explorer',  sub:'Boarding-pass minimal' },
  ];
  return (
    <PhoneFrame t={t}>
      <div style={{ padding:'40px 24px 24px', height:'100%', overflow:'auto', background: t.bg }}>
        <SectionLabel t={t}>Step 03 / 03</SectionLabel>
        <PathTitle t={t} size={28} style={{ marginTop: 10 }}>Pick your path</PathTitle>
        <p style={{ fontFamily: t.fontBody, fontSize: 13, color: t.textMute, marginTop: 8, lineHeight: 1.5 }}>
          Just a vibe — switch any time in settings. Your stamps stay yours.
        </p>

        <div style={{ marginTop: 24, display:'flex', flexDirection:'column', gap: 12 }}>
          {PATH_LIST.map(p => {
            const pt = window.PATHS[p.id];
            const isSel = p.id === selected;
            return (
              <div key={p.id} style={{
                position:'relative',
                background: pt.surface,
                border: `${isSel ? 2 : 1}px solid ${isSel ? pt.accent : t.line2}`,
                borderRadius: t.edge==='angular' ? 4 : 16,
                padding: 14,
                clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px))' : 'none',
                cursor:'pointer',
              }}>
                <div style={{ display:'flex', alignItems:'flex-start', gap: 12 }}>
                  {/* Mini pass preview */}
                  <div style={{
                    width: 80, height: 96, background: pt.bgDeep,
                    border: `1px solid ${pt.line}`,
                    borderRadius: pt.edge==='angular' ? 2 : pt.edge==='rounded' ? 10 : 6,
                    padding: 8, flexShrink: 0,
                    display:'flex', flexDirection:'column', justifyContent:'space-between',
                    background: `linear-gradient(135deg, ${pt.surface}, ${pt.surface2})`,
                  }}>
                    <div style={{ fontFamily: pt.fontMono, fontSize: 7, color: pt.accent2,
                      letterSpacing:'0.12em', textTransform:'uppercase' }}>
                      {pt.tagline}
                    </div>
                    <div style={{
                      width: 22, height: 22, borderRadius: pt.stampShape==='circle' ? '50%' : 0,
                      background: pt.accent,
                      clipPath: pt.stampShape==='hex'
                        ? 'polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)'
                        : 'none',
                    }}/>
                    <div style={{ fontFamily: pt.fontTitle, fontSize: 9, color: pt.text, fontWeight: 700,
                      textTransform: pt.titleCase==='upper'?'uppercase':'none', letterSpacing: pt.titleSpace }}>
                      Rally · Pass
                    </div>
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily: pt.fontTitle, fontSize: 18, color: pt.text, fontWeight: 700,
                      textTransform: pt.titleCase==='upper'?'uppercase':'none', letterSpacing: pt.titleSpace }}>
                      {p.label}
                    </div>
                    <div style={{ fontFamily: t.fontBody, fontSize: 12, color: t.textMute, marginTop: 4 }}>
                      {p.sub}
                    </div>
                    <div style={{ marginTop: 10, display:'flex', gap: 6 }}>
                      {[pt.accent, pt.accent2, pt.accent3].map((c,i)=>(
                        <div key={i} style={{ width: 18, height: 18, borderRadius: pt.stampShape==='circle'?'50%':2, background:c }}/>
                      ))}
                    </div>
                  </div>
                  {isSel && (
                    <div style={{ position:'absolute', top:10, right:10, width: 22, height: 22,
                      borderRadius:'50%', background: pt.accent, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <svg width="12" height="12" viewBox="0 0 12 12">
                        <path d="M2 6l3 3 5-6" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <button style={{
          marginTop: 24, width:'100%', height: 52,
          background: t.accent, color:'#fff', border:'none',
          borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 26 : 10,
          fontFamily: t.fontTitle, fontSize: 14, fontWeight: 700,
          letterSpacing: t.titleSpace,
          textTransform: t.titleCase==='upper' ? 'uppercase' : 'none',
          cursor:'pointer',
          clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)' : 'none',
        }}>Print my pass ›</button>
      </div>
    </PhoneFrame>
  );
}

// ────────────────────────── PASSPORT ──────────────────────────
function ScreenPassport({ t, ctx }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', overflow:'auto', padding:'8px 16px 100px', background: t.bg }}>
        {/* Header — refined identity puck */}
        <div style={{ padding:'8px 4px 16px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
            <div style={{
              width: 40, height: 40,
              borderRadius: t.edge==='angular' ? 4 : '50%',
              background: `linear-gradient(135deg, ${t.accent}, ${t.accent3})`,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow: `0 6px 16px ${t.accent}55`,
              border: `1.5px solid ${t.line2}`,
              clipPath: t.edge==='angular' ? 'polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)' : 'none',
              fontFamily: t.fontTitle, fontSize: 16, fontWeight: 800, color:'#fff',
            }}>{(ctx.user?.name||'S')[0]}</div>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 9, color: t.accent2,
                letterSpacing:'0.18em', textTransform:'uppercase' }}>{t.tagline}</div>
              <div style={{ fontFamily: t.fontTitle, fontSize: 17, color: t.text, fontWeight: 700,
                textTransform: t.titleCase==='upper'?'uppercase':'none', letterSpacing: t.titleSpace,
                marginTop: 2, lineHeight: 1 }}>
                {ctx.user?.name || 'Boarding pass'}
              </div>
            </div>
          </div>
          <div style={{ display:'flex', gap: 6 }}>
            <button style={{ width: 34, height: 34, background: t.surface, border:`1px solid ${t.line2}`,
              borderRadius: t.edge==='angular' ? 2 : '50%', cursor:'pointer',
              display:'flex', alignItems:'center', justifyContent:'center', padding: 0 }} aria-label="Notifications">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={t.text} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z"/><path d="M10 20a2 2 0 004 0"/>
              </svg>
              <span style={{ position:'absolute', marginTop:-12, marginLeft: 12, width: 8, height: 8,
                borderRadius:'50%', background: t.accent3, border:`1.5px solid ${t.bg}` }}/>
            </button>
            <button style={{ width: 34, height: 34, background: t.surface, border:`1px solid ${t.line2}`,
              borderRadius: t.edge==='angular' ? 2 : '50%', cursor:'pointer',
              display:'flex', alignItems:'center', justifyContent:'center', padding: 0 }} aria-label="Settings">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={t.text} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/>
              </svg>
            </button>
          </div>
        </div>

        <BoardingPass t={t} user={ctx.user} stamps={ctx.stamps}/>

        {/* Lottery / BPE card */}
        {ctx.lottery && (
          <Card t={t} style={{ marginTop: 14, padding: 14, position:'relative' }} accent>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div>
                <SectionLabel t={t} color={t.accent3}>Lucky draw</SectionLabel>
                <div style={{ fontFamily: t.fontTitle, fontSize: 14, color: t.text, fontWeight: 700, marginTop: 4,
                  textTransform: t.titleCase==='upper'?'uppercase':'none', letterSpacing: t.titleSpace }}>
                  Boarding Pass Entries
                </div>
                <div style={{ fontFamily: t.fontBody, fontSize: 11, color: t.textMute, marginTop: 4 }}>
                  Final draw: Jun 14 · 6 PM · Terminal Hall
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontFamily: t.fontMono, fontSize: 30, fontWeight: 700, color: t.accent2,
                  lineHeight:1, letterSpacing:'-0.02em' }}>
                  ×{ctx.entries}
                </div>
                <div style={{ fontFamily:t.fontMono, fontSize:9, color: t.textDim, letterSpacing:'0.12em', marginTop:4 }}>
                  ENTRIES
                </div>
              </div>
            </div>
            {/* Mini progress dots */}
            <div style={{ marginTop: 12, display:'flex', gap: 4 }}>
              {Array.from({length: 24}).map((_,i)=>(
                <div key={i} style={{ flex:1, height: 4,
                  background: i < ctx.entries ? t.accent3 : t.line2,
                  borderRadius: 1 }}/>
              ))}
            </div>
          </Card>
        )}

        {/* Reward tiers */}
        <div style={{ marginTop: 14 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 8 }}>
            <SectionLabel t={t}>Reward terminal</SectionLabel>
            <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.accent2, letterSpacing:'0.1em' }}>{ctx.stamps.size}/7</span>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
            <TierRow t={t} tier="01" need={3} have={ctx.stamps.size} title="Snack & sticker pack" status={ctx.stamps.size>=3?'avail':'locked'}/>
            <TierRow t={t} tier="02" need={5} have={ctx.stamps.size} title="GameFest tee + voucher" status={ctx.stamps.size>=5?'avail':'locked'}/>
            <TierRow t={t} tier="03" need={7} have={ctx.stamps.size} title="HUAWEI gift box" status={ctx.stamps.size>=7?'avail':'locked'} huawei={ctx.huawei}/>
          </div>
        </div>

        {/* HUAWEI sponsor strip */}
        {ctx.huawei && (
          <div style={{ marginTop: 14, padding: '10px 14px',
            background: t.surface, border: `1px solid ${t.line2}`,
            borderRadius: t.edge==='angular' ? 2 : 10,
            display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <HuaweiBadge t={t} size="md"/>
            <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.accent3, letterSpacing:'0.12em' }}>
              2× ENTRIES · 14:00–15:00
            </span>
          </div>
        )}
      </div>
      <BottomNav t={t} active="passport"/>
    </PhoneFrame>
  );
}

function TierRow({ t, tier, need, have, title, status, huawei }) {
  const pct = Math.min(100, Math.round((have/need)*100));
  const c = status==='avail' ? t.success : status==='claimed' ? t.textMute : t.textMute;
  const isHuawei = huawei && tier==='03';
  return (
    <div style={{
      background: t.surface,
      border: `1px solid ${isHuawei ? t.huawei+'66' : t.line2}`,
      borderRadius: t.edge==='angular' ? 2 : t.edge==='rounded' ? 14 : 8,
      padding: '10px 12px',
      position:'relative',
    }}>
      {isHuawei && (
        <div style={{ position:'absolute', top:0, right:0,
          background: t.huawei, color:'#fff', fontFamily: t.fontMono, fontSize: 9, fontWeight: 700,
          padding:'3px 7px', letterSpacing:'0.05em',
          borderRadius: t.edge==='angular' ? '0 0 0 4px' : '0 8px 0 8px' }}>HUAWEI</div>
      )}
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, background: status==='avail' ? t.accent : t.bgDeep,
          color: status==='avail' ? '#fff' : t.textMute,
          borderRadius: t.edge==='angular' ? 2 : '50%',
          fontFamily: t.fontMono, fontSize: 11, fontWeight: 700,
          display:'flex', alignItems:'center', justifyContent:'center',
          letterSpacing:'-0.02em', flexShrink: 0,
        }}>{tier}</div>
        <div style={{ flex:1, minWidth: 0 }}>
          <div style={{ fontFamily: t.fontBody, fontSize: 13, color: t.text, fontWeight: 600 }}>
            {title}
          </div>
          <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 2 }}>
            {have}/{need} stamps · {status==='avail'?'CLAIM AVAILABLE':'LOCKED'}
          </div>
        </div>
        <button style={{
          background: status==='avail' ? t.accent : 'transparent',
          color: status==='avail' ? '#fff' : t.textDim,
          border: status==='avail' ? 'none' : `1px solid ${t.line2}`,
          borderRadius: t.edge==='angular' ? 2 : 100,
          padding: '6px 12px',
          fontFamily: t.fontMono, fontSize: 10, fontWeight: 700,
          letterSpacing:'0.1em', cursor:'pointer',
        }}>{status==='avail'?'CLAIM':'…'}</button>
      </div>
      <div style={{ marginTop: 8, height: 3, background: t.bgDeep, borderRadius: 1, overflow:'hidden' }}>
        <div style={{ width: `${pct}%`, height:'100%', background: status==='avail' ? t.success : t.accent }}/>
      </div>
    </div>
  );
}

// ────────────────────────── SCANNER ──────────────────────────
function ScreenScan({ t, mode='ready' }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', position:'relative', background:'#000' }}>
        {/* Camera viewport */}
        <div style={{ position:'absolute', inset:0,
          background: `radial-gradient(circle at 50% 35%, #0a0a14 0%, #000 80%)` }}>
          {/* fake stalls behind reticle */}
          <svg style={{ position:'absolute', inset:0 }} width="100%" height="100%">
            <defs><pattern id="dot" width="20" height="20" patternUnits="userSpaceOnUse">
              <circle cx="10" cy="10" r="0.5" fill="#444"/></pattern></defs>
            <rect width="100%" height="100%" fill="url(#dot)"/>
          </svg>
          {/* QR-ish glyph */}
          <div style={{ position:'absolute', top:'30%', left:'50%', transform:'translate(-50%, -50%)',
            width: 140, height: 140, background:'#1a1a1a', opacity: 0.7,
            display:'grid', gridTemplateColumns:'repeat(8, 1fr)', gap:1, padding: 8 }}>
            {Array.from({length: 64}).map((_,i)=>(
              <div key={i} style={{ background: Math.random()>0.5 ? '#fff' : 'transparent' }}/>
            ))}
          </div>
        </div>

        {/* Top bar */}
        <div style={{ position:'absolute', top: 0, left:0, right:0, padding: '50px 16px 12px',
          display:'flex', justifyContent:'space-between', alignItems:'center', zIndex: 5 }}>
          <button style={{ background:'rgba(0,0,0,0.5)', border:`1px solid ${t.line2}`,
            color: t.text, width: 36, height: 36, borderRadius: t.edge==='angular' ? 2 : '50%',
            display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>×</button>
          <div style={{ background:'rgba(0,0,0,0.5)', border:`1px solid ${t.line2}`,
            padding:'6px 12px', borderRadius: t.edge==='angular' ? 2 : 100,
            fontFamily: t.fontMono, fontSize: 10, color: t.text, letterSpacing:'0.16em' }}>
            GATE SCAN · LIVE
          </div>
          <button style={{ background:'rgba(0,0,0,0.5)', border:`1px solid ${t.line2}`,
            color: t.text, width: 36, height: 36, borderRadius: t.edge==='angular' ? 2 : '50%',
            display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 2v3M12 19v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M2 12h3M19 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
              <circle cx="12" cy="12" r="4"/>
            </svg>
          </button>
        </div>

        {/* Reticle */}
        <div style={{ position:'absolute', top:'30%', left:'50%', transform:'translate(-50%, -50%)',
          width: 240, height: 240, pointerEvents:'none' }}>
          {[
            ['top','left',0,0,'tl'],['top','right',0,0,'tr'],
            ['bottom','left',0,0,'bl'],['bottom','right',0,0,'br'],
          ].map(([v,h,_,__,k])=>(
            <div key={k} style={{
              position:'absolute', [v]:0, [h]:0, width: 36, height: 36,
              borderColor: t.accent2,
              borderTop: v==='top' ? `3px solid ${t.accent2}` : 'none',
              borderBottom: v==='bottom' ? `3px solid ${t.accent2}` : 'none',
              borderLeft: h==='left' ? `3px solid ${t.accent2}` : 'none',
              borderRight: h==='right' ? `3px solid ${t.accent2}` : 'none',
              boxShadow: `0 0 12px ${t.accent2}`,
            }}/>
          ))}
          {/* scanning line */}
          <div style={{ position:'absolute', left: 8, right: 8, top:'50%',
            height: 1, background: t.accent3, boxShadow:`0 0 12px ${t.accent3}, 0 0 24px ${t.accent3}` }}/>
        </div>

        {/* Recent scans bottom sheet */}
        <div style={{ position:'absolute', left: 0, right: 0, bottom: 0,
          background: `linear-gradient(180deg, transparent, ${t.bgDeep} 30%)`,
          padding: '60px 16px 32px' }}>
          <div style={{
            background: t.surface,
            border: `1px solid ${t.line2}`,
            borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 20 : 14,
            padding: 14,
            backdropFilter: 'blur(12px)',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10 }}>
              <SectionLabel t={t}>Recent scans</SectionLabel>
              <span style={{ fontFamily: t.fontMono, fontSize:9, color: t.accent2, letterSpacing:'0.12em' }}>● LIVE</span>
            </div>
            {[
              { name:'Caribbean Coffee · LG', time:'2 min ago', stamp:'+1', floor:'LG' },
              { name:'Tokyo Anime Hub · 3F',   time:'18 min',  stamp:'+1', floor:'3F' },
              { name:'HUAWEI Booth · GF',      time:'1h ago',  stamp:'+2', floor:'GF', huawei:true },
            ].map((s,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap: 10,
                padding:'8px 0', borderTop: i>0 ? `1px solid ${t.line2}` : 'none' }}>
                <div style={{ width: 28, height: 28,
                  background: s.huawei ? t.huawei : FLOORS.find(f=>f.code===s.floor)?.color,
                  borderRadius: t.edge==='angular' ? 2 : t.edge==='rounded' ? 8 : 4,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily: t.fontMono, fontSize: 10, fontWeight: 700, color:'#fff' }}>
                  {s.floor}
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ fontFamily: t.fontBody, fontSize: 12, color: t.text, fontWeight: 600 }}>
                    {s.name}
                  </div>
                  <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim }}>{s.time}</div>
                </div>
                <span style={{ fontFamily: t.fontMono, fontSize: 11, color: t.success, fontWeight: 700 }}>
                  {s.stamp}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function ScreenScanSuccess({ t, ctx }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', position:'relative',
        background: `radial-gradient(circle at 50% 38%, ${t.accent}33, transparent 60%), ${t.bg}` }}>
        {/* Confetti / sparkles */}
        <svg style={{ position:'absolute', inset:0, pointerEvents:'none' }} width="100%" height="100%">
          {[[80,140],[300,180],[60,280],[330,260],[200,400],[100,460],[290,440]].map(([x,y],i)=>(
            <g key={i} transform={`translate(${x} ${y})`}>
              <path d="M0 -8L2 -2L8 0L2 2L0 8L-2 2L-8 0L-2 -2Z" fill={i%2?t.accent2:t.accent3} opacity={0.7}/>
            </g>
          ))}
        </svg>

        <div style={{ position:'absolute', inset: 0, padding: '80px 32px 40px',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ textAlign:'center', width:'100%' }}>
            <SectionLabel t={t} color={t.success}>Stamp acquired</SectionLabel>
            {/* Big landed stamp */}
            <div style={{ marginTop: 28, display:'flex', justifyContent:'center', position:'relative' }}>
              <div style={{ filter: `drop-shadow(0 8px 24px ${t.accent}88)` }}>
                <StampShape t={t} filled color={FLOORS[3].color} glyph="3F" size={140}/>
              </div>
              {/* Burst rays */}
              <svg width="240" height="240" style={{ position:'absolute', top:-50 }}>
                {Array.from({length: 12}).map((_,i)=>{
                  const a = (i/12)*Math.PI*2;
                  const r1 = 80, r2 = 110;
                  return <line key={i} x1={120+Math.cos(a)*r1} y1={120+Math.sin(a)*r1}
                    x2={120+Math.cos(a)*r2} y2={120+Math.sin(a)*r2}
                    stroke={t.accent2} strokeWidth="2" opacity={0.6}/>;
                })}
              </svg>
            </div>
            <PathTitle t={t} size={28} style={{ marginTop: 20 }}>3F · Tokyo unlocked</PathTitle>
            <p style={{ fontFamily: t.fontBody, fontSize: 14, color: t.textMute, marginTop: 8, lineHeight: 1.5 }}>
              Anime Hub welcomes you. <br/>
              <span style={{ color: t.accent2, fontFamily: t.fontMono, fontSize: 12, letterSpacing:'0.1em' }}>
                +120 XP · +2 ENTRIES
              </span>
            </p>
          </div>

          <div style={{ width:'100%' }}>
            <Card t={t} style={{ padding: 12, marginBottom: 12 }}>
              <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, background: t.accent2, borderRadius: t.edge==='angular'?2:8,
                  display:'flex', alignItems:'center', justifyContent:'center', color: t.bg, fontWeight: 800 }}>★</div>
                <div style={{ flex:1 }}>
                  <div style={{ fontFamily: t.fontBody, fontSize: 12, color: t.text, fontWeight: 600 }}>
                    Tier 02 unlocked!
                  </div>
                  <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, letterSpacing:'0.05em' }}>
                    Claim your tee at Prize Terminal
                  </div>
                </div>
                <span style={{ fontFamily: t.fontMono, fontSize: 11, color: t.success, fontWeight: 700, letterSpacing:'0.1em' }}>NEW</span>
              </div>
            </Card>
            <button style={{
              width:'100%', height: 52, background: t.accent, color:'#fff', border:'none',
              borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 26 : 10,
              fontFamily: t.fontTitle, fontSize: 13, fontWeight: 700,
              letterSpacing: t.titleSpace,
              textTransform: t.titleCase==='upper' ? 'uppercase' : 'none',
              cursor:'pointer',
              clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%)' : 'none',
            }}>View pass</button>
            <button style={{
              width:'100%', height: 44, marginTop: 8, background:'transparent', color: t.text,
              border:`1px solid ${t.line}`,
              borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 22 : 8,
              fontFamily: t.fontMono, fontSize: 11, fontWeight: 600,
              letterSpacing:'0.16em', cursor:'pointer',
            }}>SCAN ANOTHER →</button>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

// ────────────────────────── QUEST BOARD ──────────────────────────
function ScreenQuests({ t, ctx }) {
  const FILTERS = ['All','Floor','Store','HUAWEI','Esports','Cosplay'];
  const QUESTS = [
    { id:1, type:'HUAWEI', title:'Visit the HUAWEI booth', loc:'GF · Main concourse', reward:'+3 entries · stamp', huawei:true, done:false, featured:true },
    { id:2, type:'Esports', title:'Watch a Valorant match', loc:'5F · Hollywood Stage', reward:'+2 entries · 100 XP', done:false, featured:true },
    { id:3, type:'Floor', title:'Stamp 3F · Tokyo', loc:'3F · Anime checkpoint', reward:'Floor stamp · 120 XP', done:true },
    { id:4, type:'Store', title:'Buy at Caribbean Coffee', loc:'LG · #LG-12', reward:'Stamp · 50 XP', done:false },
    { id:5, type:'Cosplay', title:'Check in at cosplay zone', loc:'5F · Stage backstage', reward:'Stamp · 200 XP', done:false },
    { id:6, type:'Store', title:'Spend ฿200 at any 1F shop', loc:'1F · London level', reward:'Stamp · 50 XP', done:false },
  ];
  const tagColor = (type) => ({
    'HUAWEI': t.huawei, 'Esports': t.accent3, 'Cosplay': t.accent,
    'Floor': t.accent2, 'Store': t.success,
  })[type] || t.textMute;
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', overflow:'auto', padding:'8px 16px 100px', background: t.bg }}>
        <div style={{ padding:'8px 4px 14px' }}>
          <SectionLabel t={t} color={t.accent2}>Flight schedule</SectionLabel>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop: 4 }}>
            <PathTitle t={t} size={26}>Quest board</PathTitle>
            <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute }}>1/6 done</span>
          </div>
        </div>

        {/* Filter chips */}
        <div style={{ display:'flex', gap: 8, overflow:'auto', paddingBottom: 12, marginBottom: 14,
          scrollbarWidth:'none' }}>
          {FILTERS.map((f,i)=>(
            <button key={f} style={{
              whiteSpace:'nowrap',
              background: i===0 ? t.accent : t.surface,
              color: i===0 ? '#fff' : t.text,
              border: `1px solid ${i===0 ? t.accent : t.line2}`,
              borderRadius: t.edge==='angular' ? 2 : 100,
              padding: '7px 14px',
              fontFamily: t.fontMono, fontSize: 11, fontWeight: 600,
              letterSpacing:'0.1em',
              textTransform: t.titleCase==='upper'?'uppercase':'none',
              cursor:'pointer',
            }}>{f}</button>
          ))}
        </div>

        {/* Featured */}
        <SectionLabel t={t} color={t.accent3}>Featured · 2× rewards now</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 10, marginBottom: 16 }}>
          {QUESTS.filter(q=>q.featured).map(q => (
            <QuestCard key={q.id} t={t} q={q} featured tagColor={tagColor(q.type)} ctx={ctx}/>
          ))}
        </div>

        <SectionLabel t={t}>All quests</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap: 10, marginTop: 10 }}>
          {QUESTS.filter(q=>!q.featured).map(q => (
            <QuestCard key={q.id} t={t} q={q} tagColor={tagColor(q.type)} ctx={ctx}/>
          ))}
        </div>
      </div>
      <BottomNav t={t} active="quests"/>
    </PhoneFrame>
  );
}

function QuestCard({ t, q, featured, tagColor, ctx }) {
  const showHuawei = q.huawei && (ctx?.huawei !== false);
  if (!showHuawei && q.huawei) return null;
  return (
    <div style={{
      position:'relative', padding: 12, opacity: q.done ? 0.55 : 1,
      background: featured
        ? `linear-gradient(135deg, ${t.surface}, ${t.surface2})`
        : t.surface,
      border: `1px solid ${q.huawei ? t.huawei+'66' : featured ? t.accent+'44' : t.line2}`,
      borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 16 : 10,
      clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)' : 'none',
    }}>
      {q.huawei && (
        <div style={{ position:'absolute', top:0, left:0, bottom:0, width:3, background: t.huawei }}/>
      )}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 10 }}>
        <div style={{ flex:1, minWidth: 0 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 6 }}>
            <span style={{ background: tagColor, color:'#fff', padding:'2px 6px',
              borderRadius: t.edge==='angular' ? 2 : 4,
              fontFamily: t.fontMono, fontSize: 9, fontWeight: 700, letterSpacing:'0.1em' }}>
              {q.type.toUpperCase()}
            </span>
            {q.done && (
              <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.success, letterSpacing:'0.1em' }}>✓ DONE</span>
            )}
          </div>
          <div style={{ fontFamily: t.fontBody, fontSize: 14, color: t.text, fontWeight: 600,
            textDecoration: q.done ? 'line-through' : 'none' }}>
            {q.title}
          </div>
          <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 4, letterSpacing:'0.04em' }}>
            ◉ {q.loc}
          </div>
        </div>
        <div style={{ textAlign:'right', flexShrink: 0 }}>
          <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.accent2, fontWeight: 700, letterSpacing:'0.05em' }}>
            {q.reward}
          </div>
          {!q.done && (
            <button style={{
              marginTop: 8, background: featured ? t.accent : 'transparent',
              color: featured ? '#fff' : t.text,
              border: featured ? 'none' : `1px solid ${t.line}`,
              borderRadius: t.edge==='angular' ? 2 : 100,
              padding: '5px 10px',
              fontFamily: t.fontMono, fontSize: 10, fontWeight: 700,
              letterSpacing:'0.1em', cursor:'pointer',
            }}>START →</button>
          )}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────── MAP (3D ONLY) ──────────────────────────
function ScreenMap({ t, ctx, style='3d' }) {
  // Pick illustration variant by path; vibrancy boosted in MapHero3D for non-arch.
  const variant = t.edge==='angular' ? 'jrpg' : t.edge==='rounded' ? 'cosplay' : 'arch';
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', position:'relative',
        background: variant==='arch'
          ? t.bgDeep
          : `radial-gradient(ellipse at 50% 25%, ${t.accent}26, transparent 55%), radial-gradient(ellipse at 80% 90%, ${t.accent3}22, transparent 60%), ${t.bgDeep}`,
        overflow:'hidden' }}>
        {/* Header */}
        <div style={{ position:'absolute', top: 50, left: 16, right: 16, zIndex: 5,
          display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <SectionLabel t={t} color={t.accent2}>Mall map · LIVE 3D</SectionLabel>
            <PathTitle t={t} size={22} style={{ marginTop: 4 }}>Terminal 21</PathTitle>
          </div>
          <div style={{
            background: 'rgba(0,0,0,0.4)', border:`1px solid ${t.line2}`,
            backdropFilter:'blur(8px)',
            borderRadius: t.edge==='angular' ? 2 : 100,
            padding:'7px 12px', display:'flex', alignItems:'center', gap: 6,
          }}>
            <span style={{ width:6, height:6, borderRadius:'50%',
              background: t.accent2, boxShadow:`0 0 10px ${t.accent2}` }}/>
            <span style={{ fontFamily: t.fontMono, fontSize:10, fontWeight: 700,
              color: t.text, letterSpacing:'0.16em' }}>3D LIVE</span>
          </div>
        </div>

        {/* Map content — vibrant hero illustration replaces old Map3D */}
        <div style={{ position:'absolute', inset:0, paddingTop: 90, paddingBottom: 100 }}>
          <div style={{ width:'100%', height:'100%', display:'flex',
            alignItems:'center', justifyContent:'center' }}>
            <MapHero3D t={t} ctx={ctx} variant={variant}/>
          </div>
        </div>

        {/* Floor selector */}
        <div style={{ position:'absolute', right: 12, top: 130, bottom: 110,
          display:'flex', flexDirection:'column', justifyContent:'center', gap: 4, zIndex: 5 }}>
          {[...FLOORS].reverse().map(f => {
            const has = ctx.stamps.has(f.code);
            const isCurrent = f.code === '3F';
            return (
              <div key={f.code} style={{
                width: 44, height: 36, position:'relative',
                background: isCurrent ? f.color : t.surface,
                border: `1px solid ${isCurrent ? f.color : t.line2}`,
                borderRadius: t.edge==='angular' ? 2 : 8,
                display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column',
                cursor:'pointer',
              }}>
                <span style={{ fontFamily: t.fontMono, fontSize: 11, fontWeight: 700,
                  color: isCurrent ? '#fff' : t.text, lineHeight: 1 }}>{f.code}</span>
                {has && (
                  <div style={{ position:'absolute', top:-4, right:-4, width: 10, height: 10,
                    borderRadius:'50%', background: t.success, border:`2px solid ${t.bg}` }}/>
                )}
              </div>
            );
          })}
        </div>

        {/* Detail card */}
        <div style={{ position:'absolute', left: 16, right: 16, bottom: 100, zIndex: 5 }}>
          <Card t={t} style={{ padding: 14 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div>
                <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius:'50%', background: FLOORS[3].color }}/>
                  <span style={{ fontFamily: t.fontMono, fontSize: 10, color: FLOORS[3].color, letterSpacing:'0.1em' }}>
                    3F · TOKYO
                  </span>
                </div>
                <div style={{ fontFamily: t.fontBody, fontSize: 15, color: t.text, fontWeight: 600, marginTop: 4 }}>
                  Anime Hub Korat
                </div>
                <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 4, letterSpacing:'0.05em' }}>
                  Open 10:00–22:00 · Floor checkpoint here
                </div>
              </div>
              <button style={{
                background: t.accent, color:'#fff', border:'none',
                borderRadius: t.edge==='angular' ? 2 : 100,
                padding:'8px 14px',
                fontFamily: t.fontMono, fontSize: 10, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer',
              }}>NAVIGATE →</button>
            </div>
          </Card>
        </div>
      </div>
      <BottomNav t={t} active="map"/>
    </PhoneFrame>
  );
}

// 2.5D illustrated map (uses real IMDF polygons of 3F)
function Map2D({ t, ctx }) {
  const data = window.FLOORS_GEO?.['3F'];
  return (
    <div style={{ height:'100%', display:'flex', alignItems:'center', justifyContent:'center',
      padding: '0 60px 0 12px', position:'relative' }}>
      {/* Soft shadow base */}
      <svg viewBox="0 0 160 324" style={{ width:'100%', height:'100%' }}>
        <defs>
          <filter id="iso-shadow"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <ellipse cx="80" cy="290" rx="70" ry="8" fill="#000" opacity="0.4" filter="url(#iso-shadow)"/>
        {/* corridors */}
        {data?.corridors.map((c,i) => (
          <polygon key={'c'+i} points={c.pts.map(p=>p.join(',')).join(' ')}
            fill={t.surface2} stroke={t.line2} strokeWidth="0.3"/>
        ))}
        {/* rooms */}
        {data?.rooms.map((r,i) => (
          <polygon key={'r'+i} points={r.pts.map(p=>p.join(',')).join(' ')}
            fill={`${FLOORS[3].color}33`} stroke={FLOORS[3].color} strokeWidth="0.5"
            opacity="0.9"/>
        ))}
        {/* Pins on featured rooms */}
        {data?.rooms.slice(0,4).map((r,i) => {
          const cx = r.pts.reduce((s,p)=>s+p[0],0)/r.pts.length;
          const cy = r.pts.reduce((s,p)=>s+p[1],0)/r.pts.length;
          return (
            <g key={'p'+i} transform={`translate(${cx} ${cy})`}>
              <circle r="6" fill={t.accent} opacity="0.3"/>
              <circle r="3" fill={t.accent3} stroke="#fff" strokeWidth="1"/>
            </g>
          );
        })}
        {/* HUAWEI pin */}
        {data?.rooms[5] && (() => {
          const r = data.rooms[5];
          const cx = r.pts.reduce((s,p)=>s+p[0],0)/r.pts.length;
          const cy = r.pts.reduce((s,p)=>s+p[1],0)/r.pts.length;
          return ctx.huawei ? (
            <g transform={`translate(${cx} ${cy})`}>
              <circle r="8" fill={t.huawei} opacity="0.3"/>
              <rect x="-7" y="-3" width="14" height="6" rx="1" fill={t.huawei}/>
              <text x="0" y="2" textAnchor="middle" fontSize="4" fontFamily={t.fontMono} fontWeight="700" fill="#fff">HUAWEI</text>
            </g>
          ) : null;
        })()}
      </svg>
    </div>
  );
}

// 3D isometric map — all 7 floors stacked
function Map3D({ t, ctx }) {
  const FH = 28;        // floor height in iso units
  const SCALE = 0.6;    // floor size scale
  const SKEW_X = 0.5;
  return (
    <div style={{ height:'100%', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
      <svg viewBox="-100 -260 320 480" style={{ width:'100%', height:'100%' }}>
        <defs>
          <filter id="glow-pin"><feGaussianBlur stdDeviation="1.5"/></filter>
        </defs>
        {/* Floors top-down so we see stacking */}
        {FLOORS.map((f, idx) => {
          const data = window.FLOORS_GEO?.[f.code];
          const yOff = -idx * FH;
          const isCurrent = f.code === '3F';
          // skew transform makes a 2D plan look isometric
          const transform = `translate(0 ${yOff}) skewX(-30) scale(${SCALE} ${SCALE * 0.55})`;
          return (
            <g key={f.code} transform={transform} opacity={isCurrent ? 1 : 0.55}>
              {/* base */}
              <rect x="0" y="0" width="160" height="324"
                fill={isCurrent ? `${f.color}1c` : t.surface2}
                stroke={isCurrent ? f.color : t.line2}
                strokeWidth={isCurrent ? '1' : '0.5'}/>
              {/* corridors */}
              {data?.corridors.slice(0, 6).map((c,i) => (
                <polygon key={i} points={c.pts.map(p=>p.join(',')).join(' ')}
                  fill={t.surface} opacity="0.5"/>
              ))}
              {/* rooms */}
              {data?.rooms.slice(0, isCurrent ? 24 : 12).map((r,i) => (
                <polygon key={i} points={r.pts.map(p=>p.join(',')).join(' ')}
                  fill={isCurrent ? `${f.color}aa` : `${f.color}55`}
                  stroke={isCurrent ? f.color : 'none'}
                  strokeWidth="0.4"/>
              ))}
              {/* current floor pins */}
              {isCurrent && data?.rooms.slice(0,3).map((r,i) => {
                const cx = r.pts.reduce((s,p)=>s+p[0],0)/r.pts.length;
                const cy = r.pts.reduce((s,p)=>s+p[1],0)/r.pts.length;
                return (
                  <g key={'p'+i} transform={`translate(${cx} ${cy})`}>
                    <circle r="3" fill={t.accent3} stroke="#fff" strokeWidth="0.5"/>
                  </g>
                );
              })}
            </g>
          );
        })}

        {/* Floor labels (un-skewed, on the right edge of each floor) */}
        {FLOORS.map((f, idx) => {
          const yOff = -idx * FH;
          return (
            <g key={'l'+f.code} transform={`translate(140 ${yOff + 22})`}>
              <text fontFamily={t.fontMono} fontSize="8" fontWeight="700" fill={f.code==='3F' ? f.color : t.textMute} letterSpacing="0.1em">
                {f.code} · {f.name.toUpperCase()}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// ────────────────────────── SCHEDULE ──────────────────────────
function ScreenSchedule({ t, ctx }) {
  const DAYS = ['Fri 12','Sat 13','Sun 14'];
  const EVENTS = [
    { time:'10:00', title:'Doors open · Boarding begins', loc:'GF · Main', tag:'OPEN', color:t.accent2 },
    { time:'11:00', title:'HUAWEI booth activation', loc:'GF · Main', tag:'HUAWEI', color:t.huawei, huawei:true },
    { time:'13:00', title:'Valorant — Round of 16', loc:'5F · Hollywood', tag:'ESPORTS', color:t.accent3, now:true },
    { time:'15:00', title:'Cosplay registration close', loc:'5F · Stage', tag:'COSPLAY', color:t.accent },
    { time:'17:00', title:'Cosplay runway · Round 1', loc:'5F · Stage', tag:'COSPLAY', color:t.accent },
    { time:'18:30', title:'Mobile Legends — Quarters', loc:'5F · Hollywood', tag:'ESPORTS', color:t.accent3 },
    { time:'20:00', title:'HUAWEI Power Hour · 2× entries', loc:'GF · Booth', tag:'HUAWEI', color:t.huawei, huawei:true },
  ];
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', overflow:'auto', padding:'8px 16px 100px', background: t.bg }}>
        <div style={{ padding:'8px 4px 12px' }}>
          <SectionLabel t={t} color={t.accent2}>Departures</SectionLabel>
          <PathTitle t={t} size={26} style={{ marginTop: 4 }}>Schedule</PathTitle>
        </div>

        {/* Day tabs */}
        <div style={{ display:'flex', gap: 6, padding: 3, background: t.surface,
          border:`1px solid ${t.line2}`,
          borderRadius: t.edge==='angular' ? 2 : 100, marginBottom: 14 }}>
          {DAYS.map((d,i)=>(
            <button key={d} style={{
              flex:1, padding:'8px 10px', background: i===1 ? t.accent : 'transparent',
              color: i===1 ? '#fff' : t.textMute, border:'none',
              borderRadius: t.edge==='angular' ? 2 : 100,
              fontFamily: t.fontMono, fontSize: 11, fontWeight: 700, letterSpacing:'0.06em', cursor:'pointer',
            }}>{d}</button>
          ))}
        </div>

        {/* Now happening */}
        <div style={{
          background: `linear-gradient(135deg, ${t.accent3}22, transparent)`,
          border: `1px solid ${t.accent3}66`,
          borderRadius: t.edge==='angular' ? 4 : 14,
          padding: 14, marginBottom: 14, position:'relative',
          clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%)' : 'none',
        }}>
          <div style={{ display:'flex', justifyContent:'space-between' }}>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
                <div style={{ width: 8, height: 8, borderRadius:'50%', background: t.accent3,
                  boxShadow:`0 0 8px ${t.accent3}` }}/>
                <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.accent3,
                  letterSpacing:'0.16em', fontWeight: 700 }}>NOW HAPPENING</span>
              </div>
              <div style={{ fontFamily: t.fontTitle, fontSize: 18, color: t.text, fontWeight: 700, marginTop: 6,
                textTransform: t.titleCase==='upper'?'uppercase':'none', letterSpacing: t.titleSpace }}>
                Valorant — Round of 16
              </div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 4, letterSpacing:'0.04em' }}>
                5F HOLLYWOOD · ENDS 14:30
              </div>
            </div>
            <button style={{
              background: t.accent3, color:'#fff', border:'none',
              borderRadius: t.edge==='angular' ? 2 : 100,
              padding:'8px 14px', alignSelf:'flex-start',
              fontFamily: t.fontMono, fontSize: 10, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer',
            }}>ATTEND →</button>
          </div>
        </div>

        {/* Timeline */}
        <SectionLabel t={t}>Today · Sat 13</SectionLabel>
        <div style={{ marginTop: 12, position:'relative' }}>
          <div style={{ position:'absolute', left: 47, top: 0, bottom: 0, width: 1, background: t.line2 }}/>
          {EVENTS.map((e,i)=>{
            if (e.huawei && !ctx.huawei) return null;
            return (
              <div key={i} style={{ display:'flex', gap: 14, marginBottom: 14, position:'relative' }}>
                <div style={{ width: 36, paddingTop: 4 }}>
                  <div style={{ fontFamily: t.fontMono, fontSize: 12, color: t.text, fontWeight: 700, letterSpacing:'-0.02em' }}>
                    {e.time}
                  </div>
                </div>
                <div style={{ position:'absolute', left: 44, top: 8, width: 8, height: 8, borderRadius:'50%',
                  background: e.color, border: `2px solid ${t.bg}`, zIndex: 2 }}/>
                <div style={{ flex:1, marginLeft: 18,
                  background: t.surface, border:`1px solid ${e.huawei ? t.huawei+'55' : t.line2}`,
                  borderRadius: t.edge==='angular' ? 2 : 10, padding: '10px 12px', position:'relative' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 4 }}>
                    <span style={{ background: e.color, color:'#fff', padding:'1px 6px',
                      borderRadius: t.edge==='angular' ? 2 : 4,
                      fontFamily: t.fontMono, fontSize: 8, fontWeight: 700, letterSpacing:'0.1em' }}>
                      {e.tag}
                    </span>
                    {e.now && <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.accent3, letterSpacing:'0.1em' }}>● LIVE</span>}
                  </div>
                  <div style={{ fontFamily: t.fontBody, fontSize: 13, color: t.text, fontWeight: 600 }}>
                    {e.title}
                  </div>
                  <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 4, letterSpacing:'0.04em' }}>
                    ◉ {e.loc}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <BottomNav t={t} active="schedule"/>
    </PhoneFrame>
  );
}

// ────────────────────────── REWARD WALLET ──────────────────────────
function ScreenWallet({ t, ctx }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', overflow:'auto', padding:'8px 16px 100px', background: t.bg }}>
        <div style={{ padding:'8px 4px 14px' }}>
          <SectionLabel t={t} color={t.accent2}>Prize terminal</SectionLabel>
          <PathTitle t={t} size={26} style={{ marginTop: 4 }}>Reward wallet</PathTitle>
        </div>

        {/* Hero claim card */}
        <div style={{
          background: `linear-gradient(135deg, ${t.accent}, ${t.accent3})`,
          borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 20 : 12,
          padding: 18, color:'#fff', position:'relative', overflow:'hidden',
          clipPath: t.edge==='angular' ? 'polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px))' : 'none',
        }}>
          <span style={{ fontFamily: t.fontMono, fontSize: 10, letterSpacing:'0.16em', opacity:0.85, fontWeight: 700 }}>
            READY TO CLAIM
          </span>
          <div style={{ fontFamily: t.fontTitle, fontSize: 22, fontWeight: 700, marginTop: 6,
            textTransform: t.titleCase==='upper'?'uppercase':'none', letterSpacing: t.titleSpace }}>
            GameFest tee + voucher
          </div>
          <div style={{ fontFamily: t.fontBody, fontSize: 12, opacity: 0.9, marginTop: 4 }}>
            Tier 02 · 5/7 stamps complete
          </div>
          {/* Mock QR */}
          <div style={{ marginTop: 14, padding: 10, background:'#fff', borderRadius:6,
            display:'inline-flex', alignItems:'center', gap: 10 }}>
            <svg width="60" height="60" viewBox="0 0 60 60">
              <rect width="60" height="60" fill="#fff"/>
              {Array.from({length: 64}).map((_,i)=>{
                const x = (i%8)*7+2, y = Math.floor(i/8)*7+2;
                return Math.random()>0.55 ? <rect key={i} x={x} y={y} width="6" height="6" fill="#000"/> : null;
              })}
              <rect x="2" y="2" width="14" height="14" fill="none" stroke="#000" strokeWidth="2"/>
              <rect x="44" y="2" width="14" height="14" fill="none" stroke="#000" strokeWidth="2"/>
              <rect x="2" y="44" width="14" height="14" fill="none" stroke="#000" strokeWidth="2"/>
            </svg>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 9, color:'#666', letterSpacing:'0.16em' }}>STAFF SCAN</div>
              <div style={{ fontFamily: t.fontMono, fontSize: 14, color:'#000', fontWeight: 700, marginTop: 2 }}>
                BP-{ctx.user.paxId}
              </div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color:'#666', marginTop: 4, letterSpacing:'0.05em' }}>
                Expires Jun 14 22:00
              </div>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display:'flex', gap: 6, marginTop: 18, marginBottom: 12,
          borderBottom: `1px solid ${t.line2}` }}>
          {['Rewards','Coupons','Entries'].map((label, i) => (
            <button key={label} style={{
              padding:'10px 12px', background:'none', border:'none',
              borderBottom: i===0 ? `2px solid ${t.accent}` : '2px solid transparent',
              color: i===0 ? t.text : t.textMute,
              fontFamily: t.fontMono, fontSize: 11, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer',
              textTransform:'uppercase',
            }}>{label}</button>
          ))}
        </div>

        {/* Reward list */}
        <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
          {[
            { tier:'01', title:'Snack & sticker pack', status:'CLAIMED', date:'Jun 13 · 11:32', icon:'🎟' },
            { tier:'02', title:'GameFest tee + voucher', status:'AVAILABLE', date:'Tier 02 unlocked', icon:'👕' },
            { tier:'03', title:'HUAWEI gift box', status:'LOCKED', date:'5/7 stamps · 2 to go', icon:'📦', huawei:true },
            { tier:'★',  title:'Caribbean Coffee 20% off', status:'AVAILABLE', date:'Coupon · expires today', icon:'☕' },
          ].map((r,i)=>{
            if (r.huawei && !ctx.huawei) return null;
            const c = r.status==='CLAIMED' ? t.textMute : r.status==='AVAILABLE' ? t.success : t.textDim;
            return (
              <div key={i} style={{
                background: t.surface, border:`1px solid ${r.huawei ? t.huawei+'55' : t.line2}`,
                borderRadius: t.edge==='angular' ? 2 : 10, padding: 12,
                display:'flex', alignItems:'center', gap: 12,
                opacity: r.status==='CLAIMED' ? 0.5 : 1,
              }}>
                <div style={{ width: 44, height: 44,
                  background: r.status==='AVAILABLE' ? t.accent : t.bgDeep,
                  borderRadius: t.edge==='angular' ? 2 : t.edge==='rounded' ? 12 : 6,
                  display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22,
                  border:`1px solid ${t.line2}`, flexShrink: 0,
                }}>{r.icon}</div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
                    <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.textDim, letterSpacing:'0.1em' }}>TIER {r.tier}</span>
                    {r.huawei && <span style={{ fontFamily: t.fontMono, fontSize: 9, color: t.huawei, letterSpacing:'0.1em' }}>HUAWEI</span>}
                  </div>
                  <div style={{ fontFamily: t.fontBody, fontSize: 13, color: t.text, fontWeight: 600, marginTop: 2 }}>
                    {r.title}
                  </div>
                  <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim, marginTop: 2, letterSpacing:'0.04em' }}>
                    {r.date}
                  </div>
                </div>
                <span style={{ fontFamily: t.fontMono, fontSize: 9, color: c, fontWeight: 700, letterSpacing:'0.1em' }}>
                  {r.status}
                </span>
              </div>
            );
          })}
        </div>
      </div>
      <BottomNav t={t} active="more"/>
    </PhoneFrame>
  );
}

// ────────────────────────── SOCIAL SHARE ──────────────────────────
function ScreenSocial({ t, ctx }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', overflow:'auto', padding:'40px 24px 100px', background: t.bg }}>
        <button style={{ background:'none', border:'none', color: t.textMute, cursor:'pointer',
          fontFamily: t.fontMono, fontSize: 11, letterSpacing:'0.1em' }}>← Back</button>
        <SectionLabel t={t} color={t.accent2} style={{ marginTop: 12 }}>Departure card</SectionLabel>
        <PathTitle t={t} size={26} style={{ marginTop: 4 }}>Share your journey</PathTitle>

        {/* Mini share preview */}
        <div style={{ marginTop: 20, transform:'scale(0.78)', transformOrigin:'top center' }}>
          <BoardingPass t={t} user={ctx.user} stamps={ctx.stamps}/>
        </div>

        {/* hashtag pill */}
        <div style={{ marginTop: -50, padding: 10, background: t.surface, border:`1px solid ${t.line2}`,
          borderRadius: t.edge==='angular' ? 2 : 10, display:'flex',
          justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontFamily: t.fontMono, fontSize: 12, color: t.text, letterSpacing:'0.04em' }}>
            #TerminalGameFest
          </span>
          <button style={{ background: t.accent, color:'#fff', border:'none',
            borderRadius: t.edge==='angular' ? 2 : 100, padding:'6px 12px',
            fontFamily: t.fontMono, fontSize: 10, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer' }}>COPY</button>
        </div>

        {/* Share buttons */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 10, marginTop: 14 }}>
          {[
            { label:'Instagram', glyph:'IG', bg:'#E1306C' },
            { label:'Facebook',  glyph:'FB', bg:'#1877F2' },
            { label:'TikTok',    glyph:'TT', bg:'#000' },
          ].map(s=>(
            <button key={s.label} style={{
              padding:'14px 8px', background: t.surface, border:`1px solid ${t.line2}`,
              borderRadius: t.edge==='angular' ? 2 : 12,
              display:'flex', flexDirection:'column', alignItems:'center', gap: 8, cursor:'pointer', color: t.text,
            }}>
              <div style={{ width: 36, height: 36, background: s.bg, borderRadius: t.edge==='angular' ? 2 : 8,
                display:'flex', alignItems:'center', justifyContent:'center', color:'#fff',
                fontFamily: t.fontMono, fontWeight: 700, fontSize: 14 }}>{s.glyph}</div>
              <span style={{ fontFamily: t.fontBody, fontSize: 12, fontWeight: 600 }}>{s.label}</span>
            </button>
          ))}
        </div>

        <Card t={t} style={{ marginTop: 14, padding: 12 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
            <span style={{ fontSize: 18 }}>🎁</span>
            <div style={{ flex:1 }}>
              <div style={{ fontFamily: t.fontBody, fontSize: 12, color: t.text, fontWeight: 600 }}>
                Sharing earns +1 entry
              </div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 2, letterSpacing:'0.04em' }}>
                Once per day · auto-tracked via hashtag
              </div>
            </div>
          </div>
        </Card>
      </div>
    </PhoneFrame>
  );
}

// ────────────────────────── STAFF VALIDATION ──────────────────────────
function ScreenStaff({ t }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', padding: '40px 24px 24px', background: t.bg, display:'flex', flexDirection:'column' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <SectionLabel t={t} color={t.danger}>Staff only</SectionLabel>
          <span style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, letterSpacing:'0.1em' }}>BOOTH 02 · KIM</span>
        </div>
        <PathTitle t={t} size={26} style={{ marginTop: 8 }}>Validate redemption</PathTitle>

        {/* Code input */}
        <div style={{ marginTop: 24,
          background: t.surface, border:`1px solid ${t.line}`,
          borderRadius: t.edge==='angular' ? 2 : 10, padding: 18 }}>
          <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, letterSpacing:'0.16em' }}>
            ENTER 6-DIGIT CODE
          </div>
          <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
            {['7','3','9','2','4','1'].map((d,i)=>(
              <div key={i} style={{
                flex:1, height: 56, border:`1.5px solid ${i<5?t.accent:t.line2}`,
                background: t.bgDeep,
                borderRadius: t.edge==='angular' ? 2 : 8,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily: t.fontMono, fontSize: 26, fontWeight: 700, color: t.text,
              }}>{d}</div>
            ))}
          </div>
          <button style={{ marginTop: 12, width:'100%', padding: 8, background:'transparent',
            border:`1px solid ${t.line}`, borderRadius: t.edge==='angular'?2:8,
            color: t.text, fontFamily: t.fontMono, fontSize: 11, letterSpacing:'0.1em', cursor:'pointer' }}>
            OR SCAN QR
          </button>
        </div>

        {/* Match result */}
        <div style={{ marginTop: 14,
          background: t.surface, border:`1.5px solid ${t.success}`,
          borderRadius: t.edge==='angular' ? 4 : 12, padding: 16 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
            <div style={{ width: 24, height: 24, borderRadius:'50%', background: t.success,
              display:'flex', alignItems:'center', justifyContent:'center' }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3 3 7-7" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <span style={{ fontFamily: t.fontMono, fontSize: 11, color: t.success, fontWeight: 700, letterSpacing:'0.16em' }}>
              VALID · TIER 02
            </span>
          </div>
          <div style={{ fontFamily: t.fontTitle, fontSize: 22, color: t.text, fontWeight: 700, marginTop: 12,
            textTransform: t.titleCase==='upper'?'uppercase':'none', letterSpacing: t.titleSpace }}>
            GameFest tee + voucher
          </div>
          <div style={{ marginTop: 14, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10,
            paddingTop: 12, borderTop: `1px solid ${t.line2}` }}>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim, letterSpacing:'0.12em' }}>HOLDER</div>
              <div style={{ fontFamily: t.fontBody, fontSize: 14, color: t.text, fontWeight: 600, marginTop: 2 }}>Suchart W.</div>
            </div>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim, letterSpacing:'0.12em' }}>PAX ID</div>
              <div style={{ fontFamily: t.fontMono, fontSize: 14, color: t.text, fontWeight: 600, marginTop: 2 }}>BP-7392</div>
            </div>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim, letterSpacing:'0.12em' }}>STAMPS</div>
              <div style={{ fontFamily: t.fontMono, fontSize: 14, color: t.text, fontWeight: 600, marginTop: 2 }}>5 / 7</div>
            </div>
            <div>
              <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textDim, letterSpacing:'0.12em' }}>PATH</div>
              <div style={{ fontFamily: t.fontBody, fontSize: 14, color: t.text, fontWeight: 600, marginTop: 2 }}>Esports</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop:'auto', display:'flex', gap: 10 }}>
          <button style={{ flex:1, height: 50, background:'transparent', border:`1px solid ${t.line}`,
            borderRadius: t.edge==='angular' ? 2 : 10,
            color: t.text, fontFamily: t.fontMono, fontSize: 11, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer' }}>
            REJECT
          </button>
          <button style={{ flex:2, height: 50, background: t.success, border:'none',
            borderRadius: t.edge==='angular' ? 2 : 10,
            color:'#fff', fontFamily: t.fontMono, fontSize: 11, fontWeight: 700, letterSpacing:'0.1em', cursor:'pointer' }}>
            MARK CLAIMED →
          </button>
        </div>
      </div>
    </PhoneFrame>
  );
}

// ────────────────────────── COSPLAY REGISTER ──────────────────────────
function ScreenCosplayReg({ t }) {
  return (
    <PhoneFrame t={t}>
      <div style={{ height:'100%', padding: '40px 24px 32px', background: t.bg, display:'flex', flexDirection:'column' }}>
        <button style={{ background:'none', border:'none', color: t.textMute, cursor:'pointer',
          fontFamily: t.fontMono, fontSize: 11, letterSpacing:'0.1em', alignSelf:'flex-start' }}>← Back</button>
        <SectionLabel t={t} color={t.accent} style={{ marginTop: 16 }}>Optional · Cosplay path</SectionLabel>
        <PathTitle t={t} size={28} style={{ marginTop: 8 }}>Register your cosplay</PathTitle>
        <p style={{ fontFamily: t.fontBody, fontSize: 13, color: t.textMute, marginTop: 8, lineHeight: 1.5 }}>
          Your stage name appears on the cosplay zone leaderboard. Switch off any time.
        </p>

        <div style={{ marginTop: 26, display:'flex', flexDirection:'column', gap: 14 }}>
          <FieldInput t={t} label="STAGE NAME" value="Sakura Lane" hint="As it appears on stage"/>
          <FieldInput t={t} label="CHARACTER" value="Yor Forger"/>
          <FieldInput t={t} label="SOCIAL HANDLE" value="@sakura.cosplay" hint="Optional · for share card"/>
        </div>

        <div style={{ marginTop:'auto' }}>
          <Card t={t} style={{ padding: 12, marginBottom: 12 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <span style={{ fontSize: 18 }}>✦</span>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily: t.fontBody, fontSize: 12, color: t.text, fontWeight: 600 }}>
                  Cosplay check-in unlocks
                </div>
                <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, marginTop: 2 }}>
                  +1 stamp · Cosplay zone access · Runway slots
                </div>
              </div>
            </div>
          </Card>
          <button style={{
            width:'100%', height: 52, background: t.accent, color:'#fff', border:'none',
            borderRadius: t.edge==='angular' ? 4 : t.edge==='rounded' ? 26 : 10,
            fontFamily: t.fontTitle, fontSize: 14, fontWeight: 700,
            letterSpacing: t.titleSpace,
            textTransform: t.titleCase==='upper' ? 'uppercase' : 'none',
            cursor:'pointer',
          }}>Register & continue ›</button>
        </div>
      </div>
    </PhoneFrame>
  );
}

function FieldInput({ t, label, value, hint }) {
  return (
    <div>
      <div style={{ fontFamily: t.fontMono, fontSize: 10, color: t.textMute, letterSpacing:'0.16em' }}>{label}</div>
      <div style={{ marginTop: 6, padding: '12px 14px', background: t.surface,
        border:`1px solid ${t.line}`, borderRadius: t.edge==='angular' ? 2 : 10,
        fontFamily: t.fontBody, fontSize: 14, color: t.text, fontWeight: 500 }}>
        {value}
      </div>
      {hint && <div style={{ fontFamily: t.fontBody, fontSize: 11, color: t.textDim, marginTop: 4 }}>{hint}</div>}
    </div>
  );
}

Object.assign(window, {
  ScreenSplash, ScreenLogin, ScreenPathSelect, ScreenPassport,
  ScreenScan, ScreenScanSuccess, ScreenQuests, ScreenMap,
  ScreenSchedule, ScreenWallet, ScreenSocial, ScreenStaff,
  ScreenCosplayReg,
});