:root{
  --bg:#F5F7FA; --card:#FFFFFF; --text:#1A1A1A; --muted:#666; --stroke:#E6E8EE;
  --accent:#FF8A20; --accent2:#FF5A00; --pill:#FFE8C2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{text-decoration:none;color:inherit}
.mw{max-width:420px;margin:0 auto;padding:0 12px}

/* Topbar */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--stroke);
     padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.top .left{display:flex;align-items:center;gap:8px}
.brand{font-weight:900;letter-spacing:.4px}
.wallet{background:#fff;border:1px solid var(--stroke);padding:6px 10px;border-radius:999px;font-weight:700}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke);background:#fff}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--stroke);object-fit:cover}

/* Banners */
.banner{margin:12px 0;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;background:#fff}
.banner .frame{display:block;width:100%;aspect-ratio:1536/640}
.banner img{width:100%;height:100%;object-fit:cover;display:block}

/* Section */
.section{margin:12px 0}
.section .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section .title{font-weight:900}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--card);border:1px solid var(--stroke);border-radius:14px;overflow:hidden}
.tile img{width:100%;aspect-ratio:222/300;display:block;object-fit:cover}

/* Popular/Ludo buttons (light) */
.tabbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.tab{background:#fff;border:1px solid var(--stroke);border-radius:12px;padding:10px;text-align:center;font-weight:800}
.tab.active{outline:2px solid var(--accent)}

/* Bottom spacing */
.space{height:28px}